/* Azula · El umbral de la rosa (gate). Piel, no core.
   Dos t0: la carga (entrada progresiva, keyframes dh-intro-*) y el core, que pone #gate[data-gate-state="opening"].
   Las entradas solo definen su estado inicial: el estado base ES el final, así reduced-motion y el respaldo quedan completos.
   Si rosa-gate.mjs o una imagen falla, la coreografía CSS igual corre y el core abre a los 5400 ms.
   Láminas 737×1313: bosque, salón y frente comparten caja; todo se coloca en % de esa caja. */

/* ── Escenario ─────────────────────────────────────────── */
#gate.kc-gate {
  padding: 0;
  background: var(--dh-night-deep);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#gate.kc-gate::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 40%, #3A1E2C 0%, rgba(58, 30, 44, 0) 75%);
  pointer-events: none;
}
.kc-gate__scene { overflow: hidden; }
.dh-stage {
  position: absolute;
  inset: 0;
  width: min(100%, 62svh);
  margin-inline: auto;
  overflow: hidden;
  container-type: size;
}
.dh-plate {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100cqw, 100cqh * 737 / 1313);
  aspect-ratio: 737 / 1313;
  translate: -50% -50%;
}
.dh-plate img,
.dh-plate canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dh-bosque { transform-origin: 52.9% 33%; animation: dh-respira 14s ease-in-out infinite alternate; }
.dh-bosque__alba,
.dh-bosque__lienzo { visibility: hidden; }
/* la luz que nace de la rosa cuando el hechizo se rompe */
.dh-alba-luz {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 52.4% 51.8%, rgba(255, 236, 190, 0.9) 0%, rgba(255, 214, 140, 0.45) 14%, rgba(255, 214, 140, 0) 34%);
  transform-origin: 52.4% 51.8%;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

/* sombra focal: el bosque se oscurece hacia afuera y converge en la rosa (52.4 %, 51.8 %) */
.dh-foco {
  background: radial-gradient(ellipse 46% 31% at 52.4% 57%, rgba(11, 7, 12, 0) 0%, rgba(11, 7, 12, 0) 48%, rgba(11, 7, 12, 0.38) 78%, rgba(11, 7, 12, 0.6) 100%);
  transform-origin: 52.4% 51.8%;
  pointer-events: none;
}
/* la noche de entrada: una cortina alta que baja y descubre cielo, castillo, árboles y tocón */
.dh-noche {
  position: absolute;
  left: 0;
  right: 0;
  top: -160%;
  height: 260%;
  background: linear-gradient(180deg, rgba(11, 7, 12, 0) 0%, rgba(11, 7, 12, 0) 36%, #0B070C 60%, #0B070C 100%);
  transform: translateY(64%);   /* la banda suave también queda bajo el cuadro */
  pointer-events: none;
}

/* velo: el nombre arriba y la llamada abajo se leen sobre cualquier lámina */
.dh-velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(18, 12, 19, 0.72) 0%, rgba(18, 12, 19, 0.3) 16%, rgba(18, 12, 19, 0) 26%),
    linear-gradient(0deg, rgba(18, 12, 19, 0.82) 0%, rgba(18, 12, 19, 0.45) 13%, rgba(18, 12, 19, 0) 24%);
  pointer-events: none;
}
/* el velo que el hero conserva: el relevo termina en el mismo cuadro */
.dh-sala-velo { position: absolute; inset: 0; background: var(--dh-velo-sala); opacity: 0; pointer-events: none; }

