:root {
  /* Typography tokens for compliance: Space Grotesk* Grotesk** for crisp interface labels; IBM Plex Mono only for short receipt codes. */
  --velvet-black: #07040A;
  --lipgloss-magenta: #FF2FA6;
  --chrome-pearl: #F6F0FF;
  --aqua-rhinestone: #42F5E8;
  --grape-patent: #4B1268;
  --champagne-foil: #F8C76A;
  --flash-white: #FFFFFF;
  --bodoni: "Bodoni Moda", Didot, "Bodoni 72", "Baskerville", Georgia, serif;
  --space: "Space Grotesk", "Avenir Next", Inter, system-ui, sans-serif;
  --shrikhand: Shrikhand, Cooper Black, Georgia, serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--velvet-black); }

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--chrome-pearl);
  font-family: var(--space);
  background:
    radial-gradient(circle at 18% 12%, rgba(255,47,166,.22), transparent 28rem),
    radial-gradient(circle at 84% 28%, rgba(66,245,232,.16), transparent 24rem),
    linear-gradient(135deg, var(--velvet-black), #140817 52%, var(--grape-patent));
}

.velvet-stage { position: relative; min-height: 500vh; isolation: isolate; }

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: .26;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(246,240,255,.16) 0 1px, transparent 1px),
    radial-gradient(circle at 75% 55%, rgba(248,199,106,.12) 0 1px, transparent 1px),
    linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent);
  background-size: 23px 31px, 41px 37px, 100% 3px;
  mix-blend-mode: screen;
}

.camera-flash { position: fixed; inset: 0; background: var(--flash-white); z-index: 50; opacity: 0; pointer-events: none; }
.camera-flash.burst { animation: flashWipe .95s ease-out; }

.cursor-sparkle {
  position: fixed; left: 50%; top: 50%; width: 1rem; height: 1rem; z-index: 12; pointer-events: none;
  transform: translate(-50%, -50%) rotate(45deg); opacity: .75; mix-blend-mode: screen;
  background: radial-gradient(circle, var(--flash-white), var(--aqua-rhinestone) 28%, transparent 62%);
  filter: drop-shadow(0 0 12px var(--lipgloss-magenta));
}

