/* Save the date · Stella & Gustavo — Toque Estudio (versión 8: el pórtico, una sola pantalla) */

:root {
  --crema: #fbf3ea;
  --oliva: #33401b;           /* más oscuro: contraste sobre el velo */
  --oliva-suave: #4b5630;
  --rosa: #a8405f;            /* lapacho, más oscuro para que se lea */
  --alto: 100vh;
  --serif: "Cormorant Garamond", Georgia, serif;
  --guion: "Great Vibes", cursive;
}
@supports (height: 100svh) { :root { --alto: 100svh; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
body { background: var(--crema); color: var(--oliva); font-family: var(--serif); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
img, video { display: block; }
button { font: inherit; }

/* ---------- Escenario ---------- */
.escenario { position: fixed; inset: 0; overflow: hidden; background: var(--crema); }
.fondo {
  position: absolute; inset: -40px; background: url(img/portico-final-v9.jpg) center / cover;
  filter: blur(28px) saturate(.9) brightness(1.06); opacity: .75;
}

/* El lienzo tiene la forma del vídeo (9:16). En el móvil lo cubre todo (se recorta a los lados);
   en pantallas anchas queda como una columna centrada. Todo se coloca en % del lienzo. */
.lienzo {
  --cx: 50%;                  /* eje del texto: el centro del pórtico */
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  height: var(--alto); width: calc(var(--alto) * 9 / 16);
  container-type: size; overflow: hidden; background: var(--crema);
}
/* Teléfono: el pórtico cubre toda la pantalla (se recorta un poco a los lados o arriba y abajo) */
@media (max-width: 640px) {
  .lienzo {
    --W: max(100vw, calc(var(--alto) * 9 / 16));
    width: var(--W); height: calc(var(--W) * 16 / 9);
  }
}
@media (min-width: 641px) { .lienzo { box-shadow: 0 30px 80px -30px rgba(70, 60, 40, .45); } }

.lienzo video, .lienzo .final { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lienzo .bucle, .lienzo .final { opacity: 0; }      /* los vídeos de cerca entran al acabar el acercamiento; la imagen, solo si no hay vídeo */

/* Velo claro ovalado, ceñido al texto (de «¡Nos casamos!» a la frase): aclara y desenfoca el hierro de la
   reja solo donde hay letras y deja ver el pórtico alrededor. Elipse de 72 % × 64 % del lienzo, sólida hasta
   el 80 % del radio y fundida en el borde: así cubre todas las líneas sin tapar las columnas ni la guirnalda. */
.halo {
  position: absolute; left: var(--cx); top: 45%; width: 72%; height: 64%; transform: translate(-50%, -50%);
  background: rgba(255, 251, 244, .88);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: radial-gradient(closest-side, #000 80%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 80%, transparent 100%);
  opacity: 0; pointer-events: none;
}

/* ---------- Texto ---------- */
.texto {
  position: absolute; left: var(--cx); top: 45%; transform: translate(-50%, -50%); width: 64%;
  text-shadow: 0 0 10px rgba(255, 251, 244, .9), 0 0 2px rgba(255, 251, 244, .9);   /* aura clara: separa la letra del fondo */
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.casamos { font-size: 24px; font-size: 5.4cqw; font-style: italic; font-weight: 700; color: var(--rosa); line-height: 1.1; margin-bottom: .7cqw; }
.nombres { font-family: var(--guion); font-weight: 400; color: var(--oliva); line-height: .95; display: flex; flex-direction: column; align-items: center; }
.nombre {
  /* margen amplio: los trazos de la S y la G de Great Vibes salen mucho de la letra y la máscara no debe cortarlos */
  display: block; font-size: 58px; font-size: 13cqw; padding: .3em .8em; margin: -.22em -.8em;
  /* se escribe de izquierda a derecha: la máscara se desliza (--m de 100 % a 0 %) */
  -webkit-mask-image: linear-gradient(90deg, #000 0 40%, transparent 50% 100%); mask-image: linear-gradient(90deg, #000 0 40%, transparent 50% 100%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: var(--m, 0%) 0; mask-position: var(--m, 0%) 0;
}
.amp { display: block; font-size: 34px; font-size: 7.6cqw; color: var(--rosa); line-height: .8; margin: -.12em 0 -.1em; }
.guarda {
  margin-top: 5.2cqw; font-size: 13px; font-size: 2.85cqw; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
  color: var(--oliva-suave); padding-left: .3em;
}
.fecha { margin-top: 1.4cqw; font-size: 34px; font-size: 7.6cqw; font-weight: 700; letter-spacing: .05em; line-height: 1.05; color: var(--oliva); white-space: nowrap; }
.fecha i { font-style: normal; color: var(--rosa); padding: 0 .04em; }
.lugar { margin-top: 1.2cqw; font-size: 11px; font-size: 2.5cqw; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--oliva-suave); padding-left: .26em; }
.frase { margin-top: 3.4cqw; font-size: 21px; font-size: 4.8cqw; font-style: italic; font-weight: 600; line-height: 1.18; color: var(--oliva); }

/* Con JavaScript el texto espera escondido a que llegue su momento */
.js .nombre { --m: 100%; }
.js .amp, .js .texto .t { opacity: 0; visibility: hidden; }

/* ---------- Pétalos blancos ---------- */
.petalos { position: absolute; inset: 0; pointer-events: none; overflow: hidden; perspective: 700px; }
.petalo {
  position: absolute; top: 0; left: 0; border-radius: 75% 0 75% 0;
  background: linear-gradient(135deg, #ffffff 0%, #fbf6ee 50%, #ebe0d0 100%);
  box-shadow: 0 2px 5px rgba(110, 85, 60, .22); will-change: transform;
}

/* ---------- Botón de la música ---------- */
.musica {
  position: fixed; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 30;
  height: 40px; padding: 0 15px 0 12px; border-radius: 999px; display: flex; align-items: center; gap: 7px; cursor: pointer;
  background: rgba(253, 249, 242, .86); border: 1px solid rgba(70, 83, 42, .25); color: var(--oliva);
  font-size: 15px; font-weight: 600; letter-spacing: .04em;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 6px 16px -8px rgba(60, 50, 30, .5);
  transition: padding .4s ease, gap .4s ease;
}
.musica svg { width: 19px; height: 19px; fill: currentColor; flex: none; }
.musica .mudo, .musica.silencio .nota { display: none; }
.musica.silencio .mudo { display: block; }
.musica span { max-width: 70px; overflow: hidden; white-space: nowrap; transition: max-width .4s ease, opacity .3s ease; }
.musica.sonando { padding: 0 10px; gap: 0; }
.musica.sonando span { max-width: 0; opacity: 0; }
.musica:not(.sonando)::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid rgba(194, 91, 124, .6);
  animation: onda 2.2s ease-out infinite; pointer-events: none;
}
@keyframes onda { from { transform: scale(1); opacity: .9; } to { transform: scale(1.35, 1.6); opacity: 0; } }
.musica.sonando:not(.silencio) .nota { animation: late 2.4s ease-in-out infinite; }
@keyframes late { 50% { transform: scale(1.12); } }

/* ---------- Pie ---------- */
.pie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; text-align: center;
  padding: 26px 12px max(10px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(251, 243, 234, .92) 0%, rgba(251, 243, 234, .7) 55%, rgba(251, 243, 234, 0) 100%);
  opacity: 0;
}
.hecho { font-size: 11.5px; line-height: 1.4; color: var(--oliva-suave); white-space: nowrap; }
.hecho a { color: var(--oliva); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(70, 83, 42, .35); }
.credito { margin-top: 3px; font-size: 9.5px; line-height: 1.4; color: var(--oliva-suave); opacity: .8; white-space: nowrap; }
.credito a { color: inherit; }
@media (min-width: 641px) { .pie { background: none; } }

@media (prefers-reduced-motion: reduce) {
  .musica::after, .musica .nota { animation: none !important; }
}