/* ==========================================================================
   IGGAK — the assembly hero.

   Three states, set on #heroTrack by js/assembly.js:

     (none)          no JS yet, or no WebGL — an ordinary one-screen hero.
     data-gl="on"    the scroll track: fixed stage, panels and part rail.
     data-gl="static" reduced motion — one screen, frame shown assembled.

   The unstyled state is the safe one, so the hero reads correctly before
   assembly.js runs and if it never runs at all.
   ========================================================================== */

/* --- default: an ordinary hero ------------------------------------------- */

.hero-track{
  position:relative;z-index:1;
  min-height:100vh;min-height:100svh;
  display:grid;align-content:center;
  padding:calc(8rem + var(--safe-t)) var(--gut) 4rem;
  overflow:hidden;
}
.hero-track .stage,
.hero-track .parts-rail,
.hero-track .closing{display:none}

/* .headline, .eyebrow, .hero-foot and .hero-spec stay in site.css — this
   layer only positions them. */
.hero-copy{position:relative;z-index:2;max-width:min(46rem,92vw)}

/* --- the stage ------------------------------------------------------------ */

.stage{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.stage canvas{width:100%;height:100%;display:block}
/* the low arctic sun from the static hero, kept behind the frame */
.stage-sun{
  position:absolute;left:50%;bottom:-38vmax;
  width:86vmax;height:86vmax;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,
    rgba(200,145,89,.18) 0%,
    rgba(42,62,74,.30) 40%,
    transparent 66%);
}
.stage-snow{
  position:absolute;inset:auto 0 0 0;height:36vh;
  background:linear-gradient(to top,rgba(143,180,196,.10),transparent);
}

/* --- scrolling state ------------------------------------------------------ */

.hero-track[data-gl=on]{
  display:block;height:480vh;min-height:0;padding:0;overflow:visible;
}
.hero-track[data-gl=on] .stage{display:block}
.hero-track[data-gl=on] .parts-rail{display:block}

.hero-track[data-gl=on] .hero-frame{
  position:fixed;inset:0;z-index:2;
  display:grid;align-content:center;
  padding:calc(7.5rem + var(--safe-t)) var(--gut) calc(3rem + var(--safe-b));
  will-change:opacity,transform;
}
.hero-track[data-gl=on] .closing{
  display:grid;justify-items:center;align-content:center;text-align:center;
  align-content:start;padding-top:clamp(6rem,14vh,10rem);
}

/* --- reduced motion: one screen, frame already built ---------------------- */

.hero-track[data-gl=static] .stage{display:block}
/* own stacking context, so the phone scrim below sits above the stage */
.hero-track[data-gl=static] .hero-frame{position:relative;z-index:2}

/* --- the opening panel ---------------------------------------------------- */

.scroll-cue{display:flex;align-items:center;gap:.85rem;margin-top:2.6rem;
  font-family:var(--data);font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bone-dim)}
.scroll-cue .bar{position:relative;width:1px;height:46px;
  background:var(--line);overflow:hidden;flex:0 0 auto}
.scroll-cue .bar::after{
  content:'';position:absolute;left:0;top:-46px;width:1px;height:46px;
  background:linear-gradient(to bottom,transparent,var(--bronze));
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{0%{transform:translateY(0)}70%,100%{transform:translateY(92px)}}
/* the cue only means anything while the track actually scrolls */
.hero-track:not([data-gl=on]) .scroll-cue{display:none}

/* --- the part rail -------------------------------------------------------- */

.parts-rail{
  position:fixed;z-index:3;pointer-events:none;
  top:50%;right:var(--gut);transform:translateY(-50%);
  width:min(21rem,50vw);text-align:right;
}
.parts-rail .part{
  position:absolute;right:0;top:0;opacity:0;transform:translateY(14px);
  will-change:opacity,transform;
}
.parts-rail .part h3{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.35rem,3.1vw,2.1rem);line-height:1;letter-spacing:.02em;
  margin:.55rem 0 .6rem;
}
.parts-rail .part p{
  margin:0;font-family:var(--data);font-size:.66rem;line-height:1.75;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim);
}
.parts-rail .part .hr{width:3.5rem;height:1px;background:var(--line);
  margin:.9rem 0 0 auto}

/* --- the closing panel ---------------------------------------------------- */

.closing h2{font-size:clamp(1.8rem,5vw,3.2rem)}
.closing .lede{margin:1.2rem auto 0;text-align:center}
.closing .btn{margin-top:1.8rem}

/* --- narrow screens ------------------------------------------------------- */

@media(max-width:900px){
  .hero-track[data-gl=on]{height:400vh}
  /* the frame sits centred on a phone, so the copy needs its own ground */
  .hero-track:is([data-gl=on],[data-gl=static]) .hero-frame::before{
    content:'';position:absolute;inset:0;z-index:-1;
    background:linear-gradient(to bottom,rgba(8,9,10,.78) 30%,rgba(8,9,10,.35));
  }
  .parts-rail{
    top:auto;bottom:calc(3.5rem + var(--safe-b));transform:none;
    width:min(19rem,72vw);
  }
  .parts-rail .part{top:auto;bottom:0}
}
/* گوشی: ریلِ اجزا باید بالای نوارِ پایین (۶۴px + دکمه‌ی گردِ آینه که ۲۴px
   بیرون می‌زند) بنشیند، وگرنه خطِ پایینِ کارت زیرِ نوار می‌رود؛ و شماره و
   توضیحِ جزء ۱۰٫۵px بود — ناخواناتر از آنچه برای متنِ فارسی روا باشد. */
@media(max-width:760px){
  .parts-rail{bottom:calc(104px + var(--safe-b));width:min(20rem,calc(100vw - 2 * var(--gut)))}
  .parts-rail .part p.stamp{font-size:.8rem}
  .parts-rail .part p{font-size:.78rem;line-height:1.9}
  .parts-rail .part .en{font-size:.72rem}
  .scroll-cue{font-size:.78rem}
}
/* گوشیِ کوتاه (۳۲۰×۵۶۸ و ۳۷۵×۶۶۷): فریمِ سربرگ ثابت و وسط‌چین است، پس اگر
   محتوا از ارتفاع بلندتر باشد از بالا و پایین هر دو بیرون می‌زند — در ۳۲۰×۵۶۸
   تیتر زیرِ نوارِ بالا می‌رفت. جا را از شمارنده‌ها و راهنمای اسکرول (زیرِ
   نوارِ پایین هم بودند) و از فاصله‌ها می‌گیریم تا تیتر و دکمه‌ها بمانند. */
@media(max-width:760px) and (max-height:700px){
  .hero-track:is([data-gl=on],[data-gl=static]) .hero-frame{
    padding-top:calc(4.25rem + var(--safe-t));padding-bottom:calc(6.2rem + var(--safe-b))}
  .hero-copy .eyebrow{margin-bottom:1rem}
  .hero-copy .headline{font-size:clamp(1.9rem,9.4vw,2.4rem)}
  .hero-copy .lede{margin-top:1rem !important;font-size:.9rem;line-height:1.85;
    display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .hero-foot{margin-top:1.1rem;gap:.6rem}
  .hero-foot .btn{min-height:48px}
  .hero-spec,.scroll-cue{display:none}
}
@media(prefers-reduced-motion:reduce){
  .scroll-cue .bar::after{animation:none;top:0}
}