/* ==========================================================================
   NOORANI STEEL — PREMIUM ENHANCEMENT LAYER
   Adds: glass header, scroll-reveal animations, hover micro-interactions,
   floating WhatsApp button, gradient accents, custom scrollbar, cursor glow.
   This file only ADDS on top of the existing theme — nothing is removed.
   ========================================================================== */

:root{
  --ns-navy:#1a1a2e;
  --ns-navy-2:#0f3460;
  --ns-gold:#f5a623;
  --ns-gold-2:#ff7a18;
  --ns-glass: rgba(26,26,46,0.55);
}

*{ scrollbar-width: thin; scrollbar-color: var(--ns-gold) #1a1a2e; }
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:#0f0f1a; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--ns-gold),var(--ns-gold-2));
  border-radius:10px;
}
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,#ffb84d,var(--ns-gold)); }

html{ scroll-behavior:smooth; }

/* selection color */
::selection{ background:var(--ns-gold); color:#1a1a2e; }

/* ---------- page load shimmer ---------- */
body.ns-loaded{ animation:nsBodyFade .6s ease both; }
@keyframes nsBodyFade{ from{ opacity:0; } to{ opacity:1; } }

/* ---------- sticky header glass effect ---------- */
.sticky-header.ns-scrolled{
  background:rgba(26,26,46,0.92) !important;
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 8px 30px rgba(0,0,0,0.25);
  transition:background .35s ease, box-shadow .35s ease;
}
.sticky-header{ transition:background .35s ease, box-shadow .35s ease, transform .35s ease; }

/* gradient accent line under top header */
.header-top{ position:relative; overflow:hidden; }
.header-top::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--ns-gold), var(--ns-gold-2), var(--ns-gold), transparent);
  background-size:200% 100%;
  animation:nsShimmerLine 4s linear infinite;
  opacity:.9;
}
@keyframes nsShimmerLine{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

/* ---------- buttons: shine sweep + lift ---------- */
.theme-btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, filter .35s ease !important;
  will-change:transform;
}
.theme-btn:hover{
  transform:translateY(-4px) scale(1.03);
  box-shadow:0 14px 30px -8px rgba(245,166,35,0.55);
  filter:brightness(1.06);
}
.theme-btn::before{
  content:'';
  position:absolute; top:0; left:-60%;
  width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
  transform:skewX(-20deg);
  transition:left .65s ease;
  z-index:2; pointer-events:none;
}
.theme-btn:hover::before{ left:130%; }

/* WhatsApp send button style reuse */
.submit-btn:hover{ filter:brightness(1.08); }

