/* ===================================================================
   CINEMA SLAUGHTER — opening title card (Bubble Skull) styles
   =================================================================== */
.intro { display: grid; place-items: center; min-height: 100cqh; overflow: hidden; cursor: pointer; background: #000; }

/* drifting iridescent soap bubbles */
.intro-bubbles { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.ibub {
  position: absolute; bottom: -70px; width: var(--s); height: var(--s); border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,1) 0 7%, rgba(255,255,255,.22) 15%, transparent 46%),
    radial-gradient(circle at 70% 74%, hsla(calc(var(--hue) * 1deg), 100%, 75%, .5), transparent 50%),
    conic-gradient(from 200deg,
      hsla(calc(var(--hue) * 1deg), 95%, 68%, .42),
      hsla(calc(var(--hue) * 1deg + 100deg), 95%, 68%, .42),
      hsla(calc(var(--hue) * 1deg + 210deg), 95%, 68%, .42),
      hsla(calc(var(--hue) * 1deg), 95%, 68%, .42));
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: inset 0 0 10px rgba(255,255,255,.45), 0 0 16px hsla(calc(var(--hue) * 1deg), 95%, 72%, .45);
  mix-blend-mode: screen;
  animation: bubrise var(--d) linear var(--delay) infinite;
}
@keyframes bubrise {
  0%   { transform: translateY(115cqh) translateX(0) scale(.9); opacity: 0; }
  6%   { opacity: 1; }
  50%  { transform: translateY(45cqh) translateX(var(--drift)) scale(1); opacity: 1; }
  88%  { opacity: .95; transform: translateY(-8vh) translateX(0) scale(1); }
  94%  { opacity: 1; transform: translateY(-12vh) scale(1.22); }
  96%, 100% { opacity: 0; transform: translateY(-14vh) scale(1.4); }
}

/* rainbow bloom behind the skull (transparent centre so the skull stays crisp) */
.intro-glow {
  position: absolute; left: 50%; top: 45%; width: min(880px, 124cqw); aspect-ratio: 1; z-index: 1;
  transform: translate(-50%,-50%) scale(.6);
  background: radial-gradient(circle, transparent 17%, rgba(255,140,40,.45) 29%, rgba(255,40,150,.42) 42%, rgba(150,40,255,.34) 55%, transparent 72%);
  filter: blur(42px); opacity: 0; mix-blend-mode: screen; pointer-events: none;
  animation: bloom 2.4s ease .7s forwards, glowpulse 5s ease-in-out 3.2s infinite;
}
@keyframes bloom { to { opacity: .9; transform: translate(-50%,-50%) scale(1); } }
@keyframes glowpulse { 0%,100% { filter: blur(42px); } 50% { filter: blur(56px); } }

/* the logo develops in inside a 35mm film cell (black gate = intentional) */
.intro-stage { position: relative; z-index: 3; text-align: center; padding: 24px; display: flex; flex-direction: column; align-items: center; }

