/* ============================================================
   MEJORA A · CINE
   Capa de animación sobre la web actual. No cambia el diseño:
   le añade ritmo de película.
   ============================================================ */

/* titular: las letras suben desde una máscara */
#h1 .wd{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .16em;margin:0 -.08em -.16em}
#h1 .ch{display:inline-block;transform:translateY(110%);transition:transform 1s var(--ease-out);transition-delay:calc(var(--i) * 26ms + 80ms)}
#h1.in .ch{transform:none}
#tag{transition:opacity .75s ease,transform .75s var(--ease-out)}
#home:not(.go) #tag{opacity:0;transform:translateY(10px)}

/* índice y filtros entran en cascada */
#home.go .R .idx a{animation:fxIx .8s var(--ease-out) backwards;animation-delay:calc(var(--i) * 45ms + 350ms)}
#home.go .fl button{animation:fxIx .6s var(--ease-out) backwards;animation-delay:calc(var(--i) * 40ms + 250ms)}
@keyframes fxIx{from{opacity:0;transform:translateX(26px)}}

/* columna: versión «inclinación» (anterior) */
#col{transform-origin:50% 50%}
/* columna: versión «parallax» — la foto es un 18 % más alta que su marco y se desliza dentro */
#col.fx-px .t .mo{inset:-9% 0;will-change:transform}


/* vídeo al pasar por la miniatura */
.t .lp{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease;pointer-events:none}
.t.vid .lp{opacity:1}
.t .rec{position:absolute;top:12px;left:12px;z-index:4;display:flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:999px;background:var(--scrim);color:#fff;font:400 11px/1 var(--tf);letter-spacing:.06em;text-transform:uppercase;opacity:0;transform:translateY(-4px);transition:opacity .3s ease,transform .3s var(--ease-out)}
.t .rec:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ac);animation:fxBlink 1s steps(1) infinite}
.t.vid .rec{opacity:1;transform:none}
@keyframes fxBlink{50%{opacity:.2}}

/* transición: la miniatura se convierte en la cabecera del caso */
.fx-clone{position:fixed;z-index:97;background:#111 center/cover no-repeat;pointer-events:none;will-change:left,top,width,height}
body.fx-flying .rphero .vwrap{visibility:hidden}

/* imágenes de los casos: se descubren de abajo arriba */
.wp-a{clip-path:inset(100% 0 0 0);transition:clip-path 1.15s var(--ease-io),opacity 1.05s var(--ease-out) .12s,transform 1.05s var(--ease-out) .12s}
.wp-a.wp-in{clip-path:inset(0 0 0 0)}

/* títulos de sección: suben desde una máscara */
.rpsec.rv .cnt h2{clip-path:inset(0 0 100% 0);transform:translateY(.5em);transition:clip-path .9s var(--ease-out) .18s,transform .9s var(--ease-out) .18s}
.rpsec.rv.in .cnt h2{clip-path:inset(-10% 0 -25% 0);transform:none}
.rpsec .num{transition:color .6s ease}
.rpsec.rv.in .num{color:var(--ac)}

/* cursor con etiqueta */
#fxcl{position:fixed;left:0;top:0;z-index:120;pointer-events:none;padding:7px 13px 8px;border-radius:999px;background:var(--tx);color:var(--bg);
  font:400 13px/1 var(--tf);font-style:italic;white-space:nowrap;opacity:0;scale:.6;transition:opacity .2s ease,scale .25s var(--ease-out)}
#fxcl.on{opacity:1;scale:1}

@media(prefers-reduced-motion:reduce){
  #h1 .ch{transform:none;transition:none}
  #home.go .R .idx a,#home.go .fl button{animation:none}
  .wp-a{clip-path:none}
  .rpsec.rv .cnt h2{clip-path:none;transform:none}
}