/* tioweb-framework 0.5.2-dev · CSS complementario imprescindible (M1-C; 0.2.0: respaldo sin descarga anticipada;
   0.5.0: motion-kit — banda, cápsula, tarjetas en profundidad, entradas y revelado de texto).
   Solo comportamiento y lo que Elementor V4 no puede expresar. La apariencia editorial vive en Elementor.
   Alcance: este archivo SOLO se encola en las páginas activadas (Ajustes → Tioweb Framework). Además, todas las reglas
   que afectan al contenido de Elementor van bajo body.tw-fw-universe, clase que PHP agrega en esas mismas páginas.
   Origen: H8 (universe.css, sections-h5.css §loader, base.css §velo, components.css §cápsula). */

/* ---------- 0 · Tokens propios (no pisan variables de Elementor) ---------- */
.tw-fw-universe {
  --tw-fw-black: #0A0A0A;
  --tw-fw-cyan: var(--tw-color-accent-cyan, #00E0C8);
  --tw-fw-violet: var(--tw-color-accent-violet, #7B5FE8);
  --tw-fw-veil: rgb(10 10 10 / .82);
  --tw-fw-veil-mid: rgb(10 10 10 / .5);
  --tw-fw-veil-0: rgb(10 10 10 / 0);
}

/* ---------- 1 · Página transparente sobre el universo ---------- */
/* Hello Elementor pinta el body de blanco y .tw-page pinta ink: con el universo activo, el fondo lo da el canvas. */
body.tw-fw-universe { background-color: var(--tw-fw-black); }
body.tw-fw-universe .tw-page { position: relative; z-index: 1; background-color: transparent; }

/* ---------- 2 · Host del universo (directo bajo <body>, impreso en wp_body_open) ---------- */
.tw-universe {
  position: fixed;
  inset: 0 0 auto 0;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  pointer-events: none;
  opacity: var(--tw-universe-fade, 1);
  background-color: var(--tw-fw-black, #0A0A0A);
  contain: strict;
}
.tw-universe__canvas { display: block; width: 100%; height: 100%; }
/* Respaldo estático real (variante A): sin JS, sin Canvas 2D o en modo estático. */
html:not(.tw-js) .tw-universe,
.tw-universe-fallback .tw-universe {
  background-image: url('../img/universe-a-fallback-1440.webp');
  background-size: cover;
  background-position: center top;
}
@media (max-width: 767px) {
  html:not(.tw-js) .tw-universe,
  .tw-universe-fallback .tw-universe { background-image: url('../img/universe-a-fallback-390.webp'); }
}
.tw-universe-fallback .tw-universe__canvas { display: none; }
/* Salida de seguridad (M1-C, no estaba en H8): si la clase en línea se aplicó pero los JS nunca llegaron
   (bloqueados, error de red, optimizador), a los 8 s aparece el mismo respaldo estático en vez de un fondo negro. */
.tw-js:not(.tw-js-ready):not(.tw-universe-fallback) .tw-universe::before {
  content: "";
  position: absolute;
  inset: 0;
  background: center top / cover no-repeat;
  opacity: 0;
  animation: tw-fw-fallback-in .6s ease 8s forwards;
}
@media (max-width: 767px) {
  .tw-js:not(.tw-js-ready):not(.tw-universe-fallback) .tw-universe::before { animation-name: tw-fw-fallback-in-sm; }
}
/* 0.2.0: la imagen va dentro de los keyframes. Con `forwards` y sin `backwards`, no se aplica (ni se descarga)
   durante los 8 s de espera; solo si la salida de seguridad llega a ejecutarse. */
@keyframes tw-fw-fallback-in {
  from { opacity: 0; background-image: url('../img/universe-a-fallback-1440.webp'); }
  to { opacity: 1; background-image: url('../img/universe-a-fallback-1440.webp'); }
}
@keyframes tw-fw-fallback-in-sm {
  from { opacity: 0; background-image: url('../img/universe-a-fallback-390.webp'); }
  to { opacity: 1; background-image: url('../img/universe-a-fallback-390.webp'); }
}

/* ---------- 3 · Velo de lectura (H8 base.css · .tw-readable) ---------- */
/* Elementor no admite pseudo-elementos en clases V4. Sin isolation: el ::before baja al contexto de <main>. */
body.tw-fw-universe .tw-readable { position: relative; }
body.tw-fw-universe .tw-readable::before {
  content: "";
  position: absolute;
  inset: -22% -10%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, var(--tw-fw-veil), var(--tw-fw-veil-mid) 55%, var(--tw-fw-veil-0));
}

/* ---------- 4 · Hero: lo que V4 no puede expresar ---------- */
/* Frase central del lead en blanco y peso 500 (H4): Elementor permite <strong> pero no estilizarlo. */
body.tw-fw-universe .tw-hero__lead strong { font-weight: 500; color: var(--tw-color-paper, #FFFFFF); }
/* Separador ✳ de la cápsula (H8: ::after). Estático: la animación de la cápsula es un módulo posterior. */
body.tw-fw-universe .tw-capsule__item::after {
  content: "\2733\FE0E";
  display: inline-block;
  margin-left: .65em;
  font-size: .6em;
  vertical-align: middle;
}

/* ---------- 5 · Loader «Universo Silencioso» (H7/H8) ---------- */
.tw-loader { display: none; }
.tw-boot .tw-loader {
  --r: .08;
  position: fixed;
  inset: 0;
  z-index: 300;
  display: block;
  overflow: hidden;
  background: var(--tw-fw-black, #0A0A0A);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  contain: strict;
  animation: tw-loader-in .3s ease .5s forwards, tw-loader-out .4s ease 8s forwards;
}
.tw-boot.tw-loader-preview .tw-loader { animation: tw-loader-in .2s ease 0s forwards; }
.tw-loader__space { position: absolute; inset: 0; }
.tw-loader__rails { position: absolute; inset: 0; width: 100%; height: 100%; stroke-width: 1; }
.tw-loader__rows i, .tw-loader__far b { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--tw-fw-cyan, #00E0C8); }
.tw-loader__rows i {
  opacity: 0;
  will-change: transform, opacity;
  animation: tw-loader-row 17.15s linear infinite;
  animation-delay: calc(var(--i) * -.35s);
}
.tw-loader__far b { top: calc(30% + 72% / (1 + var(--r) * var(--n))); opacity: var(--a); }
.tw-loader__horizon {
  position: absolute; left: 0; right: 0; top: 30%; height: 2px; margin-top: -1px;
  background: linear-gradient(90deg, rgb(0 224 200 / .08), rgb(0 224 200 / .14) 50%, rgb(0 224 200 / .08));
  box-shadow: 0 -18px 40px rgb(123 95 232 / .05);
}
.tw-loader__hourglass {
  position: absolute; left: 50%; top: 50%;
  width: clamp(64px, 6.4vw, 92px); height: auto; aspect-ratio: 100 / 140;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 18px 30px rgb(0 0 0 / .6));
  transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .5s ease;
}
.tw-loader__note {
  position: absolute; left: 20px; right: 20px; top: calc(50% + clamp(64px, 6.4vw, 92px) * .7 + 28px);
  text-align: center;
  font: 500 .8125rem/1.4 var(--tw-font-display, sans-serif); letter-spacing: .02em; color: var(--tw-color-muted, #888888);
  opacity: 0;
  animation: tw-loader-in .4s ease 3s forwards;
}
@media (max-width: 1023px) {
  .tw-boot .tw-loader { --r: .054; }
  .tw-loader__rows i { animation-name: tw-loader-row-narrow; }
  .tw-loader__rails { transform: scaleX(1.2727); }   /* 14 → 11 celdas */
}
@media (max-width: 767px) { .tw-loader__rails { transform: scaleX(1.75); } }   /* 14 → 8 celdas */
/* Salida: el loader se funde mientras el canvas recorre la última celda; el reloj se asienta. */
.tw-loader.is-leaving { transition: opacity .7s cubic-bezier(.4, 0, .2, 1); }   /* loader.js congela la opacidad actual y la lleva a 0 */
.tw-loader.is-leaving .tw-loader__hourglass { transform: translate(-50%, -50%) scale(.94); opacity: 0; }
.tw-loader.is-fading { transition: opacity .3s ease; }
@keyframes tw-loader-in { to { opacity: 1; visibility: visible; } }
@keyframes tw-loader-out { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
@keyframes tw-loader-row {
  0.00% { transform: translate3d(0, 44.88vh, 0); opacity: 0.000; }
  6.12% { transform: translate3d(0, 45.65vh, 0); opacity: 0.047; }
  12.24% { transform: translate3d(0, 46.51vh, 0); opacity: 0.099; }
  20.41% { transform: translate3d(0, 47.82vh, 0); opacity: 0.106; }
  32.65% { transform: translate3d(0, 50.22vh, 0); opacity: 0.118; }
  44.90% { transform: translate3d(0, 53.38vh, 0); opacity: 0.132; }
  57.14% { transform: translate3d(0, 57.69vh, 0); opacity: 0.149; }
  65.31% { transform: translate3d(0, 61.58vh, 0); opacity: 0.163; }
  73.47% { transform: translate3d(0, 66.73vh, 0); opacity: 0.180; }
  79.59% { transform: translate3d(0, 71.86vh, 0); opacity: 0.194; }
  83.67% { transform: translate3d(0, 76.15vh, 0); opacity: 0.206; }
  87.76% { transform: translate3d(0, 81.43vh, 0); opacity: 0.218; }
  89.80% { transform: translate3d(0, 84.55vh, 0); opacity: 0.225; }
  91.84% { transform: translate3d(0, 88.06vh, 0); opacity: 0.233; }
  93.88% { transform: translate3d(0, 92.07vh, 0); opacity: 0.241; }
  95.92% { transform: translate3d(0, 96.67vh, 0); opacity: 0.250; }
  97.96% { transform: translate3d(0, 102.00vh, 0); opacity: 0.260; }
  100.00% { transform: translate3d(0, 108.26vh, 0); opacity: 0.260; }
}
@keyframes tw-loader-row-narrow {
  0.00% { transform: translate3d(0, 50.04vh, 0); opacity: 0.000; }
  6.12% { transform: translate3d(0, 50.99vh, 0); opacity: 0.061; }
  12.24% { transform: translate3d(0, 52.03vh, 0); opacity: 0.126; }
  20.41% { transform: translate3d(0, 53.59vh, 0); opacity: 0.133; }
  32.65% { transform: translate3d(0, 56.39vh, 0); opacity: 0.144; }
  44.90% { transform: translate3d(0, 59.95vh, 0); opacity: 0.157; }
  57.14% { transform: translate3d(0, 64.62vh, 0); opacity: 0.173; }
  65.31% { transform: translate3d(0, 68.63vh, 0); opacity: 0.185; }
  73.47% { transform: translate3d(0, 73.69vh, 0); opacity: 0.199; }
  79.59% { transform: translate3d(0, 78.45vh, 0); opacity: 0.211; }
  83.67% { transform: translate3d(0, 82.25vh, 0); opacity: 0.220; }
  87.76% { transform: translate3d(0, 86.69vh, 0); opacity: 0.230; }
  89.80% { transform: translate3d(0, 89.21vh, 0); opacity: 0.235; }
  91.84% { transform: translate3d(0, 91.96vh, 0); opacity: 0.241; }
  93.88% { transform: translate3d(0, 94.98vh, 0); opacity: 0.247; }
  95.92% { transform: translate3d(0, 98.31vh, 0); opacity: 0.253; }
  97.96% { transform: translate3d(0, 102.00vh, 0); opacity: 0.260; }
  100.00% { transform: translate3d(0, 106.11vh, 0); opacity: 0.260; }
}
@media (prefers-reduced-motion: reduce) {
  /* Retícula fija: cada transversal queda en la posición que le da su desfase. */
  .tw-loader__rows i { animation-play-state: paused; }
  .tw-loader__hourglass { transition: none; }
}

/* M1-C · reloj de arena con rotación lenta (giro de reloj: media vuelta, pausa, media vuelta).
   Usa la propiedad `rotate`, independiente del `transform` de centrado y de salida. Sin color animado. */
.tw-boot .tw-loader__hourglass { animation: tw-fw-hourglass-turn 6.4s cubic-bezier(.65, 0, .35, 1) .5s infinite; }
@keyframes tw-fw-hourglass-turn {
  0%, 18% { rotate: 0deg; }
  42%, 68% { rotate: 180deg; }
  92%, 100% { rotate: 360deg; }
}
.tw-loader.is-leaving .tw-loader__hourglass,
.tw-loader.is-fading .tw-loader__hourglass { animation-play-state: paused; }

/* ---------- 6 · Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .tw-boot .tw-loader__hourglass { animation: none; }
}

/* ---------- 7 · motion-kit (0.5.0, components/motion-kit.js) ---------- */
/* Banda y cápsula: solo transform, duración calculada por el JS a velocidad constante. La pista se desplaza
   exactamente un grupo (--tw-marquee-shift: -50 % con un clon; menos si hacen falta más copias). */
body.tw-fw-universe [data-tw-marquee][data-tw-state="motion"] .tw-marquee__track,
body.tw-fw-universe [data-tw-marquee][data-tw-state="motion"] [data-tw-marquee-track],
body.tw-fw-universe [data-tw-capsule][data-tw-state="motion"] .tw-capsule__track {
  animation: tw-fw-marquee var(--tw-marquee-duration, 32s) linear infinite;
  will-change: transform;
}
body.tw-fw-universe [data-tw-marquee][data-tw-marquee-direction="reverse"] [data-tw-marquee-track] { animation-direction: reverse; }
body.tw-fw-universe [data-tw-marquee][data-tw-scene] .tw-marquee__track,
body.tw-fw-universe [data-tw-marquee][data-tw-scene] [data-tw-marquee-track],
body.tw-fw-universe [data-tw-capsule][data-tw-scene] .tw-capsule__track { animation-play-state: paused; will-change: auto; }
body.tw-fw-universe [data-tw-marquee-track] { display: flex; width: max-content; }
body.tw-fw-universe [data-tw-marquee-group] { display: flex; flex: none; }
/* Ritmo continuo en la unión de grupos: sin el margen inicial, la distancia entre el último «+» y el primer término
   es la misma que dentro del grupo (en reposo o con movimiento reducido el margen de H8 se conserva). */
body.tw-fw-universe [data-tw-marquee][data-tw-state="motion"] .tw-marquee__group { padding-inline-start: 0; }
@keyframes tw-fw-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--tw-marquee-shift, -50%), 0, 0); } }

/* Depth heredado y activación M1-I de colocación desde arriba; una sola entrada, sin salida. */
html.tw-depth-on body.tw-fw-universe [data-tw-depth] { perspective: 1100px; perspective-origin: 50% 30%; }
html.tw-depth-on body.tw-fw-universe [data-tw-depth] > :not([data-tw-depth-state="in"]) { opacity: 0; transform: translate3d(0, 28px, -160px) scale(.94); }
html.tw-depth-on body.tw-fw-universe [data-tw-depth] > [data-tw-depth-flat]:not([data-tw-depth-state="in"]) { transform: none; }
html.tw-depth-ready body.tw-fw-universe [data-tw-depth] > * {
  transition: opacity .5s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.16, .84, .3, 1);
  transition-delay: calc(var(--tw-depth-i, 0) * 70ms);
}
html.tw-depth-ready body.tw-fw-universe [data-tw-depth] > :not([data-tw-depth-state="in"]) { transition-duration: .25s, .25s; transition-delay: 0s; }
/* Opt-in de la DEV: no cambiar otras páginas que ya usen Depth. */
html.tw-depth-on body.tw-fw-universe [data-tw-depth-entry="place-once"] > :not([data-tw-depth-state="in"]) { transform: translate3d(0, -24px, 55px) scale(1.015); }
html.tw-depth-on body.tw-fw-universe [data-tw-depth-entry="place-once"] > [data-tw-depth-flat]:not([data-tw-depth-state="in"]) { transform: none; }
html.tw-depth-ready body.tw-fw-universe [data-tw-depth-entry="place-once"] > * { transition-duration: .5s, .7s; transition-delay: calc(var(--tw-depth-i, 0) * 100ms); }


/* Entradas de bloques (H8 .tw-reveal): opacidad + 28 px, escalonado de 70 ms entre hermanos. */
html.tw-reveal-on body.tw-fw-universe [data-tw-reveal]:not([data-tw-reveal-state="in"]) { opacity: 0; translate: 0 28px; }
html.tw-reveal-on body.tw-fw-universe [data-tw-reveal][data-tw-reveal-flat]:not([data-tw-reveal-state="in"]) { translate: none; }
html.tw-reveal-ready body.tw-fw-universe [data-tw-reveal] {
  transition: opacity .6s cubic-bezier(.2, .7, .2, 1), translate .8s cubic-bezier(.16, .84, .3, 1);
  transition-delay: calc(var(--tw-reveal-i, 0) * 70ms);
}

/* Revelado de texto: CSS nativo ligado al viewport (reversible). Sin soporte, texto normal. */
@supports (animation-timeline: view()) {
  html.tw-text-reveal-on body.tw-fw-universe [data-tw-text-reveal] {
    color: transparent;
    background-image: linear-gradient(to bottom, var(--tw-reveal-ink, #fff) 0 46%, var(--tw-reveal-dim, rgba(255, 255, 255, .5)) 54% 100%);
    background-size: 100% 200%;
    background-position: 0 100%;
    -webkit-background-clip: text; background-clip: text;
    animation: tw-fw-text-reveal linear both;
    animation-timeline: view();
    animation-range: entry 35% cover 52%;
  }
  html.tw-text-reveal-on body.tw-fw-universe [data-tw-text-reveal] :where(strong, b, em) { color: transparent; }
}
@keyframes tw-fw-text-reveal { to { background-position: 0 0; } }

/* Lista con atenuado (Rayo .list-hover-dim): al señalar un ítem, los demás bajan de opacidad. Solo puntero fino.
   data-tw-hover-dim="rayo" usa .2 (filosofía); cualquier otro valor, .35 (método). */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body.tw-fw-universe [data-tw-hover-dim] > * { transition: opacity .35s ease, border-color .35s ease; }
  html:not(.tw-motion-paused) body.tw-fw-universe [data-tw-hover-dim]:hover > :not(:hover) { opacity: .35; }
  html:not(.tw-motion-paused) body.tw-fw-universe [data-tw-hover-dim="rayo"]:hover > :not(:hover) { opacity: .2; }
}
/* Botón de pausa: sin JS no tiene efecto, se oculta. */
html:not(.tw-js-ready) [data-tw-motion-toggle] { display: none; }
.tw-motion-paused body.tw-fw-universe [data-tw-marquee-track] { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  body.tw-fw-universe [data-tw-marquee] [data-tw-marquee-track],
  body.tw-fw-universe [data-tw-marquee] .tw-marquee__track,
  body.tw-fw-universe [data-tw-capsule] .tw-capsule__track { animation: none !important; transform: none !important; }
  body.tw-fw-universe [data-tw-depth] > *,
  body.tw-fw-universe [data-tw-reveal] { opacity: 1 !important; transform: none !important; translate: none !important; transition: none !important; }
  body.tw-fw-universe [data-tw-text-reveal] { color: inherit !important; background: none !important; animation: none !important; }
}
.tw-motion-paused body.tw-fw-universe [data-tw-marquee] .tw-marquee__track,
.tw-motion-paused body.tw-fw-universe [data-tw-capsule] .tw-capsule__track { animation-play-state: paused; }

/* 0.5.1 · Volver arriba [data-tw-to-top] (H8 .tw-to-top, «Mano de dios»).
   Posición, tamaño y foco viven en Elementor (estilo local del enlace). Aquí solo el estado que pone motion-kit:
   oculto hasta pasar el umbral, aparece con opacidad + 16 px. Sin JS el enlace queda visible y salta a su ancla. */
html.tw-to-top-ready [data-tw-to-top] {
  transition: opacity .3s cubic-bezier(.2, .7, .2, 1), translate .3s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .3s;
}
html.tw-to-top-ready [data-tw-to-top]:not([data-tw-to-top-state="shown"]) {
  opacity: 0;
  visibility: hidden;
  translate: 0 16px;
  pointer-events: none;
}
html.tw-to-top-ready [data-tw-to-top][data-tw-to-top-state="shown"] {
  transition: opacity .3s cubic-bezier(.2, .7, .2, 1), translate .3s cubic-bezier(.2, .7, .2, 1), visibility 0s;
}
[data-tw-to-top] img { transition: translate .25s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) and (pointer: fine) { [data-tw-to-top]:hover img { translate: 0 -5px; } }
[data-tw-to-top]:focus-visible img { translate: 0 -5px; }
@media (prefers-reduced-motion: reduce) {
  [data-tw-to-top], [data-tw-to-top] img { transition-duration: .01ms !important; }
  [data-tw-to-top]:hover img, [data-tw-to-top]:focus-visible img { translate: none; }
}

/* M1-H · Aro independiente: solo gira el texto circular, la flecha permanece centrada.
   El gráfico y las dimensiones se editan en Elementor. 24 s reproduce H8. */
body.tw-fw-universe [data-tw-scroll-cue] .tw-cue__ring {
  animation: tw-fw-cue-turn 24s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes tw-fw-cue-turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
html.tw-motion-paused [data-tw-scroll-cue] .tw-cue__ring,
html.tw-motion-hidden [data-tw-scroll-cue] .tw-cue__ring { animation-play-state: paused; }
html.tw-motion-hidden body.tw-fw-universe [data-tw-marquee-track],
html.tw-motion-hidden body.tw-fw-universe .tw-marquee__track,
html.tw-motion-hidden body.tw-fw-universe .tw-capsule__track { animation-play-state: paused; }

/* H8: 7 s entre tarjetas, transición de 1 s. Sin JS permanece el scroll nativo con snap.
   El estado ready es el único que activa el transform: nunca hay dos controladores. */
body.tw-fw-universe [data-tw-carousel-ready] [data-tw-carousel-viewport] {
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}
body.tw-fw-universe [data-tw-carousel-ready] [data-tw-carousel-track] {
  display: flex;
  width: 100%;
  transition: transform var(--tw-carousel-duration, 1000ms) ease;
}
body.tw-fw-universe [data-tw-carousel-ready] [data-tw-carousel-slide] {
  flex-shrink: 0;
  transition: filter .6s cubic-bezier(.23, .65, .74, 1.09);
}
body.tw-fw-universe [data-tw-carousel-ready] [data-tw-carousel-slide][aria-current="false"] { filter: blur(4px); }
body.tw-fw-universe [data-tw-carousel-ready] [data-tw-carousel-controls] { display: flex; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) {
  body.tw-fw-universe [data-tw-scroll-cue] .tw-cue__ring { animation: none !important; transform: none !important; }
  body.tw-fw-universe [data-tw-carousel-ready] [data-tw-carousel-track],
  body.tw-fw-universe [data-tw-carousel-ready] [data-tw-carousel-slide] { transition: none; }
  body.tw-fw-universe [data-tw-carousel-ready] [data-tw-carousel-slide][aria-current="false"] { filter: none; }
}

/* M1-J · cinta continua del Hero. El ancho de pista incluye todos los grupos, sin pasos. */
body.tw-fw-universe [data-tw-capsule] .tw-capsule__track { display: flex; width: max-content; flex: none; }

/* M1-J · movimientos independientes sobre imágenes interiores; caja y Canvas intactos. */
html.tw-hero-motion-on body.tw-fw-universe [data-tw-hero-motion-ready] img { will-change: transform; }
html.tw-hero-motion-on body.tw-fw-universe [data-tw-hero-effect="float"][data-tw-hero-motion-ready] img {
 animation: tw-fw-hero-float var(--tw-hero-float-cycle, 20s) ease-in-out infinite;
}
html.tw-hero-motion-on body.tw-fw-universe [data-tw-hero-effect="rise"][data-tw-hero-motion-ready] img {
 animation: tw-fw-hero-rise var(--tw-hero-rise-cycle, 12s) linear infinite;
}
html.tw-hero-motion-on body.tw-fw-universe [data-tw-hero-effect="spin"][data-tw-hero-motion-ready] img {
 animation: tw-fw-hero-spin var(--tw-hero-spin-cycle, 40s) linear infinite;
}
@keyframes tw-fw-hero-float { 0%,100% { transform: translateY(calc(-1 * var(--tw-hero-float-distance, 16px))); } 50% { transform: translateY(var(--tw-hero-float-distance, 16px)); } }
@keyframes tw-fw-hero-rise { from { transform: translateY(0); } to { transform: translateY(calc(-1 * var(--tw-hero-rise-distance, 50px))); } }
@keyframes tw-fw-hero-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
html.tw-hero-motion-on body.tw-fw-universe [data-tw-hero-motion-ready][data-tw-hero-scene="offscreen"] img,
html.tw-motion-hidden.tw-hero-motion-on body.tw-fw-universe [data-tw-hero-motion-ready] img { animation-play-state: paused; will-change: auto; }
@media(prefers-reduced-motion: reduce) {
 body.tw-fw-universe [data-tw-hero-motion-ready] img { animation: none !important; transform: none !important; will-change: auto; }
}