*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body[data-immersive='1'] {
  background: #000000;
  overflow-x: hidden;
  overflow-y: visible;
  --art-color: #ffffff;
  --stab-bg: #000000;
}

.knife-stab-root {
  --art-color: #ffffff;
  --stab-bg: #000000;
  background: #000000;
  overflow-x: hidden;
}

/* Pinned scroll: knife stab, then a short hold at the red stab frame */
.scene {
  height: 375vh;
}

.scene__sticky {
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
}

/* Knife wrapper — rotates around viewport top-left (0 0) */
#knife-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transform-origin: 0 0;
}

#knife-wrap svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Knife, stab line, and drip share one art color (animated via --art-color). */
#knife-wrap path:not([stroke="#ff0000"]) {
  fill: var(--art-color);
}

/* Full-screen SVG for the stab line */
#stab-svg {
  position: absolute;
  inset: 0;
  z-index: 3.5;
  pointer-events: none;
}

#stab-path-fill {
  fill: var(--stab-bg);
  stroke: none;
}

#stab-path {
  fill: none;
  stroke: var(--art-color);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─── Red-toggle sticker — behind copy, right half ─── */

.red-toggle-wrap {
  position: absolute;
  left: 50%;
  width: 50%;
  top: 50%;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-inline: clamp(0.5rem, 3vw, 2rem);
  box-sizing: border-box;
  pointer-events: none;
  overflow: visible;
  transform: translateY(-50%);
}

.red-toggle-wrap.is-drip-fixed {
  position: fixed;
  z-index: 2;
  transform: none;
  will-change: transform;
}

.red-toggle-wrap.is-drip-released {
  pointer-events: none;
}

.red-toggle-wrap .red-toggle.img-sticker {
  width: min(44vw, 40vh);
  margin: 0;
}

.red-toggle-rotate {
  position: relative;
  z-index: 1;
  transform-origin: center center;
}

/* ─── Stab heart burst (neon hearts from scene-sticker) ─── */

.stab-hearts {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}

.stab-heart {
  position: absolute;
  width: clamp(80px, 12vw, 128px);
  height: clamp(80px, 12vw, 128px);
  transform-origin: center center;
  will-change: transform, opacity;
}

.stab-heart__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.stab-heart__outer {
  fill: none;
  stroke: var(--heart-outline, #39ff14);
  stroke-width: 7;
  stroke-linejoin: round;
  stroke-linecap: round;
  paint-order: stroke fill;
}

.stab-heart__inner {
  fill: none;
  stroke: #050505;
  stroke-width: 5;
  stroke-linejoin: round;
  stroke-linecap: round;
  paint-order: stroke fill;
}

.stab-heart__fill {
  fill: var(--heart-fill, #ff2d95);
  stroke: none;
}

.red-toggle__bleed-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  opacity: 0;
  pointer-events: none;
}

.red-toggle.is-bleed [data-layer="normal"] {
  opacity: 0;
}

.red-toggle.is-bleed .red-toggle__bleed-layer {
  opacity: 1;
}

.red-toggle [data-layer] {
  transition: opacity 0.35s ease;
}

/* Scroll distance: drip + sticker travel together, then drip remains fixed */
.drip-act {
  height: 180vh;
}

/* Fixed overlay — positioned at stab point by JS when revealed */
.drip-wrap {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  pointer-events: none;
  transform-origin: center top;
  will-change: transform;
  overflow: visible;
  visibility: hidden;
  scale: 0;
}

.drip-wrap.is-live {
  visibility: visible;
}

#drip-svg {
  display: block;
  width: 4.5vh;
  height: auto;
  overflow: visible;
}

#drip-path {
  fill: var(--art-color);
}

/* ─── Sticker copy — txt-stack (T3 stacked offset shadow) ─── */

@keyframes stab-copy-stack-shadow {
  0%,
  49.99% {
    text-shadow:
      6px 6px 0 #050505,
      12px 12px 0 var(--stack-accent, #4338ca);
  }

  50%,
  100% {
    text-shadow:
      10px 10px 0 #050505,
      19px 19px 0 var(--stack-accent, #4338ca);
  }
}

.stab-copy {
  --copy-fill: #ffffff;
  --stack-accent: #e91e8c;
  position: absolute;
  left: 50%;
  width: 50%;
  top: 50%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.02em;
  text-align: center;
  padding-inline: clamp(0.5rem, 3vw, 2rem);
  box-sizing: border-box;
  pointer-events: none;
  overflow: visible;
  will-change: transform;
}

.stab-copy.is-stabbed {
  --copy-fill: #ef4444;
  --stack-accent: #7f1d1d;
}

.stab-copy.is-stabbed .txt-stack {
  color: #ef4444;
}

.stab-copy.is-stabbed .stab-copy__word:not(.stab-copy__word--bleed) {
  visibility: hidden;
}

.stab-copy .txt-stack {
  margin: 0;
  font-family: 'Rubik', system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(2.4rem, 7.5vh, 5rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: var(--copy-fill);
  -webkit-text-stroke: 3px #050505;
  paint-order: stroke fill;
  text-shadow:
    6px 6px 0 #050505,
    12px 12px 0 var(--stack-accent);
  animation: stab-copy-stack-shadow calc(var(--frame-ms, 600ms) * 2) steps(1, end) infinite;
  transition: color 0.35s ease;
  will-change: transform, opacity;
}

.stab-copy__word--bleed {
  font-size: clamp(2.8rem, 9vh, 5.75rem);
  opacity: 0;
  transform-origin: center center;
}

/* Mobile / narrow: image right-aligned so knife stays visible */
@media (max-aspect-ratio: 10/11) {
  .red-toggle-wrap {
    left: auto;
    right: 0;
    width: 45vw;
    justify-content: flex-end;
    padding-inline: clamp(0.5rem, 2vw, 1rem) clamp(0.5rem, 3vw, 1.25rem);
  }

  .red-toggle-wrap .red-toggle.img-sticker {
    width: 100%;
    max-width: 45vw;
  }

  .stab-copy {
    left: 0;
    width: 100%;
  }

  .stab-copy .txt-stack {
    font-size: clamp(3rem, 14vw, 6.5rem);
  }

  .stab-copy__word--bleed {
    font-size: clamp(3.4rem, 16vw, 7.25rem);
  }
}