/* ============================================================
   PAPIRO · Clara & Mateo
   Cap 1 · Prólogo — transición continua vídeo → manuscrito.
   El usuario nunca debe percibir dónde termina el vídeo y
   empieza la web. Un único manuscrito, un único plano.
   ============================================================ */

:root {
  /* Tinta */
  --tinta-fuerte: #3F2E1E;
  --tinta-media: #6B4A2B;
  --tinta-suave: #8A6F4E;
  --tinta-clara: #A68B67;

  /* Acentos */
  --dorado: #C9A24B;
  --rosa-polvo: #C9A69C;
  --verde-salvia: #8E9E7E;

  /* Color base del pergamino (para bordes fuera del viewport,
     match con la textura del manuscrito). NUNCA se usa como
     fondo plano de secciones — solo como safe-zone en overflow. */
  --pergamino-safe: #D9C5A3;

  /* Tipografías */
  --f-script: "Great Vibes", "Herr Von Muellerhoff", cursive;
  --f-editorial: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --f-notas: "EB Garamond", Georgia, serif;

  /* Espaciado */
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: clamp(15px, 1.1vw + 12px, 18px);
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  color: var(--tinta-fuerte);
  font-family: var(--f-editorial);
  overflow-x: hidden;
  background-color: var(--pergamino-safe);
  /* IMAGEN DEL MANUSCRITO como fondo continuo de toda la invitación.
     Cubre todo el viewport, alineado al centro. Es el mismo papel
     que aparece al final del vídeo splash → transición invisible. */
  background-image: url("media/manuscrito-fondo.jpg");
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% auto;
  background-attachment: scroll;
}

img { max-width: 100%; height: auto; }

/* ============================================================
   STAGE · escenario único. Video y Cap 1 conviven en la MISMA
   capa. No hay separación visual entre "splash" y "web".
   ============================================================ */

.stage {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

/* El vídeo splash cubre el viewport desde el primer instante.
   Poster (frame 0 del video) garantiza que el pergamino
   cerrado sea visible aunque el video no haya cargado aún. */
.stage__video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100svh;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  z-index: 20;
  transition: opacity 1.2s ease-out;
}

/* Cuando el video termina, se desvanece revelando el Cap 1
   que ya está debajo. La transición es imperceptible porque
   el último frame del video === fondo del manuscrito. */
.stage__video.is-fading {
  opacity: 0;
  pointer-events: none;
}

.stage__video.is-hidden {
  display: none;
}

/* Hotspot del dije · posición calibrada sobre el frame 0.
   Circular, generoso para tap. Invisible pero clicable. */
.stage__tap {
  position: fixed;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  width: 22vmin;
  height: 22vmin;
  min-width: 100px;
  min-height: 100px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 25;
  padding: 0;
  transition: opacity 0.6s ease;
}

.stage__tap:focus-visible {
  outline: 2px dashed rgba(201, 162, 75, 0.7);
  outline-offset: 4px;
}

.stage__tap.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ============================================================
   CAP 1 · PRÓLOGO
   Vive DEBAJO del video splash (z-index menor). Sus elementos
   son controlados por JS con transform: scale() y opacity que
   sincronizan con el zoom del video en los últimos 2s.
   ============================================================ */

.cap1 {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  z-index: 5;
  padding: 0;
  overflow: visible;
}

/* Enredadera lateral izquierda (imagen-03) — match con guia-01.
   Position anclada a la esquina superior-izquierda del viewport.
   La transformación inicial (scale y opacity) se controla desde
   JS para sincronizar con el zoom del video splash. */
.cap1__enredadera {
  position: fixed;
  top: 0;
  left: 0;
  width: 62vmin;
  max-width: 480px;
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 6;
  opacity: 0;
  transform-origin: top left;
  transform: scale(0.35);
  will-change: opacity, transform;
}

/* Vídeo pluma con chromakey — sobre el fondo manuscrito.
   Cover todo el viewport para que la coreografía respete el
   tamaño del video original. */
