/* =============================================================
   LUGAR · contrato CSS mínimo del motor
   La DIRECCIÓN visual la pone cada plantilla (ata las variables a transforms).
   Aquí solo lo imprescindible para que el motor funcione.
   -------------------------------------------------------------
   Variables que publica el motor (referencia para tu CSS):
     --p                  progreso de scroll suavizado (0..1)
     --<fase>             una por fase del timeline (p.ej. --adv,--rise,--cross,--ins,--fgop)
     --mx, --my           puntero suavizado (-1..1)  [si pointer != false]
     --cam-x/-y/-rot/-scale  cámara (nombres configurables vía camera.out)
     --drift              deriva lenta de luz (-1..1) [si ambient.drift]
     --dusk               "cae la tarde" al detenerse (0..1) [si ambient.dusk]
   ============================================================= */

/* el polvo flotante (lo crea el motor; aquí solo su aspecto base, personalizable) */
.dust {
  position: absolute;
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255, 240, 210, 0.85);
  pointer-events: none;
  will-change: transform, opacity;
}

/* sin movimiento: el polvo se retira (la plantilla define el resto de su estado de reposo) */
@media (prefers-reduced-motion: reduce) {
  .dust { display: none; }
}