/* ===== efectos visuales compartidos (estilo Unseen) ===== */
/* grano de película sobre toda la página */
body::after{
  content:""; position:fixed; inset:-120px; z-index:3; pointer-events:none; opacity:.38;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.52'/%3E%3C/svg%3E");
  animation:grano 700ms steps(1) infinite; mix-blend-mode:overlay;
}
@keyframes grano{
  0%{transform:translate(0,0)}      25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}  75%{transform:translate(-2%,-2%)}
  100%{transform:translate(3%,1%)}
}
/* luz ambiental fija: tiñe la ventana entera de un cálido muy leve.
   NO sigue al cursor (retirado a pedido del usuario). */
#luz-global{
  position:fixed; inset:-25vmax; z-index:2; pointer-events:none; opacity:0;
  mix-blend-mode:screen;
  opacity:.85;                                          /* ambiente visible en toda la ventana */
  background:
    radial-gradient(760px circle at 16% 14%,  rgba(255,110,30,.13), transparent 68%),
    radial-gradient(700px circle at 84% 45%, rgba(255,150,60,.10), transparent 66%),
    radial-gradient(900px circle at 32% 88%, rgba(255,120,40,.12), transparent 70%);
}
#luz-global{animation:respira 16s ease-in-out infinite alternate}
@keyframes respira{from{transform:translate(-3vw,-2vh)}to{transform:translate(3vw,3vh)}}

@keyframes pasea{            /* las variables CSS no animan: se mueve la capa entera */
  0%{transform:translate(-14vw,-10vh)}
  50%{transform:translate(10vw,6vh)}
  100%{transform:translate(-4vw,14vh)}
}
.hero .env, #puerta .caja{position:relative; z-index:1}
/* entrada escalonada */
.sube{opacity:0; transform:translateY(22px); animation:sube .9s cubic-bezier(.16,.8,.3,1) forwards}
.sube:nth-child(1){animation-delay:.05s} .sube:nth-child(2){animation-delay:.16s}
.sube:nth-child(3){animation-delay:.27s} .sube:nth-child(4){animation-delay:.38s}
.sube:nth-child(5){animation-delay:.49s} .sube:nth-child(n+6){animation-delay:.56s}
@keyframes sube{to{opacity:1; transform:none}}
/* títulos que entran palabra a palabra */
.palabra{display:inline-block; overflow:hidden; vertical-align:top}
.palabra > span, .palabra > .deg{display:inline-block; transform:translateY(105%);
  animation:palabra .85s cubic-bezier(.16,.85,.3,1) forwards}
@keyframes palabra{to{transform:none}}
/* bloques que aparecen encadenados (fichas, tarjetas de evento) */
.persona, .evento{animation:aparece .6s cubic-bezier(.16,.8,.3,1) backwards}
@keyframes aparece{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}
.persona:nth-child(1),.evento:nth-child(1){animation-delay:.04s}
.persona:nth-child(2),.evento:nth-child(2){animation-delay:.12s}
.persona:nth-child(3),.evento:nth-child(3){animation-delay:.2s}
.persona:nth-child(4){animation-delay:.26s} .persona:nth-child(5){animation-delay:.32s}
.persona:nth-child(6){animation-delay:.38s} .persona:nth-child(7){animation-delay:.44s}
.persona:nth-child(n+8){animation-delay:.5s}
.btn{will-change:transform}
@media (prefers-reduced-motion:reduce){
  body::after{animation:none}
  .sube,.palabra > span,.palabra > .deg,.persona,.evento{animation:none; opacity:1; transform:none}
}