/* =========================================================
   ANIMA · estilos de la mini librería de animaciones
   Estado inicial = fuera de pantalla.  .is-in = visible.
   Al salir se desvanece rápido (0.6s, sin retraso);
   al entrar usa --dur, --d y --ease.
   ========================================================= */
[data-anim] {
  --d: 0ms;
  --dur: 1200ms;
  --stg: 45ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --sal: 600ms;
  transition-property: opacity, transform, filter, clip-path, letter-spacing;
  transition-duration: var(--sal);
  transition-timing-function: ease;
  transition-delay: 0ms;
}
.is-in [data-anim]:not([data-anim-propio]),
[data-anim].is-in {
  transition-duration: var(--dur);
  transition-timing-function: var(--ease);
  transition-delay: var(--d);
}

/* ---------- Básicas ---------- */
[data-anim="fade"],
[data-anim="fade-up"], [data-anim="fade-down"],
[data-anim="fade-left"], [data-anim="fade-right"],
[data-anim="zoom-in"], [data-anim="zoom-out"],
[data-anim="blur-in"], [data-anim="pop"], [data-anim="tracking"] { opacity: 0; }

[data-anim="fade-up"]    { transform: translateY(28px); }
[data-anim="fade-down"]  { transform: translateY(-28px); }
[data-anim="fade-left"]  { transform: translateX(-34px); }
[data-anim="fade-right"] { transform: translateX(34px); }
[data-anim="zoom-in"]    { transform: scale(.82); filter: blur(6px); }
[data-anim="zoom-out"]   { transform: scale(1.18); filter: blur(6px); }
[data-anim="blur-in"]    { filter: blur(14px); }
[data-anim="pop"]        { transform: scale(0); --ease: cubic-bezier(.34, 1.56, .64, 1); }
[data-anim="tracking"]   { letter-spacing: var(--ls-desde, .9em); filter: blur(4px); }

:is(.is-in [data-anim]:not([data-anim-propio]), [data-anim].is-in):is(
  [data-anim="fade"], [data-anim="fade-up"], [data-anim="fade-down"],
  [data-anim="fade-left"], [data-anim="fade-right"], [data-anim="zoom-in"],
  [data-anim="zoom-out"], [data-anim="blur-in"], [data-anim="pop"], [data-anim="tracking"]) {
  opacity: 1;
  transform: none;
  filter: none;
}
:is(.is-in [data-anim="tracking"]:not([data-anim-propio]), [data-anim="tracking"].is-in) { letter-spacing: var(--ls, normal); }

/* ---------- Líneas y cortinas ---------- */
[data-anim="line"] { transform: scaleX(0); transform-origin: center; }
[data-anim="line"][data-origin="left"]  { transform-origin: left; }
[data-anim="line"][data-origin="right"] { transform-origin: right; }
:is(.is-in [data-anim="line"]:not([data-anim-propio]), [data-anim="line"].is-in) { transform: scaleX(1); }
[data-anim="line-y"] { transform: scaleY(0); transform-origin: top; }
:is(.is-in [data-anim="line-y"]:not([data-anim-propio]), [data-anim="line-y"].is-in) { transform: scaleY(1); }

[data-anim="reveal"]   { clip-path: inset(0 0 100% 0); }
[data-anim="reveal-x"] { clip-path: inset(0 100% 0 0); }
:is(.is-in [data-anim]:not([data-anim-propio]), [data-anim].is-in):is([data-anim="reveal"], [data-anim="reveal-x"]) { clip-path: inset(0 0 0 0); }

/* ---------- Letras / palabras ---------- */
[data-anim="letters"], [data-anim="words"] { transition: none; }
[data-anim="letters"] .a-pieza,
[data-anim="words"] .a-pieza {
  display: inline-block;
  opacity: 0;
  transform: translateY(.45em) rotateX(40deg);
  filter: blur(5px);
  transition: opacity var(--sal) ease, transform var(--sal) ease, filter var(--sal) ease;
}
:is(.is-in [data-anim]:not([data-anim-propio]), [data-anim].is-in):is([data-anim="letters"], [data-anim="words"]) .a-pieza {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), filter var(--dur) var(--ease);
  transition-delay: calc(var(--d) + var(--i) * var(--stg));
}

/* ---------- Trazos SVG ---------- */
[data-anim="draw"] { transition: none; }
[data-anim="draw"] .a-trazo, .a-trazo[data-anim="draw"] {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  transition: stroke-dashoffset var(--sal) ease;
}
:is(.is-in [data-anim="draw"]:not([data-anim-propio]), [data-anim="draw"].is-in) .a-trazo,
.is-in .a-trazo[data-anim="draw"] {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--dur) cubic-bezier(.45, .05, .35, 1) calc(var(--d) + var(--i) * var(--stg, 0ms));
}

