/* ═══════════════════════════════════════════════════════════════════════════════
   BASE DE MOVIMIENTO — PressPlay / Warever.  Se copia al <style> de la página.

   Regla de oro (MASTER §4:486): NADA VISIBLE DEPENDE DE JAVASCRIPT.
   El ticker de GSAP duerme con la pestaña oculta y el IntersectionObserver no
   reporta mientras el navegador se salta el render. Un enlace abierto en pestaña
   de fondo —lo normal cuando el cliente hace clic desde WhatsApp o correo— tiene
   que mostrar la propuesta COMPLETA. Por eso el reveal es una transición CSS y el
   JS solo agrega la clase `.in`.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Curvas y tiempos del grupo ─────────────────────────────────────────────── */
:root{
  --ease:cubic-bezier(.16,1,.3,1);  /* entrada/salida — el out-expo suave del grupo */
  --ease-io:cubic-bezier(.4,0,.2,1);/* movimientos que van y vuelven */
  --t-ui:.18s;                      /* micro-interacción: hover, press, check */
  --t-comp:.28s;                    /* componente: card, dropdown, toast */
  --t-rev:.7s;                      /* reveal de sección — no bloquea nada */
}

/* ── Reveal al scroll ───────────────────────────────────────────────────────── */
.rev{
  opacity:0; transform:translateY(22px);
  transition:opacity var(--t-rev) var(--ease), transform var(--t-rev) var(--ease);
}
.rev.in{ opacity:1; transform:none }

/* Escalonado: 30–80 ms entre hermanos, nunca todo de golpe. */
.rev[data-d="1"]{transition-delay:.06s}
.rev[data-d="2"]{transition-delay:.12s}
.rev[data-d="3"]{transition-delay:.18s}
.rev[data-d="4"]{transition-delay:.24s}

/* ── Entradas de capas (modal, card, lightbox) ──────────────────────────────── */
/* Nunca desde scale(0): se arranca en .96 + opacidad. */
@keyframes pop{ from{opacity:0;transform:translateY(14px) scale(.96)} to{opacity:1;transform:none} }
.pop:not([hidden]){ animation:pop var(--t-comp) var(--ease) both }

/* Un `display` propio LE GANA al atributo `hidden` → queda una capa invisible de
   pantalla completa que se traga TODOS los clicks, sin un error en consola.
   Toda capa con display propio necesita su regla [hidden]. (MASTER §4:577) */
[hidden]{ display:none !important }

/* ── Hover solo donde hay puntero fino ──────────────────────────────────────── */
@media (hover:hover) and (pointer:fine){
  .lift{ transition:transform var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease) }
  .lift:hover{ transform:translateY(-3px) }
}

/* ── Respaldo estático cuando no hay 3D (?nogl, GPU rota, sin WebGL) ─────────── */
.no-webgl canvas[data-3d]{ display:none }
.no-webgl [data-fallback]{ display:block }
[data-fallback]{ display:none }

/* ── Accesibilidad: gentil, no cero ─────────────────────────────────────────── */
/* Se conservan opacidad y color; se quita el desplazamiento. El contenido NUNCA
   se esconde por esta vía. */
@media (prefers-reduced-motion:reduce){
  .rev{ opacity:1 !important; transform:none !important; transition:none !important }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  html{ scroll-behavior:auto }
  .lift:hover{ transform:none }
}

/* ── Ratio: candado del dueño. Contain + fondo de marca en TODA capa visual. ── */
/* Cover en ultrawide recorta ~31% y se ve "zoomeado". Ojo con reglas legacy que
   ganan por orden o especificidad: verificar con getComputedStyle, no por fe. */
video, canvas[data-3d], img.media{ object-fit:contain; background:var(--marca-fondo,#000) }