:root {
  /* IBM Plex Sans Condensed** Condensed* for short descriptions */
  --jasmine-paper: #F2E6C8;
  --oxblood: #8F2636;
  --soot: #171214;
  --teal: #356B67;
  --plum: #4B314D;
  --gold: #B88A3D;
  --coral: #D56F5F;
  --smoke: #C7B9A3;
  --display: 'Bebas Neue', Impact, sans-serif;
  --body: 'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif;
  --hand: 'Rock Salt', cursive;
}

* { box-sizing: border-box; }

html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--soot); color: var(--jasmine-paper); }

body { font-family: var(--body); text-transform: none; }

.sideways-stage { position: fixed; inset: 0; overflow: hidden; background: var(--soot); }

.scroll-track { height: 100vh; width: 500vw; display: flex; transform: translate3d(0,0,0); transition: transform 900ms cubic-bezier(.72,.02,.18,1); }

.panel { position: relative; width: 100vw; height: 100vh; flex: 0 0 100vw; overflow: hidden; border-right: 6px solid var(--soot); isolation: isolate; }

.panel::before { content: ""; position: absolute; inset: -20%; z-index: -3; background-image: linear-gradient(110deg, transparent 0 44%, rgba(242,230,200,.1) 45% 47%, transparent 48% 100%); transform: skewX(-13deg); }

.panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 9; background-image: repeating-linear-gradient(0deg, rgba(242,230,200,.035) 0 1px, transparent 1px 5px), radial-gradient(circle at 20% 30%, rgba(255,255,255,.05), transparent 18%); mix-blend-mode: screen; }

