/* Intro: on a deep night panel a soft glow blooms, the Reforme figure rises into
   view, glides aside as the wordmark wipes in beside it, one quiet line follows,
   then the panel opens from the centre like a lens onto the page.
   About 3.7 s, once per visit; skipped for reduced motion (see the <head> script).
   transform / opacity / filter / mask only. Starts when the logos have decoded
   (.is-playing, set by js/modules/intro.js) so nothing pops in half-way. */

.intro { display: none; }
.intro-on .intro,
.intro.is-leaving {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  overflow: hidden;
  background: radial-gradient(140% 90% at 50% 45%, var(--night-raise) 0%, var(--night) 50%, var(--ink-950) 100%);
  color: var(--night-text);
}
/* Safety net: never block the page, even if the script fails. */
.intro-on .intro { animation: introFailsafe 0s linear 6s forwards; }
@keyframes introFailsafe { to { visibility: hidden; opacity: 0; pointer-events: none; } }

/* While the intro plays, the hero's own entrance waits for it. */
.intro-on .word,
.intro-on [data-intro],
.intro-on [data-split]:not(.is-split) { animation-play-state: paused; }

/* Fine grain keeps the dark gradient from banding and gives it depth. */
.intro::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* A slow, soft bloom of brand colour behind the mark */
.intro__glow {
  position: absolute; left: 50%; top: 50%;
  width: min(90vmax, 1100px); aspect-ratio: 1; margin: calc(min(90vmax, 1100px) / -2) 0 0 calc(min(90vmax, 1100px) / -2);
  border-radius: 50%;
  background:
    radial-gradient(closest-side at 42% 46%, rgba(82, 191, 164, .30), transparent 70%),
    radial-gradient(closest-side at 60% 58%, rgba(167, 230, 195, .16), transparent 72%);
  filter: blur(40px);
  opacity: 0; scale: .6;
}
.is-playing .intro__glow { animation: glowIn 3000ms var(--ease-out) forwards, glowDrift 7s ease-in-out 800ms infinite alternate; }
@keyframes glowIn { to { opacity: 1; scale: 1; } }
@keyframes glowDrift { to { translate: 3% -2%; rotate: 12deg; } }

.intro__stage { position: relative; display: grid; justify-items: center; gap: calc(var(--h) * .5); --h: clamp(64px, 9vw, 124px); }

/* Lockup geometry, from the image proportions (monogram 255x330, wordmark 900x183) */
.intro__lockup {
  --mw: calc(var(--h) * .773);           /* monogram width */
  --wh: calc(var(--h) * .5);             /* wordmark height */
  --ww: calc(var(--wh) * 4.918);         /* wordmark width */
  --gap: calc(var(--h) * .24);
  display: flex; align-items: center; gap: var(--gap);
}
.intro__mono { height: var(--h); width: var(--mw); }
.intro__word { height: var(--wh); width: var(--ww); translate: 0 calc(var(--h) * .04); }

/* 1. The figure rises out of a soft mask, sharpening as it settles, centred */
.intro__mono {
  opacity: 0;
  transform: translateX(calc((var(--ww) + var(--gap)) / 2)) translateY(14px) scale(.92);
  filter: blur(10px);
  -webkit-mask-image: linear-gradient(to top, #000 45%, transparent 75%);
          mask-image: linear-gradient(to top, #000 45%, transparent 75%);
  -webkit-mask-size: 100% 300%; mask-size: 100% 300%;
  -webkit-mask-position: 0 0; mask-position: 0 0;
}
.is-playing .intro__mono {
  animation:
    monoRise 1300ms var(--ease-out) 150ms forwards,
    monoGlide 1200ms var(--ease-in-out) 1400ms forwards;
}
@keyframes monoRise {
  to {
    opacity: 1; filter: blur(0);
    transform: translateX(calc((var(--ww) + var(--gap)) / 2)) translateY(0) scale(1);
    -webkit-mask-position: 0 100%; mask-position: 0 100%;
  }
}
@keyframes monoGlide {
  from {
    opacity: 1; filter: blur(0);
    transform: translateX(calc((var(--ww) + var(--gap)) / 2)) translateY(0) scale(1);
    -webkit-mask-position: 0 100%; mask-position: 0 100%;
  }
  to {
    opacity: 1; filter: blur(0);
    transform: none;
    -webkit-mask-position: 0 100%; mask-position: 0 100%;
  }
}

/* 2. The wordmark wipes in from the figure's side as the figure glides over */
.intro__word {
  opacity: 0; filter: blur(6px);
  transform: translateX(-18px);
  -webkit-mask-image: linear-gradient(to right, #000 40%, transparent 60%);
          mask-image: linear-gradient(to right, #000 40%, transparent 60%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
}
.is-playing .intro__word { animation: wordIn 1250ms var(--ease-out) 1650ms forwards; }
@keyframes wordIn {
  to { opacity: 1; filter: blur(0); transform: none; -webkit-mask-position: 0 0; mask-position: 0 0; }
}

/* 3. One quiet line, the tracking easing in as it appears */
.intro__line {
  font-family: var(--font-body); font-size: clamp(.7rem, 1.1vw, .82rem); font-weight: 500;
  letter-spacing: .42em; text-transform: uppercase; text-indent: .42em; /* keep it optically centred */
  color: var(--night-soft); margin: 0;
  opacity: 0; translate: 0 8px;
}
.is-playing .intro__line { animation: lineIn 1300ms var(--ease-out) 2400ms forwards; }
@keyframes lineIn { to { opacity: .85; translate: 0 0; letter-spacing: .3em; text-indent: .3em; } }

.intro__skip {
  position: absolute; right: max(1.25rem, env(safe-area-inset-right)); bottom: max(1.25rem, env(safe-area-inset-bottom));
  border: 1px solid var(--night-line); background: transparent; color: var(--night-soft);
  font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase;
  padding: .5rem .9rem; border-radius: 999px; z-index: 1;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.intro__skip:hover { color: var(--night-text); border-color: var(--night-soft); }

/* Exit: the lockup drifts forward and dissolves while the panel opens from the
   centre like a lens. Browsers without @property simply fade. */
@property --iris { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.intro.is-leaving {
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--iris), #000 calc(var(--iris) + 6%));
          mask-image: radial-gradient(circle at 50% 50%, transparent var(--iris), #000 calc(var(--iris) + 6%));
  animation: irisOpen 1150ms var(--ease-in-out) forwards;
}
@keyframes irisOpen { 75% { opacity: 1; } to { --iris: 110%; opacity: 0; } }
.intro.is-leaving .intro__stage { transition: scale 850ms var(--ease-out), opacity 550ms ease, filter 550ms ease; scale: 1.06; opacity: 0; filter: blur(6px); }
.intro.is-leaving .intro__skip { opacity: 0; transition: opacity 200ms ease; }

@media (max-width: 560px) {
  .intro__stage { --h: clamp(52px, 15vw, 72px); }
}