/* ---------- Manuscrito ---------- */
[data-anim="write"] { transition: none; display: flex; justify-content: center; }
/* El tamaño lo define font-size (1em = altura de la fuente); con data-ajuste="ancho" ocupa el ancho del contenedor */
[data-anim="write"] svg { height: auto; display: block; overflow: visible; flex: none; }
[data-anim="write"][data-ajuste="ancho"] svg { width: 100%; }
[data-anim="write"] path {
  fill-opacity: 0;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  transition: stroke-dashoffset var(--sal) ease, fill-opacity var(--sal) ease;
}
:is(.is-in [data-anim="write"]:not([data-anim-propio]), [data-anim="write"].is-in) path {
  stroke-dashoffset: 0;
  fill-opacity: 1;
  transition:
    stroke-dashoffset var(--pdur) cubic-bezier(.45, .05, .35, 1) calc(var(--d) + var(--pd)),
    fill-opacity 800ms ease-out calc(var(--d) + var(--pd) + var(--pdur) * .55);
}
[data-anim="write"].anima-respaldo {
  font-family: "Great Vibes", cursive;
  opacity: 0; transition: opacity var(--sal) ease;
}
:is(.is-in [data-anim="write"]:not([data-anim-propio]), [data-anim="write"].is-in).anima-respaldo {
  opacity: 1; transition: opacity var(--dur) ease var(--d);
}

/* ---------- Fondos: Ken Burns ---------- */
[data-anim="ken-burns"] {
  --dur: 2600ms;
  opacity: 0;
  transform: scale(1.14);
  filter: blur(8px);
}
:is(.is-in [data-anim="ken-burns"]:not([data-anim-propio]), [data-anim="ken-burns"].is-in) {
  opacity: 1;
  transform: scale(1.02);
  filter: none;
}
[data-anim="ken-burns"] > img { animation: anima-deriva 26s ease-in-out infinite alternate; animation-play-state: paused; }
:is(.is-in [data-anim="ken-burns"]:not([data-anim-propio]), [data-anim="ken-burns"].is-in) > img { animation-play-state: running; }
@keyframes anima-deriva {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.08) translate(-1.2%, -1.5%); }
}

/* ---------- Utilidades ---------- */
.a-titilar { animation: anima-titilar var(--t, 2.6s) ease-in-out var(--td, 0s) infinite; }
@keyframes anima-titilar {
  0%, 100% { opacity: 1; }
  45%      { opacity: .35; }
  55%      { opacity: .5; }
}
.a-flotar { animation: anima-flotar 3.5s ease-in-out infinite; }
@keyframes anima-flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* ---------- Ambiente: movimiento constante y suave ----------
   Clases: a-latir · a-oscilar · a-inclinar · a-rebotar · a-flotar-suave · a-brillo
   Solo corren mientras su sección está en pantalla (.is-in).
   Usan scale / rotate / translate (propiedades independientes), así que se
   suman a la animación de entrada sin pisarla.
   Variables: --amb-t (duración), --amb-d (espera inicial), --amb-origen        */
:is(.a-latir, .a-oscilar, .a-inclinar, .a-rebotar, .a-flotar-suave, .a-brillo) {
  transform-origin: var(--amb-origen, 50% 50%);
  transform-box: fill-box;
}
.is-in .a-latir         { animation: amb-latir     var(--amb-t, 2.8s) ease-in-out var(--amb-d, 3s) infinite; }
.is-in .a-oscilar       { animation: amb-oscilar   var(--amb-t, 3.6s) ease-in-out var(--amb-d, 3s) infinite; --amb-origen: 50% 0%; }
.is-in .a-inclinar      { animation: amb-inclinar  var(--amb-t, 4s)   ease-in-out var(--amb-d, 3s) infinite; }
.is-in .a-rebotar       { animation: amb-rebotar   var(--amb-t, 2.2s) ease-in-out var(--amb-d, 3s) infinite; }
.is-in .a-flotar-suave  { animation: amb-flotar    var(--amb-t, 5s)   ease-in-out var(--amb-d, 3s) infinite; }
.is-in .a-brillo        { animation: amb-brillo    var(--amb-t, 3.2s) ease-in-out var(--amb-d, 3s) infinite; }

@keyframes amb-latir    { 0%, 100% { scale: 1; } 50% { scale: var(--amb-escala, 1.06); } }
@keyframes amb-oscilar  { 0%, 100% { rotate: calc(var(--amb-giro, 7deg) * -1); } 50% { rotate: var(--amb-giro, 7deg); } }
@keyframes amb-inclinar { 0%, 60%, 100% { rotate: 0deg; } 70% { rotate: -9deg; } 80% { rotate: 7deg; } 90% { rotate: -3deg; } }
@keyframes amb-rebotar  { 0%, 100% { translate: 0 0; } 45% { translate: 0 -14%; } 60% { translate: 0 0; } 70% { translate: 0 -5%; } }
@keyframes amb-flotar   { 0%, 100% { translate: 0 0; rotate: -1.5deg; } 50% { translate: 0 -4%; rotate: 1.5deg; } }
@keyframes amb-brillo   {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(233, 200, 120, 0)); }
  50%      { filter: drop-shadow(0 0 7px rgba(233, 200, 120, .85)); }
}

/* Mientras se prepara: estado inicial sin transiciones */
.anima-quieto [data-anim], .anima-quieto [data-anim] * { transition: none !important; }

/* ---------- Movimiento reducido ---------- */
.anima-reducido :is(.a-latir, .a-oscilar, .a-inclinar, .a-rebotar, .a-flotar-suave, .a-brillo) { animation: none !important; }
.anima-reducido [data-anim], .anima-reducido [data-anim] * {
  transition-duration: 1ms !important;
  transition-delay: 0ms !important;
  animation: none !important;
}