/* ══════════════════════════════════════════════════════════════════════
   Voynic Media — "The Plan" cinematic intro
   Drop-in. Uses the site's own custom properties, so it re-themes with
   the palette block at the top of index.html and never hard-codes brand
   colour. Everything is scoped to html.vm-intro / html.vm-intro-run, so
   removing those two classes returns the page to stock.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. hold the page's own choreography ─────────────────────────────
   The site animates .up (with .d1–.d5 delays) and .ruler i on load, and
   reveals .rv via IntersectionObserver. We freeze all three, then let
   them run untouched on our cue — we never replace the site's entrance. */
html.vm-intro .up,
html.vm-intro .ruler i        { animation-play-state: paused !important; }
html.vm-intro .rv,
html.vm-intro .rv-s > *       { opacity: 0 !important; transform: translateY(20px) !important; }

/* Everything below the hero is held too — otherwise the client-logo marquee
   sits scrolling in the bottom sliver of the viewport through the whole
   intro, which fights the stillness the concept depends on. */
html.vm-intro-run .hero ~ *  { transition: opacity .8s cubic-bezier(.22,.8,.3,1) .15s; }
html.vm-intro .hero ~ *      { opacity: 0; }

/* chrome slides in with the hero rather than sitting there through the intro */
html.vm-intro-run header.nav,
html.vm-intro-run .announce   { transition: opacity .7s cubic-bezier(.22,.8,.3,1),
                                            transform .7s cubic-bezier(.22,.8,.3,1); }
html.vm-intro header.nav,
html.vm-intro .announce       { opacity: 0; transform: translateY(-14px); }

/* ── 2. the plate ────────────────────────────────────────────────────
   Transparent: the page's own paper is the backdrop, which is the whole
   point of this concept — we never cut to black. */
#vm-intro{
  position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  font-synthesis: none; -webkit-font-smoothing: antialiased;
  --vm-inset: clamp(20px, 4.6vw, 88px);
}
#vm-intro[hidden]{ display: none; }

/* registration marks — the document frame */
#vm-intro .vm-reg{
  position: absolute; width: clamp(22px, 2.4vw, 46px); height: clamp(22px, 2.4vw, 46px);
  border: 2px solid var(--brass); opacity: 0;
}
#vm-intro .vm-reg--tl{ left: var(--vm-inset); top: var(--vm-inset); border-right: 0; border-bottom: 0; }
#vm-intro .vm-reg--tr{ right: var(--vm-inset); top: var(--vm-inset); border-left: 0; border-bottom: 0; }
#vm-intro .vm-reg--bl{ left: var(--vm-inset); bottom: var(--vm-inset); border-right: 0; border-top: 0; }
#vm-intro .vm-reg--br{ right: var(--vm-inset); bottom: var(--vm-inset); border-left: 0; border-top: 0; }

/* document slugs */
#vm-intro .vm-slug{
  position: absolute; top: calc(var(--vm-inset) + 4px);
  font-family: var(--f-mono); font-size: clamp(10px, .95vw, 13px);
  letter-spacing: .3em; text-transform: uppercase; color: var(--ink-faint);
  white-space: pre;
}
#vm-intro .vm-slug--l{ left: calc(var(--vm-inset) + 70px); }
#vm-intro .vm-slug--r{ right: calc(var(--vm-inset) + 70px); text-align: right; }

/* the measuring rule — this is the element that becomes the brand mark */
#vm-intro .vm-rule-wrap{
  position: absolute; left: 50%; top: 47.5vh;
  width: min(1240px, 82vw); margin-left: calc(min(1240px, 82vw) / -2);
  transform-origin: 50% 50%;
}
#vm-intro .vm-rule{
  position: absolute; left: 0; top: 0; width: 100%; height: 3px;
  background: var(--brass); border-radius: 2px; transform-origin: 50% 50%; transform: scaleX(0);
}
#vm-intro .vm-tick{
  position: absolute; top: 3px; width: 1.5px; background: var(--brass);
  opacity: 0; transform-origin: 50% 0;
}
#vm-intro .vm-tnum{
  position: absolute; top: 20px; transform: translateX(-50%);
  font-family: var(--f-mono); font-size: clamp(9px, .8vw, 11.5px); letter-spacing: .14em;
  color: var(--ink-muted); opacity: 0; white-space: nowrap;
}