.film-cell {
  position: relative; display: flex; align-items: stretch; width: min(440px, 80cqw);
  background: linear-gradient(180deg, #100e12, #070608);
  border-radius: 5px; overflow: hidden;
  box-shadow: 0 34px 70px -26px rgba(0,0,0,.92), 0 0 0 1px rgba(255,255,255,.05), inset 0 0 0 1px rgba(0,0,0,.6);
  opacity: 0; transform: scale(1.13); filter: blur(15px) brightness(.5) saturate(1.2);
  animation: develop 1.7s cubic-bezier(.2,.7,.3,1) 1s forwards, weave .6s steps(3) 2.9s infinite;
}
@keyframes develop { 60% { opacity: 1; } to { opacity: 1; transform: scale(1); filter: blur(0) brightness(1) saturate(1.04); } }
@keyframes weave { 0% { transform: translate(0,0); } 33% { transform: translate(.4px,-1px); } 66% { transform: translate(-.4px,1px); } 100% { transform: translate(0,0); } }

.perf { flex: 0 0 auto; width: 24px; display: flex; flex-direction: column; justify-content: space-around; align-items: center;
  padding: 12px 0; background: linear-gradient(90deg, #000, #16141a 50%, #000); }
.perf i { width: 11px; height: 15px; border-radius: 3px; background: #ece4d0; box-shadow: inset 0 1px 2px rgba(0,0,0,.45); }

.gate { position: relative; flex: 1; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, rgba(150,40,170,.22), #000 76%);
  border-left: 1px solid rgba(255,255,255,.05); border-right: 1px solid rgba(255,255,255,.05); }
.intro-logo { width: 100%; display: block; mix-blend-mode: screen; }

/* projector flicker over the gate */
.gate-flicker { position: absolute; inset: 0; pointer-events: none; background: rgba(255,250,235,.05);
  mix-blend-mode: overlay; opacity: 0; animation: flicker .42s steps(2) 2.8s infinite; }
@keyframes flicker { 0%,100% { opacity: 0; } 50% { opacity: .5; } }

/* wet gloss sweep, clipped to the gate */
.logo-gloss { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.logo-gloss::before {
  content: ""; position: absolute; top: -20%; left: -65%; width: 42%; height: 140%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.7), transparent);
  transform: skewX(-16deg); mix-blend-mode: overlay; opacity: 0;
  animation: gloss 1.25s ease 2.5s 1;
}
@keyframes gloss { 0% { left: -65%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 125%; opacity: 0; } }

.edge-code { font-family: 'Space Mono', monospace; font-size:calc((9px) * var(--text-scale,1)); letter-spacing: .28em; color: rgba(255,255,255,.32); margin-top: 11px; opacity: 0; animation: introFade .9s ease 2.6s forwards; }

.intro-kicker { font-family: 'Space Mono', monospace; font-size:calc((12px) * var(--text-scale,1)); letter-spacing: .34em; color: rgba(255,255,255,.55); margin-bottom: 12px; opacity: 0; animation: introFade .9s ease .5s forwards; }
.intro-tag { font-family: 'Space Mono', monospace; font-size:calc((11px) * var(--text-scale,1)); letter-spacing: .26em; color: rgba(255,255,255,.5); margin-top: 2px; opacity: 0; animation: introFade .9s ease 3s forwards; }
@keyframes introFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.intro-skip { position: absolute; bottom: 22px; right: 22px; z-index: 5; font-family: 'Space Mono', monospace; font-size:calc((11px) * var(--text-scale,1)); letter-spacing: .16em; color: rgba(255,255,255,.45); padding: 8px 14px; border-radius: 40px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); opacity: 0; animation: introFade .8s ease 1.4s forwards; transition: color .15s, box-shadow .15s; }
.intro-skip:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }

/* ===================== SLASHER CUT-OUT ===================== */
.slash-fx { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }

/* two fast blade glints rake across */
.blade { position: absolute; top: -25%; height: 150%; width: 9%; left: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.98) 48%, rgba(220,240,255,.95) 52%, transparent);
  filter: blur(.3px) drop-shadow(0 0 14px rgba(180,220,255,.85));
  transform: skewX(-22deg) translateX(-130vw); opacity: 0; }
.intro.popping .blade.b1 { animation: blade .26s ease-in .02s forwards; }
.intro.popping .blade.b2 { animation: blade .26s ease-in .16s forwards; }
@keyframes blade {
  0%   { opacity: 0; transform: skewX(-22deg) translateX(-130vw); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: skewX(-22deg) translateX(130cqw); }
}

/* red flash at the moment of the cut */
.redflash { position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(190,12,12,.7), rgba(90,0,0,.45) 70%); }
.intro.popping .redflash { animation: redflash .55s ease .3s; }
@keyframes redflash { 0% { opacity: 0; } 14% { opacity: .9; } 100% { opacity: 0; } }