.cap1__pluma {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100svh;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  z-index: 8;
  opacity: 0;
  transition: opacity 0.5s ease-in;
  filter: url(#chromakey-green);
  -webkit-filter: url(#chromakey-green);
}

.cap1__pluma.is-playing {
  opacity: 1;
}

/* ============================================================
   CAP 1 · TEXTO CENTRAL manuscrito
   Escritura con CLIP-PATH que revela cada línea de izquierda
   a derecha, respetando el ritmo natural de la escritura.
   NO fade — el texto se ESCRIBE.
   ============================================================ */

.cap1__texto {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(78%, 560px);
  z-index: 10;
  text-align: center;
  color: var(--tinta-fuerte);
  pointer-events: none;
}

.cap1__linea {
  font-family: var(--f-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  line-height: 1.6;
  margin: 0 0 var(--sp-6);
  opacity: 0;
  color: var(--tinta-media);
}

.cap1__linea.is-visible {
  opacity: 1;
}

/* Escritura de línea · clip-path revela el texto de izquierda
   a derecha. Ritmo lineal para simular pluma escribiendo.
   El texto YA está renderizado y coloreado — solo se revela. */
.cap1__linea .cap1__ink {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
  transition: clip-path var(--dur, 3s) linear,
              -webkit-clip-path var(--dur, 3s) linear;
}

.cap1__linea.is-writing .cap1__ink {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}

/* Divisor filigrana · reveal por scaleX desde el centro */
.cap1__divisor {
  display: block;
  width: 40%;
  max-width: 180px;
  height: auto;
  margin: var(--sp-4) auto var(--sp-6);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: opacity 0.6s ease, transform 0.9s ease;
}

.cap1__divisor.is-visible {
  opacity: 0.9;
  transform: scaleX(1);
}

/* Título "Clara & Mateo" · Great Vibes, la caligrafía del
   mockup. Escritura con clip-path igual que las líneas. */
.cap1__titulo {
  font-family: var(--f-script);
  font-weight: 400;
  font-size: clamp(3.2rem, 8.5vw, 5.4rem);
  line-height: 1.05;
  color: var(--tinta-media);
  margin: 0;
  opacity: 0;
  letter-spacing: 0.005em;
}

.cap1__titulo .cap1__ink {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
  transition: clip-path var(--dur, 3s) linear,
              -webkit-clip-path var(--dur, 3s) linear;
}

.cap1__titulo.is-visible {
  opacity: 1;
}

.cap1__titulo.is-writing .cap1__ink {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}

.cap1__titulo .cap1__amp {
  font-family: var(--f-script);
  font-weight: 400;
  color: var(--dorado);
  padding: 0 0.06em;
}

/* ============================================================
   CAP 1 · ANOTACIONES MARGINALES (voz del escritor)
   Aparecen escribiéndose (clip-path) como todo lo demás,
   pero en el margen derecho del papiro.
   ============================================================ */

.cap1__anotaciones {
  position: fixed;
  right: 5%;
  top: 20%;
  width: min(26%, 190px);
  z-index: 9;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  opacity: 0;
  transition: opacity 0.6s ease-in;
  pointer-events: none;
}

.cap1__anotaciones.is-visible {
  opacity: 1;
}

.cap1__anotacion {
  font-family: var(--f-notas);
  font-style: italic;
  font-size: clamp(0.68rem, 1.1vw, 0.82rem);
  line-height: 1.5;
  color: var(--tinta-clara);
  margin: 0;
  opacity: 0;
}

.cap1__anotacion.is-visible {
  opacity: 1;
}

.cap1__anotacion--inf {
  align-self: flex-end;
  text-align: right;
}

.cap1__anotacion .cap1__ink {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
  transition: clip-path var(--dur, 4s) linear,
              -webkit-clip-path var(--dur, 4s) linear;
}

.cap1__anotacion.is-writing .cap1__ink {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}

/* ============================================================
   Responsive · móvil vertical prioritario
   ============================================================ */

@media (max-width: 640px) {
  .cap1__enredadera {
    width: 68vmin;
    max-width: 320px;
  }

  .cap1__texto {
    width: 86%;
  }

  .cap1__titulo {
    font-size: clamp(2.8rem, 12vw, 3.6rem);
  }

  .cap1__anotaciones {
    top: auto;
    bottom: 5%;
    right: 5%;
    width: 42%;
    max-width: 150px;
    gap: var(--sp-4);
  }

  .cap1__anotacion {
    font-size: 0.65rem;
    line-height: 1.4;
  }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .cap1__texto { width: 60%; }
  .cap1__anotaciones { display: none; }
}

/* Accesibilidad · reduce-motion */
@media (prefers-reduced-motion: reduce) {
  .cap1__linea .cap1__ink,
  .cap1__titulo .cap1__ink,
  .cap1__anotacion .cap1__ink {
    transition-duration: 0.4s !important;
  }
}