:root {
  /* DESIGN typography marker: IBM Plex Sans JP* JP** for bilingual-feeling notes */
  --obsidian: #07050B;
  --violet: #271034;
  --magenta: #FF2A8A;
  --mint: #5CFFD6;
  --clay: #8E2D1F;
  --rice: #E8D8B8;
  --persimmon: #FF7A1A;
  --display: "Bebas Neue", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --shade: "Bungee Shade", "Bebas Neue", fantasy;
  --body: "IBM Plex Sans JP", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--obsidian); color: var(--rice); }

body {
  overflow-x: auto;
  overflow-y: hidden;
  font-family: var(--body);
  cursor: crosshair;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: .2;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 24% 32%, rgba(255,255,255,.18) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 11%, rgba(232,216,184,.12) 0 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 48%, rgba(142,45,31,.16) 49% 51%, transparent 52%);
  background-size: 5px 5px, 7px 7px, 120px 120px;
}

.intro-mask {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--obsidian);
  overflow: hidden;
  transform: translateX(0);
  transition: transform 900ms cubic-bezier(.77,0,.18,1), opacity 700ms ease;
}

.intro-mask.revealed { transform: translateX(-105vw); opacity: .65; }
.intro-word { position: absolute; left: -5vw; top: 7vh; writing-mode: vertical-rl; font-family: var(--display); font-size: clamp(7rem, 20vw, 18rem); letter-spacing: .08em; color: var(--violet); transform: scaleX(.78); text-shadow: 18px 0 0 var(--clay); }
.intro-boo { position: absolute; right: 8vw; top: 47vh; font-family: var(--shade); font-size: clamp(2rem, 8vw, 7rem); color: var(--mint); animation: flicker 1.8s steps(2,end) infinite; }
.intro-slash { position: absolute; left: -30vw; top: 52vh; width: 160vw; height: 8vh; background: var(--magenta); transform: skewX(-24deg) translateX(-110%); animation: slashIn 1000ms cubic-bezier(.77,0,.18,1) 280ms forwards; box-shadow: 0 0 35px var(--magenta); }

.stage { display: flex; width: max-content; min-height: 100vh; position: relative; scroll-snap-type: x mandatory; }
.horizon { position: fixed; left: 0; right: 0; top: 62vh; height: 1px; z-index: 4; background: linear-gradient(90deg, transparent, var(--clay), var(--magenta), transparent); opacity: .72; }
.progress { position: fixed; left: 2rem; right: 2rem; bottom: 1rem; height: 4px; z-index: 40; background: rgba(232,216,184,.14); }
.progress span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--magenta), var(--mint), var(--persimmon)); box-shadow: 0 0 16px var(--mint); }

