/* =====================================================================
   STELLA HERO — Scroll-scrubbed 3D Tilt & Turn (çift açılım) mechanism
   ===================================================================== */

/* ---- scroll track + pin ---- */
.hero-scroll{position:relative;height:560vh;background:var(--bg-900);}
.hero-pin{
  position:sticky;top:0;height:100vh;min-height:640px;overflow:hidden;
  background:
    radial-gradient(46% 58% at 73% 48%, rgba(150,176,178,0.16), transparent 60%),
    radial-gradient(130% 100% at 76% 30%, rgba(126,179,178,0.05), transparent 52%),
    radial-gradient(120% 120% at 8% 108%, rgba(8,11,15,0.92), transparent 60%),
    var(--bg-900);
}
.hero-pin::before{ /* blueprint grid */
  content:"";position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(120% 100% at 40% 30%, #000 35%, transparent 85%);
  mask-image:radial-gradient(120% 100% at 40% 30%, #000 35%, transparent 85%);
  pointer-events:none;
}
body.grid-off .hero-pin::before{display:none;}

/* ---- comet glints traveling along the blueprint grid (crisp head + tail, eased, no glow) ---- */
.grid-sparks{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:radial-gradient(120% 100% at 45% 35%, #000 30%, transparent 80%);
  mask-image:radial-gradient(120% 100% at 45% 35%, #000 30%, transparent 80%);
}
body.grid-off .grid-sparks{display:none;}
.spark{position:absolute;opacity:0;border-radius:3px;}
/* vertical comet: bright leading head at the bottom, tail fading up */
.spark.v{width:2px;height:86px;
  background:linear-gradient(180deg, transparent 0%, rgba(126,179,178,0.0) 18%, var(--accent) 88%, #d6efee 100%);
  animation:cometV var(--dur,8s) var(--ease) infinite;}
/* horizontal comet: head leads to the right */
.spark.h{height:2px;width:86px;
  background:linear-gradient(90deg, transparent 0%, rgba(126,179,178,0.0) 18%, var(--accent) 88%, #d6efee 100%);
  animation:cometH var(--dur,9s) var(--ease) infinite;}
@keyframes cometV{
  0%{transform:translateY(-130px);opacity:0;}
  10%{opacity:0;} 18%{opacity:1;} 52%{opacity:1;} 64%{opacity:0;}
  100%{transform:translateY(116vh);opacity:0;}
}
@keyframes cometH{
  0%{transform:translateX(-130px);opacity:0;}
  10%{opacity:0;} 18%{opacity:1;} 52%{opacity:1;} 64%{opacity:0;}
  100%{transform:translateX(116vw);opacity:0;}
}
@media (prefers-reduced-motion:reduce){ .spark{animation:none !important;display:none;} }

/* ---- 3D stage ---- */
.scene{
  position:absolute;inset:0;z-index:1;
  perspective:2700px;perspective-origin:64% 44%;
  pointer-events:none;
}
.camera{position:absolute;left:0;top:0;width:100%;height:100%;transform-style:preserve-3d;}
.rig{position:absolute;left:73%;top:48%;transform-style:preserve-3d;will-change:transform;}
.assembly{position:absolute;left:0;top:0;transform-style:preserve-3d;will-change:transform;}
/* image-layer window */
.win-img img{display:block;max-width:none;max-height:none;-webkit-user-drag:none;user-select:none;backface-visibility:hidden;}

/* contact shadow on floor */
.floor-shadow{
  position:absolute;left:50%;top:50%;width:520px;height:620px;
  transform:translate(-50%,-50%) rotateX(90deg) translateZ(-280px);
  background:radial-gradient(closest-side, rgba(0,0,0,0.55), transparent 72%);
  filter:blur(14px);
}

/* ---- cuboids & faces ---- */
.cuboid{position:absolute;left:0;top:0;transform-style:preserve-3d;}
.face{
  position:absolute;left:50%;top:50%;
  background-repeat:no-repeat;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,0.10), inset -1px -1px 0 rgba(0,0,0,0.45);
  overflow:hidden;
}
.face.f-front{filter:brightness(1.05);}
.face.f-top{filter:brightness(1.5);}
.face.f-bottom{filter:brightness(0.55);}
.face.f-left{filter:brightness(0.74);}
.face.f-right{filter:brightness(1.18);}
.face.f-back{filter:brightness(0.42);}

/* metal palettes — anthracite aluminium, strongly lit */
.m-frame .face{background:linear-gradient(132deg,#79828d 0%,#434a54 40%,#5a626d 56%,#2b3037 100%);}
.m-sash  .face{background:linear-gradient(132deg,#838c98 0%,#474f5a 40%,#5e6772 56%,#2d333a 100%);}
.m-rail  .face{background:linear-gradient(135deg,#474e57 0%,#262a30 60%,#363c44 100%);}
/* steel hardware — bright chrome */
.m-steel .face{background:linear-gradient(150deg,#ffffff 0%,#aeb7c1 36%,#e8edf1 50%,#828c97 76%,#c2cad2 100%);}
.m-steel2 .face{background:linear-gradient(150deg,#e3e8ed 0%,#8e96a1 42%,#c4cbd3 56%,#69727c 100%);}

/* outer rim highlight so the dark profile separates from the dark bg */
.m-frame > .cuboid > .face.f-front{box-shadow:inset 1px 1px 0 rgba(255,255,255,0.16), inset -1px -1px 0 rgba(0,0,0,0.5);}

/* subtle brushed sheen on metal fronts */
.face.brush::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 3px);
  opacity:.5;
}

/* ---- glass ---- */
.glass{
  position:absolute;left:50%;top:50%;
  background:
    linear-gradient(125deg, rgba(150,180,182,0.22) 0%, rgba(60,72,78,0.10) 38%, rgba(126,179,178,0.10) 62%, rgba(40,48,54,0.16) 100%);
  border:1px solid rgba(150,180,185,0.12);
  box-shadow:inset 0 0 60px rgba(126,179,178,0.07), inset 0 0 0 1px rgba(255,255,255,0.04);
  overflow:hidden;backdrop-filter:blur(1px);
}
.glass::before{ /* reflection streak */
  content:"";position:absolute;top:-30%;left:-40%;width:55%;height:170%;
  background:linear-gradient(106deg, transparent 20%, rgba(220,236,236,0.18) 50%, transparent 80%);
  transform:rotate(7deg);
}
.glass::after{ /* second faint streak */
  content:"";position:absolute;top:-30%;left:18%;width:22%;height:170%;
  background:linear-gradient(106deg, transparent 30%, rgba(220,236,236,0.10) 50%, transparent 70%);
  transform:rotate(7deg);
}

/* ---- mechanism callout pins (anchored to 3D parts, label sits left of the dot) ---- */
.mech-callout{
  position:absolute;z-index:6;opacity:0;
  transform:translate(-100%,-50%);
  display:flex;flex-direction:row-reverse;align-items:center;gap:9px;pointer-events:none;white-space:nowrap;
}
.mech-callout.show{opacity:1;}
.mech-callout .lead-line{width:38px;height:1px;background:var(--accent);position:relative;flex:none;}
.mech-callout .lead-line::before{content:"";position:absolute;right:-4px;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-wash);}
.mech-callout .ct{background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:var(--r-sm);padding:9px 13px;backdrop-filter:blur(10px);}
.mech-callout .ct b{display:block;font-family:var(--font-head);font-size:13.5px;color:var(--text);font-weight:700;letter-spacing:-0.01em;}
.mech-callout .ct span{display:block;font-size:11.5px;color:var(--text-mute);margin-top:2px;}

/* ===================================================================
   HERO OVERLAY — copy, phase rail, HUD
   =================================================================== */
.hero-overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;pointer-events:none;}
.hero-overlay .container{width:100%;}
.hero-copy{max-width:560px;pointer-events:auto;}
.hero-copy .eyebrow{margin-bottom:20px;}
.hero-copy h1{margin:0;}
.hero-copy h1 .line2{display:block;color:var(--accent-bright);}
.hero-copy .lead{margin:24px 0 0;max-width:500px;}
.hero-cta{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap;pointer-events:auto;}
/* reference uses pill CTAs in hero */
.hero-cta .btn{border-radius:999px;padding:15px 30px;}
.hero-cta .btn--lg{padding:16px 32px;}

/* fade hero copy out as we dive into the mechanism */
.hero-copy,.hero-cta{transition:opacity .3s linear;}

/* ---- phase rail (bottom-left) ---- */
.phase-rail{
  position:absolute;left:var(--gutter);bottom:46px;z-index:6;
  display:flex;flex-direction:column;gap:2px;pointer-events:auto;
}
.phase-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.phase-head .pp{font-family:var(--font-head);font-weight:800;font-size:13px;color:var(--accent);letter-spacing:0.04em;font-feature-settings:"tnum" 1;}
.phase-head .pl{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-mute);}
.phase-track{display:flex;gap:8px;}
.phase-step{display:flex;flex-direction:column;gap:9px;width:104px;}
.phase-bar{height:3px;border-radius:2px;background:rgba(255,255,255,0.10);overflow:hidden;position:relative;}
.phase-bar i{position:absolute;left:0;top:0;height:100%;width:var(--f,0%);background:var(--accent);border-radius:2px;transition:width .12s linear;}
.phase-step .pt{font-family:var(--font-head);font-size:12.5px;font-weight:600;color:var(--text-mute);letter-spacing:0.01em;transition:color .25s var(--ease);}
.phase-step .ps{font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-faint);transition:color .25s var(--ease);}
.phase-step.active .pt{color:var(--text);}
.phase-step.active .ps{color:var(--accent);}
@media(max-width:860px){.phase-step{width:74px;}.phase-step .pt{font-size:11px;}}

/* ---- live HUD (right) ---- */
.hero-hud{
  position:absolute;right:var(--gutter);top:120px;z-index:6;
  width:208px;pointer-events:auto;
  background:var(--glass-strong);border:1px solid var(--glass-border);
  border-radius:var(--r-md);backdrop-filter:blur(12px) saturate(1.1);
  box-shadow:0 24px 60px -30px rgba(0,0,0,0.9);
  overflow:hidden;
}
.hero-hud .hud-top{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--line);}
.hero-hud .hud-top b{font-family:var(--font-head);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-soft);font-weight:700;}
.hud-led{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-wash);animation:hudpulse 2s var(--ease) infinite;}
@keyframes hudpulse{50%{box-shadow:0 0 0 7px rgba(126,179,178,0);}}
.hud-row{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-bottom:1px solid var(--line-soft);}
.hud-row:last-child{border-bottom:0;}
.hud-row .k{font-size:11.5px;letter-spacing:0.06em;color:var(--text-mute);text-transform:uppercase;}
.hud-row .v{font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--text);font-feature-settings:"tnum" 1;}
.hud-row .v.acc{color:var(--accent-bright);}
.hud-state{padding:11px 14px;display:flex;align-items:center;gap:9px;background:rgba(126,179,178,0.05);}
.hud-state .dot{width:8px;height:8px;border:1px solid var(--accent);transform:rotate(45deg);flex:none;}
.hud-state .st{font-family:var(--font-head);font-size:11.5px;font-weight:700;color:var(--text);letter-spacing:0.01em;line-height:1.4;}
.hud-state .st .acc,.hud-row .v.acc{color:var(--accent-bright);}

/* scroll cue */
.scroll-cue{
  position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:10.5px;letter-spacing:0.24em;text-transform:uppercase;color:var(--text-mute);
  pointer-events:none;transition:opacity .3s linear;
}
.scroll-cue .bar{width:1px;height:34px;background:linear-gradient(var(--accent),transparent);position:relative;overflow:hidden;}
.scroll-cue .bar::after{content:"";position:absolute;left:0;top:0;width:100%;height:40%;background:var(--accent);animation:cue 1.8s var(--ease) infinite;}
@keyframes cue{0%{transform:translateY(-100%);}60%,100%{transform:translateY(260%);}}

@media(max-width:980px){
  .hero-hud{display:none;}
  .scene{perspective-origin:58% 46%;}
  .rig{left:50%;top:42%;}
  .hero-overlay{align-items:flex-start;padding-top:120px;}
  .phase-rail{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .scroll-cue .bar::after,.hud-led{animation:none;}
}