/* ============================================================
   Boda Sofia · Invitación web
   Animación inicial: portada → video → fondo
   ============================================================ */

:root{
  --verde-oscuro:#5d6b4d;
  --verde-suave:#8a9a78;
  --crema:#f4f1ea;
  --transicion:900ms;
  --curva:cubic-bezier(.65,.02,.28,1);
}

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

html,
body{
  height:100%;
  margin:0;
  padding:0;
  background:#000;
  overscroll-behavior:none;
}

body{
  font-family:"Cormorant Garamond","Didot","Times New Roman",serif;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* ---------- Escenario ---------- */
.escena{
  position:fixed;
  inset:0;
  overflow:hidden;
  background:#000;
}

/* ---------- Capas ---------- */
.capa{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--transicion) var(--curva),
             visibility 0s linear var(--transicion);
}

.capa.is-activa{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity var(--transicion) var(--curva),
             visibility 0s linear 0s;
}

/* ---------- Medios a pantalla completa ---------- */
.media{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  user-select:none;
  -webkit-user-drag:none;
}

/* El video llena toda la pantalla: sin franjas negras.
   Su contenido (hoja arriba, sobre abajo) tiene margen de sobra, por eso se
   puede recortar el excedente sin perder nada importante. */
.media--video{
  object-fit:cover;
  background:#2f3524;
  outline:none;
}

/* ---------- Control propio del video (sustituye los controles nativos,
   que añadían una banda oscura abajo) ---------- */
.control-video{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.9);
  z-index:3;
  width:74px;
  height:74px;
  display:grid;
  place-items:center;
  padding:0;
  border:1.5px solid rgba(255,255,255,.7);
  border-radius:50%;
  background:rgba(47,53,36,.42);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transition:opacity 250ms ease, transform 250ms ease,
             visibility 0s linear 250ms;
}
.control-video svg{
  width:30px;
  height:30px;
  fill:#fff;
  margin-left:3px;
}
.control-video.is-visible{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-50%) scale(1);
  transition:opacity 250ms ease, transform 250ms ease,
             visibility 0s linear 0s;
}
.control-video:focus-visible{ outline:2px solid #fff; outline-offset:4px; }

/* ---------- Etapa 1: portada ---------- */
.capa--portada{ cursor:pointer; }

.capa--portada .media--portada{
  animation:respirar 14s ease-in-out infinite alternate;
}

@keyframes respirar{
  from{ transform:scale(1); }
  to{ transform:scale(1.035); }
}

.tap-target{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.tap-target:focus-visible{ outline:2px solid #fff; outline-offset:-6px; }

/* Pista "toca para abrir" */
.pista{
  position:absolute;
  left:50%;
  bottom:clamp(28px,7vh,72px);
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  color:#fffdf7;
  pointer-events:none;
  transition:opacity 400ms ease;
}

.pista__texto{
  padding:9px 16px;
  font-size:clamp(.72rem,3vw,.95rem);
  font-weight:600;
  letter-spacing:.2em;
  text-indent:.2em;
  white-space:nowrap;
  text-transform:uppercase;
  background:rgba(38,46,30,.42);
  border:1px solid rgba(255,253,247,.4);
  border-radius:999px;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  text-shadow:0 1px 6px rgba(0,0,0,.6);
  animation:latido 2.4s ease-in-out infinite;
}

.pista__anillo{
  width:12px;
  height:12px;
  border:1.5px solid #fffdf7;
  border-radius:50%;
  box-shadow:0 1px 6px rgba(0,0,0,.6);
  animation:latido 2.4s ease-in-out infinite;
}

@keyframes latido{
  0%,100%{ opacity:.45; }
  50%    { opacity:1; }
}

/* ---------- Etapa 3: fondo + invitación ---------- */
.capa--fondo{
  align-items:stretch;
  justify-content:center;
  background:#f2f1ec;
}

/* El fondo queda fijo: la textura no se desplaza con el contenido */
.capa--fondo .media--fondo{
  position:absolute;
  inset:0;
  z-index:0;
}

/* Contenedor desplazable de la invitación */
.contenido{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-width:none;
}

.contenido::-webkit-scrollbar{ width:0; height:0; }

/* Solo la etapa visible puede desplazarse */
.capa--fondo.is-activa .contenido{ overflow-y:auto; }

/* Aparición suave del contenido al revelarse la invitación */
.capa--fondo.is-activa .wrap > section,
.capa--fondo.is-activa .wrap > form{
  animation:aparecer 1.1s var(--curva) both;
}

@keyframes aparecer{
  from{ opacity:0; transform:translateY(18px); }
  to  { opacity:1; transform:none; }
}

/* ---------- Botón repetir ---------- */
.repetir{
  position:fixed;
  left:calc(12px + env(safe-area-inset-left));
  top:calc(12px + env(safe-area-inset-top));
  z-index:60;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--verde-oscuro);
  background:rgba(255,255,255,.82);
  border:1px solid rgba(93,107,77,.3);
  border-radius:999px;
  box-shadow:0 2px 6px rgba(61,66,48,.18);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transition:opacity 600ms ease 400ms, visibility 0s linear 400ms, background 200ms ease;
}

.capa--fondo.is-activa .repetir{
  opacity:.92;
  visibility:visible;
  transition:opacity 600ms ease 400ms, visibility 0s linear 400ms, background 200ms ease;
}
.repetir:hover{ background:rgba(255,255,255,.98); }
.repetir svg{ width:14px; height:14px; fill:currentColor; flex:0 0 auto; }

/* En pantallas angostas se deja solo el ícono, para no saturar la barra superior */
.repetir span{ display:none; }
.repetir{ padding:9px; }
@media (min-width:560px){
  .repetir{ padding:9px 16px; }
  .repetir span{ display:inline; }
}

/* ---------- Modo bloqueado (mientras carga / reduce saltos) ---------- */
.pista.is-oculta{ opacity:0; }

/* ---------- Accesibilidad: menos movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  .capa,
  .capa.is-activa{ transition-duration:200ms; }
  .capa--portada .media--portada,
  .pista__texto,
  .pista__anillo{ animation:none; }
}

/* ---------- Pantallas anchas (desktop): medios en formato vertical ---------- */
@media (min-aspect-ratio:1/1){
  .media--portada{
    width:auto;
    max-width:100%;
    object-fit:contain;
  }
  .capa--portada{ background:#111; }

  /* En horizontal, llenar la pantalla con un video vertical recortaría
     demasiado: se muestra completo, centrado sobre un fondo verde. */
  .media--video{ object-fit:contain; }
  .capa--video{ background:#2f3524; }
}