.panel {
  position: relative;
  width: 94vw;
  height: 100vh;
  flex: 0 0 94vw;
  overflow: hidden;
  scroll-snap-align: start;
  padding: clamp(1.4rem, 4vw, 4rem);
  border-right: 10px solid var(--clay);
  clip-path: polygon(0 0, calc(100% - 4vw) 0, 100% 18%, calc(100% - 2vw) 62%, 100% 100%, 0 100%);
  background: var(--obsidian);
}
.panel::before { content: attr(data-beat); position: absolute; right: 2vw; bottom: 9vh; font-family: var(--display); font-size: clamp(5rem, 15vw, 17rem); color: rgba(232,216,184,.035); letter-spacing: .06em; white-space: nowrap; }
.panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(255,42,138,.18) 0 2px, transparent 2px); background-size: 14px 14px; mask-image: linear-gradient(90deg, transparent, #000 25%, transparent 78%); opacity: .45; }

.panel-cold { margin-left: 0; background: linear-gradient(110deg, var(--obsidian) 0 58%, var(--violet) 58% 76%, var(--obsidian) 76%); }
.panel-remark { margin-left: -4vw; background: linear-gradient(180deg, var(--violet), var(--obsidian) 64%); }
.panel-blush { margin-left: -4vw; background: radial-gradient(circle at 55% 45%, rgba(255,42,138,.2), transparent 28%), var(--obsidian); }
.panel-honest { margin-left: -4vw; background: linear-gradient(100deg, var(--obsidian), var(--clay) 58%, var(--violet)); }
.panel-after { margin-left: -4vw; background: radial-gradient(circle at 75% 55%, rgba(92,255,214,.13), transparent 22%), var(--obsidian); }

.panel-kicker { position: relative; z-index: 3; margin: 0; color: var(--mint); font-size: .86rem; letter-spacing: .28em; text-transform: uppercase; }
.kinetic { position: relative; z-index: 5; margin: 0; font-family: var(--display); font-weight: 400; line-height: .82; letter-spacing: .05em; transform-origin: left center; animation: snapTrack 4.2s ease-in-out infinite; }
.shout { margin-top: 8vh; font-size: clamp(6rem, 19vw, 22rem); color: var(--rice); text-shadow: 10px 10px 0 var(--clay), 18px 18px 0 var(--violet); }
.vertical { position: absolute; left: 12vw; top: 9vh; writing-mode: vertical-rl; font-size: clamp(7rem, 18vw, 21rem); color: var(--magenta); text-shadow: -12px 0 0 var(--obsidian), 0 0 22px rgba(255,42,138,.45); }
.blush-word { position: absolute; left: 8vw; top: 19vh; font-size: clamp(5rem, 15vw, 17rem); color: var(--rice); }
.honest { position: absolute; left: 10vw; top: 16vh; font-size: clamp(7rem, 22vw, 24rem); color: var(--persimmon); text-shadow: 0 0 34px rgba(255,122,26,.42); }
.after-title { position: absolute; left: 7vw; top: 10vh; font-size: clamp(6rem, 16vw, 19rem); color: var(--rice); text-shadow: 12px 0 0 var(--mint), 20px 0 0 var(--violet); }

.title-slab { position: absolute; left: -1rem; top: 0; z-index: 6; width: 6rem; height: 100%; background: var(--violet); color: var(--magenta); font-family: var(--display); font-size: clamp(4rem, 8vw, 9rem); writing-mode: vertical-rl; display: flex; justify-content: space-around; align-items: center; letter-spacing: .08em; box-shadow: 16px 0 0 var(--clay); }
.curtain { position: absolute; top: 0; bottom: 0; width: 18vw; z-index: 2; background: repeating-linear-gradient(90deg, var(--violet) 0 16px, #1a0a24 16px 34px); opacity: .8; }
.curtain-left { right: -7vw; transform: skewX(-8deg); }
.curtain-right { right: -3vw; transform: skewX(8deg); }
.slash { position: absolute; z-index: 7; left: 44vw; top: 0; width: 9vw; height: 100%; background: var(--magenta); transform: skewX(-18deg); box-shadow: 0 0 26px var(--magenta); }

.bubble, .speech { position: absolute; z-index: 8; min-width: 9rem; padding: .75rem 1rem; background: var(--rice); color: var(--obsidian); border: 3px solid var(--obsidian); font-weight: 700; transform: rotate(-5deg); box-shadow: 10px 10px 0 var(--magenta); transition: transform 260ms ease, background 260ms ease, box-shadow 260ms ease; }
.panel-cold .bubble { left: 58vw; top: 27vh; }
.panel-blush .bubble { left: 54vw; top: 35vh; }
.bubble::after { content: attr(data-alt); position: absolute; inset: 0; display: grid; place-items: center; background: var(--mint); color: var(--violet); opacity: 0; transition: opacity 220ms ease; }
.bubble.flipped { transform: rotate(2deg) translateX(16px); box-shadow: 10px 10px 0 var(--mint); }
.bubble.flipped::after { opacity: 1; }
.note { position: absolute; z-index: 5; max-width: 24rem; font-size: clamp(1rem, 1.35vw, 1.25rem); line-height: 1.7; }
.note-rice { left: 62vw; top: 62vh; color: var(--rice); border-left: 2px solid var(--mint); padding-left: 1rem; }
.torn { right: 10vw; bottom: 14vh; color: var(--obsidian); background: var(--rice); padding: 1rem; clip-path: polygon(0 7%, 100% 0, 96% 100%, 4% 93%); }

.ghost, .final-ghost { position: absolute; z-index: 9; width: 7rem; height: 8.5rem; background: var(--rice); border: 4px solid var(--obsidian); border-radius: 48% 48% 18% 18%; box-shadow: 0 0 0 4px var(--mint), 0 0 24px rgba(92,255,214,.35); transition: transform 180ms ease, box-shadow 180ms ease; }
.ghost::after, .final-ghost::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: -18px; height: 28px; background: linear-gradient(135deg, var(--rice) 0 25%, transparent 25% 50%, var(--rice) 50% 75%, transparent 75%); background-size: 42px 28px; }
.ghost-one { right: 10vw; bottom: 8vh; }
.ghost-two { left: 65vw; top: 18vh; }
.final-ghost { right: 17vw; top: 31vh; transform: scale(1.25); }
.brow { position: absolute; top: 2.2rem; width: 1.4rem; height: .28rem; background: var(--obsidian); }
.brow-left { left: 1.6rem; transform: rotate(25deg); }
.brow-right { right: 1.6rem; transform: rotate(-25deg); }
.arm { position: absolute; top: 4.7rem; width: 2.8rem; height: .35rem; background: var(--obsidian); }
.arm-left { left: 1.2rem; transform: rotate(28deg); }
.arm-right { right: 1.2rem; transform: rotate(-28deg); }
.blush { position: absolute; left: 50%; top: 3.8rem; width: 4.8rem; height: 1.1rem; transform: translateX(-50%) scaleX(.1); opacity: 0; background: radial-gradient(circle, var(--magenta) 0 36%, transparent 40%) 0 0 / 1.2rem 1rem repeat-x; transition: opacity 180ms ease, transform 180ms ease; }
.ghost.near, .final-ghost.near { transform: translateY(-8px) rotate(-2deg); box-shadow: 0 0 0 4px var(--magenta), 0 0 34px var(--mint); }
.ghost.near .blush, .final-ghost.near .blush { opacity: 1; transform: translateX(-50%) scaleX(1); }

.annotation-rail { position: absolute; left: 40vw; top: 25vh; z-index: 6; width: 38vw; border-top: 2px solid var(--mint); color: var(--mint); transform: rotate(-17deg); padding-top: .6rem; letter-spacing: .18em; }
.crossout { position: absolute; left: 43vw; top: 48vh; z-index: 6; font-size: clamp(1.2rem, 2vw, 2.2rem); color: var(--rice); }
.crossout::after { content: ""; position: absolute; left: -5%; right: -5%; top: 50%; height: .28rem; background: var(--magenta); transition: transform 260ms ease; }
.crossout.revealed::before { content: attr(data-readable); color: var(--mint); }
.crossout.revealed { color: transparent; }
.crossout.revealed::after { transform: scaleX(.08); transform-origin: right; }
.ticket { position: absolute; right: 13vw; top: 12vh; z-index: 5; padding: 1.1rem 1.8rem; background: var(--rice); color: var(--clay); font-family: var(--display); font-size: 2rem; transform: rotate(9deg); border: 6px double var(--clay); }
.starburst { position: absolute; right: 27vw; bottom: 18vh; z-index: 6; width: 10rem; height: 10rem; display: grid; place-items: center; clip-path: polygon(50% 0, 62% 31%, 98% 18%, 73% 50%, 98% 82%, 61% 70%, 50% 100%, 38% 70%, 2% 82%, 27% 50%, 2% 18%, 38% 31%); background: var(--persimmon); color: var(--obsidian); font-family: var(--display); font-size: 7rem; }
.whisper { position: absolute; left: 11vw; bottom: 10vh; z-index: 5; color: var(--rice); max-width: 20rem; }
.checkers { position: absolute; inset: 0; background-image: linear-gradient(45deg, rgba(232,216,184,.12) 25%, transparent 25% 75%, rgba(232,216,184,.12) 75%), linear-gradient(45deg, rgba(232,216,184,.12) 25%, transparent 25% 75%, rgba(232,216,184,.12) 75%); background-position: 0 0, 18px 18px; background-size: 36px 36px; opacity: .38; }
.tone-rain { position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(92,255,214,.2) 0 2px, transparent 2px 12px); opacity: .32; }
.boo-shade, .last-boo { position: absolute; z-index: 8; font-family: var(--shade); color: var(--mint); filter: drop-shadow(0 0 18px var(--mint)); animation: flicker 2.6s steps(2,end) infinite; }
.boo-shade { right: 16vw; top: 8vh; font-size: clamp(4rem, 10vw, 11rem); }
.rings { position: absolute; inset: -20%; background: repeating-radial-gradient(circle at 66% 42%, transparent 0 28px, rgba(232,216,184,.1) 29px 31px); }
.paper-stack { position: absolute; z-index: 8; right: 14vw; top: 26vh; width: min(28rem, 36vw); color: var(--obsidian); }
.paper-stack p { margin: 0 0 .7rem; padding: .8rem 1rem; background: var(--rice); transform: translateX(2rem); box-shadow: -9px 9px 0 var(--violet); }
.paper-stack .warm { background: var(--persimmon); }
.slide-box { position: absolute; left: 13vw; bottom: 13vh; z-index: 7; color: var(--rice); font-size: 1.3rem; border: 2px solid var(--mint); padding: 1rem 1.4rem; overflow: hidden; }
.slide-box::before { content: ""; position: absolute; inset: 0; background: var(--violet); transform: translateX(0); transition: transform 500ms cubic-bezier(.77,0,.18,1); }
.slide-box.open::before { transform: translateX(105%); }
.slide-box span { position: relative; z-index: 2; }
.mint-outline { position: absolute; right: 8vw; bottom: 11vh; width: 20vw; height: 20vw; border: 2px solid var(--mint); transform: rotate(14deg); box-shadow: 0 0 22px rgba(92,255,214,.38); }
.final-line { position: absolute; left: 47vw; bottom: 18vh; z-index: 8; display: grid; gap: .4rem; font-size: clamp(1.3rem, 2.4vw, 2.7rem); line-height: 1.25; color: var(--rice); }
.final-line span:last-child { color: var(--persimmon); }
.last-boo { left: 10vw; bottom: 12vh; font-size: clamp(3rem, 8vw, 9rem); }

@keyframes slashIn { to { transform: skewX(-24deg) translateX(0); } }
@keyframes flicker { 0%, 40%, 100% { opacity: 1; } 42%, 49% { opacity: .28; } 51%, 55% { opacity: .76; } }
@keyframes snapTrack { 0%, 100% { letter-spacing: .04em; transform: scaleX(.9); } 50% { letter-spacing: .12em; transform: scaleX(1.04); } }

@media (max-width: 760px) {
  body { overflow-y: hidden; }
  .panel { width: 100vw; flex-basis: 100vw; margin-left: -5vw; }
  .panel:first-of-type { margin-left: 0; }
  .paper-stack { width: 70vw; right: 6vw; }
  .annotation-rail { left: 28vw; width: 60vw; }
}