/* ============================================================
   Unique Udyog — Signature scroll experience
   "The Winding" — a cinematic, scroll-driven MIG wire spool.
   Pairs with js/spool-experience.js (Three.js + GSAP ScrollTrigger).
   Brand tokens (--gold / --navy / --ocean) inherited from style.css.
   ============================================================ */

.spool-exp{
  position:relative;
  /* Total scroll length = (1 + scroll-screens) viewports.
     The inner stage is pinned for the full duration. */
  --scroll-screens:6.5;
  background:#00141f;
  color:#e9eef3;
  /* Establish a stacking context BELOW the sticky header (z-index:120). */
  z-index:1;
  isolation:isolate;
}
/* The tall scroll runway is applied ONLY once JS confirms the 3D scene is live.
   If the module or its CDN libraries fail to load entirely, the section stays
   auto-height and the styled fallback shows — never 600vh of empty space. */
.spool-exp.is-active{
  height:calc((1 + var(--scroll-screens)) * 100vh);
}

/* The element GSAP pins. Fills the viewport while the section scrolls past. */
.spool-exp__pin{
  position:relative;
  min-height:78vh;
  width:100%;
  overflow:visible;
  display:flex;
  align-items:center;
}
.spool-exp.is-active .spool-exp__pin{
  height:100vh;
  min-height:0;
  overflow:hidden;
}

/* ---------- Cinematic backdrop (industrial lighting) ---------- */
.spool-exp__bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    /* warm key-light glow, upper left */
    radial-gradient(120% 90% at 22% 18%, rgba(244,189,72,.16) 0%, rgba(244,189,72,0) 42%),
    /* cool rim glow, lower right */
    radial-gradient(90% 80% at 88% 92%, rgba(0,63,103,.55) 0%, rgba(0,63,103,0) 55%),
    /* deep navy base + vignette */
    radial-gradient(140% 120% at 50% 38%, #042c44 0%, #021f30 45%, #00111b 100%);
}
.spool-exp__bg::after{
  /* subtle floor / horizon to ground the spool */
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:38%;
  background:linear-gradient(to top, rgba(0,8,14,.65), rgba(0,8,14,0));
  pointer-events:none;
}

/* ---------- 3D canvas ---------- */
.spool-exp__canvas{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  display:block;
  /* The renderer draws the spool composed toward the left on desktop. */
  touch-action:pan-y;            /* keep page scrollable over the canvas on touch */
}

/* ---------- Foreground content layer ---------- */
.spool-exp__stage{
  position:relative;
  z-index:2;
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
  /* Hidden until JS opts into a real mode (is-3d-ready / is-reduced); a total
     module-load failure then exposes only the fallback to AT, not empty cards. */
  display:none;
  grid-template-columns:1.15fr .85fr;   /* spool side | story side */
  gap:40px;
  align-items:center;
  pointer-events:none;                    /* let scroll/drag pass to the page */
  height:100%;
}
.spool-exp.is-3d-ready .spool-exp__stage,
.spool-exp.is-reduced .spool-exp__stage{display:grid}
.spool-exp__spacer{ /* empty left cell reserves room over the canvas spool */ }

