:root {
  /* IntersectionObserver */
  --velvet: #120A16;
  --plum: #321335;
  --ivory: #F7E7C2;
  --green: #B7FF4A;
  --red: #E83F3F;
  --brass: #D6A13D;
  --blue: #4DB6FF;
  --ink: #1E1B24;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--velvet);
  color: var(--ivory);
  font-family: "DM Sans", sans-serif;
  overflow-x: hidden;
}

body.is-listening .value-voice { animation-duration: 2.1s; }
body.is-listening .hero-tag { filter: drop-shadow(0 0 34px rgba(183, 255, 74, .55)); }

.stage-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .36;
  z-index: 10;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(247, 231, 194, .08) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 30%, rgba(214, 161, 61, .08) 0 1px, transparent 1px),
    repeating-linear-gradient(92deg, rgba(255,255,255,.025) 0 1px, transparent 1px 7px);
  background-size: 34px 34px, 29px 29px, 100% 100%;
  mix-blend-mode: screen;
}

.spotlight {
  position: fixed;
  width: 52vw;
  height: 52vw;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(18px);
  opacity: .24;
  z-index: 0;
}

.spotlight-one { left: -16vw; top: 4vh; background: radial-gradient(circle, var(--green), transparent 62%); }
.spotlight-two { right: -12vw; bottom: -18vh; background: radial-gradient(circle, var(--red), transparent 66%); }

.stage-rail {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: grid;
  gap: 10px;
}

.stage-rail a {
  color: var(--ivory);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  opacity: .62;
  transition: color .3s ease, opacity .3s ease, transform .3s ease;
}

.stage-rail a:hover { color: var(--green); opacity: 1; transform: translateX(-4px); }

.cabaret { position: relative; z-index: 1; }

.act {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 6vw, 80px);
  isolation: isolate;
  background:
    radial-gradient(circle at 12% 78%, rgba(77, 182, 255, .13), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(232, 63, 63, .16), transparent 30%),
    linear-gradient(135deg, var(--velvet), var(--ink) 52%, var(--plum));
}

.act::before {
  content: attr(data-act);
  position: absolute;
  left: 30px;
  top: 20px;
  font-family: "Bungee Shade", sans-serif;
  font-size: clamp(50px, 10vw, 145px);
  color: rgba(247, 231, 194, .08);
  z-index: -1;
}

.act-copy {
  position: relative;
  max-width: 680px;
  z-index: 3;
}

.kicker {
  font-family: "DM Sans", sans-serif;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-weight: 900;
  color: var(--green);
  font-size: 12px;
}

h1, h2 {
  font-family: "Bungee Shade", sans-serif;
  margin: 0;
  line-height: .92;
  font-weight: 400;
}

h1 { font-size: clamp(58px, 12vw, 160px); color: var(--velvet); }
h2 { font-size: clamp(42px, 7vw, 106px); color: var(--ivory); text-shadow: 0 0 24px rgba(214, 161, 61, .18); }

p { font-family: "Fraunces", serif; font-size: clamp(18px, 2.2vw, 28px); line-height: 1.32; }

.curtain {
  position: absolute;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.26) 0 14px, transparent 14px 26px),
    linear-gradient(90deg, #220b22, var(--plum), #170717);
  box-shadow: inset 0 0 60px rgba(0,0,0,.55);
  transition: clip-path 1.15s cubic-bezier(.2,.8,.15,1), transform 1.15s ease;
}

.curtain-left, .curtain-right { top: 0; bottom: 0; width: 51%; z-index: 4; clip-path: inset(0 0 0 0); }
.curtain-left { left: 0; }
.curtain-right { right: 0; }
.act.is-visible .curtain-left { clip-path: inset(0 72% 0 0); transform: skewY(-3deg); }
.act.is-visible .curtain-right { clip-path: inset(0 0 0 72%); transform: skewY(3deg); }
.top-curtain { left: 0; right: 0; top: 0; height: 24vh; clip-path: polygon(0 0,100% 0,100% 58%,82% 74%,62% 52%,43% 72%,20% 56%,0 76%); z-index: 1; }

.hanging-rig { position: absolute; left: 20%; top: 0; width: 2px; height: 18vh; background: var(--brass); z-index: 5; }

.price-tag {
  background: var(--ivory);
  color: var(--velvet);
  border-radius: 18px 18px 30px 18px;
  clip-path: polygon(0 0, 84% 0, 100% 18%, 100% 100%, 0 100%);
  box-shadow: 12px 14px 0 rgba(0,0,0,.28), inset 0 0 0 3px rgba(18, 10, 22, .15);
}

.hero-tag {
  position: absolute;
  left: clamp(22px, 8vw, 130px);
  top: 15vh;
  width: min(690px, 82vw);
  padding: 34px 44px 30px;
  transform-origin: 24% -40px;
  animation: swing 4.5s ease-in-out infinite;
  z-index: 6;
}

