/* ==========================================================================
   SOLUCIONAPP — Sistema de movimiento
   Lenguaje único de animación: curvas, distancias, duraciones y variantes.
   Todas las animaciones usan transform/opacity para mantener 60 FPS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Lenguaje
   Entradas: ease-out 820ms · distancia 32px · salida suave.
   Interacción: ease-out 240-520ms.
   Escena: 1200ms para composiciones grandes (hero).
   -------------------------------------------------------------------------- */

/* ---------- Estados de entrada ----------
   Se animan las propiedades independientes translate/scale para no
   bloquear las transformaciones de hover de las tarjetas. */
.anim-ready [data-anim] {
  opacity: 0;
  translate: 0 var(--dist, 32px);
  transition:
    opacity var(--dur, var(--d3)) var(--ease-out),
    translate var(--dur, var(--d3)) var(--ease-out),
    scale var(--dur, var(--d3)) var(--ease-out),
    filter var(--dur, var(--d3)) var(--ease-out),
    clip-path var(--dur, var(--d4)) var(--ease-out);
  transition-delay: var(--delay, 0ms);
  will-change: opacity, translate;
}

.anim-ready [data-anim="fade"] {
  translate: none;
}

.anim-ready [data-anim="down"] {
  translate: 0 calc(var(--dist, 32px) * -1);
}

.anim-ready [data-anim="left"] {
  translate: calc(var(--dist, 32px) * 1.25) 0;
}

.anim-ready [data-anim="right"] {
  translate: calc(var(--dist, 32px) * -1.25) 0;
}

.anim-ready [data-anim="scale"] {
  translate: none;
  scale: 0.93;
}

.anim-ready [data-anim="blur"] {
  translate: 0 18px;
  filter: blur(14px);
}

.anim-ready [data-anim="clip"] {
  translate: none;
  clip-path: inset(0 0 100% 0);
}

.anim-ready [data-anim].is-in {
  opacity: 1;
  translate: none;
  scale: none;
  filter: none;
  clip-path: inset(0 0 0 0);
}

.anim-ready [data-anim].is-in {
  will-change: auto;
}

/* ---------- Revelado de texto por palabras ---------- */
.split .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.split .w > .wi {
  display: inline-block;
  transform: translate3d(0, 112%, 0);
  transition: transform 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms + 120ms);
}

.split.is-in .w > .wi {
  transform: none;
}

/* ---------- Entrada del hero (sin JS) ---------- */
[data-hero-in] {
  animation: hero-rise 1.05s var(--ease-out) both;
  animation-delay: var(--d, 0.1s);
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

[data-hero-stage] {
  animation: stage-in 1.3s var(--ease-out) 0.25s both;
}

@keyframes stage-in {
  from {
    opacity: 0;
    transform: translate3d(0, 40px, 0) scale(0.96);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ---------- Salida cinematográfica del hero ---------- */
.hero__inner {
  opacity: calc(1 - var(--hero-exit, 0) * 0.85);
  transform: translate3d(0, calc(var(--hero-exit, 0) * -70px), 0);
  transition: opacity 0.15s linear;
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  .hero__inner {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Parallax por puntero ---------- */
.stage__rings {
  transform: translate3d(calc(var(--px, 0) * -16px), calc(var(--py, 0) * -12px), 0);
  transition: transform 0.6s var(--ease-out);
}

/* ---------- Tarjetas con inclinación 3D ---------- */
[data-tilt] {
  transform-style: preserve-3d;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}

[data-tilt].is-tilting {
  transition: transform 0.1s linear;
}

/* ---------- Servicio con foco lumínico ---------- */
.is-service {
  --mx: 50%;
  --my: 0%;
}

/* ---------- Momento de impacto ---------- */
.pulse-once {
  animation: pulse-glow 2.6s var(--ease-out) 1;
}

@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(108, 99, 255, 0);
  }
  35% {
    box-shadow: 0 0 0 6px rgba(108, 99, 255, 0.12), 0 0 80px -30px rgba(108, 99, 255, 0.9);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(108, 99, 255, 0);
  }
}

/* ---------- Rendimiento: equipos modestos ---------- */
.perf-low .aurora {
  filter: blur(48px);
  animation: none;
  opacity: 0.3;
}

.perf-low .hero__canvas,
.perf-low .grain,
.perf-low .cursor-glow {
  display: none;
}

.perf-low .chip-tech,
.perf-low .float-card,
.perf-low .stage__rings::after,
.perf-low .tech-cloud::after,
.perf-low .globe__meridians {
  animation: none;
}

.perf-low [data-anim] {
  transition-duration: 480ms;
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .anim-ready [data-anim] {
    opacity: 1 !important;
    translate: none !important;
    scale: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  .split .w > .wi {
    transform: none !important;
    transition: none !important;
  }

  [data-hero-in],
  [data-hero-stage],
  .pulse-once {
    animation: none !important;
  }

  .aurora,
  .stage__rings::before,
  .stage__rings::after,
  .tech-cloud::after,
  .globe__meridians,
  .globe__arc,
  .globe__dot,
  .chip-tech,
  .float-card,
  .hero__scroll::after {
    animation: none !important;
  }

  .stage__rings,
  .fc-1,
  .fc-2 {
    transform: none !important;
    translate: none !important;
  }

  [data-tilt] {
    transform: none !important;
  }
}