/* ==========================================================
   PORTADA · motion graphics loop  (lienzo base 1920 x 1080)
   ========================================================== */
:root{--red:#ff0032}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:var(--red)}
body{cursor:default;-webkit-user-select:none;user-select:none}

#stage{position:fixed;inset:0;width:100vw;height:100vh;display:block;background:var(--red)}
#noise{position:fixed;inset:0;width:100vw;height:100vh;object-fit:cover;image-rendering:pixelated;
  pointer-events:none;opacity:0;mix-blend-mode:normal}

/* Las animaciones de transform giran sobre el centro de cada elemento */
.pivot{transform-box:fill-box;transform-origin:center}
#logo{fill:#fff;fill-rule:evenodd;stroke:#fff;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
#stage image{image-rendering:auto}

@media (prefers-reduced-motion:reduce){ /* sigue animando: es una pieza de motion; solo se quita el ruido fuerte */
  #noise{display:none}
}

/* ---- FONDO: textura sutil (grano + viñeta) ---- */
#vignette{position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(0,0,0,0) 55%,rgba(60,0,10,.30) 100%);transition:none}
#grain{position:fixed;inset:0;width:100vw;height:100vh;object-fit:cover;image-rendering:pixelated;
  pointer-events:none;opacity:.10;mix-blend-mode:overlay}
body.no-bg #vignette,body.no-bg #grain{display:none}   /* se apaga en la pantalla de barras */