/* Builders Alpha Tech — deck enhance
   Interactividad NO invasiva sobre los slides: anti-flash, micro-hover/focus y progreso.
   Se engancha SOLO al slide activo vía [data-deck-active] (mecanismo oficial de deck-stage)
   y respeta el design system (hairlines, radio 4px, azul de marca, sin sombras dramáticas).
   Todo gateado en prefers-reduced-motion → en print/reduced-motion el contenido queda estático y visible. */

/* ---------- 0. ANTI-FLASH de montaje ----------
   deck.html compila el JSX en el navegador, así que React monta unos frames tarde y el slide
   aparecía ENTERO por un instante antes de que deck-fragments.js lo apagara. Acá el contenido
   arranca oculto y sólo se destapa cuando el script marcó el slide como preparado
   ([data-frags-ready], que pone deck-fragments.js incluso si el slide no tiene fragmentos).
   Se oculta el CONTENIDO, no el root: el fondo y la grilla del slide se ven desde el frame 0. */
deck-stage section div[id^="s"] > div:not([data-frags-ready]) > * {
  opacity: 0 !important;
}
/* Sin JS / impresión / reduced-motion: nada puede quedar oculto. */
@media print {
  deck-stage section div[id^="s"] > div > * { opacity: 1 !important; }
}

/* ---------- 1. MICRO-INTERACCIONES hover / focus ---------- */
/* Las cards del deck llevan border-radius inline → las targeteamos por el atributo style.
   Base: transición suave. Hover/focus: leve lift + hairline que pasa a azul de marca. */
section[data-deck-active] [style*="border-radius"] {
  transition: transform .16s cubic-bezier(.2,.7,.2,1),
              border-color .16s ease,
              background-color .16s ease;
  will-change: transform;
}
section[data-deck-active] [style*="border-radius"]:hover,
section[data-deck-active] [style*="border-radius"]:focus-visible {
  transform: translateY(-2px);
  border-color: var(--blue-500) !important;
  outline: none;
}
/* El ícono dentro de una card acompaña el hover (leve escala, stroke de marca). */
section[data-deck-active] [style*="border-radius"]:hover svg {
  transform: scale(1.05);
  transition: transform .16s cubic-bezier(.2,.7,.2,1);
}
/* Cifras (StatFigure): al pasar el mouse, realce ámbar sutil sobre fondo oscuro. */
section[data-deck-active] [style*="border-radius"]:hover [style*="font-display"],
section[data-deck-active] [style*="border-radius"]:hover [style*="var(--font-display)"] {
  transition: color .16s ease;
}
/* Foco por teclado accesible (navegación con Tab dentro del slide). */
section[data-deck-active] a:focus-visible,
section[data-deck-active] button:focus-visible {
  outline: 2px solid var(--blue-400);
  outline-offset: 2px;
}

/* ---------- 2. PROGRESO ----------
   Hairline al pie de la pantalla: integra slide + fragmentos en una sola lectura.
   Discreto a propósito — el número de slide ya vive en el footer de cada slide. */
.deck-progress {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(255,255,255,.10);
  z-index: 9999;
  pointer-events: none;
}
.deck-progress__fill {
  height: 100%;
  width: 0;
  background: var(--blue-500);
  transition: width .28s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce) {
  .deck-progress__fill { transition: none; }
}
@media print {
  .deck-progress { display: none; }
}

/* ---------- Slide 3 · ANTES/DESPUÉS del terreno (cancha 3 que "corre" a nivelar + pabellón) ----------
   La propuesta es UN fragmento (un touch). Sus piezas animan en loop para mostrar el movimiento:
   la cancha 3 baja a la altura de la cancha 1, aparece el pabellón al medio, sostiene, y vuelve. */
.atom-c3     { animation: atomC3    10s ease-in-out infinite; }
.atom-arrow  { animation: atomArw   10s ease-in-out infinite; opacity: 0; }
.atom-bld    { animation: atomBld   10s ease-in-out infinite; opacity: 0; transform: scaleY(.5); }
.atom-bldlbl { animation: atomLbl   10s ease-in-out infinite; opacity: 0; }
.atom-caphoy { animation: atomCapH  10s ease-in-out infinite; }
.atom-capprop{ animation: atomCapP  10s ease-in-out infinite; opacity: 0; }

@keyframes atomC3   { 0%,8%{transform:translateY(0)} 30%,82%{transform:translateY(var(--c3dy,112px))} 96%,100%{transform:translateY(0)} }
@keyframes atomArw  { 0%,12%{opacity:0} 20%{opacity:0} 30%,80%{opacity:.95} 90%,100%{opacity:0} }
@keyframes atomBld  { 0%,32%{opacity:0;transform:scaleY(.5)} 46%,80%{opacity:1;transform:scaleY(1)} 90%,100%{opacity:0;transform:scaleY(.5)} }
@keyframes atomLbl  { 0%,40%{opacity:0} 50%,80%{opacity:1} 90%,100%{opacity:0} }
@keyframes atomCapH { 0%,22%{opacity:1} 32%,86%{opacity:0} 96%,100%{opacity:1} }
@keyframes atomCapP { 0%,24%{opacity:0} 34%,84%{opacity:1} 92%,100%{opacity:0} }

/* Sin animación (reduced-motion / print): mostrar el estado PROPUESTA final, estático. */
@media (prefers-reduced-motion: reduce) {
  .atom-c3     { animation: none; transform: translateY(var(--c3dy,112px)); }
  .atom-arrow  { animation: none; opacity: 0; }
  .atom-bld    { animation: none; opacity: 1; transform: scaleY(1); }
  .atom-bldlbl { animation: none; opacity: 1; }
  .atom-caphoy { animation: none; opacity: 0; }
  .atom-capprop{ animation: none; opacity: 1; }
}
@media print {
  .atom-c3{transform:translateY(var(--c3dy,112px))!important} .atom-bld,.atom-bldlbl,.atom-capprop{opacity:1!important}
  .atom-arrow,.atom-caphoy{opacity:0!important}
}