/* ── Haz de luz sobre la campana ───────────────────────── */
.dh-haz {
  position: absolute;
  inset: 0;
  background: conic-gradient(from 168deg at 52.4% -6%, rgba(248, 222, 140, 0) 0deg, rgba(248, 222, 140, 0.16) 7deg,
    rgba(255, 240, 205, 0.3) 12deg, rgba(248, 222, 140, 0.16) 17deg, rgba(248, 222, 140, 0) 24deg, rgba(248, 222, 140, 0) 360deg);
  /* empieza bajo el castillo (base ≈ 38 %): la luz cae solo sobre el tocón y la campana */
  -webkit-mask-image: linear-gradient(180deg, transparent 41%, #000 48%, #000 60%, transparent 72%);
  mask-image: linear-gradient(180deg, transparent 41%, #000 48%, #000 60%, transparent 72%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* ── Rosa bajo la campana, sobre el tocón (lámina 251.75, 572 · 276.5 × 418.7) ── */
.dh-campana {
  position: absolute;
  left: 34.16%;
  top: 43.56%;
  width: 37.52%;
  aspect-ratio: 700 / 1060;
}
.dh-campana > *,
.dh-rosa > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.dh-campana__aura {
  inset: -6% -14% 30% -14%;
  width: auto;
  height: auto;
  background: radial-gradient(ellipse 42% 38% at 50% 34%, rgba(214, 74, 70, 0.55) 0%, rgba(178, 122, 36, 0.32) 42%, rgba(178, 122, 36, 0) 72%);
  mix-blend-mode: screen;
  animation: dh-aura 4.2s ease-in-out infinite alternate;
}
.dh-campana__viva { opacity: 0; clip-path: circle(0% at 48.6% 25.9%); }
.dh-campana__tinta { filter: drop-shadow(0 0 3px rgba(246, 196, 166, 0.55)); }
.dh-campana__vidrio { overflow: visible; filter: drop-shadow(0 0 2px rgba(255, 246, 229, 0.25)); }
.dh-vidrio__reflejo { animation: dh-reflejo 6s ease-in-out infinite alternate; }
/* la rosa llama: dos anillos de luz salen de la flor */
.dh-llamada {
  right: auto;
  bottom: auto;
  left: 48.6%;
  top: 25.9%;
  width: 46%;
  height: auto;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1.5px solid rgba(248, 222, 140, 0.75);
  box-shadow: 0 0 14px rgba(248, 222, 140, 0.35), inset 0 0 10px rgba(248, 222, 140, 0.2);
  opacity: 0;
  pointer-events: none;
  animation: dh-llama 2.8s cubic-bezier(0.2, 0.6, 0.3, 1) 4200ms infinite;
}
.dh-llamada--2 { animation-delay: 5600ms; }
.dh-esquirlas,
.dh-astillas { visibility: hidden; }
.dh-esquirla { transform-box: view-box; }
.dh-esquirla__filo { fill: none; stroke: #FFF8EA; stroke-width: 3.2; opacity: 0; }
.dh-astilla { fill: #FFF8EA; opacity: 0; transform-box: fill-box; transform-origin: center; }
.dh-grieta {
  stroke: #FFF8EA;
  stroke-width: 2.6;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  filter: drop-shadow(0 0 3px rgba(248, 222, 140, 0.9));
}
.dh-grieta--anillo { stroke-width: 1.6; }
.dh-grieta--rama { stroke-width: 1; }
.dh-grieta-brillo {
  stroke: #FFFFFF;
  stroke-width: 4;
  stroke-dasharray: 0.07 1.2;
  stroke-dashoffset: 0.07;
  opacity: 0;
  filter: drop-shadow(0 0 4px #FFFFFF);
}
.dh-impacto { stroke: #F8DE8C; stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.dh-destello { opacity: 0; transform-box: fill-box; transform-origin: center; mix-blend-mode: screen; }
.dh-campana__toque {
  inset: 2% 9% 9% 9%;
  width: auto;
  height: auto;
  border-radius: 46% 46% 12% 12% / 34% 34% 8% 8%;
  pointer-events: auto;
  cursor: pointer;
}
.dh-pulso {
  position: absolute;
  left: var(--dh-tap-x, 50%);
  top: var(--dh-tap-y, 52%);
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF6E5 0%, #F8DE8C 35%, rgba(150, 36, 47, 0.6) 60%, rgba(150, 36, 47, 0) 72%);
  opacity: 0;
  pointer-events: none;
}

/* ── Umbral: la puerta del castillo (lámina 357..423 × 380..486) y el salón ya encendido ── */
.dh-umbral {
  visibility: hidden;
  clip-path: inset(28.94% 42.61% 62.99% 48.44% round 9999px 9999px 0 0);
  transform-origin: 0 0;
}
.dh-salon { transform-origin: 50% 36%; }
.dh-salon > div { position: absolute; pointer-events: none; }
.dh-salon__penumbra { inset: 0; background: rgba(22, 9, 14, 0.5); }
/* las velas de los candelabros (lámina 14.2 % / 83.9 %, 42.7 %) */
.dh-salon__vela {
  top: 42.7%;
  width: 30%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 140, 0.75), rgba(255, 170, 80, 0.28) 45%, rgba(255, 170, 80, 0) 100%);
  mix-blend-mode: screen;
  opacity: 0.5;
}
.dh-salon__vela--izq { left: 14.2%; }
.dh-salon__vela--der { left: 83.9%; }
.dh-umbral__noche,
.dh-umbral__luz { position: absolute; inset: 0; }
.dh-umbral__noche { background: #140D12; }
.dh-umbral__luz {
  opacity: 0;
  /* la puerta se llena entera de luz de vela: el último color se extiende a todo el hueco */
  background: radial-gradient(ellipse 9% 7% at 52.9% 34%, #FFF0C8 0%, #F7C46E 45%, rgba(214, 130, 60, 0.88) 100%);
}
/* el resplandor que se derrama sobre la fachada cuando la puerta se abre */
.dh-puerta__halo {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 13% 9% at 52.9% 34%, rgba(255, 220, 150, 0.7) 0%, rgba(255, 200, 120, 0.25) 50%, rgba(255, 200, 120, 0) 100%);
  mix-blend-mode: screen;
  opacity: 0;
}
.dh-puerta { visibility: hidden; pointer-events: none; }
.dh-puerta__marco {
  position: absolute;
  left: 44.78%;
  top: 26.66%;
  width: 16.28%;
  height: 11.42%;
  overflow: visible;
  transform-origin: 50% 55.33%;
}
.dh-puerta__tinta path {
  stroke: #3A261A;
  stroke-width: 1.1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.dh-puerta__tinta .dh-puerta__fino { stroke-width: 0.55; }
.dh-puerta__oro path { fill: var(--dh-gold); opacity: 0; }

/* ── Retrato viajero (coordenadas de viewport; rosa-gate.mjs lo coloca sobre el marco del hero) ── */
.dh-retrato {
  position: absolute;
  left: var(--dh-hero-x, 12vw);
  top: var(--dh-hero-y, 8vh);
  width: var(--dh-hero-w, var(--dh-frame-w));
  opacity: 0;
  transform-origin: 0 0;
  transform: translate(var(--dh-rest-x, 0px), var(--dh-rest-y, 0px)) scale(var(--dh-rest-s, 1));
}
.dh-retrato .dh-frame { width: 100%; }
.dh-retrato .dh-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 246, 229, 0) 35%, rgba(255, 246, 229, 0.55) 50%, rgba(255, 246, 229, 0) 65%) no-repeat;
  background-size: 260% 100%;
  background-position: 130% 0;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* ── Cuerpo: nombre arriba, la llamada a la rosa abajo ─── */
#gate .kc-gate__body {
  z-index: 2;
  align-self: stretch;
  justify-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: max(1.2rem, env(safe-area-inset-top)) 16px max(1rem, calc(env(safe-area-inset-bottom) + 0.6rem));
  pointer-events: none;
}
.dh-gate__titulo { display: grid; justify-items: center; }
#gate .kc-eyebrow {
  margin: 0;
  padding-left: 0.5em;
  font-family: var(--kc-font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.5em;
  color: var(--dh-champagne);
  text-shadow: 0 1px 8px rgba(18, 12, 19, 0.9);
}
#gate .kc-gate__name {
  margin-top: 0.1rem;
  padding: 0.05em 0.25em 0.12em;
  font-family: var(--dh-font-script);
  font-size: clamp(3.6rem, 2.8rem + 5vw, 4.8rem);
  line-height: 1;
  background: linear-gradient(100deg, #E9C67A 0%, #F8DE8C 30%, #FFF6DC 42%, #F8DE8C 52%, #C99A45 74%, #F2D48A 100%);
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 8px rgba(18, 12, 19, 0.9));
  animation: dh-brillo-nombre 7s ease-in-out 5s infinite;
}
.dh-gate__filete { width: 150px; height: 13px; margin-top: -0.2rem; overflow: visible; }
.dh-gate__filete path { fill: none; stroke: var(--dh-reflection); stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 1; filter: drop-shadow(0 0 3px rgba(248, 222, 140, 0.5)); }
.dh-gate__filete .dh-gate__filete-fino { stroke-width: 0.8; }
.dh-gate__segundo {
  margin-top: 0.35rem;
  padding-left: 0.62em;
  font-family: var(--kc-font-display);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.62em;
  text-transform: uppercase;
  color: var(--dh-reflection);
  text-shadow: 0 1px 8px rgba(18, 12, 19, 0.9);
}
/* la llamada: una inscripción que apunta a la rosa, no un botón de formulario */
#gate .dh-toque {
  pointer-events: auto;
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  min-width: 11rem;
  min-height: 56px;
  padding: 0.1rem 1.4rem 0.3rem;
  border: 0;
  background: none;
  color: var(--dh-champagne);
}
#gate .dh-toque::after {
  content: "";
  position: absolute;
  inset: 22% -12% -6%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(248, 222, 140, 0.26), rgba(248, 222, 140, 0));
  opacity: 0;
  animation: dh-llamado 3.2s ease-in-out 4700ms infinite;
  pointer-events: none;
}
.dh-toque__guia { width: 16px; height: 34px; overflow: visible; }
.dh-toque__guia path { stroke: var(--dh-reflection); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(248, 222, 140, 0.7)); }
.dh-toque__texto {
  font-family: var(--dh-font-script);
  font-size: clamp(2rem, 1.7rem + 1.5vw, 2.4rem);
  line-height: 1.05;
  padding: 0 0.2em 0.1em;
  background: linear-gradient(180deg, #FFF3D0 0%, #F8DE8C 55%, #D9AE5A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 7px rgba(18, 12, 19, 0.95));
}
#gate .dh-toque:focus-visible { opacity: 1 !important; outline: 1.5px solid var(--dh-champagne); outline-offset: 4px; border-radius: 14px; }

/* ── Entrada: la noche se levanta, el castillo enciende, la luz busca la rosa, la rosa al final ── */
#gate[data-gate-state="locked"] .dh-noche { animation: dh-intro-noche 2300ms cubic-bezier(0.45, 0, 0.25, 1) 250ms backwards; }
#gate[data-gate-state="locked"] .dh-bosque__ventanas { animation: dh-intro-ventanas 900ms linear 1250ms backwards; }
#gate[data-gate-state="locked"] .dh-foco { animation: dh-intro-foco 1500ms cubic-bezier(0.3, 0, 0.2, 1) 1500ms backwards; }
#gate[data-gate-state="locked"] .dh-haz { animation: dh-intro-aparece 1100ms ease-out 2200ms backwards; }
#gate[data-gate-state="locked"] .dh-campana__plato { animation: dh-intro-sube 700ms ease-out 1850ms backwards; }
#gate[data-gate-state="locked"] .dh-campana__vidrio { animation: dh-intro-vidrio 900ms cubic-bezier(0.3, 0, 0.2, 1) 1950ms backwards; }
#gate[data-gate-state="locked"] .dh-campana__tinta { animation: dh-intro-crece 1150ms cubic-bezier(0.4, 0, 0.2, 1) 2750ms backwards; }
#gate[data-gate-state="locked"] .dh-campana__aura {
  animation: dh-intro-aparece 900ms ease-out 3500ms backwards, dh-aura 4.2s ease-in-out 3500ms infinite alternate;
}
#gate[data-gate-state="locked"] .dh-campana__toque { animation: dh-intro-activa 1ms linear 3200ms backwards; }
#gate[data-gate-state="locked"] .kc-eyebrow { animation: dh-intro-tracking 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) 500ms backwards; }
#gate[data-gate-state="locked"] .kc-gate__name {
  animation: dh-intro-escribe 1300ms cubic-bezier(0.5, 0, 0.3, 1) 900ms backwards, dh-intro-brillo 1500ms ease-in-out 1900ms backwards,
    dh-brillo-nombre 7s ease-in-out 5s infinite;
}
#gate[data-gate-state="locked"] .dh-gate__filete path { animation: dh-intro-traza 900ms ease-out 1900ms backwards; }
#gate[data-gate-state="locked"] .dh-gate__segundo { animation: dh-intro-tracking 1000ms cubic-bezier(0.2, 0.7, 0.2, 1) 2100ms backwards; }
#gate[data-gate-state="locked"] .dh-toque { animation: dh-intro-aparece 800ms ease-out 3900ms backwards; }
#gate[data-gate-state="locked"] .dh-toque__texto { animation: dh-intro-sube 800ms ease-out 3900ms backwards; }
#gate[data-gate-state="locked"] .dh-toque__guia path { animation: dh-intro-traza 800ms ease-out 4200ms backwards; }
.dh-toque__guia path { stroke-dasharray: 1; }
.dh-toque__guia path:first-child { stroke-dasharray: none; }