.hero-tag p { margin: 4px 0 0; color: var(--red); font-family: "DM Sans", sans-serif; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.pin { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--brass); left: 24%; top: 18px; box-shadow: 0 0 0 7px rgba(214,161,61,.22); }

@keyframes swing { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }

.whisper-cloud { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.value-voice {
  position: absolute;
  display: inline-block;
  background: rgba(183, 255, 74, .96);
  color: var(--velvet);
  padding: 10px 16px;
  border-radius: 24px 24px 24px 4px;
  font-family: "DM Sans", sans-serif;
  font-weight: 900;
  box-shadow: 0 0 22px rgba(183, 255, 74, .24);
  animation: whisper 4.8s ease-in-out infinite;
}
.whisper-cloud .value-voice:nth-child(1) { left: 10%; top: 58%; }
.whisper-cloud .value-voice:nth-child(2) { left: 54%; top: 22%; animation-delay: -.8s; }
.whisper-cloud .value-voice:nth-child(3) { left: 68%; top: 62%; background: var(--blue); animation-delay: -1.5s; }
.whisper-cloud .value-voice:nth-child(4) { left: 28%; top: 76%; animation-delay: -2.1s; }
.whisper-cloud .value-voice:nth-child(5) { left: 78%; top: 38%; background: var(--red); color: var(--ivory); animation-delay: -2.8s; }
.whisper-cloud .value-voice:nth-child(6) { left: 42%; top: 45%; background: var(--blue); animation-delay: -3.3s; }
@keyframes whisper { 0%,100% { transform: translateY(0) scale(.92); opacity: .42; } 48% { transform: translateY(-18px) scale(1.06); opacity: 1; } }

.murmur-copy { margin-left: auto; margin-top: 54vh; }
.listening-button, .curtain-call {
  border: 2px solid var(--green);
  background: transparent;
  color: var(--green);
  padding: 14px 22px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.listening-button:hover, .curtain-call:hover { background: var(--green); color: var(--velvet); transform: rotate(-2deg) translateY(-2px); }

.chalk-line { position: absolute; inset: auto 5% 8% 5%; width: 90%; height: 50%; pointer-events: none; z-index: 2; }
.chalk-line path { fill: none; stroke: var(--ivory); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1100; stroke-dashoffset: 1100; opacity: .7; filter: drop-shadow(0 0 6px rgba(247,231,194,.32)); transition: stroke-dashoffset 1.5s ease; }
.act.is-visible .chalk-line path { stroke-dashoffset: 0; }

.act-price { display: grid; align-items: center; grid-template-columns: 1fr 1fr; gap: 30px; }
.price-wall { position: relative; min-height: 58vh; perspective: 900px; z-index: 2; }
.flip-tag { position: absolute; width: 250px; min-height: 180px; padding: 26px; transform: rotate(-10deg) rotateY(16deg); transition: transform .8s ease; }
.flip-tag:nth-child(1) { left: 2%; top: 5%; }
.flip-tag:nth-child(2) { left: 32%; top: 38%; }
.flip-tag:nth-child(3) { left: 56%; top: 14%; }
.act.is-visible .flip-tag { transform: rotate(4deg) rotateY(0deg); }
.flip-tag span, .flip-tag em { display: block; font-family: "DM Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.flip-tag strong { font-family: "Bungee Shade"; font-size: 62px; color: var(--red); }
.flip-tag.alt strong { color: var(--blue); }

.bid-paddle { position: absolute; right: 12%; bottom: 10%; width: 150px; height: 210px; border-radius: 50% 50% 46% 46%; background: var(--red); border: 8px solid var(--ivory); transform-origin: 50% 120%; animation: paddle 3s ease-in-out infinite; z-index: 3; }
.bid-paddle::after { content: ""; position: absolute; left: 62px; top: 188px; width: 26px; height: 150px; background: var(--ivory); border-radius: 12px; }
.bid-paddle span { display: grid; place-items: center; height: 100%; font-family: "Bungee Shade"; font-size: 64px; color: var(--ivory); }
@keyframes paddle { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(15deg) translateY(-18px); } }
.stamp-receipt { position: absolute; left: 9%; bottom: 11%; transform: rotate(8deg); background: rgba(247,231,194,.9); color: var(--red); padding: 20px; border: 4px dashed var(--red); font-weight: 900; letter-spacing: .1em; }

.act-cost { display: grid; place-items: center; }
.ledger-page { background: var(--ivory); color: var(--velvet); border-radius: 8px; box-shadow: 16px 18px 0 rgba(77,182,255,.2), inset 0 0 0 2px rgba(18,10,22,.14); }
.cost-ledger { width: min(720px, 88vw); padding: clamp(28px, 5vw, 64px); transform: rotate(-3deg); position: relative; z-index: 3; }
.cost-ledger h2 { color: var(--velvet); }
.cost-ledger .kicker { color: var(--blue); }
.perforation { position: absolute; left: 18px; top: 0; bottom: 0; width: 9px; background: radial-gradient(circle, var(--velvet) 0 4px, transparent 5px) center/9px 22px; opacity: .55; }
.margin-notes { font-family: "DM Sans"; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--blue); }
.cost-shadow { position: absolute; color: var(--blue); border: 2px solid var(--blue); padding: 16px 22px; border-radius: 6px; opacity: .22; font-weight: 900; text-transform: uppercase; letter-spacing: .14em; animation: carbon 3.8s ease-in-out infinite; }
.shadow-one { left: 12%; top: 18%; }.shadow-two { right: 8%; top: 36%; animation-delay: -.9s; }.shadow-three { left: 18%; bottom: 16%; animation-delay: -1.8s; }
@keyframes carbon { 50% { transform: translate(12px, 10px); opacity: .5; } }

.act-value { display: grid; align-items: center; grid-template-columns: .95fr 1.05fr; }
.coin-halo { position: absolute; border: 18px solid var(--brass); border-radius: 50%; opacity: .24; filter: blur(.2px); animation: halo 7s linear infinite; }
.halo-one { width: 380px; height: 380px; left: 7%; top: 16%; }.halo-two { width: 230px; height: 230px; right: 13%; bottom: 11%; animation-direction: reverse; }
@keyframes halo { to { transform: rotate(360deg); } }
.scales { position: relative; height: 420px; z-index: 3; }
.scale-beam { position: absolute; left: 10%; right: 10%; top: 34%; height: 10px; background: var(--brass); transform: rotate(-5deg); box-shadow: 0 0 22px rgba(214,161,61,.45); }
.scale-beam::before { content: ""; position: absolute; left: 50%; top: -90px; width: 8px; height: 210px; background: var(--brass); }
.pan { position: absolute; top: 50%; width: 180px; height: 70px; border: 5px solid var(--brass); border-radius: 0 0 50% 50%; display: grid; place-items: center; color: var(--green); font-family: "Fraunces"; font-size: 24px; background: rgba(18,10,22,.72); }
.pan-left { left: 7%; }.pan-right { right: 12%; top: 43%; }
.chorus-ring .value-voice { animation-name: chorus; }
.chorus-ring .value-voice:nth-child(1) { left: 48%; top: 16%; }.chorus-ring .value-voice:nth-child(2) { left: 63%; top: 30%; }.chorus-ring .value-voice:nth-child(3) { left: 56%; top: 70%; }.chorus-ring .value-voice:nth-child(4) { left: 24%; top: 62%; }.chorus-ring .value-voice:nth-child(5) { left: 18%; top: 26%; }
@keyframes chorus { 50% { transform: translateY(-20px) rotate(3deg); filter: brightness(1.2); } }

.act-gap { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; }
.auction-floor { position: relative; width: min(620px, 88vw); aspect-ratio: 1; border-radius: 50%; border: 3px dashed rgba(247,231,194,.42); background: radial-gradient(circle, rgba(214,161,61,.18), transparent 64%); margin: auto; animation: floorPulse 4s ease-in-out infinite; }
@keyframes floorPulse { 50% { box-shadow: 0 0 80px rgba(183,255,74,.16); } }
.orbit-ledger { position: absolute; width: 190px; padding: 22px; text-align: center; animation: orbit 12s linear infinite; }
.orbit-ledger b { font-family: "Bungee Shade"; font-size: 31px; display: block; }
.orbit-ledger span { font-family: "DM Sans"; font-weight: 900; }
.ledger-value { left: 50%; top: 2%; margin-left: -95px; box-shadow: 12px 14px 0 rgba(183,255,74,.25); }
.ledger-price { right: 2%; bottom: 16%; animation-delay: -4s; box-shadow: 12px 14px 0 rgba(232,63,63,.28); }
.ledger-cost { left: 2%; bottom: 16%; animation-delay: -8s; box-shadow: 12px 14px 0 rgba(77,182,255,.28); }
@keyframes orbit { 50% { transform: rotate(8deg) translateY(16px); } }
.gap-mouth { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 190px; height: 130px; border-radius: 50%; background: var(--velvet); border: 4px solid var(--green); display: grid; place-items: center; text-align: center; color: var(--green); font-family: "Bungee Shade"; font-size: 28px; box-shadow: 0 0 50px rgba(183,255,74,.25); }

.is-visible .act-copy { animation: imprint .8s ease both; }
@keyframes imprint { from { opacity: 0; transform: translateY(26px) rotate(-1deg); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }

@media (max-width: 900px) {
  .stage-rail { display: none; }
  .act-price, .act-value, .act-gap { grid-template-columns: 1fr; }
  .murmur-copy { margin-top: 62vh; }
  .flip-tag { width: 210px; }
  .price-wall { min-height: 46vh; }
  .bid-paddle { right: 5%; transform: scale(.8); }
  .act-copy { max-width: 92vw; }
}