/* ruta3d.css — maquetación base de los motion graphics 3D (cada prototipo la personaliza con sus tokens)
   Tokens que lee el JS en la sección: --r3d-bg --r3d-ink --r3d-muted --r3d-accent --r3d-accent-2 */

.r3d { position: relative; --r3d-shift-x: .2; --r3d-shift-y: 0; --r3d-shift-x-sm: 0; --r3d-shift-y-sm: .12; }
.r3d__sticky { position: relative; display: grid; gap: clamp(1.5rem, 3vw, 3rem); }
.r3d__stage { position: relative; aspect-ratio: 16 / 10; min-width: 0; overflow: hidden; }
.r3d__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* modo «scroll de keynote»: solo si hay movimiento, WebGL y three.js */
.r3d--scrub { height: 340vh; }
.r3d--scrub .r3d__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; align-content: center; overflow: clip; }
.r3d--scrub .r3d__stage { position: absolute; inset: 0; aspect-ratio: auto; }
.r3d--scrub .r3d__copy { position: relative; z-index: 1; pointer-events: none; }
.r3d--scrub .r3d__copy a, .r3d--scrub .r3d__copy button { pointer-events: auto; }

/* pasos: siempre en el DOM; el JS marca el actual */
.r3d__steps { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; counter-reset: r3d; }
.r3d__steps li { counter-increment: r3d; transition: opacity .4s ease, transform .4s ease; }
/* el estado de cada paso (actual / pasado / pendiente) lo estiliza cada prototipo con colores que cumplan AA */

/* etiquetas proyectadas desde 3D */
.r3d__tags { position: absolute; inset: 0; pointer-events: none; }
.r3d__tag { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: .75rem; letter-spacing: .01em; opacity: .45;
  translate: -50% calc(-100% - 14px); transition: opacity .35s ease; will-change: transform; }
.r3d__tag.is-on { opacity: 1; }
.r3d__tag[hidden], .r3d__pause[hidden] { display: none !important; }

/* botón de pausa (WCAG 2.2.2) */
.r3d__pause { position: absolute; z-index: 2; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  min-height: 44px; padding: .5rem .9rem; border-radius: 999px; font: inherit; font-size: .8125rem; cursor: pointer; }

/* sin WebGL / sin three.js / movimiento reducido antes de cargar */
.r3d--fallback .r3d__stage, .r3d--fallback .r3d__pause { display: none; }
.r3d:not(.r3d--ready) .r3d__pause { display: none; }

@media (max-width: 719px) {
  .r3d--scrub { height: 300vh; }
  .r3d__tag { font-size: .6875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .r3d__steps li { transition: none; }
}