/* ── Reposo ────────────────────────────────────────────── */
@keyframes dh-respira { to { scale: 1.022; } }
@keyframes dh-aura { from { scale: 0.97; filter: brightness(0.85); } to { scale: 1.04; filter: brightness(1.15); } }
@keyframes dh-reflejo { from { opacity: 0.45; translate: 0 6px; } to { opacity: 1; translate: 0 -10px; } }
@keyframes dh-llama { 0% { opacity: 0.9; scale: 0.45; } 100% { opacity: 0; scale: 1.45; } }
@keyframes dh-llamado { 0%, 100% { opacity: 0; } 45% { opacity: 1; } }
@keyframes dh-brillo-nombre { 0%, 70% { background-position: 100% 0; } 100% { background-position: 0% 0; } }

@keyframes dh-intro-noche { from { transform: translateY(0); } }
@keyframes dh-intro-ventanas { 0% { opacity: 0; } 30% { opacity: 0.85; } 42% { opacity: 0.3; } 60% { opacity: 1; } 75% { opacity: 0.7; } }
@keyframes dh-intro-foco { from { opacity: 0; transform: scale(1.5); } }
@keyframes dh-intro-aparece { from { opacity: 0; } }
@keyframes dh-intro-sube { from { opacity: 0; translate: 0 10px; } }
@keyframes dh-intro-vidrio { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { clip-path: inset(-60%); } }
@keyframes dh-intro-crece {
  from { clip-path: inset(100% -10% -5% -10%); filter: drop-shadow(0 0 9px rgba(246, 196, 166, 0.95)); }
  to { clip-path: inset(-10% -10% -5% -10%); }
}
@keyframes dh-intro-activa { from { visibility: hidden; } }
@keyframes dh-intro-tracking { from { opacity: 0; letter-spacing: 1.2em; filter: blur(5px); } }
@keyframes dh-intro-escribe {
  from { clip-path: inset(-30% 100% -30% -15%); }
  to { clip-path: inset(-30% -15% -30% -15%); }
}
@keyframes dh-intro-brillo { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@keyframes dh-intro-traza { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ══ BREAK THE SPELL · t0 = data-gate-state="opening" ═════════════════════════ */
#gate.kc-gate[data-gate-state="opening"] {
  opacity: 1;
  transition: none;
  touch-action: none;
  animation: dh-reloj 5400ms linear both;
}
#gate[data-gate-state="opening"]::before { animation: dh-apaga 700ms var(--dh-ease-light) 3200ms both; }
#gate[data-gate-state="opening"] .kc-gate__body { animation: dh-apaga 320ms ease-out both; }
#gate[data-gate-state="opening"] .dh-velo { animation: dh-apaga 900ms ease-out 200ms both; }
#gate[data-gate-state="opening"] .dh-noche { visibility: hidden; }
#gate[data-gate-state="opening"] .dh-llamada { animation: none; opacity: 0; }
#gate[data-gate-state="opening"] .dh-haz { animation: dh-fuera 500ms ease-out 850ms forwards; }
#gate[data-gate-state="opening"] .dh-foco { animation: dh-fuera 900ms var(--dh-ease-light) 1400ms forwards; }

/* T1 · contacto: el pulso viaja del dedo al vidrio */
#gate[data-gate-state="opening"] .dh-pulso { animation: dh-pulso 420ms var(--dh-ease-light) both; }
#gate[data-gate-state="opening"] .dh-campana__aura { animation: dh-aura-rompe 2600ms var(--dh-ease-light) both; }
/* T2 · tensión: grietas con ramas desde el impacto, un brillo corre por ellas, el vidrio tiembla dos veces */
#gate[data-gate-state="opening"] .dh-grieta {
  animation: dh-grieta 380ms var(--dh-ease-glass) calc(260ms + var(--d)) both, dh-fuera 110ms linear 930ms forwards;
}
#gate[data-gate-state="opening"] .dh-grieta-brillo {
  animation: dh-brillo-corre 420ms ease-in calc(260ms + var(--d)) both, dh-fuera 80ms linear 900ms forwards;
}
#gate[data-gate-state="opening"] .dh-campana__vidrio { animation: dh-tension 300ms steps(3, end) 560ms both; }
/* T3 · se rompe: onda, destello, esquirlas que giran con filo de luz y unas astillas */
#gate[data-gate-state="opening"] .dh-vidrio-entero { animation: dh-apaga 1ms linear 900ms both; }
#gate[data-gate-state="opening"] :is(.dh-esquirlas, .dh-astillas) { animation: dh-aparece 1ms linear 899ms both; }
#gate[data-gate-state="opening"] .dh-esquirla--dentro { animation: dh-esquirla var(--dur) cubic-bezier(0.12, 0.7, 0.35, 1) calc(900ms + var(--d)) both; }
#gate[data-gate-state="opening"] .dh-esquirla--fuera { animation: dh-esquirla var(--dur) cubic-bezier(0.3, 0.35, 0.6, 1) calc(900ms + var(--d)) both; }
#gate[data-gate-state="opening"] .dh-esquirla__filo { animation: dh-filo 700ms linear 900ms both; }
#gate[data-gate-state="opening"] .dh-astilla { animation: dh-astilla 430ms cubic-bezier(0.1, 0.8, 0.3, 1) calc(900ms + var(--d)) both; }
#gate[data-gate-state="opening"] .dh-impacto { animation: dh-impacto 520ms var(--dh-ease-glass) 880ms both; }
#gate[data-gate-state="opening"] .dh-destello { animation: dh-destello 420ms var(--dh-ease-light) 880ms both; }
/* T4 · la rosa vive: el mismo dibujo se llena de color desde la flor y sube apenas */
#gate[data-gate-state="opening"] .dh-campana__viva { animation: dh-florece 900ms var(--dh-ease-light) 1050ms both; }
#gate[data-gate-state="opening"] .dh-campana__tinta { animation: dh-fuera 550ms ease-out 1350ms forwards; }
#gate[data-gate-state="opening"] .dh-rosa { animation: dh-eleva 1100ms var(--dh-ease-light) 1050ms both; }
/* T5 · amanece: la noche se levanta desde la rosa (sin JS: fundido de respaldo; con JS el lienzo lo hace desde la rosa) */
#gate[data-gate-state="opening"] .dh-bosque__alba { visibility: visible; }
#gate[data-gate-state="opening"] .dh-alba-luz { animation: dh-alba-luz 1400ms var(--dh-ease-light) 1300ms both; }
#gate[data-gate-state="opening"] .dh-bosque__ventanas { animation: dh-fuera 450ms ease-out 2050ms forwards; }
#gate[data-gate-state="opening"] .dh-bosque {
  animation: dh-respira 14s ease-in-out infinite alternate, dh-camara-bosque 900ms var(--dh-ease-camera) 3100ms both, dh-fuera 1ms linear 4050ms forwards, dh-se-va 1ms linear 4060ms forwards;
}
html:not(.dh-vivo) #gate[data-gate-state="opening"] .dh-bosque__color,
#gate.dh-sin-lienzo-bosque[data-gate-state="opening"] .dh-bosque__color { animation: dh-amanece 1300ms var(--dh-ease-light) 1400ms both; }
#gate.dh-lavando .dh-bosque__color { visibility: hidden; }
#gate.dh-lavando .dh-bosque__lienzo { visibility: visible; }
#gate.dh-bosque-hecho .dh-bosque__lienzo { visibility: hidden; }
/* T6 · umbral: la puerta del castillo se dibuja; adentro la noche se vuelve luz de vela, nunca blanco */
#gate[data-gate-state="opening"] .dh-puerta { animation: dh-aparece 1ms linear 2400ms both, dh-apaga 1ms linear 4000ms both; }
#gate[data-gate-state="opening"] .dh-puerta__tinta path { animation: dh-traza 650ms var(--dh-ease-light) 2400ms both; }
#gate[data-gate-state="opening"] .dh-puerta__tinta path:nth-child(2n) { animation-delay: 2520ms; }
#gate[data-gate-state="opening"] .dh-puerta__oro path { animation: dh-oro 420ms ease-out 2900ms both; }
#gate[data-gate-state="opening"] .dh-umbral {
  animation:
    dh-aparece 1ms linear 2480ms both,
    dh-umbral-abre 900ms var(--dh-ease-camera) 3100ms both,
    dh-sin-recorte 1ms linear 4010ms forwards,
    dh-empuje 800ms var(--dh-ease-camera) 4500ms both;
}
#gate[data-gate-state="opening"] .dh-umbral__luz { animation: dh-luz 950ms var(--dh-ease-light) 2550ms both; }
#gate[data-gate-state="opening"] .dh-umbral__noche { animation: dh-apaga 400ms var(--dh-ease-light) 3050ms both; }
#gate[data-gate-state="opening"] .dh-puerta__halo { animation: dh-luz 800ms var(--dh-ease-light) 2650ms both; }
/* T7 · cámara: atravesamos la puerta */
#gate[data-gate-state="opening"] .dh-puerta__marco { animation: dh-puerta-pasa 900ms var(--dh-ease-camera) 3100ms both; }
#gate[data-gate-state="opening"] .dh-frente { animation: dh-frente-pasa 650ms var(--dh-ease-camera) 3080ms both, dh-se-va 1ms linear 3740ms forwards; }
#gate[data-gate-state="opening"] .dh-salon { animation: dh-salon-llega 1000ms var(--dh-ease-camera) 3000ms both; }
/* T8 · las velas encienden el salón: la penumbra se levanta desde los candelabros */
#gate[data-gate-state="opening"] .dh-salon__vela { animation: dh-vela 900ms var(--dh-ease-light) 3350ms both; }
#gate[data-gate-state="opening"] .dh-salon__penumbra { animation: dh-fuera 700ms var(--dh-ease-light) 3550ms both; }
/* T9 · el retrato aparece en la pared y un brillo lo recorre */
html.dh-vivo #gate[data-gate-state="opening"] .dh-retrato {
  animation: dh-retrato-aparece 450ms var(--dh-ease-light) 3950ms both, dh-retrato-llega 800ms var(--dh-ease-camera) 4500ms both;
}
html.dh-vivo #gate[data-gate-state="opening"] .dh-retrato .dh-frame::after { animation: dh-brillo 700ms ease-in-out 4150ms both; }
/* T10 · relevo: la cámara se acerca, cae el velo del hero y el gate se funde sobre su mismo cuadro */
#gate[data-gate-state="opening"] .dh-sala-velo { animation: dh-aparece-suave 600ms var(--dh-ease-light) 4550ms both; }
#gate[data-gate-state="opening"] .dh-stage { animation: dh-fuera 300ms linear 5000ms forwards; }
#gate[data-gate-state="opening"] ~ #invitation-content .dh-hero-frame,
#gate[data-gate-state="locked"] ~ #invitation-content .dh-hero-frame { visibility: hidden; }
#gate[data-gate-state="opening"] ~ #invitation-content #hero :is(.kc-eyebrow, h1, .kc-hero__date, .kc-hero__place) {
  animation: dh-sube 300ms var(--dh-ease-light) both;
}
#gate[data-gate-state="opening"] ~ #invitation-content #hero .kc-eyebrow { animation-delay: 5000ms; }
#gate[data-gate-state="opening"] ~ #invitation-content #hero h1.kc-hero__title { animation-delay: 5020ms; }
#gate[data-gate-state="opening"] ~ #invitation-content #hero .kc-hero__date { animation-delay: 5040ms; }
#gate[data-gate-state="opening"] ~ #invitation-content #hero .kc-hero__place { animation-delay: 5060ms; }

