/* ============================================================================
   SECUENCIA DE ENTRADA CINEMATOGRÁFICA (Memorial Wall 2026 / video_2026)
   ----------------------------------------------------------------------------
   Orquesta la APARICIÓN de la escena (foto centro -> su sitio, nombre, fechas,
   línea, frase, logo, QR) de forma sobria, cálida y pausada, terminando EXACTO
   en el estado de la captura. La secuencia (tiempos/orden) la controla
   cinematic-intro.js; aquí solo están los ESTADOS visuales de cada fase.

   Los tiempos concretos (duraciones/curvas) los inyecta el JS como variables
   CSS (--ci-*) para tener UN solo sitio donde ajustar el ritmo.

   Todo se basa en opacity/transform (barato en TV/tótem). Las reglas usan
   !important a propósito: deben MANDAR sobre los estados de la intro antigua
   (intro-complete, video-background-visible...) mientras dura la cinemática.
   ============================================================================ */

/* Curvas por defecto (el JS las sobreescribe con las de sus constantes). */
.stage.ci {
  --ci-fade-ease: cubic-bezier(.33, 0, .2, 1);
  --ci-photo-ease: cubic-bezier(.22, .61, .36, 1);
  --ci-appear-dur: 1400ms;
  --ci-move-dur: 2200ms;
  --ci-video-dur: 2800ms;
  --ci-el-dur: 1200ms;
  --ci-big: 1.14;      /* la foto centrada es ~14% mayor que la final */
  --ci-big-min: 1.07;  /* escala de arranque de la foto (aprox. 94% de --ci-big) */
}

/* ---- Fondo: arranca a NEGRO y el vídeo entra con fade muy lento ---- */
.stage.ci .video-background-layer {
  opacity: 0 !important;
  transition: opacity var(--ci-video-dur) var(--ci-fade-ease) !important;
}
.stage.ci.ci-video .video-background-layer {
  opacity: 1 !important;
}

/* ---- Estado INICIAL de los elementos de TEXTO (van en el flujo del hero, SIN transform de posición):
        se ocultan con fade + una subida mínima. ---- */
.stage.ci .hero #stageName,
.stage.ci .hero #stageDates,
.stage.ci .hero .premium-separator,
.stage.ci .hero #longPhrase,
.stage.ci .hero #memoryAuthorLine {
  opacity: 0 !important;
  transform: translateY(8px) !important;
  transition: opacity var(--ci-el-dur) var(--ci-fade-ease),
              transform var(--ci-el-dur) var(--ci-fade-ease) !important;
  will-change: opacity, transform;
}

/* ---- QR y "powered by": se CENTRAN con transform: translateX(-50%). NO tocamos su transform (o se
        descolocan), solo animamos la OPACIDAD. ---- */
.stage.ci #qrSlot,
.stage.ci .powered-logo {
  opacity: 0 !important;
  transition: opacity var(--ci-el-dur) var(--ci-fade-ease) !important;
  will-change: opacity;
}

/* ---- Logo de la FUNERARIA: también centrado con translateX(-50%). Le damos una entrada LENTA con una
        subida mínima, PERO conservando el translateX(-50%) (para que no se desplace). ---- */
.stage.ci #funeralBrand {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(-10px) !important;
  transition: opacity var(--ci-logo-dur) var(--ci-fade-ease),
              transform var(--ci-logo-dur) var(--ci-fade-ease) !important;
  will-change: opacity, transform;
}

/* ---- FOTO (obituario): aparece centrada y algo más grande, luego viaja a su
        sitio y se reduce. El JS calcula el desplazamiento (--ci-dx/--ci-dy) del
        centro de la pantalla a su posición final y lo pone aquí. ---- */
.stage.ci .hero #photoFrame {
  transform-origin: center center;
  opacity: 0 !important;
  /* arranca en el CENTRO de la pantalla, a --ci-big-min (aprox 94% del tamaño grande) */
  transform: translate(var(--ci-dx, 0px), var(--ci-dy, 0px)) scale(var(--ci-big-min)) !important;
  transition: opacity var(--ci-appear-dur) var(--ci-fade-ease),
              transform var(--ci-appear-dur) var(--ci-fade-ease) !important;
  will-change: opacity, transform;
}
/* Fase 2: la foto se revela en el centro (0 -> 1) y crece de --ci-big-min a --ci-big */
.stage.ci.ci-photo-appear .hero #photoFrame {
  opacity: 1 !important;
  transform: translate(var(--ci-dx, 0px), var(--ci-dy, 0px)) scale(var(--ci-big)) !important;
}
/* Fase 3: la foto viaja a su posición final (translate 0) y se reduce a su tamaño (scale 1) */
.stage.ci.ci-photo-home .hero #photoFrame {
  opacity: 1 !important;
  transform: translate(0px, 0px) scale(1) !important;
  transition: transform var(--ci-move-dur) var(--ci-photo-ease) !important;
  /* halo/sombra cálida y MUY discreta durante el viaje y al posarse */
  box-shadow: 0 18px 60px rgba(0, 0, 0, .45), 0 0 46px rgba(255, 226, 176, .10);
}

/* ---- Aparición ordenada del resto de elementos (cada clase la añade el JS) ---- */
.stage.ci.ci-name  .hero #stageName        { opacity: 1 !important; transform: translateY(0) !important; }
.stage.ci.ci-dates .hero #stageDates       { opacity: 1 !important; transform: translateY(0) !important; }
.stage.ci.ci-sep   .hero .premium-separator{ opacity: 1 !important; transform: translateY(0) !important; }
.stage.ci.ci-phrase .hero #longPhrase      { opacity: 1 !important; transform: translateY(0) !important; }
/* Logo funeraria: conserva el centrado translateX(-50%); QR y powered solo opacidad. */
.stage.ci.ci-logo  #funeralBrand           { opacity: 1 !important; transform: translateX(-50%) translateY(0) !important; }
.stage.ci.ci-logo  .powered-logo           { opacity: 1 !important; }
.stage.ci.ci-qr    #qrSlot                 { opacity: 1 !important; }

/* ---- Accesibilidad: si el usuario prefiere menos movimiento, solo fundidos
        breves y SIN desplazamientos de la foto (aparece ya en su sitio). ---- */
@media (prefers-reduced-motion: reduce) {
  .stage.ci .hero #photoFrame,
  .stage.ci.ci-photo-appear .hero #photoFrame,
  .stage.ci.ci-photo-home .hero #photoFrame {
    transform: none !important;
    transition: opacity 600ms ease !important;
  }
  .stage.ci .hero #stageName,
  .stage.ci .hero #stageDates,
  .stage.ci .hero .premium-separator,
  .stage.ci .hero #longPhrase,
  .stage.ci .hero #memoryAuthorLine {
    transform: none !important;
    transition: opacity 500ms ease !important;
  }
  /* Logo/QR/powered: solo opacidad, conservando su centrado translateX(-50%). */
  .stage.ci #funeralBrand { transform: translateX(-50%) !important; transition: opacity 500ms ease !important; }
  .stage.ci #qrSlot,
  .stage.ci .powered-logo { transition: opacity 500ms ease !important; }
}