/* HAVEN — page transition: three-layer veil.
   Loaded AFTER styles.css, so it only ADDS rules and reuses the palette vars
   (--bg, --ink, --accent). A SAGE panel (the page's own ground) is what covers
   the page; behind it an --ink and an --accent panel show as two thin bands
   on the way in and out (accent outermost). A centre-pinned --ink logo rides
   the sage panel as parallax. Driven by js/transitions.js.
   Hasta el 2026-09-10 el panel de delante era maroon con el logo en lima:
   Chus lo cambió porque el manual de marca apenas usa el oscuro, así que
   pasa a filete y el verde de la página es lo que cubre. */

:root {
  /* the site's signature easing (carousel curtain / plan viewer) */
  --vt-ease: cubic-bezier(0.77, 0, 0.175, 1);
}

/* The veil is a fixed container holding two stacked panels; it's only displayed
   while a transition is running (is-armed / arriving). */
.vt-veil {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  pointer-events: none;
}
.vt-veil.is-armed { display: block; }
/* While actively covering/revealing, the veil captures pointer events so taps and
   clicks can't leak through to the page hidden underneath (base is none, so at
   rest the off-screen container never blocks the page). */
.vt-veil.is-cover,
.vt-veil.is-reveal,
html.vt-arriving-veil .vt-veil { pointer-events: auto; }

/* Three panels fill the container; all wait just below the viewport. Stacking,
   back to front: ACCENT, INK, SAGE. On the way up the back panels lead (accent
   fastest), so their edges show as two bands ahead of the sage; on the way out
   the sage lifts first and the bands linger underneath before following —
   sage -> ink -> accent coming and going (orden elegido por Chus). */
.vt-veil-panel {
  position: absolute;
  inset: 0;
  transform: translateY(101vh);  /* waits just below the viewport */
}
.vt-veil-accent { z-index: 1; background: var(--accent); }
.vt-veil-ink {
  z-index: 2;
  background: var(--ink);
  overflow: hidden;              /* sin hijos hoy; conservado como respaldo de caché mixta:
                                    un HTML cacheado de antes del 2026-09-10 aún tiene los
                                    logos dentro de este panel, y sin el recorte el logo
                                    flotaría sobre la página durante el reveal (Codex) */
}
.vt-veil-sage {
  z-index: 3;
  background: var(--bg);
  overflow: hidden;              /* clips the logo to the sage panel's current bounds */
}

/* The logo is counter-translated by the exact inverse of the SAGE panel, so its
   net screen position never changes: it stays pinned to the CENTRE OF THE SCREEN
   while the sage slides underneath it — a parallax reveal (overflow:hidden clips
   it to the sage's current bounds). Logo shares the sage's duration + easing. */
.vt-veil-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(120px, 17vw, 192px);
  height: auto;
  fill: var(--ink);               /* ink logo on the sage panel, like the header */
  transform: translate(-50%, -50%) translateY(-101vh);
}

/* exit (cover): panels rise from below to cover; accent leads, then ink, sage last.
   COVER_MS in transitions.js = the slowest (sage). */
.vt-veil.is-cover .vt-veil-sage   { transform: translateY(0); transition: transform 0.75s var(--vt-ease); }
.vt-veil.is-cover .vt-veil-ink    { transform: translateY(0); transition: transform 0.62s var(--vt-ease); }
.vt-veil.is-cover .vt-veil-accent { transform: translateY(0); transition: transform 0.50s var(--vt-ease); }
.vt-veil.is-cover .vt-veil-logo   { transform: translate(-50%, -50%) translateY(0); transition: transform 0.75s var(--vt-ease); }
/* entry (reveal): sage lifts first; ink and then accent linger underneath.
   REVEAL_MS in transitions.js = the slowest (accent). */
.vt-veil.is-reveal .vt-veil-sage   { transform: translateY(-101vh); transition: transform 0.75s var(--vt-ease); }
.vt-veil.is-reveal .vt-veil-ink    { transform: translateY(-101vh); transition: transform 0.90s var(--vt-ease); }
.vt-veil.is-reveal .vt-veil-accent { transform: translateY(-101vh); transition: transform 1.05s var(--vt-ease); }
.vt-veil.is-reveal .vt-veil-logo   { transform: translate(-50%, -50%) translateY(101vh); transition: transform 0.75s var(--vt-ease); }

