/* ==========================================================================
   AREA UNITED · Movimiento global: revelado por palabras, cursor de marca,
   reduced-motion. Una sola gramática para toda la página.
   ========================================================================== */

/* --- Revelado al entrar en pantalla (una vez). Solo se oculta con JS. --- */
.js [data-split] .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 50ms);
}
.js [data-split].is-in .w { opacity: 1; transform: none; }

.js .reveal-item {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
  transition-delay: var(--d, 100ms);
}
.js .reveal-item.is-in { opacity: 1; transform: none; }

/* --- Cursor de marca: contenedor que se mueve + punto + halo ---
   Medidas: punto 12 px (22 sobre enlaces), halo 80 px con texto/icono.
   Cambios de tamaño en 150 ms cubic-bezier(.5,1,.3,1): sale rápido, frena suave. --- */
.cursor { display: none; }

@media (hover: hover) and (pointer: fine) {
  .cursor {
    --ease-cursor: cubic-bezier(0.5, 1, 0.3, 1);
    position: fixed;
    left: 0; top: 0;
    z-index: 2000;
    display: block;
    pointer-events: none;
    mix-blend-mode: difference;
    opacity: 0;
    transition: opacity 200ms;
    will-change: transform;
  }
  .cursor.is-on { opacity: 1; }
  .cursor.is-hidden { opacity: 0; }
  .cursor.is-view, .cursor.is-drag, .cursor.is-play { mix-blend-mode: normal; }

  .cursor-dot, .cursor-halo {
    position: absolute;
    left: 0; top: 0;
    translate: -50% -50%;
    border-radius: 50%;
    background: var(--yellow);
    transition: width 150ms var(--ease-cursor), height 150ms var(--ease-cursor),
                scale 150ms var(--ease-cursor), opacity 150ms var(--ease-cursor);
  }
  .cursor-dot { width: 12px; height: 12px; }
  .cursor-halo {
    width: 0; height: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--black-pure);
  }
  .cursor-label {
    position: absolute;
    font-size: 14px;
    letter-spacing: .06em;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 120ms;
  }
  .cursor-icon { position: absolute; width: 26px; height: 26px; fill: currentColor; opacity: 0; transition: opacity 120ms; }
  .cursor-icon--arrows { width: 64px; height: 24px; fill: none; }

  /* Enlaces y botones: el punto crece, sin texto */
  .cursor.is-link .cursor-dot { width: 22px; height: 22px; }

  /* Disciplinas y fotos con enlace: halo macizo de 80 px con «VER», el punto desaparece */
  .cursor.is-view .cursor-halo, .cursor.is-drag .cursor-halo, .cursor.is-play .cursor-halo { width: 80px; height: 80px; }
  .cursor.is-view .cursor-dot, .cursor.is-drag .cursor-dot, .cursor.is-play .cursor-dot { width: 0; height: 0; }
  .cursor.is-view .cursor-label, .cursor.is-drag .cursor-label { opacity: 1; }
  .cursor.is-drag .cursor-icon--arrows { opacity: 1; }
  .cursor.is-play .cursor-icon--play { opacity: 1; }

  /* Al pulsar: se comprime al 70 % */
  .cursor.is-press .cursor-dot { scale: .7; }
  .cursor.is-press .cursor-halo { scale: .92; }

  /* Cursor nativo fuera, salvo en campos (texto) y en el botón primario (puntero) */
  html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor [data-cursor] { cursor: none; }
  html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: auto; }
  html.has-cursor .btn-primary { cursor: pointer; }
}

/* --- Reduced motion: todo colocado, fundidos cortos --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
    transition-delay: 0ms !important;
  }
  .js .hero[data-intro] .hero-line-inner { transform: none; }
  .js .hero[data-intro] [data-hero-fade],
  .js .hero[data-intro] [data-hero-late] { opacity: 1; }
  .js .hero[data-intro] .hero-frame { clip-path: inset(0 0 0 0); }
  .loader { display: none !important; }
  .ticker-track { animation: none !important; }
  .next-class-live { animation: none; }
  .js [data-split] .w, .js .reveal-item { transform: none; }
  .cursor { display: none !important; }
}