/* glowing blood gash along the cut line */
.gash { position: absolute; inset: -10%;
  background: linear-gradient(45deg, transparent calc(50% - 2px), rgba(255,70,40,.9) calc(50% - 1px), rgba(255,235,220,.98) 50%, rgba(255,70,40,.9) calc(50% + 1px), transparent calc(50% + 2px));
  filter: blur(.4px) drop-shadow(0 0 16px rgba(255,40,30,.95)); opacity: 0; transform: scaleY(1.4); }
.intro.popping .gash { animation: gash .8s ease .3s forwards; }
@keyframes gash { 0% { opacity: 0; } 22% { opacity: 1; } 60% { opacity: 1; } 100% { opacity: .15; } }

/* the darkness slices in along the "\" cut and slams to black */
.panel { position: absolute; inset: -2px; background: #000; opacity: 0; }
.panel.pa { clip-path: polygon(0 0, 100% 0, 100% 100%); }
.panel.pb { clip-path: polygon(0 0, 100% 100%, 0 100%); }
.intro.popping .panel.pa { animation: slamA .36s cubic-bezier(.4,0,.2,1) .28s forwards; }
.intro.popping .panel.pb { animation: slamB .36s cubic-bezier(.4,0,.2,1) .28s forwards; }
@keyframes slamA { 0% { opacity: 1; transform: translate(62%,-62%); } 100% { opacity: 1; transform: translate(0,0); } }
@keyframes slamB { 0% { opacity: 1; transform: translate(-62%,62%); } 100% { opacity: 1; transform: translate(0,0); } }
.intro.popping .intro-stage { animation: introOut .35s ease .32s forwards; }
@keyframes introOut { to { opacity: 0; } }

/* blood spatter flicking from the cut */
.spatter { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.spatter i { position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ff5a3c, #8c0a0a 70%); opacity: 0;
  transform: translate(-50%,-50%) scale(.3); }
.intro.popping .spatter i { animation: spat .6s ease .32s forwards; }
@keyframes spat {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.2); }
  20% { opacity: 1; }
  100% { opacity: 0;
    transform: translate(calc(-50% + (var(--i) - 4) * 60px), calc(-50% + (var(--i) - 4) * 38px - 40px)) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .blade, .gash, .spatter i { animation: none !important; opacity: 0; }
  .intro.popping .redflash { animation: redflash .4s ease forwards; }
  .intro.popping .panel { opacity: 1; animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ibub, .intro-glow, .intro-kicker, .intro-tag, .intro-skip, .edge-code, .logo-gloss::before, .gate-flicker { animation: none; opacity: 1; }
  .intro-glow { opacity: .85; transform: translate(-50%,-50%) scale(1); }
  .gate-flicker { opacity: 0; }
  .film-cell { animation: none; opacity: 1; transform: none; filter: none; }
}

/* VHS tracking glitch just before the cut */
.vhs-band { position: absolute; left: 0; right: 0; top: -10%; height: 16px; z-index: 5; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.55), rgba(255,255,255,.12), transparent); mix-blend-mode: screen; }
.intro.glitching .vhs-band { animation: vhsRoll .5s linear; }
@keyframes vhsRoll { 0% { top: -10%; opacity: 0; } 18% { opacity: .9; } 100% { top: 110%; opacity: 0; } }
.intro.glitching .intro-stage { animation: vhsJitter .1s steps(2) 5; }
@keyframes vhsJitter { 0% { transform: translate(0,0); } 25% { transform: translate(-6px,1px) skewX(2deg); } 50% { transform: translate(5px,-1px); } 75% { transform: translate(-3px,0) skewX(-1deg); } }
.intro.glitching .intro-logo { animation: rgbsplit .1s steps(2) 5; }
@keyframes rgbsplit {
  0% { filter: none; }
  33% { filter: drop-shadow(-3px 0 rgba(255,0,90,.85)) drop-shadow(3px 0 rgba(0,230,255,.85)); }
  66% { filter: drop-shadow(3px 0 rgba(255,0,90,.85)) drop-shadow(-3px 0 rgba(0,230,255,.85)); }
}