/*
 * cortinilla-shared.css — Estilos comunes a ambas variantes de cortinilla
 * v3.3: extraído de cortinilla-puerta.css y cortinilla-carta.css.
 * v3.5:
 *   - visibility:hidden → opacity:0 + pointer-events:none en pre-ready.
 *     visibility:hidden pausa las animaciones CSS en Chrome y Safari, lo que
 *     provocaba que el pulse del logo se viera robótico al revelarse.
 *   - will-change:transform añadido a .cortinilla-logo (GPU layer para pulse).
 *   - transition:all → transition:top,opacity en .cortinilla-audio-control.
 *   - will-change:opacity eliminado de .cortinilla-bottom-veil (incorrecto).
 *   - body{font-family} limitado a .cortinilla-wrapper.
 *   - Nuevo: estilos para .js-invitado (bloque para plugin externo).
 */

.cortinilla-wrapper {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

/* v3.5: font-family limitado al wrapper, no al body completo */
.cortinilla-wrapper {
  font-family: 'Arial', sans-serif;
}

body {
  overflow-x: hidden;
}

/*
 * Variables CSS del wrapper.
 * Valores de fallback — PHP siempre los sobreescribe con los del editor.
 */
.cortinilla-wrapper {
  --color-primario:  #FFFFFF;
  --color-boton:     #C9A961;
  --color-texto:     #FFFFFF;
  --fuente-texto:    inherit;
  --curtain-image:   url('');
}

/*
 * Ocultar cortinilla hasta que esté lista.
 * v3.5: cambiado de visibility:hidden a opacity:0 + pointer-events:none.
 *   visibility:hidden hacía que Chrome/Safari pausaran la animación cortinilla-pulse
 *   y la reiniciaran desde 0% al añadir cortinilla-ready → efecto robótico.
 *   Con opacity:0 la animación corre siempre (invisible) y al revelarse ya
 *   está en un fotograma natural del ciclo.
 */
.cortinilla-wrapper:not(.cortinilla-ready) .cortinilla-intro-overlay,
.cortinilla-wrapper:not(.cortinilla-ready) .cortinilla-logo-container {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── Fondo de color sólido ──────────────────────────────────────────────── */
.cortinilla-color-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--color-primario);
  z-index: 999;
  opacity: 1;
  transition: opacity var(--velocidad-fondo, 1s) ease-in-out; /* v3.8: CSS var de velocidad */
}

.cortinilla-color-background.fade-out {
  opacity: 0;
}

/* ── Overlay central (logo + textos) ────────────────────────────────────── */
.cortinilla-intro-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1001;
  pointer-events: none;
}

.cortinilla-logo-container {
  pointer-events: all;
  cursor: pointer;
  /* v3.8: CSS variable de velocidad en lugar de 'all 0.5s' */
  transition:
    opacity   var(--velocidad-fade, 0.5s) ease,
    filter    var(--velocidad-fade, 0.5s) ease,
    transform var(--velocidad-fade, 0.5s) ease;
}

.cortinilla-logo-container.fade-out {
  opacity: 0;
  filter: blur(5px);
  transform: scale(0.9);
}

.cortinilla-logo {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  animation: cortinilla-pulse 2s infinite;
  overflow: hidden;
  will-change: transform; /* v3.5: layer GPU para que el pulse sea siempre fluido */
}

.cortinilla-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

