/* ARCSTEP logo intro (index only) + soft page fade-in (all pages).
   The whole sequence is pure CSS (auto-ends at 2.6s even if JS fails).
   js/intro.js adds: skip on click/Esc/scroll/keys, once-per-session key, DOM cleanup.
   Only transform / opacity / stroke-dashoffset are animated.

   Timeline (s): 0.10–0.90 outline drawn · 0.95–1.30 fill · 1.10–1.50 chevron steps up
                 1.15–1.70 wordmark wipe · hold · 1.90 stage out · 1.95–2.60 curtain up · hero 1.04 → 1 */

.intro {
  --ie: cubic-bezier(.7, 0, .2, 1);
  --draw: cubic-bezier(.65, 0, .35, 1);
  position: fixed; inset: 0; z-index: 2147483000;
  contain: strict;
  animation: intro-gone 0s linear 2.6s forwards;
}
html.intro-skip .intro { display: none; }

/* Curtain: two halves slide up, slightly staggered. 1px overlap hides the seam. */
.intro__panel {
  position: absolute; top: 0; bottom: 0; width: calc(50% + 1px);
  background: #0B0B0B;
  will-change: transform;
  animation: intro-curtain .6s var(--ie) 1.95s forwards;
}
.intro__panel--l { left: 0; }
.intro__panel--r { right: 0; animation-delay: 2s; animation-duration: .6s; }

.intro__stage {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(22px, 3vw, 34px);
  will-change: transform, opacity;
  animation: intro-stage-out .4s var(--ie) 1.9s forwards;
}

.intro__mark { display: block; width: clamp(64px, 8vw, 116px); height: auto; overflow: visible; }

.intro__line {
  fill: none; stroke: #FAFAF8; stroke-width: 5; stroke-linejoin: miter; stroke-miterlimit: 8;
  stroke-dasharray: 1 1; stroke-dashoffset: 1;
  animation: intro-draw .8s var(--draw) .1s forwards, intro-fade-out .3s ease 1.25s forwards;
}
.intro__line--b { animation-delay: .32s, 1.25s; animation-duration: .55s, .3s; }
.intro__line--c { animation-delay: .3s, 1.35s; animation-duration: .75s, .3s; }

.intro__fill { fill: #FAFAF8; opacity: 0; animation: intro-fade-in .35s ease .95s forwards; }
.intro__chev .intro__fill { animation-delay: 1.02s; }

/* Chevron sits one "step" low, then steps up into place. */
.intro__chev {
  transform-box: fill-box;
  transform: translate(0, 34px);
  animation: intro-step .42s cubic-bezier(.3, 1.35, .5, 1) 1.1s forwards;
}

/* Wordmark wipe L→R using transforms only: the clipping window slides in, the content counter-slides. */
.intro__word {
  width: clamp(150px, 21vw, 290px);
  overflow: hidden;
  transform: translate3d(-101%, 0, 0);
  animation: intro-wipe .55s var(--ie) 1.15s forwards;
}
.intro__word-in { transform: translate3d(101%, 0, 0); animation: intro-wipe .55s var(--ie) 1.15s forwards; }
.intro__word img { display: block; width: 100%; height: auto; }

/* Hero settles from 1.04 to 1 as the curtain lifts (home only, while intro plays). */
html:not(.intro-skip):not(.intro-done) body[data-page="home"] .hero__media {
  animation: intro-hero 1s cubic-bezier(.2, .7, .2, 1) 1.95s both;
}

/* ---- Skip (set by intro.js): fast exit with its own keyframe names so timelines restart cleanly ---- */
html.intro-skipping .intro { animation: intro-gone-skip 0s linear .68s forwards; }
html.intro-skipping .intro__stage { animation: intro-stage-out-skip .3s var(--ie) forwards; }
html.intro-skipping .intro__panel--l { animation: intro-curtain-skip .55s var(--ie) .04s forwards; }
html.intro-skipping .intro__panel--r { animation: intro-curtain-skip .55s var(--ie) .1s forwards; }
html.intro-skipping:not(.intro-done) body[data-page="home"] .hero__media {
  animation: intro-hero-skip .9s cubic-bezier(.2, .7, .2, 1) .04s both;
}

/* ---- Soft content fade-in: every page, except home while the intro plays ---- */
main { animation: intro-page-fade .25s ease both; }
html:not(.intro-skip) body[data-page="home"] main { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  html:not(.intro-skip) body[data-page="home"] main { animation: intro-page-fade .25s ease both; }
  html:not(.intro-skip) body[data-page="home"] .hero__media { animation: none; }
}

@keyframes intro-draw { to { stroke-dashoffset: 0; } }
@keyframes intro-fade-in { to { opacity: 1; } }
@keyframes intro-fade-out { to { opacity: 0; } }
@keyframes intro-step { to { transform: translate(0, 0); } }
@keyframes intro-wipe { to { transform: translate3d(0, 0, 0); } }
@keyframes intro-stage-out { to { opacity: 0; transform: translate3d(0, -28px, 0); } }
@keyframes intro-stage-out-skip { to { opacity: 0; transform: translate3d(0, -28px, 0); } }
@keyframes intro-curtain { to { transform: translate3d(0, -100%, 0); } }
@keyframes intro-curtain-skip { to { transform: translate3d(0, -100%, 0); } }
@keyframes intro-gone { to { visibility: hidden; pointer-events: none; } }
@keyframes intro-gone-skip { to { visibility: hidden; pointer-events: none; } }
@keyframes intro-hero { from { transform: scale(1.04); } to { transform: scale(1); } }
@keyframes intro-hero-skip { from { transform: scale(1.04); } to { transform: scale(1); } }
@keyframes intro-page-fade { from { opacity: 0; } to { opacity: 1; } }