/* ==========================================================================
   AR+ — efectos de cine: grano, destellos de luz, barras de cine (letterbox),
   cortinilla de alas, whip pan y video dentro del texto.
   Capas fijas sin eventos de puntero. Depende de css/tokens.css.
   ========================================================================== */

/* --- Grano de película (textura generada en canvas por js/fx.js) -------- */
.arp-grain {
  position: fixed;
  inset: -50%;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.07;
  background-repeat: repeat;
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  animation: arp-grain 0.9s steps(6) infinite;
}
@keyframes arp-grain {
  0% { transform: translate(0, 0); }
  17% { transform: translate(-6%, 4%); }
  33% { transform: translate(5%, -7%); }
  50% { transform: translate(-3%, 8%); }
  67% { transform: translate(7%, 2%); }
  83% { transform: translate(-8%, -4%); }
  100% { transform: translate(0, 0); }
}

/* --- Destellos de luz (light leaks) en el rojo de marca ------------------ */
.arp-leaks {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-letterbox) - 1);
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
}
.arp-leak {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  opacity: 0;
  filter: blur(60px);
  will-change: transform, opacity;
}
.arp-leak--a {
  top: -35vmax;
  left: -25vmax;
  background: radial-gradient(closest-side, #FF2D5599, #E11D4840 55%, #E11D4800 100%);
}
.arp-leak--b {
  bottom: -40vmax;
  right: -30vmax;
  background: radial-gradient(closest-side, #FF8FA380, #FF5A7833 50%, #FF5A7800 100%);
}
.arp-leak--c {
  top: 20vh;
  right: -45vmax;
  width: 60vmax;
  height: 40vmax;
  background: radial-gradient(closest-side, #FFB54766, #FF7A3D26 60%, #FF7A3D00 100%);
}

/* --- Barras de cine (letterbox) ------------------------------------------ */
.arp-letterbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-letterbox);
  pointer-events: none;
}
.arp-letterbox__bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 13vh;
  background: var(--bg-deep);
  transform: scaleY(0);
  will-change: transform;
}
.arp-letterbox__bar--top {
  top: 0;
  transform-origin: top;
}
.arp-letterbox__bar--bottom {
  bottom: 0;
  transform-origin: bottom;
}
/* Estado cerrado (lo controla js/fx.js; con CSS se puede forzar) */
.arp-letterbox.is-closed .arp-letterbox__bar {
  transform: scaleY(1);
}

/* --- Cortinilla de alas: tres trazos diagonales que barren la pantalla --- */
.arp-wipe {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) - 1);
  pointer-events: none;
  overflow: hidden;
  visibility: hidden;
}
.arp-wipe.is-active {
  visibility: visible;
}
.arp-wipe__blade {
  position: absolute;
  top: -40%;
  left: -20%;
  width: 70%;
  height: 180%;
  border-radius: 50% / 8%;
  transform: translateX(-130%) skewX(-24deg);
  will-change: transform;
}
.arp-wipe__blade--1 { background: var(--red); }
.arp-wipe__blade--2 { background: var(--logo-wing-2); left: 10%; }
.arp-wipe__blade--3 { background: var(--bg-deep); left: 40%; width: 90%; }

/* Versión contenida (para componentes y vistas previas) */
.arp-wipe--contained {
  position: absolute;
  z-index: 2;
}

/* --- Whip pan: desenfoque horizontal (filtro SVG #arp-whip) -------------- */
.is-whipping {
  filter: url(#arp-whip);
}

/* --- Video dentro del texto (la máscara la genera js/fx.js) -------------- */
.arp-vtext {
  position: relative;
  display: block;
  line-height: 0.88;
}
.arp-vtext__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  opacity: 0;
  transition: opacity var(--dur-base) linear;
}
.arp-vtext.is-masked .arp-vtext__video {
  opacity: 1;
}
.arp-vtext.is-masked .arp-vtext__text {
  color: transparent;
  -webkit-text-stroke: 1px #FFFFFF26;
}
.arp-vtext__text {
  display: block;
  transition: color var(--dur-base) linear;
}

/* --- Rack focus y revelados (estado inicial; el JS anima a nítido) ------- */
.js [data-rack] {
  opacity: 0;
  filter: blur(var(--blur-focus));
}
.js [data-reveal] {
  opacity: 0;
}

/* --- Viñeta general del encuadre ----------------------------------------- */
.arp-vignette {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-letterbox) - 2);
  pointer-events: none;
  background: radial-gradient(130% 100% at 50% 50%, #06060C00 60%, #06060C8C 100%);
}

/* Sin movimiento: todo visible desde el inicio, sin grano animado, destellos ni cortinillas */
@media (prefers-reduced-motion: reduce) {
  .js [data-rack],
  .js [data-reveal] {
    opacity: 1 !important;
    filter: none !important;
  }
  .arp-grain { animation: none; }
  .arp-leaks,
  .arp-wipe { display: none; }
}