/* Estados base del motor de animación. Relacionado: plantillas/comun/movimiento.js */
:root {
  --m-curva: cubic-bezier(.16, 1, .3, 1);
  interpolate-size: allow-keywords;
  --m-grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mov [data-m-entra] {
  transition: opacity 1s var(--m-curva), translate 1.1s var(--m-curva), scale 1.2s var(--m-curva), filter 1.1s var(--m-curva), clip-path 1.3s var(--m-curva), transform .45s var(--m-curva), box-shadow .45s var(--m-curva), background-color .3s, border-color .3s, flex-grow .6s var(--m-curva);
  transition-delay: calc(var(--m-i, 0) * 75ms);
}
.mov [data-m-entra].m-listo { transition-delay: 0s; }

.mov [data-m-entra]:not(.m-visible) { opacity: 0; }
.mov [data-m-entra="enfoque"]:not(.m-visible) { filter: blur(16px); scale: 1.07; }
.mov [data-m-entra="zoom"]:not(.m-visible) { scale: .8; }
.mov [data-m-entra="sube"]:not(.m-visible) { translate: 0 54px; }
.mov [data-m-entra="izq"]:not(.m-visible) { translate: -80px 0; filter: blur(8px); }
.mov [data-m-entra="der"]:not(.m-visible) { translate: 80px 0; filter: blur(8px); }
.mov [data-m-entra="cortina"]:not(.m-visible) { opacity: 1; clip-path: inset(22% 14% 22% 14% round 44px); scale: 1.08; }
.mov [data-m-entra="cortina"].m-visible { clip-path: inset(0 0 0 0 round 28px); }
.mov [data-m-entra="cortina"].m-listo { clip-path: none; }

.m-palabra { display: inline-block; }
.mov [data-m-texto] .m-palabra { transition: opacity .9s var(--m-curva), translate 1.1s var(--m-curva), filter 1s var(--m-curva), rotate 1.1s var(--m-curva); transition-delay: calc(var(--m-base, 0s) + var(--m-i, 0) * 60ms); }
.mov [data-m-texto]:not(.m-visible) .m-palabra { opacity: 0; translate: 0 .55em; rotate: 4deg; filter: blur(12px); }

.m-letra { display: inline-block; transform-origin: 50% 100%; will-change: translate; }

[data-m-tilt] { position: relative; transform: perspective(1100px) rotateX(var(--m-rx, 0deg)) rotateY(var(--m-ry, 0deg)); }
[data-m-tilt]::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: radial-gradient(380px circle at var(--m-x, 50%) var(--m-y, 50%), var(--m-luz, rgba(255, 255, 255, .28)), transparent 62%); opacity: 0; pointer-events: none; transition: opacity .4s; }
[data-m-tilt].m-tilt-activo::before { opacity: 1; }

[data-m-iman] { transition: translate .35s var(--m-curva), transform .3s var(--m-curva), box-shadow .3s var(--m-curva), background-color .25s, color .25s; }

.m-anillo { position: fixed; left: -19px; top: -19px; z-index: 90; width: 38px; height: 38px; border: 1.5px solid #fff; border-radius: 50%; mix-blend-mode: difference; pointer-events: none; }
.m-anillo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff; scale: 0; transition: scale .4s var(--m-curva); }
.m-anillo--enlace::after { scale: 1.5; }

/* Acordeones fluidos en navegadores compatibles */
details::details-content { height: 0; overflow: clip; opacity: 0; transition: height .55s var(--m-curva), opacity .4s, content-visibility .55s allow-discrete; }
details[open]::details-content { height: auto; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  details::details-content { height: auto; opacity: 1; }
}
