/* TAK Studio — opening intro (front page).
   When it plays: includes/class-intro.php. Sequence: assets/js/intro.js.

   The overlay ships `hidden`; only html.intro (set by the <head> gate before
   first paint) shows it. Nothing here touches the page itself except
   html.intro-hold, which pauses the hero's own entrance (motion.css) so it plays
   as the screen opens, not under the cover. */

/* :not(html) because the gate's state class on <html> is also "intro": a bare
   .intro made the page itself fixed and overflow-hidden for the whole intro, so
   the scrollbar only appeared at the end and the layout narrowed by its width. */
.intro:not(html) {
  --intro-ground: var(--ink-950, #0F0D0B);   /* the hero's own ground: no flash between the two */
  --intro-accent: #FF7C4F;                   /* the lockup's "+" pixel, not the theme accent */
  --intro-seam: color-mix(in srgb, #FF7C4F 60%, transparent);
  --intro-skip: rgba(245, 240, 232, 0.66);
  --intro-skip-hover: #F5F0E8;
  --intro-lw: clamp(264px, 46vw, 600px);     /* lockup width */

  position: fixed; inset: 0;
  z-index: 100000;                           /* above Complianz's banner (99999): it shows as the screen opens */
  overflow: hidden; contain: strict;
  background: var(--intro-ground);           /* covers any sub-pixel seam between the panes */
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* Light tone: the page's own off-white ground, with the dark-ink lockup (the
   template swaps the file). It opens like drawing paper onto the dark hero. The
   seams are denser because a 60% terracotta hairline washes out on white. */
.intro[data-tone="light"] {
  --intro-ground: #F8F9FA;                   /* hub.css light --surface-base */
  --intro-seam: color-mix(in srgb, #FF7C4F 85%, transparent);
  --intro-skip: rgba(26, 21, 18, 0.62);      /* ~5:1 on the ground */
  --intro-skip-hover: #1A1512;
}
html.intro .intro { display: block; }
.intro[data-phase="split"] { background: transparent; }

/* ---- Panes: four quadrants of ground that part along the "+" ---------------- */
.intro__pane { position: absolute; width: 50%; height: 50%; background: var(--intro-ground); }
.intro__pane--tl { left: 0; top: 0; }
.intro__pane--tr { right: 0; top: 0; }
.intro__pane--bl { left: 0; bottom: 0; }
.intro__pane--br { right: 0; bottom: 0; }
/* At the split the drawn lines hand over to the panes' inner edges in the same
   frame (one attribute flip), so the lines divide and move away with the panes,
   edging the opening. Each pane carries 1px of the 2px line. */
.intro[data-phase="split"] .intro__pane--tl { box-shadow: inset -1px 0 var(--intro-seam), inset 0 -1px var(--intro-seam); }
.intro[data-phase="split"] .intro__pane--tr { box-shadow: inset 1px 0 var(--intro-seam), inset 0 -1px var(--intro-seam); }
.intro[data-phase="split"] .intro__pane--bl { box-shadow: inset -1px 0 var(--intro-seam), inset 0 1px var(--intro-seam); }
.intro[data-phase="split"] .intro__pane--br { box-shadow: inset 1px 0 var(--intro-seam), inset 0 1px var(--intro-seam); }

/* ---- Setting-out lines drawn from the "+" to the edges ---------------------- */
.intro__line { position: absolute; background: var(--intro-seam); pointer-events: none; }
.intro__line--h { left: 0; right: 0; top: calc(50% - 1px); height: 2px; transform: scaleX(0); }
.intro__line--v { top: 0; bottom: 0; left: calc(50% - 1px); width: 2px; transform: scaleY(0); }
.intro[data-phase="split"] .intro__line { visibility: hidden; }

/* ---- The lockup ------------------------------------------------------------- */
.intro__stage { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.intro__lockup { position: relative; width: var(--intro-lw); aspect-ratio: 1218 / 200; }

/* One 1218x200 image, cropped three ways. Measured from logo-full-dark.png:
   "TAK" x 0–517; ARCHITECTS y 17–83 and ENGINEERS y 117–183, both x 521–1150;
   the "+" (x 1163–1209, y 29–74) is never shown from the image. The live
   .intro__plus replaces it so it can move by itself. */
.intro__piece {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  visibility: hidden;                         /* until intro.js takes over */
}
.intro__piece--tak { clip-path: inset(0 57.3% 0 0); }
.intro__piece--l1  { clip-path: inset(0 5.2% 50% 42.6%); }
.intro__piece--l2  { clip-path: inset(50% 5.2% 0 42.6%); }

/* The "+" is 45.5px square at source scale with 11.25px arms, centred on (1186, 51.5). */
.intro__plus {
  position: absolute; left: 95.505%; top: 14.5%; width: 3.73%; aspect-ratio: 1;
  visibility: hidden;
}
.intro__plus i { position: absolute; background: var(--intro-accent); }
.intro__plus i:first-child { left: 37.65%; width: 24.7%; top: 0; bottom: 0; }
.intro__plus i:last-child  { top: 37.65%; height: 24.7%; left: 0; right: 0; }

.intro[data-phase] .intro__piece,
.intro[data-phase] .intro__plus { visibility: visible; }

/* ---- Skip ------------------------------------------------------------------ */
.intro__skip {
  position: absolute; z-index: 1;
  right: max(clamp(0.75rem, 3vw, 2rem), env(safe-area-inset-right));
  bottom: max(clamp(0.75rem, 3vw, 1.75rem), env(safe-area-inset-bottom));
  min-height: 44px; padding: 0 0.75em;
  display: inline-flex; align-items: center;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.75rem; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1;
  color: var(--intro-skip); background: none; border: 0; border-radius: 3px; cursor: pointer;
  opacity: 0;
  transition: color 150ms ease;
}
.intro__skip:hover { color: var(--intro-skip-hover); }
.intro__skip:focus-visible { color: var(--intro-skip-hover); outline: 2px solid var(--intro-accent); outline-offset: 2px; opacity: 1; }

/* ---- Hold the hero's entrance until the screen opens ------------------------ */
html.intro-hold .site-header,
html.intro-hold .hero .hero__eyebrow,
html.intro-hold .hero h1,
html.intro-hold .hero .hero__lead,
html.intro-hold .hero .hero__actions,
html.intro-hold .hero .hero__cap,
html.intro-hold .hero .hero__slide[data-active="true"] img { animation-play-state: paused; }

/* The gate never starts it under reduced motion; this covers the preference
   changing mid-intro (intro.js also skips at once). */
@media (prefers-reduced-motion: reduce) {
  html.intro .intro { display: none; }
}