.mesh { position: absolute; inset: -18%; z-index: -2; filter: saturate(.88) contrast(1.05); animation: mesh-drift 15s ease-in-out infinite alternate; }
.mesh-a { background: radial-gradient(circle at 18% 24%, #8F2636 0 14%, transparent 32%), radial-gradient(circle at 70% 58%, #4B314D 0 18%, transparent 38%), radial-gradient(circle at 48% 18%, #356B67 0 9%, transparent 28%), #171214; }
.mesh-b { background: radial-gradient(circle at 60% 28%, #356B67 0 18%, transparent 41%), radial-gradient(circle at 33% 68%, #B88A3D 0 11%, transparent 34%), radial-gradient(circle at 70% 78%, #8F2636 0 10%, transparent 28%), #F2E6C8; opacity: .9; }
.mesh-c { background: radial-gradient(circle at 30% 40%, #4B314D 0 23%, transparent 44%), radial-gradient(circle at 68% 26%, #8F2636 0 18%, transparent 40%), radial-gradient(circle at 54% 82%, #356B67 0 17%, transparent 36%), #171214; }
.mesh-d { background: radial-gradient(circle at 12% 25%, #D56F5F 0 12%, transparent 33%), radial-gradient(circle at 44% 55%, #356B67 0 18%, transparent 39%), radial-gradient(circle at 83% 20%, #B88A3D 0 16%, transparent 38%), #4B314D; opacity: .86; }
.mesh-e { background: radial-gradient(circle at 28% 22%, #C7B9A3 0 9%, transparent 30%), radial-gradient(circle at 70% 35%, #356B67 0 14%, transparent 42%), radial-gradient(circle at 52% 75%, #8F2636 0 12%, transparent 34%), #171214; }

.halftone { position: absolute; inset: 0; opacity: .26; background-image: radial-gradient(circle, var(--jasmine-paper) 1px, transparent 1.8px); background-size: 13px 13px; mix-blend-mode: overlay; transform: rotate(-4deg) scale(1.08); }
.halftone.strong { opacity: .38; background-size: 10px 10px; }

.paper-rip { position: absolute; left: -4vw; right: -4vw; height: 18vh; background: var(--jasmine-paper); clip-path: polygon(0 0,100% 0,100% 60%,92% 53%,86% 74%,78% 44%,69% 65%,61% 50%,51% 73%,42% 48%,35% 67%,25% 48%,16% 70%,8% 51%,0 68%); opacity: .13; }
.rip-top { top: 0; }

.kicker { position: absolute; top: 7vh; left: 6vw; margin: 0; color: var(--smoke); font-size: clamp(17px, 2.2vw, 31px); letter-spacing: .08em; text-transform: uppercase; transform: rotate(-2deg); }
.wordmark { position: absolute; left: -4vw; top: 15vh; margin: 0; font-family: var(--display); font-size: clamp(108px, 22vw, 330px); letter-spacing: -.02em; line-height: .76; color: var(--jasmine-paper); text-shadow: 9px 0 0 var(--oxblood), -7px 6px 0 var(--teal); clip-path: polygon(0 0, 96% 0, 92% 35%, 100% 44%, 92% 100%, 0 100%); animation: stamp-jitter 2.1s steps(2,end) infinite; }
.buzz-sign { position: absolute; right: 8vw; top: 19vh; width: min(29vw, 360px); padding: 22px 20px 18px; border: 5px solid var(--soot); background: var(--oxblood); color: var(--jasmine-paper); font-family: var(--display); font-size: clamp(28px, 4vw, 58px); line-height: .9; letter-spacing: .03em; box-shadow: 10px 10px 0 var(--teal), -5px -5px 0 var(--coral); transform: rotate(4deg); animation: buzz 130ms infinite alternate; }
.jasmine-glyph { position: absolute; right: 18vw; bottom: 20vh; width: 22vw; max-width: 280px; stroke: var(--jasmine-paper); }
.counter-rail, .empty-counter { position: absolute; left: -3vw; right: -3vw; bottom: 0; height: 27vh; background: linear-gradient(105deg, #171214 0 35%, #4B314D 36% 54%, #171214 55%), repeating-linear-gradient(90deg, transparent 0 70px, rgba(242,230,200,.05) 70px 74px); border-top: 7px solid var(--gold); box-shadow: inset 0 16px 0 rgba(23,18,20,.75); }
.arrow-scribble { position: absolute; right: 9vw; bottom: 12vh; font-family: var(--hand); color: var(--coral); font-size: clamp(18px, 2vw, 30px); transform: rotate(-7deg); }

.noren { position: absolute; inset: 0; display: flex; gap: 1.2vw; padding: 0 10vw; z-index: 2; pointer-events: none; }
.noren span { flex: 1; height: 76vh; background: linear-gradient(180deg, var(--jasmine-paper), var(--smoke)); border: 4px solid var(--soot); clip-path: polygon(0 0,100% 0,100% 88%,80% 100%,63% 86%,44% 97%,28% 84%,0 96%); box-shadow: 8px 0 0 var(--oxblood); transform-origin: top center; animation: curtain-sway 4s ease-in-out infinite; }
.noren span:nth-child(even) { transform: translateY(-5vh) rotate(1.5deg); animation-delay: -1.5s; }
.vertical-title { position: absolute; left: 4vw; top: 4vh; writing-mode: vertical-rl; font-family: var(--display); font-size: clamp(70px, 12vw, 170px); line-height: .8; color: var(--oxblood); text-shadow: 6px 0 0 var(--teal); z-index: 4; margin: 0; }
.door-mark { position: absolute; right: 12vw; top: 13vh; font-family: var(--display); font-size: clamp(80px, 18vw, 240px); color: rgba(23,18,20,.72); z-index: 1; transform: rotate(3deg); }
.panel-note { position: absolute; right: 8vw; bottom: 16vh; max-width: 380px; color: var(--soot); background: var(--jasmine-paper); border: 5px solid var(--soot); padding: 24px; z-index: 5; font-size: clamp(19px, 2.1vw, 30px); line-height: 1; box-shadow: 10px 10px 0 var(--teal); transform: rotate(-2deg); }
.door-glyph { position: absolute; left: 37vw; bottom: 11vh; width: 24vw; stroke: var(--soot); z-index: 5; }

.panel-title, .poster-title, .final-title { position: absolute; margin: 0; font-family: var(--display); text-transform: uppercase; line-height: .8; letter-spacing: .01em; }
.panel-title { top: 5vh; left: 5vw; font-size: clamp(86px, 15vw, 220px); color: var(--jasmine-paper); text-shadow: 8px 8px 0 var(--oxblood), -7px 0 0 var(--teal); }
.bottle-row { position: absolute; left: 9vw; right: 10vw; bottom: 19vh; height: 55vh; display: flex; align-items: flex-end; justify-content: space-around; }
.bottle { position: relative; width: 16vw; min-width: 140px; background: linear-gradient(135deg, var(--teal), var(--plum)); border: 6px solid var(--soot); box-shadow: 14px 14px 0 rgba(23,18,20,.75), -7px 0 0 var(--coral); clip-path: polygon(34% 0, 63% 0, 60% 18%, 82% 100%, 10% 100%, 38% 18%); }
.bottle-one { height: 49vh; transform: rotate(-8deg); }
.bottle-two { height: 62vh; background: linear-gradient(160deg, var(--gold), var(--oxblood)); transform: rotate(3deg); }
.bottle-three { height: 52vh; transform: rotate(8deg); }
.bottle span { position: absolute; left: 18%; right: 12%; bottom: 18%; padding: 10px; background: var(--jasmine-paper); color: var(--soot); font-family: var(--display); font-size: clamp(25px, 3vw, 52px); line-height: .85; transform: rotate(-13deg); border: 4px solid var(--soot); }
.matchbook { position: absolute; background: var(--jasmine-paper); color: var(--soot); border: 4px solid var(--soot); font-family: var(--display); font-size: clamp(23px, 3vw, 46px); line-height: .86; padding: 14px 16px; box-shadow: 7px 7px 0 var(--oxblood); z-index: 3; }
.m1 { left: 8vw; bottom: 8vh; transform: rotate(8deg); }
.m2 { right: 23vw; bottom: 9vh; transform: rotate(-5deg); }
.m3 { right: 5vw; top: 21vh; width: 210px; transform: rotate(9deg); }
.rock-note { position: absolute; margin: 0; color: var(--coral); font-family: var(--hand); font-size: clamp(17px, 2vw, 28px); z-index: 5; }
.note-a { left: 34vw; top: 29vh; transform: rotate(-9deg); }
.note-b { right: 13vw; top: 48vh; transform: rotate(7deg); }
.bottle-lines { position: absolute; left: 8vw; bottom: 13vh; width: 80vw; height: 60vh; stroke: var(--jasmine-paper); opacity: .9; z-index: 6; pointer-events: none; }

.poster-grid { position: absolute; inset: 7vh 8vw 11vh 8vw; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 16px; transform: rotate(-1deg); }
.poster-grid article { position: relative; overflow: hidden; padding: 22px; background: var(--jasmine-paper); color: var(--soot); border: 6px solid var(--soot); box-shadow: 9px 9px 0 var(--oxblood), -6px -3px 0 var(--teal); }
.poster-grid article::before { content: ""; position: absolute; inset: -10%; background: radial-gradient(circle at 30% 30%, var(--coral) 0 14%, transparent 15%), radial-gradient(circle at 70% 60%, var(--teal) 0 12%, transparent 13%); opacity: .45; mix-blend-mode: multiply; }
.poster-grid b { position: relative; display: block; font-family: var(--display); font-size: clamp(54px, 8vw, 120px); line-height: .75; text-transform: uppercase; }
.poster-grid span { position: relative; display: block; margin-top: 14px; font-size: clamp(18px, 2vw, 30px); text-transform: uppercase; letter-spacing: .04em; }
.poster-title { right: -2vw; bottom: 7vh; font-size: clamp(90px, 16vw, 230px); color: var(--soot); -webkit-text-stroke: 2px var(--jasmine-paper); text-shadow: 8px 0 0 var(--oxblood); z-index: 4; }
.registration { position: absolute; width: 36vw; height: 36vw; clip-path: polygon(50% 0, 62% 36%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0 38%, 38% 36%); opacity: .45; mix-blend-mode: multiply; }
.registration.red { background: var(--oxblood); left: 5vw; top: 16vh; transform: translate(10px, 5px) rotate(11deg); }
.registration.teal { background: var(--teal); left: 6vw; top: 15vh; transform: translate(-10px, -5px) rotate(7deg); }
.arrow-lines { position: absolute; right: 6vw; top: 11vh; width: 38vw; stroke: var(--jasmine-paper); z-index: 5; }

.train { background: var(--soot); }
.final-title { left: 6vw; top: 10vh; max-width: 60vw; font-size: clamp(92px, 17vw, 250px); color: var(--jasmine-paper); text-shadow: 9px 0 0 var(--plum), -6px 5px 0 var(--teal); }
.final-copy { position: absolute; left: 8vw; bottom: 31vh; max-width: 510px; color: var(--smoke); font-size: clamp(22px, 2.7vw, 38px); line-height: 1.02; text-transform: uppercase; }
.constellation { position: absolute; right: 10vw; top: 10vh; width: 39vw; height: 46vh; }
.constellation i { position: absolute; width: 72px; height: 72px; background: var(--jasmine-paper); clip-path: polygon(50% 0, 61% 36%, 100% 38%, 67% 58%, 80% 100%, 50% 73%, 20% 100%, 33% 58%, 0 38%, 39% 36%); filter: drop-shadow(6px 5px 0 var(--oxblood)); animation: bloom 3s ease-in-out infinite alternate; }
.constellation i:nth-child(1){left:4%;top:48%;}.constellation i:nth-child(2){left:18%;top:12%;transform:scale(.65)}.constellation i:nth-child(3){left:38%;top:32%;transform:scale(.8)}.constellation i:nth-child(4){left:58%;top:7%;transform:scale(.55)}.constellation i:nth-child(5){left:73%;top:42%;transform:scale(.72)}.constellation i:nth-child(6){left:27%;top:67%;transform:scale(.48)}.constellation i:nth-child(7){left:86%;top:76%;transform:scale(.5)}.constellation i:nth-child(8){left:52%;top:78%;transform:scale(.42)}
.stamp { position: absolute; right: 8vw; bottom: 9vh; font-family: var(--hand); color: var(--gold); font-size: clamp(20px, 2.5vw, 35px); transform: rotate(-5deg); }

.draw-glyph { fill: none; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.draw-glyph path { stroke-dasharray: 1200; stroke-dashoffset: 1200; transition: stroke-dashoffset 1300ms cubic-bezier(.72,.02,.18,1); }
.panel.current .draw-glyph path { stroke-dashoffset: 0; }

.match-tabs { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 8px; z-index: 30; }
.match-tabs button { border: 4px solid var(--soot); background: var(--jasmine-paper); color: var(--soot); font-family: var(--display); font-size: clamp(17px, 2vw, 28px); padding: 12px 17px 8px; cursor: pointer; box-shadow: 5px 5px 0 var(--plum); transform: skewX(-8deg); transition: transform 240ms ease, background 240ms ease, color 240ms ease; }
.match-tabs button.active { background: var(--oxblood); color: var(--jasmine-paper); transform: skewX(-8deg) translateY(-8px) rotate(-2deg); box-shadow: 6px 7px 0 var(--teal); }
.progress-scratch { position: fixed; left: 0; top: 0; width: 20%; height: 6px; background: var(--coral); z-index: 40; box-shadow: 0 0 18px var(--oxblood); transition: width 700ms cubic-bezier(.72,.02,.18,1); }

@keyframes mesh-drift { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(2%, 1%, 0) scale(1.06); } }
@keyframes stamp-jitter { 0%,100% { transform: translate(0,0); } 35% { transform: translate(2px,-1px); } 70% { transform: translate(-1px,2px); } }
@keyframes buzz { from { filter: brightness(.9); } to { filter: brightness(1.3); } }
@keyframes curtain-sway { 0%,100% { transform: rotate(-1.4deg); } 50% { transform: rotate(2deg) translateX(5px); } }
@keyframes bloom { from { opacity: .52; filter: drop-shadow(3px 2px 0 var(--oxblood)); } to { opacity: 1; filter: drop-shadow(9px 6px 0 var(--teal)); } }

@media (max-width: 760px) {
  .buzz-sign { right: 5vw; top: 45vh; width: 54vw; }
  .poster-grid { grid-template-columns: repeat(2, 1fr); inset: 8vh 5vw 17vh; }
  .panel-title, .final-title { max-width: 92vw; }
  .match-tabs { width: 96vw; justify-content: center; gap: 4px; }
  .match-tabs button { padding: 9px 8px 6px; }
  .noren { padding: 0 3vw; gap: .4vw; }
  .bottle-row { left: 2vw; right: 2vw; }
  .bottle { min-width: 96px; width: 28vw; }
}