@keyframes cortinilla-pulse {
  0%   { transform: scale(1);    box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
  50%  { transform: scale(1.05); box-shadow: 0 15px 40px rgba(0,0,0,0.4); }
  100% { transform: scale(1);    box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
}

/* ── Nombre del invitado propio de la cortinilla ────────────────────────── */
/*
 * v4.1: .js-invitado vuelve a ser la MISMA clase que usa el otro plugin en
 * cualquier etiqueta de la invitación — no se renombra ni se duplica. El
 * marco/estilo de este bloque se aplica SOLO por ubicación: el selector
 * exige que el .js-invitado esté dentro de .cortinilla-wrapper. Cualquier
 * .js-invitado fuera de la cortinilla (en otras etiquetas de la invitación)
 * recibe el valor del nombre sin ninguna personalización visual, porque el
 * selector de abajo no lo alcanza.
 *
 * Elemento vacío entre el logo y los textos de bienvenida cuando no hay
 * texto configurado. Hereda --fuente-texto y --color-texto del wrapper.
 * Cuando está vacío (:empty) no ocupa espacio ni altera el layout.
 */
.cortinilla-wrapper .js-invitado {
  text-align: center;
  /* Más separación del logo que antes (12px) — evita que quede pegado. */
  margin-top: 26px;
  color: var(--color-texto);
  /* Tipografía propia, con --fuente-texto como respaldo: si la invitación se
     guardó antes de que existiera el segundo selector, --fuente-externo no
     está definida y el bloque sigue heredando la fuente de Texto 01/02. */
  font-family: var(--fuente-externo, var(--fuente-texto));
  font-size: var(--tamano-externo, 16px);
  font-weight: var(--negrita-externo, normal);
  letter-spacing: 0.5px;
  /* Placa translúcida con marco blanco (sin dorado/metálico): fondo oscuro
     que garantiza contraste sin importar la foto, esquinas en forma de
     píldora (radio original) y una sombra suave de elevación.
     Padding en em (no px) para que se mantenga proporcional al tamaño de
     fuente configurado — proporción horizontal:vertical ≈ 3.3:1, estándar
     habitual en píldoras/badges elegantes. */
  background: rgba(0, 0, 0, 0.4);
  padding: 0.55em 1.8em;
  border-radius: 999px;
  /* outline (no border) para que el marco blanco quede en la MISMA posición
     que tenía cuando existía el marco dorado exterior: 8px hacia adentro
     del borde de la caja, sin importar que ya no haya nada afuera. */
  outline: 1.5px solid rgba(255, 255, 255, 0.85);
  outline-offset: -8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  pointer-events: none;
}

.cortinilla-wrapper .js-invitado:empty {
  margin: 0;
  padding: 0;
  outline: none;
  background: none;
  box-shadow: none;
}

/* Si el bloque externo tiene texto, acerca el grupo de textos de bienvenida
   a él en lugar de mantener el espacio pensado para colgar directo del logo. */
.cortinilla-wrapper .js-invitado:not(:empty) + .cortinilla-intro-text {
  margin-top: 8px;
}

/* ── Textos de bienvenida ───────────────────────────────────────────────── */
.cortinilla-intro-text {
  text-align: center;
  margin-top: 20px;
  color: var(--color-texto);
  font-family: var(--fuente-texto);
  /* Sombra reforzada al máximo en cuatro capas: contacto casi opaco +
     tres halos crecientes, bastante más marcada que la versión anterior. */
  text-shadow:
    1px 1px 2px rgba(0,0,0,1),
    0 0 10px rgba(0,0,0,0.9),
    0 0 24px rgba(0,0,0,0.75),
    0 0 36px rgba(0,0,0,0.55);
}

.cortinilla-click-text {
  font-size: var(--tamano-click, 18px);
  font-weight: var(--negrita-click, bold);
  margin-bottom: 5px;
  color: inherit;
  font-family: inherit;
}

.cortinilla-guest-name {
  font-size: var(--tamano-nombre, 14px);
  font-weight: var(--negrita-nombre, normal);
  opacity: 0.8;
  color: inherit;
  font-family: inherit;
}

/* ── Botón de audio — base compartida ──────────────────────────────────── */
/* Tamaño y posición left específicos de cada variante en sus propios archivos */
.cortinilla-audio-control {
  position: fixed;
  top: -60px;
  border-radius: 50%;
  /* v1.6.1: gradiente sutil sobre el color del botón → sensación de relieve.
     La capa overlay usa rgba para funcionar con CUALQUIER color elegido por el cliente. */
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(0,0,0,0.18) 100%),
    var(--color-boton);
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  /* v1.6.1: anillo blanco semi-transparente + sombras apiladas.
     El anillo separa el botón del fondo de la invitación independientemente
     de si éste es oscuro, claro o con fotos. Costo cero (CSS estático). */
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.7),
    0 4px 12px rgba(0,0,0,0.25),
    0 8px 24px rgba(0,0,0,0.15);
  z-index: 1002;
  /* v3.5: transition específico en lugar de 'all' (evita animar width/height/left).
     v1.6.1: añadidas transform y box-shadow para hover/active animados. */
  transition:
    top 0.6s ease,
    opacity 0.6s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
  opacity: 0;
  /* v2.0: will-change:transform eliminado. El botón es position:fixed y vive
     durante toda la página, así que la capa de GPU que reservaba no se liberaba
     nunca — y solo servía para suavizar un hover que en móvil no ocurre.
     La animación de entrada (top/opacity) no lo necesita. */
}

.cortinilla-audio-control.visible {
  top: 20px;
  opacity: 1;
}

.cortinilla-audio-control.dimmed {
  opacity: 0.5;
}

.cortinilla-audio-control:hover {
  /* v1.6.1: hover refinado — sube un poco y escala. */
  transform: translateY(-2px) scale(1.08);
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.85),
    0 6px 16px rgba(0,0,0,0.30),
    0 12px 30px rgba(0,0,0,0.20);
}

/* v1.6.1: feedback táctil al tocar — sensación de botón físico. */
.cortinilla-audio-control:active {
  transform: translateY(0) scale(0.96);
  transition-duration: 0.1s;
}

/* v1.6.1: ícono levemente más grande para acompañar el botón más grande. */
.cortinilla-audio-control svg {
  width: 26px;
  height: 26px;
  fill: white;
}

/* ── Estado del body durante el intro ──────────────────────────────────── */
body.cortinilla-intro-active {
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════════
 * EFECTO VISUAL INFERIOR — .cortinilla-bottom-veil
 * Gradiente cinematográfico fijo en la parte inferior de la pantalla.
 * Durante el intro queda cubierto por .cortinilla-color-background (z 999).
 * Al cerrar, emerge suavemente al desvanecerse el color-background.
 * ══════════════════════════════════════════════════════════════════════════
 */
.cortinilla-bottom-veil {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  /* v3.4: altura controlada por --altura-velo (generada desde PHP según el
     atributo alturaVeloInferior). El fallback clamp() mantiene compatibilidad
     con entradas publicadas antes de v3.4 que no tienen el atributo guardado. */
  height: var(--altura-velo, clamp(60px, 15vh, 150px));
  background: linear-gradient(
    to bottom,
    transparent           0%,
    var(--color-primario) 100%
  );
  z-index: 10;
  pointer-events: none;
  transform: translateZ(0);
  /* v3.5: will-change:opacity eliminado — el velo no anima su opacidad directamente */
  opacity: var(--opacidad-velo, 1); /* v3.8: opacidad configurable */
}

/* v3.8: botón de audio en la esquina derecha */
.cortinilla-wrapper.cye-audio-right .cortinilla-audio-control {
  left: auto !important;
  right: 10px;
}