.charm-chain { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
.chain-thread, .chain-progress {
  position: absolute; left: 8vw; top: -10vh; width: 84vw; height: 520vh; transform: rotate(10deg); transform-origin: top left;
  background: linear-gradient(180deg, transparent, rgba(246,240,255,.34), rgba(248,199,106,.78), rgba(66,245,232,.52), transparent);
  clip-path: polygon(49.82% 0, 50.18% 0, 61% 18%, 45% 36%, 57% 55%, 39% 76%, 50.22% 100%, 49.78% 100%, 38% 76%, 56% 55%, 44% 36%, 60% 18%);
  filter: drop-shadow(0 0 10px rgba(246,240,255,.48)); opacity: .72;
}
.chain-progress { height: var(--progress-height, 0%); opacity: 1; background: linear-gradient(180deg, var(--flash-white), var(--lipgloss-magenta), var(--aqua-rhinestone), var(--champagne-foil)); }

.rhinestone-link { position: fixed; width: 22px; height: 34px; border: 2px solid var(--chrome-pearl); border-radius: 50%; background: linear-gradient(135deg, rgba(255,255,255,.5), rgba(66,245,232,.08)); box-shadow: inset 0 0 12px rgba(255,255,255,.6), 0 0 18px rgba(255,47,166,.38); transform: rotate(30deg); }
.link-1 { left: 29vw; top: 14vh; } .link-2 { left: 63vw; top: 31vh; } .link-3 { left: 38vw; top: 52vh; } .link-4 { left: 71vw; top: 70vh; } .link-5 { left: 49vw; top: 88vh; }

.bead-nav { position: fixed; right: 1.2rem; top: 50%; transform: translateY(-50%); z-index: 20; display: grid; gap: .55rem; }
.bead-nav button { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; background: transparent; border: 0; color: rgba(246,240,255,.55); font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; cursor: pointer; }
.bead-nav span { width: .72rem; height: .72rem; border-radius: 50%; background: radial-gradient(circle at 30% 25%, var(--flash-white), var(--champagne-foil) 30%, var(--grape-patent) 70%); box-shadow: 0 0 10px rgba(248,199,106,.35); }
.bead-nav button.active { color: var(--flash-white); }
.bead-nav button.active span { background: radial-gradient(circle at 28% 20%, var(--flash-white), var(--aqua-rhinestone) 26%, var(--lipgloss-magenta) 72%); box-shadow: 0 0 18px var(--aqua-rhinestone); }

.chapter { min-height: 100vh; position: relative; display: grid; place-items: center; padding: 7rem clamp(1.2rem, 5vw, 6rem); overflow: hidden; }
.chapter::before { content: attr(data-scene); position: absolute; font-family: var(--bodoni); font-size: clamp(5rem, 15vw, 18rem); line-height: .75; color: transparent; -webkit-text-stroke: 1px rgba(246,240,255,.08); transform: rotate(-8deg); white-space: nowrap; z-index: -1; }
.scene-label { position: absolute; top: 2rem; left: 2rem; color: var(--champagne-foil); background: rgba(7,4,10,.58); border: 1px solid rgba(248,199,106,.28); border-radius: 999px; padding: .55rem .9rem; box-shadow: 0 0 22px rgba(255,47,166,.16); }
.mono { font-family: var(--mono); letter-spacing: .12em; font-size: .72rem; text-transform: uppercase; }

h1, h2 { font-family: var(--bodoni); font-weight: 500; margin: 0; letter-spacing: -.05em; text-transform: lowercase; }
h1 { font-size: clamp(4.6rem, 14vw, 15rem); line-height: .72; text-shadow: 0 0 1px var(--flash-white), 0 0 35px rgba(255,47,166,.35); }
h2 { font-size: clamp(3rem, 8vw, 8.5rem); line-height: .78; }
p { line-height: 1.45; }

.sticker-copy { position: relative; max-width: 34rem; padding: 1.2rem 1.35rem; border: 1px solid rgba(246,240,255,.34); border-radius: 1.2rem; background: linear-gradient(135deg, rgba(246,240,255,.14), rgba(255,47,166,.07), rgba(66,245,232,.08)); box-shadow: inset 0 1px rgba(255,255,255,.36), 0 22px 80px rgba(0,0,0,.45); backdrop-filter: blur(12px); }
.eyebrow { color: var(--aqua-rhinestone); text-transform: uppercase; letter-spacing: .22em; font-size: .78rem; }
.sticker-word, .stamp { font-family: var(--shrikhand); color: var(--lipgloss-magenta); text-shadow: 2px 2px 0 var(--champagne-foil); }

.charm-object { filter: drop-shadow(0 28px 55px rgba(0,0,0,.58)); transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.chapter-clasp { justify-items: start; }
.hero-locket { position: absolute; right: 8vw; top: 13vh; width: clamp(12rem, 23vw, 22rem); transform: rotate(12deg); }
.phone-top, .phone-bottom { border: 2px solid var(--chrome-pearl); border-radius: 2rem; background: linear-gradient(135deg, #fff, var(--chrome-pearl) 18%, #9d8eaa 28%, var(--grape-patent) 52%, #0f0914); box-shadow: inset 0 0 24px rgba(255,255,255,.6), 0 0 30px rgba(255,47,166,.35); }
.phone-top { height: 12rem; padding: 1rem; transform-origin: bottom; animation: phoneTremble 2.8s infinite; }
.phone-bottom { height: 9rem; margin-top: .35rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; padding: 1.2rem; }
.phone-bottom i { border-radius: 999px; background: radial-gradient(circle at 30% 25%, var(--flash-white), var(--champagne-foil), var(--grape-patent)); }
.phone-hinge { height: .8rem; border-radius: 999px; background: linear-gradient(90deg, var(--champagne-foil), var(--flash-white), var(--aqua-rhinestone), var(--champagne-foil)); }
.screen-glass { height: 100%; border-radius: 1.2rem; background: radial-gradient(circle at 50% 30%, rgba(66,245,232,.5), rgba(75,18,104,.8)), #07040A; display: grid; place-items: center; overflow: hidden; }
.tiny-ticker { font-family: var(--mono); color: var(--flash-white); font-size: 1.2rem; }
.market-pulse { position: absolute; width: 75%; height: 2px; background: linear-gradient(90deg, transparent, var(--aqua-rhinestone), var(--lipgloss-magenta), transparent); animation: scan 2s infinite; }
.intro-copy { transform: rotate(-3deg); margin-left: 3vw; z-index: 5; }

.chika-charm { width: 5.6rem; height: 5rem; background: radial-gradient(circle at 32% 22%, var(--flash-white), var(--lipgloss-magenta) 30%, var(--grape-patent) 72%); clip-path: path("M45 86 C10 58 2 38 15 20 C28 3 45 16 45 24 C45 16 62 3 75 20 C88 38 80 58 45 86Z"); border: 2px solid var(--champagne-foil); position: absolute; box-shadow: inset 0 0 18px rgba(255,255,255,.55), 0 0 28px rgba(255,47,166,.42); }
.chika-charm .eye { position: absolute; left: 34%; top: 30%; width: 1.55rem; height: .9rem; border-radius: 50%; background: radial-gradient(circle at 55% 45%, #07040A 0 .22rem, var(--aqua-rhinestone) .24rem .48rem, var(--flash-white) .5rem); transform: rotate(-10deg); }
.main-charm { left: 44vw; top: 55vh; animation: claspTremble 1.9s infinite; }
.mini { width: 4.2rem; height: 3.8rem; } .mini.one { right: 16vw; bottom: 17vh; } .mini.two { left: 17vw; bottom: 14vh; } .mini.three { right: 19vw; top: 18vh; } .mini.four { left: 17vw; top: 22vh; }
.open { transform: rotateY(32deg); } .locked { filter: drop-shadow(0 0 20px var(--aqua-rhinestone)); }

.compact-mirror { width: min(78vw, 48rem); aspect-ratio: 1.28; position: relative; transform: rotate(-7deg); }
.compact-lid, .compact-base { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--champagne-foil); }
.compact-lid { transform: translate(-8%, -28%) rotateX(62deg); background: radial-gradient(circle at 35% 25%, var(--flash-white), var(--chrome-pearl) 24%, rgba(66,245,232,.45) 33%, rgba(75,18,104,.74)); box-shadow: inset 0 0 42px rgba(255,255,255,.7), 0 0 55px rgba(66,245,232,.26); }
.compact-base { display: grid; align-content: center; padding: 13%; background: radial-gradient(circle at 50% 45%, rgba(246,240,255,.32), rgba(255,47,166,.13) 34%, rgba(7,4,10,.9) 68%); }
.mirror-glint, .flash-glint { position: absolute; width: 46%; height: 4px; background: var(--flash-white); transform: rotate(-24deg); top: 38%; left: 26%; box-shadow: 0 0 22px var(--flash-white); mix-blend-mode: screen; }
.engraved-tag { color: var(--aqua-rhinestone); }
.acrylic-tab { position: absolute; left: 13vw; bottom: 20vh; transform: rotate(-18deg); color: var(--champagne-foil); }

.capsule-orb { width: min(78vw, 34rem); aspect-ratio: 1; border-radius: 50%; padding: 2rem; background: radial-gradient(circle at 32% 22%, rgba(255,255,255,.85), rgba(246,240,255,.18) 20%, rgba(255,47,166,.22) 48%, rgba(75,18,104,.84)); border: 2px solid rgba(246,240,255,.7); box-shadow: inset 0 0 55px rgba(255,255,255,.42), 0 0 70px rgba(255,47,166,.25); transform: rotate(8deg); }
.orb-window { position: relative; height: 100%; border-radius: 50%; border: 1px solid rgba(255,255,255,.36); display: grid; place-items: center; overflow: hidden; background: linear-gradient(180deg, rgba(66,245,232,.1) 0 49%, rgba(248,199,106,.18) 50% 100%); }
.swap-token { position: absolute; width: 5.5rem; height: 5.5rem; border-radius: 46% 54% 52% 48%; display: grid; place-items: center; font-family: var(--bodoni); font-size: 3rem; color: var(--velvet-black); box-shadow: inset 0 0 15px rgba(255,255,255,.7); animation: tokenSwap 4s infinite ease-in-out; }
.token-a { background: var(--aqua-rhinestone); left: 20%; } .token-b { background: var(--champagne-foil); right: 20%; animation-delay: -2s; }
.swap-line { width: 62%; height: 2px; background: linear-gradient(90deg, var(--aqua-rhinestone), var(--flash-white), var(--lipgloss-magenta)); box-shadow: 0 0 14px var(--flash-white); }
.orb-label { position: absolute; right: -4rem; bottom: 1.5rem; transform: rotate(7deg); }
.vending-slot { position: absolute; left: 9vw; top: 27vh; width: 12rem; height: 4rem; border-radius: 1rem; background: linear-gradient(135deg, rgba(246,240,255,.18), rgba(7,4,10,.9)); border: 1px solid rgba(246,240,255,.3); display: grid; place-items: center; color: var(--aqua-rhinestone); }
.slot-light { position: absolute; bottom: .45rem; width: 72%; height: 3px; background: var(--lipgloss-magenta); box-shadow: 0 0 18px var(--lipgloss-magenta); }

.foil-receipt { width: min(72vw, 34rem); min-height: 36rem; padding: 4rem 3rem 3rem; color: var(--velvet-black); background: linear-gradient(115deg, var(--champagne-foil), var(--flash-white) 28%, var(--chrome-pearl) 43%, var(--champagne-foil) 68%, #b88f3a); border-radius: .8rem 4rem .8rem 3rem; transform: rotate(5deg); box-shadow: inset 0 0 20px rgba(255,255,255,.86), 0 28px 70px rgba(0,0,0,.5); }
.receipt-curl { position: absolute; right: 0; top: 0; width: 9rem; height: 9rem; background: linear-gradient(135deg, #775413, var(--flash-white), transparent 65%); border-bottom-left-radius: 100%; }
.foil-receipt ul { list-style: none; margin: 2rem 0; padding: 0; font-family: var(--mono); text-transform: uppercase; letter-spacing: .09em; }
.foil-receipt li { padding: .75rem 0; border-bottom: 1px dashed rgba(7,4,10,.38); }
.stamp { font-size: 3rem; transform: rotate(-12deg); display: inline-block; }
.pearl-string { position: absolute; left: 12vw; bottom: 24vh; display: flex; gap: .8rem; transform: rotate(19deg); }
.pearl-string span { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: radial-gradient(circle at 30% 25%, var(--flash-white), var(--chrome-pearl) 45%, var(--grape-patent)); box-shadow: 0 0 18px rgba(246,240,255,.35); }

.photobooth-keyring { width: min(84vw, 32rem); position: relative; transform: rotate(-4deg); }
.keyring-loop { width: 8rem; height: 8rem; margin: 0 auto -2rem; border: 1rem solid transparent; border-radius: 50%; background: linear-gradient(var(--velvet-black), var(--velvet-black)) padding-box, linear-gradient(130deg, var(--flash-white), var(--champagne-foil), var(--aqua-rhinestone), var(--chrome-pearl)) border-box; }
.photo-strip { padding: 1.1rem; border-radius: 1rem; background: var(--flash-white); display: grid; gap: 1rem; box-shadow: 0 28px 70px rgba(0,0,0,.55); }
.photo-strip article { height: 8rem; position: relative; overflow: hidden; border-radius: .5rem; padding: 1rem; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.7), rgba(255,47,166,.55), rgba(75,18,104,.95)); color: var(--flash-white); display: grid; align-content: end; }
.photo-strip b { font-family: var(--bodoni); font-size: 2.2rem; line-height: .85; } .photo-strip em { font-family: var(--mono); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; }
.compact-icon, .capsule-icon, .receipt-icon { position: absolute; right: 1rem; top: 1rem; width: 3rem; height: 3rem; border-radius: 50%; background: radial-gradient(circle, var(--flash-white), var(--aqua-rhinestone), transparent); }
.receipt-icon { border-radius: .3rem; background: var(--champagne-foil); transform: rotate(10deg); } .capsule-icon { background: radial-gradient(circle, var(--champagne-foil), var(--lipgloss-magenta)); }
.keyring-stamp { margin: .9rem auto 0; width: max-content; color: var(--velvet-black); background: linear-gradient(90deg, var(--champagne-foil), var(--flash-white)); border-radius: 999px; padding: .6rem 1rem; }
.final-copy { position: absolute; right: 8vw; bottom: 16vh; transform: rotate(5deg); }

.chapter.in-view .charm-object { animation: descend .8s cubic-bezier(.18,.9,.24,1.2) both; }
.chapter.in-view .sticker-copy { animation: stickerShimmer 2.8s linear infinite; }
.stage-open .main-charm { animation: claspOpen .9s ease both; }

@keyframes flashWipe { 0% { opacity: 0; transform: translateX(-100%) skewX(-12deg); } 18% { opacity: .96; } 60% { opacity: .78; } 100% { opacity: 0; transform: translateX(100%) skewX(-12deg); } }
@keyframes phoneTremble { 0%,100% { transform: rotate(.6deg); } 50% { transform: rotate(-.8deg); } }
@keyframes claspTremble { 0%,100% { transform: rotate(-4deg) scale(1); } 50% { transform: rotate(5deg) scale(1.04); } }
@keyframes claspOpen { to { transform: rotateY(55deg) rotate(12deg) scale(1.08); filter: drop-shadow(0 0 30px var(--aqua-rhinestone)); } }
@keyframes scan { from { transform: translateY(-4rem); } to { transform: translateY(4rem); } }
@keyframes descend { from { opacity: .1; transform: translateY(-5rem) rotate(-12deg) scale(.9); } to { opacity: 1; } }
@keyframes tokenSwap { 0%,100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(105%) rotate(180deg); } }
@keyframes stickerShimmer { 0%,100% { border-color: rgba(246,240,255,.28); } 50% { border-color: rgba(66,245,232,.72); box-shadow: inset 0 1px rgba(255,255,255,.5), 0 20px 80px rgba(255,47,166,.28); } }

@media (max-width: 760px) {
  .bead-nav { display: none; }
  .scene-label { left: 1rem; top: 1rem; }
  .hero-locket { opacity: .55; right: -2rem; top: 8rem; }
  .intro-copy, .final-copy { margin: 0; position: relative; right: auto; bottom: auto; }
  .orb-label { right: 0; }
  .chapter { padding-inline: 1rem; }
}