/* ============================================================
   CRIATech · motion.css
   Capa de movimiento — respeta prefers-reduced-motion
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- 1. Reveal al scroll ---------- */
  .cria-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 900ms cubic-bezier(.2,.65,.2,1),
                transform 900ms cubic-bezier(.2,.65,.2,1);
    will-change: opacity, transform;
  }
  .cria-reveal.cria-in {
    opacity: 1;
    transform: none;
  }

  /* ---------- 2. Cursor glow ---------- */
  #cria-cursor-glow {
    position: fixed;
    top: 0; left: 0;
    width: 520px; height: 520px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle,
                  rgba(31,123,200,0.14) 0%,
                  rgba(31,123,200,0.06) 30%,
                  rgba(31,123,200,0) 60%);
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 400ms ease;
    filter: blur(8px);
  }
  #cria-cursor-glow.cria-active { opacity: 1; }

  /* ---------- 3. Partículas flotantes ---------- */
  .cria-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
  }
  .cria-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(31,123,200,0.55);
    box-shadow: 0 0 6px rgba(31,123,200,0.6),
                0 0 12px rgba(31,123,200,0.25);
    animation: criaFloat linear infinite;
    opacity: 0;
  }
  @keyframes criaFloat {
    0%   { transform: translate3d(0,0,0) scale(0.6); opacity: 0; }
    10%  { opacity: 0.8; }
    90%  { opacity: 0.6; }
    100% { transform: translate3d(var(--dx, 40px), -120vh, 0) scale(1); opacity: 0; }
  }

  /* ---------- 4. Shimmer en texto destacado ---------- */
  .cria-shimmer-text,
  .hl-shimmer {
    background: linear-gradient(90deg,
      var(--blue-2) 0%, var(--blue-3) 25%, var(--blue-2) 50%,
      var(--blue-3) 75%, var(--blue-2) 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: criaShimmer 8s ease-in-out infinite;
  }
  @keyframes criaShimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
  }

  /* ---------- 5. Logo hover halo ---------- */
  .nav:hover .nav-logo {
    filter: drop-shadow(0 0 12px rgba(31,123,200,0.45));
  }

  /* ---------- 6. Nav CTA shimmer diagonal ---------- */
  .nav-cta::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(110deg,
                  transparent 0%,
                  rgba(255,255,255,0.35) 50%,
                  transparent 100%);
    transform: skewX(-20deg);
    pointer-events: none;
  }
  .nav-cta:hover::after {
    animation: criaSheen 900ms ease forwards;
  }
  @keyframes criaSheen {
    0%   { left: -60%; }
    100% { left: 120%; }
  }

  /* ---------- 7. CTA dot pulso ---------- */
  .nav-cta .dot {
    box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
    animation: criaCtaDot 2s ease-in-out infinite;
  }
  @keyframes criaCtaDot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.8); opacity: 1; }
    50%      { box-shadow: 0 0 0 6px rgba(255,255,255,0); opacity: 0.35; }
  }

  /* ---------- 8. Nav links underline progresivo ---------- */
  .nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 1px;
    background: var(--blue-2);
    transition: width 300ms cubic-bezier(.2,.7,.2,1);
  }
  .nav-links a:hover::after { width: 100%; }

  /* ---------- 9. Cards con tilt 3D + glow ---------- */
  [data-cria-tilt] {
    transform-style: preserve-3d;
    transition: transform 300ms cubic-bezier(.2,.7,.2,1),
                box-shadow 300ms ease,
                border-color 300ms ease;
  }
  [data-cria-tilt]:hover {
    box-shadow: 0 24px 48px -18px rgba(0,0,0,0.55),
                0 0 0 1px rgba(31,123,200,0.25);
  }

  /* Barrido de luz diagonal al hover */
  [data-cria-tilt]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg,
                  transparent 40%,
                  rgba(31,123,200,0.18) 50%,
                  transparent 60%);
    opacity: 0;
    transition: opacity 400ms ease;
    mix-blend-mode: screen;
    z-index: 1;
  }
  [data-cria-tilt]:hover::before { opacity: 1; }

  /* ---------- 10. Barrido de luz en celdas ---------- */
  [data-cria-sweep] {
    position: relative;
    overflow: hidden;
  }
  [data-cria-sweep]::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(105deg,
                  transparent 0%,
                  rgba(31,123,200,0.12) 50%,
                  transparent 100%);
    transition: left 700ms cubic-bezier(.2,.7,.2,1);
    pointer-events: none;
  }
  [data-cria-sweep]:hover::before { left: 100%; }

  /* ---------- 11. Pulso/latido ---------- */
  .cria-heartbeat {
    animation: criaHeartbeat 1.8s ease-in-out infinite;
  }
  @keyframes criaHeartbeat {
    0%, 100% { box-shadow: 0 0 0 0 rgba(74,194,138,0.55); transform: scale(1); }
    50%      { box-shadow: 0 0 0 6px rgba(74,194,138,0);   transform: scale(1.15); }
  }
  .cria-heartbeat-blue {
    animation: criaHeartbeatBlue 2.4s ease-in-out infinite;
  }
  @keyframes criaHeartbeatBlue {
    0%, 100% { box-shadow: 0 0 0 0 rgba(31,123,200,0.5);  transform: scale(1); }
    50%      { box-shadow: 0 0 0 8px rgba(31,123,200,0);  transform: scale(1.1); }
  }

  /* ---------- 12. Section kicker línea que crece ---------- */
  .section-kicker::before {
    width: 0;
    transition: width 700ms cubic-bezier(.2,.7,.2,1);
  }
  .section-kicker.cria-in::before,
  .section-kicker.is-visible::before {
    width: 24px;
  }

  /* ---------- 13. Contadores animados (solo estilo) ---------- */
  [data-cria-count] {
    display: inline-block;
    font-variant-numeric: tabular-nums;
  }

  /* ---------- 14. Línea de scan sobre paneles ---------- */
  .cria-scan-panel { position: relative; overflow: hidden; }
  .cria-scan-panel::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg,
                  transparent,
                  rgba(31,123,200,0.4),
                  transparent);
    animation: criaScan 6s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes criaScan {
    0%   { top: 0;    opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
  }

  /* ---------- 15. Glow pulsante de fondo ---------- */
  .cria-glow-pulse {
    animation: criaGlowPulse 6s ease-in-out infinite;
  }
  @keyframes criaGlowPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
  }

  /* ---------- 16. Filas de tabla revelan en cascada ---------- */
  .cria-table tbody tr.cria-reveal {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 500ms ease, transform 500ms ease;
  }
  .cria-table tbody tr.cria-reveal.cria-in {
    opacity: 1;
    transform: none;
  }
}