/* arriving via the veil: render displayed with both panels already covering, so
   the incoming page is never seen uncovered before transitions.js takes over */
html.vt-arriving-veil .vt-veil       { display: block; }
html.vt-arriving-veil .vt-veil-panel { transform: translateY(0); }
html.vt-arriving-veil .vt-veil-logo  { transform: translate(-50%, -50%) translateY(0); }

/* Backstop cover painted at the ROOT, before <body> is parsed. The .vt-veil is
   the first child of <body>, but this ::before on <html> exists from the very
   first paint and covers everything sage, so even a sub-frame before the panels
   render shows no flash. The panels (z 9999) sit on top and take over for the
   reveal, so removing this backstop mid-transition is invisible. */
html.vt-arriving-veil::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--bg);
  pointer-events: none;
}

/* Reduced motion: transitions.js already skips the veil entirely (plain instant
   navigation); this is belt-and-braces so no panel ever animates. */
@media (prefers-reduced-motion: reduce) {
  .vt-veil-panel, .vt-veil-logo { transition: none !important; }
}

/* ---- Intro welcome veil (first non-transition load) --------------------- */
/* Reuses the three-panel veil. On a fresh load the pre-paint script adds
   html.vt-intro so the page renders already covered sage (no flash);
   transitions.js then adds .is-intro to draw the centred HAVEN logo and lift the
   veil using the same reveal as a page transition. See js/transitions.js. */

/* First-paint covered state — mirrors html.vt-arriving-veil (panels up + sage
   backstop). Deliberately does NOT touch .vt-veil-logo: the solid logo stays
   parked off-screen so only the drawing intro logo is ever seen. */
html.vt-intro .vt-veil       { display: block; pointer-events: auto; }
html.vt-intro .vt-veil-panel { transform: translateY(0); }
html.vt-intro::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--bg);  /* sage backstop before <body> parses */
  pointer-events: none;
}

/* The centred self-drawing intro logo. Lives inside .vt-veil-sage (clipped by
   its overflow:hidden), shares the veil logo's centre-pin + sage parallax, and
   has its OWN class + mask id so it never collides with the header logo
   (.logo-draw-line / #logo-draw-mask) or the solid .vt-veil-logo. Shown only
   while .is-intro is set; the solid logo is hidden then so the two never stack. */
.vt-intro-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(120px, 17vw, 192px);
  height: auto;
  fill: var(--ink);
  transform: translate(-50%, -50%) translateY(0);
  display: none;
}
.vt-veil.is-intro .vt-intro-logo { display: block; }
.vt-veil.is-intro .vt-veil-logo  { display: none; }
/* Respaldo de caché mixta, pareja del overflow:hidden de .vt-veil-ink: un HTML
   cacheado de antes del 2026-09-10 aún anida los dos logos dentro del panel
   maroon, y en maroon serían invisibles; ahí vuelven al lima de entonces.
   Con el marcado actual (logos dentro del sage) estos selectores no casan
   con nada (Codex, PR #6). */
.vt-veil-ink .vt-veil-logo,
.vt-veil-ink .vt-intro-logo { fill: var(--accent); }
/* Los dos logos del velo (.vt-intro-logo, el de bienvenida, y .vt-veil-logo,
   el de las transiciones entre páginas) estuvieron ocultos con
   `display: none !important` mientras Haven no tuvo vectorial: compartían un
   PNG sin canal alfa y COCIDO sobre el fondo sage #7a9b83 (el valor exacto de
   --bg), así que dentro del panel de delante, entonces maroon, se veía un
   rectángulo sage en vez de un logo. Ocultarlos dejaba el velo como
   un panel maroon limpio, que era lo menos malo.
   Desde que el wordmark es <svg> inline (artwork oficial de Muchagana) la
   causa ya no existe: hereda fill de var(--ink) y se recorta solo. La
   regla se ha borrado y los dos logos vuelven a verse.
   El intro se AUTODIBUJA igual que el header: el <mask id="vt-intro-draw-
   mask"> de cada página (ver el <svg class="vt-intro-logo">) lleva los
   mismos 10 trazos de línea central que #logo-draw-mask (styles.css),
   copiados a la clase .vt-intro-draw-line con idénticos `d`, pathLength=
   "1" y atributos de máscara — solo cambia el id, para no colisionar con
   la instancia del header en la misma página. */