@keyframes dh-reloj {
  0% { background-color: var(--dh-night-deep); }
  68% { background-color: var(--dh-night-deep); }
  80% { background-color: #2A1219; }
  83.2% { background-color: #2A1219; }
  83.3%, 100% { background-color: rgba(42, 18, 25, 0); }
}
@keyframes dh-apaga { to { opacity: 0; } }
@keyframes dh-fuera { from { opacity: 1; } to { opacity: 0; } }
@keyframes dh-se-va { to { visibility: hidden; } }
@keyframes dh-sin-recorte { to { clip-path: none; } }
@keyframes dh-aparece { from { visibility: hidden; } to { visibility: visible; } }
@keyframes dh-aparece-suave { from { opacity: 0; } to { opacity: 1; } }
@keyframes dh-pulso {
  0% { opacity: 0; translate: 0 0; scale: 0.4; }
  20% { opacity: 1; }
  100% { opacity: 0; translate: var(--dh-hit-dx, 0px) var(--dh-hit-dy, 0px); scale: 2.2; }
}
@keyframes dh-impacto { 0% { opacity: 0.95; scale: 0.2; } 100% { opacity: 0; scale: 3.4; } }
@keyframes dh-aura-rompe {
  0% { filter: none; }
  12% { filter: brightness(1.7); }
  45% { filter: brightness(1.25); }
  80% { filter: brightness(1.5); }
  100% { filter: brightness(1.5); }
}
@keyframes dh-grieta { 0% { opacity: 1; stroke-dashoffset: 1; } 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes dh-brillo-corre { 0% { opacity: 1; stroke-dashoffset: 0.07; } 100% { opacity: 1; stroke-dashoffset: -1.15; } }
@keyframes dh-tension {
  0% { translate: 1.4px 0; }
  33% { translate: -1.4px 0.7px; }
  66% { translate: 0.9px -0.5px; }
  100% { translate: 0 0; }
}
@keyframes dh-esquirla {
  0% { transform: none; opacity: 1; }
  22% { transform: translate(calc(var(--dx) * 0.5), calc(var(--dy) * 0.1)) rotate(calc(var(--rot) * 0.3)) scale(1, 1); opacity: 1; }
  55% { transform: translate(calc(var(--dx) * 0.8), calc(var(--dy) * 0.45)) rotate(calc(var(--rot) * 0.7)) scale(var(--sx), 1); opacity: 0.92; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(calc(var(--sx) * -1.6), 1); opacity: 0; }
}
@keyframes dh-filo { 0% { opacity: 0; } 18% { opacity: 0.95; } 38% { opacity: 0.15; } 58% { opacity: 0.8; } 100% { opacity: 0; } }
@keyframes dh-astilla {
  0% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.4); }
}
@keyframes dh-destello { 0% { opacity: 0; scale: 0.5; } 18% { opacity: 0.95; } 100% { opacity: 0; scale: 1.15; } }
@keyframes dh-florece {
  0% { opacity: 0; clip-path: circle(0% at 48.6% 25.9%); }
  12% { opacity: 1; }
  100% { opacity: 1; clip-path: circle(150% at 48.6% 25.9%); }
}
@keyframes dh-eleva { 0% { translate: 0 0; } 100% { translate: 0 -1.8%; } }
@keyframes dh-amanece { from { opacity: 1; } to { opacity: 0; } }
@keyframes dh-alba-luz { 0% { opacity: 0; transform: scale(0.2); } 35% { opacity: 0.8; } 100% { opacity: 0; transform: scale(3); } }
@keyframes dh-camara-bosque { from { transform: none; } to { transform: scale(1.12); } }
@keyframes dh-traza { to { stroke-dashoffset: 0; } }
@keyframes dh-oro { to { opacity: 0.9; } }
@keyframes dh-luz { 0% { opacity: 0; } 35% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dh-vela { 0% { opacity: 0; } 55% { opacity: 1; } 100% { opacity: 0.6; } }
@keyframes dh-umbral-abre {
  from { clip-path: inset(28.94% 42.61% 62.99% 48.44% round 9999px 9999px 0 0); }
  to { clip-path: inset(-30.77% -39.48% -30.69% -39.62% round 9999px 9999px 0 0); }
}
@keyframes dh-puerta-pasa { from { transform: none; } to { transform: translate(-18.33%, 148.67%) scale(20); } }
@keyframes dh-frente-pasa {
  from { transform: none; opacity: 1; }
  to { transform: translateY(9%) scale(1.9); opacity: 0; }
}
.dh-frente { transform-origin: 52.4% 56%; }
@keyframes dh-salon-llega { from { transform: scale(1.25); } to { transform: none; } }
@keyframes dh-retrato-aparece { from { opacity: 0; filter: brightness(0.55); } to { opacity: 1; filter: none; } }
@keyframes dh-brillo { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@keyframes dh-empuje {
  from { transform: translate(0px, 0px) scale(1); }
  to { transform: translate(var(--dh-push-x, 0px), var(--dh-push-y, 0px)) scale(var(--dh-push-s, 1)); }
}
@keyframes dh-retrato-llega { to { transform: translate(0px, 0px) scale(1); } }
@keyframes dh-sube { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }

/* ── Movimiento reducido: sin entrada ni loops (el estado base ya es el final); el core abre al instante ── */
@media (prefers-reduced-motion: reduce) {
  #gate[data-gate-state="locked"] *,
  #gate[data-gate-state="locked"]::before { animation: none !important; }
  body.is-gate-open .dh-hero-frame { animation: dh-aparece-suave 320ms ease-out both; }
}