/* ============================================
   CAPA DE INTERACCIÓN — reveals, microinteracciones y estados de botón.

   Se carga DESPUÉS del CSS de página en BaseLayout, a propósito: así estas
   reglas ganan la cascada frente a los hovers que cada página ya define, sin
   tener que subirles la especificidad ni duplicarlas en cada archivo.

   Solo se animan `transform` y `opacity` (nada que provoque reflow).
   Todo lo de aquí es capa de interacción: no cambia colores, tipografías
   ni layout.
   ============================================ */

/* ============================================
   1) REVEAL AL SCROLL
   El estado oculto vive bajo `.js`, que pone animations.js al ejecutarse.
   Sin JS (o si el archivo falla) NADA se oculta: el contenido se ve completo.
   ============================================ */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 0.6s var(--ease-out) var(--reveal-delay, 0ms),
    transform 0.6s var(--ease-out) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto; /* se libera al terminar: no dejamos capas vivas de más */
}

/* ============================================
   2) MICROINTERACCIONES — TARJETAS
   Elevación uniforme en todo el sitio: lift + scale sutil + sombra un punto
   más marcada. Las tarjetas ya traían `translateY`; aquí se unifica el gesto
   y se le suma el scale.
   ============================================ */
.home-communities__card:hover,
.challenge-card:hover,
.speaker-card:hover,
.library__card:hover,
.gallery-bases__card:hover,
.sponsorship-cat:hover,
.sponsorship-arc__step:hover,
.agenda-week__day:hover,
.desafios-hero__pillar:hover,
.principle:hover,
.brief-section:hover {
  transform: translateY(-6px) scale(1.02);
}

/* Tarjetas que no traían sombra propia: se les da la elevación compartida. */
.gallery-bases__card:hover,
.sponsorship-cat:hover,
.sponsorship-arc__step:hover,
.agenda-week__day:hover,
.desafios-hero__pillar:hover,
.library__card:hover,
.speaker-slide:hover {
  box-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 229, 255, 0.12);
}

/* Boletas y patrocinio: la tarjeta destacada mantiene su elevación mayor. */
.ticket-card:hover { transform: translateY(-8px) scale(1.02); }
.ticket-card--featured:hover { transform: translateY(-16px) scale(1.03); }

/* La agenda desliza en horizontal — se conserva el eje y se suma el scale. */
.schedule__item:hover { transform: translateX(6px) scale(1.01); }

/* Slides del carrusel de speakers: gesto más contenido, están en movimiento. */
.speaker-slide:hover,
.speaker-slide:focus-visible { transform: translateY(-4px) scale(1.02); }

/* Transición compartida para que todas usen el mismo tiempo/curva (150–300ms). */
.home-communities__card,
.challenge-card,
.speaker-card,
.library__card,
.gallery-bases__card,
.sponsorship-cat,
.sponsorship-arc__step,
.agenda-week__day,
.desafios-hero__pillar,
.principle,
.brief-section,
.ticket-card,
.schedule__item,
.speaker-slide {
  transition:
    transform 0.28s var(--ease-out),
    box-shadow 0.28s var(--ease-out),
    border-color 0.24s var(--ease-out),
    background 0.24s var(--ease-out);
}

/* ============================================
   3) ESTADOS DE BOTÓN — consistentes en todo el sitio
   default (core.css) · hover (por variante) · active · focus-visible · disabled
   ============================================ */

/* `:hover:active` sube la especificidad a (0,3,0) para ganarle a las reglas
   `.btn--primary:hover` / `.btn--ghost:hover` (0,2,0), que fijan translateY. */
.btn:active,
.btn:hover:active {
  transform: scale(0.98);
  transition-duration: 90ms;
}

/* Foco visible solo con teclado. Anillo de marca, no el outline del sistema. */
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--c-dark), 0 0 0 4px var(--c-cyan);
}

/* Deshabilitado: core.css ya lo atenúa; aquí se blinda contra el :active. */
.btn:disabled,
.btn[disabled] { transform: none; }

/* Enlaces y controles no-.btn: mismo anillo de foco para no tener dos estilos. */
.nav__link:focus-visible,
.speakers-marquee__cta:focus-visible,
.sponsors__cta:focus-visible,
.ticket-card__cta:focus-visible,
.speaker-card__linkedin:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--c-dark), 0 0 0 4px var(--c-cyan);
  border-radius: var(--radius-sm);
}

/* ============================================
   4) MOVIMIENTO REDUCIDO
   Red de seguridad: aunque animations.js no llegue a correr, con esta
   preferencia activa nada queda oculto ni se transforma.
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
  .home-communities__card:hover,
  .challenge-card:hover,
  .speaker-card:hover,
  .library__card:hover,
  .gallery-bases__card:hover,
  .sponsorship-cat:hover,
  .sponsorship-arc__step:hover,
  .agenda-week__day:hover,
  .desafios-hero__pillar:hover,
  .principle:hover,
  .brief-section:hover,
  .ticket-card:hover,
  .ticket-card--featured:hover,
  .schedule__item:hover,
  .speaker-slide:hover,
  .btn:active,
  .btn:hover:active {
    transform: none;
  }
}