/* reveal: rides the sage up, exactly like .vt-veil-logo (counter-parallax) */
.vt-veil.is-intro.is-reveal .vt-intro-logo {
  transform: translate(-50%, -50%) translateY(101vh);
  transition: transform 0.75s var(--vt-ease);
}

/* The stroke mask draws 0->100%, revealing the accent fill (same technique as the
   header logo, distinct class so header-replay logic never touches it).
   Anchura 32 sobre tinta de 22.66, linecap butt / linejoin round: idénticos a
   .logo-draw-line (styles.css) por la misma razón — cubrir el antialias sin
   tocar la letra vecina y un frente perpendicular, no redondeado. */
.vt-intro-draw-line {
  fill: none;
  stroke: #fff; /* white in the mask = reveal; colour comes from .vt-intro-logo fill */
  stroke-width: 32;
  stroke-linecap: butt;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
/* Tiempos calcados de .logo-draw-line:nth-child (styles.css), no reescalados:
   el trazo que más tarde acaba es la barra de la E (delay 1.23s + 0.24s =
   1.47s, no el palo de la N, que es el último en arrancar), y ese total es
   INTRO_MIN_MS de transitions.js, así que el velo no se retira con el logo
   a medio dibujar; el intro dibuja
   letra a letra en el mismo orden y con el mismo ritmo que el header. Se
   sustituye la única animación de 1.4s que cubría el conjunto (cubic-bezier,
   sin pausas entre letras) por 10 tramos lineales con sus huecos y solapes. */
.vt-veil.is-intro .vt-intro-draw-line:nth-child(1)  { animation: vt-intro-draw 0.13s linear forwards; animation-delay: 0s;    } /* H palo izq.  */
.vt-veil.is-intro .vt-intro-draw-line:nth-child(2)  { animation: vt-intro-draw 0.27s linear forwards; animation-delay: 0.13s; } /* H barra      */
.vt-veil.is-intro .vt-intro-draw-line:nth-child(3)  { animation: vt-intro-draw 0.2s  linear forwards; animation-delay: 0.43s; } /* H palo dcho. */
.vt-veil.is-intro .vt-intro-draw-line:nth-child(4)  { animation: vt-intro-draw 0.34s linear forwards; animation-delay: 0.43s; } /* A arco       */
.vt-veil.is-intro .vt-intro-draw-line:nth-child(5)  { animation: vt-intro-draw 0.2s  linear forwards; animation-delay: 0.67s; } /* A barra      */
.vt-veil.is-intro .vt-intro-draw-line:nth-child(6)  { animation: vt-intro-draw 0.3s  linear forwards; animation-delay: 0.7s;  } /* V            */
.vt-veil.is-intro .vt-intro-draw-line:nth-child(7)  { animation: vt-intro-draw 0.47s linear forwards; animation-delay: 0.9s;  } /* E contorno   */
.vt-veil.is-intro .vt-intro-draw-line:nth-child(8)  { animation: vt-intro-draw 0.24s linear forwards; animation-delay: 1.23s; } /* E barra      */
.vt-veil.is-intro .vt-intro-draw-line:nth-child(9)  { animation: vt-intro-draw 0.1s  linear forwards; animation-delay: 1.2s;  } /* N barra+diag */
.vt-veil.is-intro .vt-intro-draw-line:nth-child(10) { animation: vt-intro-draw 0.07s linear forwards; animation-delay: 1.33s; } /* N palo       */
@keyframes vt-intro-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .vt-intro-logo, .vt-intro-draw-line { transition: none !important; animation: none !important; }
  .vt-veil.is-intro .vt-intro-draw-line { stroke-dashoffset: 0; }
}