/* Intro "puertas de la iglesia" de la página de invitados (ver js/intro.js).
   Foto 1400x2489. Puerta en la foto: x 406-1034, y 1296-2084; las hojas se parten en x 714. */
html.ii-activa, html.ii-activa body { overflow: hidden; }
#introIglesia { position: fixed; inset: 0; z-index: 9999; overflow: hidden; background: #EFE6D8; transition: opacity .6s ease; }
#introIglesia.ii-fuera { opacity: 0; pointer-events: none; }

/* La foto cubre la pantalla (como object-fit: cover) y la "cámara" se acerca a la puerta. */
.ii-escena { position: absolute; left: 50%; top: 50%; width: max(100vw, 100vh * 1400 / 2489); aspect-ratio: 1400 / 2489;
  transform: translate(-50%, -50%); transform-origin: 51.4% 70%; --s1: 1.75; }
.ii-play .ii-escena { animation: ii-zoom 3.8s linear .3s both; }
/* Acercamiento hasta encuadrar la puerta, pausa mientras se abre y empujón final a través de ella.
   translateY -70% lleva el centro de la puerta (70% de la foto) al centro de la pantalla. */
@keyframes ii-zoom {
  0% { transform: translate(-50%, -50%) scale(1.04); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  45% { transform: translate(-50%, -68%) scale(var(--s1)); animation-timing-function: linear; }
  70% { transform: translate(-50%, -68.5%) scale(calc(var(--s1) * 1.07)); animation-timing-function: cubic-bezier(.6, 0, .9, .4); }
  100% { transform: translate(-50%, -70%) scale(6); }
}
/* Pantallas apaisadas: la iglesia entera a lo alto y la misma foto desenfocada de fondo. */
.ii-fondo { position: absolute; inset: -40px; background: url(../img/intro-iglesia.webp) center / cover; filter: blur(28px) brightness(.9); }
@media (min-aspect-ratio: 3/4) { .ii-escena { width: auto; height: 135vh; --s1: 2.1; } }
.ii-foto { position: absolute; inset: 0; background: url(../img/intro-iglesia.webp) center / 100% 100% no-repeat; }

/* Luz detrás de la puerta: mismo hueco que la puerta de la foto. */
.ii-luz { position: absolute; left: 29%; width: 44.86%; top: 52.07%; height: 31.66%;
  background: radial-gradient(ellipse at 50% 55%, #fff 0%, #FFF7E8 45%, #F3DDBA 100%); }
.ii-play .ii-luz { animation: ii-brilla 1.4s ease-out 2.1s both; }
@keyframes ii-brilla { from { box-shadow: 0 0 0 0 rgba(255,248,232,0); } to { box-shadow: 0 0 120px 60px rgba(255,248,232,.9); } }

/* Hojas de la puerta: recortes de la propia foto que giran sobre sus bisagras. */
.ii-marco { position: absolute; left: 29%; width: 44.86%; top: 52.07%; height: 31.66%; perspective: 1200px; }
.ii-hoja { position: absolute; top: 0; height: 100%; background-image: url(../img/intro-iglesia.webp); background-repeat: no-repeat; backface-visibility: hidden; }
.ii-hoja::after { content: ""; position: absolute; inset: 0; background: rgba(20,12,6,0); }
.ii-izq { left: 0; width: 49.04%; transform-origin: left center; background-size: 454.5% 315.9%; background-position: 37.18% 76.19%; }
.ii-der { right: 0; width: 50.96%; transform-origin: right center; background-size: 437.5% 315.9%; background-position: 66.11% 76.19%; }
.ii-play .ii-izq { animation: ii-abre-izq 1.5s cubic-bezier(.6, 0, .2, 1) 1.9s both; }
.ii-play .ii-der { animation: ii-abre-der 1.5s cubic-bezier(.6, 0, .2, 1) 1.9s both; }
.ii-play .ii-hoja::after { animation: ii-sombra 1.5s ease-in 1.9s both; }
@keyframes ii-abre-izq { to { transform: rotateY(-100deg); } }
@keyframes ii-abre-der { to { transform: rotateY(100deg); } }
@keyframes ii-sombra { to { background: rgba(20,12,6,.55); } }

/* Viñeta cálida, pétalos y destello final. */
.ii-velo { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 60%, transparent 55%, rgba(60,40,20,.35)); }
.ii-petalos i { position: absolute; top: -20px; width: 11px; height: 15px; border-radius: 60% 0 60% 0; background: #F4C9C2; opacity: .9;
  animation-name: ii-cae; animation-timing-function: linear; animation-iteration-count: infinite; animation-play-state: paused; }
.ii-play .ii-petalos i { animation-play-state: running; }
.ii-petalos i:nth-child(3n) { background: #fff; }
@keyframes ii-cae { to { transform: translate(40px, 110vh) rotate(540deg); } }
.ii-flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.ii-play .ii-flash { animation: ii-flash .7s ease-in 3.6s both; }
@keyframes ii-flash { to { opacity: 1; } }

.ii-saltar { position: absolute; right: 16px; top: max(16px, env(safe-area-inset-top)); z-index: 3; padding: 11px 22px; border-radius: 999px;
  border: 1px solid rgba(47,58,49,.25); box-shadow: 0 6px 18px -8px rgba(47,58,49,.4);
  background: rgba(255,255,255,.75); color: #2F3A31; font: 600 15px Poppins, sans-serif; cursor: pointer; }

@media (prefers-reduced-motion: reduce) { #introIglesia { display: none; } }