/**
 * Brand intro overlay (includes/intro.php, timeline in assets/js/intro.js).
 * Loaded only on pages that set $intro = true. Everything is gated on
 * html.vt-intro, which the <head> boot script adds for the first homepage view
 * of a session — without it the overlay never renders.
 * Colours come from the theme tokens, so the V and the field are VATECH red in
 * light mode and mint in dark mode.
 */
.vti-overlay { display: none; }

html.vt-intro body { overflow: hidden; animation: vti-unlock 0s linear 8s forwards; }
html.vt-intro #preloader { display: none; }   /* the intro replaces Medilab's spinner here */

html.vt-intro .vti-overlay {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 1000000;
  overflow: hidden;
  background: var(--bg);
  cursor: pointer;          /* click / tap skips */
  /* Failsafe: if the script never runs to completion, get out of the way. */
  animation: vti-failsafe 0s linear 8s forwards;
}

/* The V is typeset at its full on-screen size and only ever scaled at or below
   1 until the zoom, so it is never a stretched raster. The grid centres its
   box; intro.js then nudges it so the visible ink sits dead centre. */
.vti-v {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 34vmin;
  line-height: 1;
  color: var(--accent);
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

.vti-field {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
}

@keyframes vti-failsafe { to { visibility: hidden; pointer-events: none; } }
@keyframes vti-unlock   { to { overflow: visible; } }

@media (prefers-reduced-motion: reduce) {
  html.vt-intro .vti-overlay { display: none; }
  html.vt-intro body { overflow: visible; }
}