.spool-exp__copy{
  position:relative;
  align-self:center;
  min-height:340px;
}
.spool-exp__eyebrow{
  font-family:var(--ff-cond,'Roboto Condensed',sans-serif);
  text-transform:uppercase;
  letter-spacing:3px;
  font-weight:700;
  font-size:.82rem;
  color:var(--gold,#f4bd48);
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:26px;
  opacity:.9;
}
.spool-exp__eyebrow::before{
  content:"";
  width:34px;height:2px;
  background:var(--gold,#f4bd48);
  display:inline-block;
}

/* ---------- Achievement cards (only one visible at a time) ---------- */
.spool-exp__cards{
  position:relative;
  min-height:260px;
}
.spool-card{
  position:absolute;
  inset:0;
  opacity:0;
  transform:translate3d(0,28px,0);
  /* JS sets opacity + transform every frame from scroll progress. */
}
/* Promote to a compositor layer only while the section is actually animating,
   so we don't hold 7 standing layers for the whole page lifetime. */
.spool-exp.is-engaged .spool-card{will-change:opacity, transform}
.spool-card__idx{
  display:block;
  font-family:var(--ff-cond,'Roboto Condensed',sans-serif);
  font-weight:700;
  letter-spacing:2px;
  font-size:.8rem;
  color:rgba(244,189,72,.85);
  margin-bottom:14px;
}
.spool-card__idx b{color:#fff}
.spool-card__title{
  font-family:var(--ff-head,'Roboto',sans-serif);
  font-weight:900;
  letter-spacing:-.5px;
  line-height:1.08;
  font-size:clamp(2rem, 3.4vw, 3.25rem);
  color:#fff;
  margin:0 0 18px;
}
.spool-card__desc{
  font-family:var(--ff-body,'Open Sans',sans-serif);
  font-size:clamp(1rem, 1.25vw, 1.15rem);
  line-height:1.65;
  color:#aebecb;
  max-width:30ch;
  margin:0;
}

/* ---------- Progress rail + scroll hint ---------- */
.spool-exp__rail{
  position:absolute;
  right:34px;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:3px;
  height:160px;
  border-radius:3px;
  background:rgba(255,255,255,.12);
  overflow:hidden;
  pointer-events:none;
}
.spool-exp__rail i{
  position:absolute;
  left:0;right:0;top:0;
  height:0%;
  background:linear-gradient(to bottom, var(--gold,#f4bd48), #d98a2b);
  transform-origin:top;
}
.spool-exp__hint{
  position:absolute;
  left:50%;
  bottom:30px;
  transform:translateX(-50%);
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  font-family:var(--ff-cond,'Roboto Condensed',sans-serif);
  text-transform:uppercase;
  letter-spacing:2.5px;
  font-size:.72rem;
  color:rgba(255,255,255,.6);
  pointer-events:none;
  transition:opacity .5s ease;
}
.spool-exp__hint .mouse{
  width:22px;height:34px;
  border:2px solid rgba(255,255,255,.45);
  border-radius:12px;
  position:relative;
}
.spool-exp__hint .mouse::after{
  content:"";
  position:absolute;
  left:50%;top:7px;
  width:3px;height:7px;border-radius:2px;
  background:rgba(255,255,255,.7);
  transform:translateX(-50%);
  animation:spoolWheel 1.6s ease-in-out infinite;
}
@keyframes spoolWheel{
  0%,100%{opacity:0;transform:translate(-50%,0)}
  40%{opacity:1}
  80%{opacity:0;transform:translate(-50%,9px)}
}
.spool-exp.is-engaged .spool-exp__hint{opacity:0}

/* A faint product label that sits beneath the spool, fades with progress */
.spool-exp__caption{
  position:absolute;
  left:0;right:0;
  bottom:70px;
  z-index:2;
  text-align:center;
  font-family:var(--ff-cond,'Roboto Condensed',sans-serif);
  text-transform:uppercase;
  letter-spacing:4px;
  font-size:.74rem;
  color:rgba(255,255,255,.4);
  pointer-events:none;
}

/* ============================================================
   FALLBACK (no WebGL / JS disabled) — visible by default,
   hidden by JS once the 3D scene initialises successfully.
   ============================================================ */
.spool-exp__fallback{
  position:absolute;
  inset:0;
  z-index:4;
  display:flex;
  align-items:center;
  background:#00141f;
}
.spool-exp.is-3d-ready .spool-exp__fallback,
.spool-exp.is-reduced .spool-exp__fallback{display:none}

/* No-WebGL / no-GSAP: collapse the tall section and show only the fallback. */
.spool-exp.is-fallback{height:auto}
.spool-exp.is-fallback .spool-exp__pin{height:auto;min-height:78vh;overflow:visible}
.spool-exp.is-fallback .spool-exp__canvas,
.spool-exp.is-fallback .spool-exp__stage,
.spool-exp.is-fallback .spool-exp__rail,
.spool-exp.is-fallback .spool-exp__hint,
.spool-exp.is-fallback .spool-exp__caption{display:none}

.spool-exp__fallback .container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:center;
}
.spool-exp__fallback img{
  width:100%;
  border-radius:6px;
  box-shadow:var(--shadow-lg,0 14px 40px rgba(0,0,0,.4));
  border:1px solid rgba(255,255,255,.08);
}
.spool-exp__fallback ul{margin:18px 0 0;display:grid;gap:12px}
.spool-exp__fallback li{
  display:flex;gap:12px;align-items:flex-start;
  color:#c2cfdb;font-size:1.02rem;
}
.spool-exp__fallback li b{color:#fff;font-family:var(--ff-head,'Roboto',sans-serif)}
.spool-exp__fallback li::before{
  content:"";flex:0 0 auto;margin-top:.55em;
  width:8px;height:8px;border-radius:50%;
  background:var(--gold,#f4bd48);
}

/* ============================================================
   REDUCED MOTION — present everything as a calm static section.
   JS also short-circuits the scroll engine in this mode.
   ============================================================ */
.spool-exp.is-reduced{
  height:auto;
}
.spool-exp.is-reduced .spool-exp__pin{
  height:auto;
  min-height:auto;
  padding:90px 0;
  overflow:visible;
}
.spool-exp.is-reduced .spool-exp__rail,
.spool-exp.is-reduced .spool-exp__hint,
.spool-exp.is-reduced .spool-exp__canvas,
.spool-exp.is-reduced .spool-exp__caption{display:none}
.spool-exp.is-reduced .spool-exp__bg{opacity:.85}
.spool-exp.is-reduced .spool-exp__cards{
  position:static;
  min-height:0;
  display:grid;
  gap:34px;
}
.spool-exp.is-reduced .spool-card{
  position:static;
  inset:auto;
  opacity:1;
  transform:none;
  padding-left:22px;
  border-left:2px solid rgba(244,189,72,.5);
}
.spool-exp.is-reduced .spool-card__title{font-size:clamp(1.5rem,2.6vw,2rem)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .spool-exp{--scroll-screens:6;}
  .spool-exp__stage{gap:24px}
  .spool-card__title{font-size:clamp(1.8rem,4.4vw,2.6rem)}
}

@media (max-width:768px){
  /* Spool sits centred/top; story sits over the lower third. */
  .spool-exp{--scroll-screens:5.5;}
  .spool-exp__pin{align-items:flex-end}
  .spool-exp__stage{
    grid-template-columns:1fr;
    align-items:end;
    padding-bottom:88px;
    height:100%;
  }
  .spool-exp__spacer{display:none}
  .spool-exp__copy{
    min-height:auto;
    text-align:center;
    /* a scrim so text stays legible over the spool */
    background:linear-gradient(to top, rgba(0,12,20,.92) 30%, rgba(0,12,20,0));
    padding:30px 6px 6px;
    border-radius:10px;
  }
  .spool-exp__eyebrow{justify-content:center}
  /* Let the active card define its own height (longest title never clips) and
     pin cards to the bottom so the box grows upward, always backed by the scrim. */
  .spool-exp__cards{min-height:clamp(220px, 40vh, 320px)}
  .spool-card{inset:auto 0 0 0}
  .spool-card__desc{margin-left:auto;margin-right:auto}
  .spool-exp__rail{right:16px;height:110px}
  .spool-exp__fallback .container{grid-template-columns:1fr;gap:26px}
}

@media (max-width:560px){
  .spool-exp__copy{padding-top:20px}
  .spool-card__title{font-size:clamp(1.6rem,7vw,2.1rem)}
  .spool-exp__caption{display:none}
}