/* line one — the industry default, typed then struck out */
#vm-intro .vm-l1{
  position: absolute; left: 0; right: 0; top: 36vh; text-align: center;
  font-family: var(--f-mono); font-size: clamp(14px, 2.15vw, 34px);
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted);
  white-space: pre; padding: 0 6vw; line-height: 1.3;
}
#vm-intro .vm-caret{
  display: inline-block; width: .5em; height: .95em; background: var(--ink-muted);
  vertical-align: -.14em; margin-left: .1em;
}
/* The strike lives INSIDE the line, so `em` resolves against the line's own
   font-size and it sits on the text at every viewport — and so it exits
   travelling with the text instead of sliding across it. */
/* .632em is the measured cap-height midpoint for DM Mono at this line-height,
   so the rule strikes through the middle of the capitals at every size. */
#vm-intro .vm-strike{
  position: absolute; left: 50%; top: .632em; margin-top: -1.5px; height: 3px;
  background: var(--rust); transform-origin: 0 50%; width: 0; opacity: 0;
}

/* line two — the answer, in the display face */
#vm-intro .vm-l2{
  position: absolute; left: 0; right: 0; top: 56vh; text-align: center;
  font-family: var(--f-disp); font-weight: 700;
  font-size: clamp(28px, 4.55vw, 68px); letter-spacing: -.032em; color: var(--ink);
  opacity: 0; padding: 0 6vw; line-height: 1.15;
}
/* Sits below the line box in `em`, so it clears the descender of "plan" at
   any viewport height — the old fixed 65vh collided on short screens. */
#vm-intro .vm-l2u{
  position: absolute; left: 50%; top: calc(100% + .28em); height: 4px; width: 0;
  background: var(--brass); border-radius: 2px; opacity: 0;
}

/* per-word reveal masks */
#vm-intro .vm-w{ display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .04em; }
#vm-intro .vm-w > span{ display: inline-block; will-change: transform; }

/* keyboard escape hatch — visible only when focused */
#vm-skip{
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 9001; pointer-events: auto;
  font-family: var(--f-disp); font-weight: 600; font-size: 14px;
  padding: 10px 18px; border: 1px solid var(--paper-3); border-radius: var(--r, 8px);
  background: var(--paper); color: var(--ink); cursor: pointer;
  opacity: 0; width: 1px; height: 1px; overflow: hidden; white-space: nowrap;
}
#vm-skip:focus-visible{ opacity: 1; width: auto; height: auto; outline: 2px solid var(--brass); outline-offset: 2px; }

/* ── 3. anyone who asked for less motion gets none of this ─────────── */
@media (prefers-reduced-motion: reduce){
  #vm-intro{ display: none !important; }
  html.vm-intro .up, html.vm-intro .ruler i{ animation-play-state: running !important; }
  html.vm-intro .rv, html.vm-intro .rv-s > *{ opacity: 1 !important; transform: none !important; }
  html.vm-intro header.nav, html.vm-intro .announce{ opacity: 1; transform: none; }
}

/* VM-SLUGFIX START
   Both slugs sat on the same line, each inset 70px from its own edge. At 375px
   that leaves ~195px of gap for two strings that need ~225px and ~198px, and
   white-space:pre stops them wrapping — so they printed straight through each
   other. The frame has marks at all four corners, so on narrow screens the
   second slug moves to the bottom edge: still a document slug, no collision. */
@media (max-width:760px){
  #vm-intro .vm-slug{
    font-size: 9.5px; letter-spacing: .16em;
    left:  calc(var(--vm-inset) + 30px);
    right: calc(var(--vm-inset) + 30px);
  }
  #vm-intro .vm-slug--l{ top: calc(var(--vm-inset) + 6px); text-align: left; }
  #vm-intro .vm-slug--r{ top: auto; bottom: calc(var(--vm-inset) + 6px); text-align: right; }
}
/* VM-SLUGFIX END */