/* ---------- section titles: gradient text + animated underline ---------- */
.sec-title h2, .sec-title h3{
  background:linear-gradient(90deg, var(--ns-navy) 0%, var(--ns-navy) 55%, var(--ns-gold-2) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.sec-title.light h2, .sec-title.light h3{
  background:linear-gradient(90deg, #ffffff 0%, #ffffff 55%, var(--ns-gold) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.sec-title .divider,
.sec-title:after{ transition:width .5s ease; }

/* generic underline accent added after title text via JS class .ns-underline */
.ns-underline{
  display:block;
  width:70px; height:3px; margin-top:10px;
  background:linear-gradient(90deg, var(--ns-gold), var(--ns-gold-2));
  border-radius:3px;
  position:relative;
  overflow:hidden;
}
.sec-title.centered .ns-underline{ margin-left:auto; margin-right:auto; }
.ns-underline::after{
  content:''; position:absolute; top:0; left:-40%; width:40%; height:100%;
  background:rgba(255,255,255,0.8);
  animation:nsUnderlineShine 2.6s ease-in-out infinite;
}
@keyframes nsUnderlineShine{ 0%{left:-40%;} 60%,100%{left:120%;} }

/* ---------- generic card lift / tilt on hover ---------- */
.inner-box, .value-box, .team-member-box, .counter-box, .news-block .inner-box,
.testimonial-block .inner-box, .use-item{
  transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease !important;
  will-change:transform;
}
.inner-box:hover, .value-box:hover, .news-block .inner-box:hover, .testimonial-block .inner-box:hover{
  box-shadow:0 22px 45px -18px rgba(15,20,40,0.35) !important;
}

/* image zoom on hover inside cards */
.inner-box .image img, .news-block .image img, .thumb img{
  transition:transform .7s cubic-bezier(.2,.8,.2,1), filter .5s ease;
}
.inner-box:hover .image img, .news-block:hover .image img{
  transform:scale(1.08);
}

/* ---------- floating decorative blobs ---------- */
.ns-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(50px);
  opacity:.35;
  pointer-events:none;
  z-index:0;
  animation:nsFloatBlob 10s ease-in-out infinite;
}
@keyframes nsFloatBlob{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(25px,-30px) scale(1.12); }
}

/* ---------- scroll reveal utility (driven by IntersectionObserver in JS) ---------- */
.ns-reveal{
  opacity:0;
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  will-change:opacity, transform;
}
.ns-reveal.ns-up{ transform:translateY(40px); }
.ns-reveal.ns-left{ transform:translateX(-45px); }
.ns-reveal.ns-right{ transform:translateX(45px); }
.ns-reveal.ns-zoom{ transform:scale(.88); }
.ns-reveal.ns-in{ opacity:1; transform:none; }

/* ---------- counters glow ---------- */
.counter-box .count-outer, .counter-box .count-box{ position:relative; }
.counter-box:hover{ transform:translateY(-6px); }

/* ---------- floating WhatsApp button ---------- */
.ns-whatsapp-float{
  position:fixed;
  left:22px;
  bottom:22px;
  z-index:9999;
  width:60px; height:60px;
  border-radius:50%;
  background:linear-gradient(135deg,#25d366,#128c7e);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 26px rgba(18,140,126,0.5), 0 0 0 rgba(37,211,102,0.6);
  text-decoration:none;
  animation:nsWaBounceIn .6s cubic-bezier(.2,.8,.2,1) .3s both, nsWaFloat 3s ease-in-out 1s infinite;
}
.ns-whatsapp-float svg{ width:32px; height:32px; }
.ns-whatsapp-float .ns-wa-ring{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid #25d366;
  animation:nsWaPulse 2.2s ease-out infinite;
}
.ns-whatsapp-float .ns-wa-ring.ns-delay{ animation-delay:1.1s; }
@keyframes nsWaPulse{
  0%{ transform:scale(1); opacity:.7; }
  100%{ transform:scale(1.9); opacity:0; }
}
@keyframes nsWaFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}
@keyframes nsWaBounceIn{
  0%{ transform:scale(0) translateY(40px); opacity:0; }
  70%{ transform:scale(1.12) translateY(-4px); opacity:1; }
  100%{ transform:scale(1) translateY(0); }
}
.ns-whatsapp-float:hover{
  box-shadow:0 12px 34px rgba(18,140,126,0.65);
  filter:brightness(1.05);
}
.ns-wa-tooltip{
  position:absolute;
  left:72px;
  top:50%; transform:translateY(-50%) translateX(8px);
  background:#1a1a2e;
  color:#fff;
  padding:8px 14px;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
}
.ns-wa-tooltip::after{
  content:'';
  position:absolute; left:-6px; top:50%; transform:translateY(-50%);
  border-width:6px 0 6px 6px; border-style:solid;
  border-color:transparent transparent transparent #1a1a2e;
}
.ns-whatsapp-float:hover .ns-wa-tooltip{ opacity:1; transform:translateY(-50%) translateX(0); }

@media (max-width:767px){
  .ns-whatsapp-float{ width:54px; height:54px; right:16px; bottom:16px; }
  .ns-whatsapp-float svg{ width:28px; height:28px; }
  .ns-wa-tooltip{ display:none; }
}

/* ---------- scroll-to-top restyle ---------- */
.scroll-to-top{
  background:linear-gradient(135deg,var(--ns-gold),var(--ns-gold-2)) !important;
  box-shadow:0 8px 22px rgba(245,166,35,0.45);
  transition:transform .35s ease, box-shadow .35s ease !important;
}
.scroll-to-top:hover{ transform:translateY(-5px) scale(1.06); box-shadow:0 12px 28px rgba(245,166,35,0.6); }

/* ---------- cursor glow (desktop only) ---------- */
.ns-cursor-glow{
  position:fixed;
  width:26px; height:26px;
  border-radius:50%;
  border:2px solid rgba(245,166,35,0.85);
  pointer-events:none;
  z-index:99999;
  transform:translate(-50%,-50%);
  transition:width .2s ease, height .2s ease, background .2s ease, border-color .2s ease;
  mix-blend-mode:difference;
}
.ns-cursor-glow.ns-grow{
  width:48px; height:48px;
  background:rgba(245,166,35,0.18);
}
@media (hover:none), (max-width:991px){
  .ns-cursor-glow{ display:none !important; }
}

/* ---------- preloader fade ---------- */
.preloader{ transition:opacity .5s ease, visibility .5s ease; }
.preloader.ns-hide{ opacity:0 !important; visibility:hidden !important; }

/* ---------- badge shimmer on quote/CTA banners ---------- */
.quote-section, .product-highlight-bar, .about-stats-bar{
  position:relative; overflow:hidden;
}
.quote-section::before, .product-highlight-bar::before, .about-stats-bar::before{
  content:'';
  position:absolute; top:0; left:-60%; width:35%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.10), transparent);
  transform:skewX(-20deg);
  animation:nsBannerShine 5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes nsBannerShine{ 0%{left:-60%;} 50%{left:130%;} 100%{left:130%;} }

/* ---------- form focus glow ---------- */
input:focus, textarea:focus, select:focus{
  box-shadow:0 0 0 3px rgba(245,166,35,0.25) !important;
  border-color:var(--ns-gold) !important;
  transition:box-shadow .3s ease, border-color .3s ease;
}

/* ---------- respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  html{ scroll-behavior:auto; }
}