:root {
  /* Interactions should feel tactile and premium: hovering over a data node can reveal a tiny smoked-glass plaque. */
  --carbon-lacquer: #05070D;
  --obsidian: #0B1224;
  --aurora-cyan: #34F5FF;
  --polar-violet: #A56BFF;
  --acid-pearl: #B7FF6A;
  --champagne: #F5D58A;
  --rhinestone: #FF6BD6;
  --frost: #F4F7FF;
  --aurora: linear-gradient(115deg, #34F5FF 0%, #A56BFF 42%, #FF6BD6 72%, #B7FF6A 100%);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--frost);
  background:
    radial-gradient(circle at 76% 12%, rgba(165, 107, 255, .22), transparent 34vw),
    radial-gradient(circle at 20% 74%, rgba(52, 245, 255, .14), transparent 32vw),
    linear-gradient(135deg, var(--carbon-lacquer), var(--obsidian) 58%, #030409);
  font-family: "Alegreya Sans", Lato, Inter, system-ui, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 20%, rgba(245, 213, 138, .08) 0 1px, transparent 2px),
    radial-gradient(circle at 60% 70%, rgba(244, 247, 255, .06) 0 1px, transparent 2px);
  background-size: 84px 84px, 132px 132px;
  mix-blend-mode: screen;
  opacity: .7;
  z-index: 1;
}

.vault-grid {
  position: fixed;
  inset: -10%;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(244, 247, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 247, 255, .05) 1px, transparent 1px);
  background-size: 72px 72px;
  transform: rotate(-7deg) scale(1.12);
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  animation: gridUnlock 2.4s cubic-bezier(.22, 1, .36, 1) both;
  z-index: 0;
}

.aurora-spine {
  position: fixed;
  left: -12vw;
  top: 10vh;
  width: 130vw;
  height: 24vh;
  transform: rotate(-26deg);
  background: var(--aurora);
  filter: blur(28px);
  opacity: .16;
  border-radius: 999px;
  z-index: 0;
  animation: spineGlow 9s ease-in-out infinite alternate;
}

.cursor-gloss {
  position: fixed;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, var(--rhinestone), transparent 70%);
  box-shadow: 0 0 18px var(--rhinestone), 0 0 34px rgba(52, 245, 255, .4);
  opacity: 0;
  z-index: 20;
  transform: translate(-50%, -50%);
}

.carbon-strand {
  position: fixed;
  right: 2.2rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  z-index: 10;
}

.carbon-strand::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(var(--champagne), var(--aurora-cyan), var(--polar-violet));
  opacity: .4;
}

.strand-dot {
  position: relative;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(245, 213, 138, .55);
  border-radius: 50%;
  background: var(--carbon-lacquer);
  box-shadow: inset 0 0 8px rgba(244, 247, 255, .2);
}

.strand-dot span {
  position: absolute;
  right: 1.55rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(244, 247, 255, .52);
  font: 600 .62rem/1 Manrope, system-ui, sans-serif;
  letter-spacing: .16em;
}

.strand-dot.active {
  background: var(--aurora);
  box-shadow: 0 0 16px var(--aurora-cyan), 0 0 30px rgba(255, 107, 214, .45);
}

.ledger-runway { position: relative; z-index: 2; }

.chamber {
  position: relative;
  min-height: 100vh;
  padding: clamp(2rem, 5vw, 6rem);
  isolation: isolate;
  overflow: hidden;
}

.eyebrow, .coordinate, .panel-head, .sheet-caption, .jewelry-tag span {
  font-family: Manrope, Inter, system-ui, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.eyebrow {
  color: var(--champagne);
  font-size: .76rem;
  margin: 0 0 1rem;
}

h1, h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  letter-spacing: -.045em;
  margin: 0;
}

.foyer { padding-top: 12vh; }

.wordmark-wrap {
  width: min(61vw, 820px);
  margin-left: 7vw;
  transform: translateY(4vh);
}

.wordmark {
  font-size: clamp(5.5rem, 17vw, 17rem);
  line-height: .72;
  color: transparent;
  background: linear-gradient(105deg, var(--frost) 0%, var(--champagne) 34%, var(--aurora-cyan) 50%, var(--frost) 62%, var(--polar-violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 30px rgba(245, 213, 138, .18);
}

.hero-copy {
  max-width: 510px;
  margin: 2.2rem 0 0 12vw;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  line-height: 1.25;
  color: rgba(244, 247, 255, .78);
}

.coordinate-left {
  position: absolute;
  left: 1.3rem;
  bottom: 10vh;
  writing-mode: vertical-rl;
  color: rgba(245, 213, 138, .58);
  font-size: .7rem;
}

.vault-unlock span {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(245, 213, 138, .8), transparent);
  height: 1px;
  left: -20vw;
  right: -20vw;
  transform: rotate(-9deg);
  animation: lineDraw 2.2s ease both;
}
.vault-unlock span:nth-child(1) { top: 18vh; animation-delay: .15s; }
.vault-unlock span:nth-child(2) { top: 38vh; animation-delay: .3s; }
.vault-unlock span:nth-child(3) { top: 62vh; animation-delay: .45s; }
.vault-unlock span:nth-child(4) { top: 82vh; animation-delay: .6s; }

.ribbon {
  position: absolute;
  inset: 15vh -6vw auto auto;
  width: 88vw;
  height: 58vh;
  opacity: .85;
  z-index: -1;
}

.ribbon-core, .ribbon-sheen {
  fill: none;
  stroke: url(#auroraGradient);
  stroke-linecap: round;
  filter: url(#softGlow);
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  animation: ribbonReveal 3s .4s ease forwards;
}
.ribbon-core { stroke-width: 34; opacity: .5; }
.ribbon-sheen { stroke-width: 6; opacity: .9; }

.data-node {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(244, 247, 255, .75);
  cursor: pointer;
  background: var(--aurora-cyan);
  box-shadow: 0 0 18px currentColor, inset 0 0 8px rgba(255,255,255,.8);
  color: var(--aurora-cyan);
  animation: gemPulse 2.8s ease-in-out infinite;
}
.node-cyan { right: 28vw; top: 29vh; color: var(--aurora-cyan); background: var(--aurora-cyan); }
.node-violet { right: 15vw; top: 55vh; color: var(--polar-violet); background: var(--polar-violet); animation-delay: .5s; }
.node-green { right: 39vw; top: 69vh; color: var(--acid-pearl); background: var(--acid-pearl); animation-delay: 1s; }

.hidden-plaque {
  position: fixed;
  padding: .72rem .9rem;
  border: 1px solid rgba(245, 213, 138, .35);
  border-radius: 16px;
  background: rgba(11, 18, 36, .72);
  color: var(--frost);
  font: 600 .72rem/1.2 Manrope, system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(16px);
  opacity: 0;
  transform: translate(-50%, calc(-100% - 18px));
  pointer-events: none;
  z-index: 30;
  transition: opacity .22s ease;
}
.hidden-plaque.visible { opacity: 1; }

.corridor {
  display: grid;
  grid-template-columns: 62fr 38fr;
  gap: 4vw;
  align-items: center;
}

.oversize {
  position: absolute;
  left: 2vw;
  top: 6vh;
  color: rgba(255, 107, 214, .16);
  font-size: clamp(9rem, 26vw, 25rem);
  font-weight: 700;
  z-index: -1;
}

.chapter-stack { align-self: start; margin-top: 15vh; }
.chapter-stack h2, .balance-copy h2, .material-title h2 {
  font-size: clamp(3.5rem, 8vw, 8rem);
  line-height: .86;
  max-width: 720px;
}

.glass-panel {
  border: 1px solid rgba(244, 247, 255, .12);
  background:
    linear-gradient(145deg, rgba(244, 247, 255, .1), rgba(11, 18, 36, .22)),
    radial-gradient(circle at top right, rgba(52, 245, 255, .22), transparent 40%);
  box-shadow: 0 30px 90px rgba(0,0,0,.45), inset 0 0 38px rgba(244,247,255,.06);
  backdrop-filter: blur(18px);
}

.corridor-panel {
  width: min(42vw, 560px);
  height: 62vh;
  justify-self: end;
  transform: rotate(-8deg);
  border-radius: 34px;
  padding: 1.4rem;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  color: var(--champagne);
  font-size: .68rem;
}

.flow-bars {
  height: calc(100% - 60px);
  display: flex;
  align-items: end;
  justify-content: space-around;
  padding: 2rem 1rem 1rem;
}

.flow-bars i {
  display: block;
  width: 13%;
  height: var(--h);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--champagne), var(--rhinestone) 35%, var(--polar-violet) 70%, var(--aurora-cyan));
  box-shadow: inset 0 0 14px rgba(255,255,255,.7), 0 0 24px rgba(52,245,255,.28);
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s ease var(--d), transform .7s ease var(--d);
}

.in-view .flow-bars i { opacity: 1; transform: translateY(0); }

.jewelry-tag {
  position: absolute;
  width: 235px;
  padding: 1rem;
  border: 1px solid rgba(245, 213, 138, .32);
  border-radius: 18px;
  background: rgba(5, 7, 13, .58);
  color: rgba(244, 247, 255, .76);
  backdrop-filter: blur(14px);
}
.jewelry-tag::before { content: ""; position: absolute; height: 1px; width: 115px; background: var(--champagne); opacity: .5; }
.jewelry-tag strong { display: block; color: var(--frost); font-family: Manrope, sans-serif; margin: .38rem 0; }
.jewelry-tag p { margin: 0; line-height: 1.3; }
.tag-one { right: 45vw; bottom: 18vh; }
.tag-one::before { left: 100%; top: 24px; transform: rotate(-18deg); transform-origin: left; }
.tag-two { right: 5vw; top: 15vh; }
.tag-two::before { right: 100%; top: 34px; transform: rotate(22deg); transform-origin: right; }

.barcode-marks {
  position: absolute;
  left: 8vw;
  bottom: 11vh;
  width: 180px;
  height: 62px;
  background: repeating-linear-gradient(90deg, rgba(245,213,138,.75) 0 3px, transparent 3px 9px, rgba(52,245,255,.45) 9px 11px, transparent 11px 18px);
  opacity: .5;
}

.balance { display: grid; grid-template-columns: 38fr 62fr; align-items: center; gap: 4vw; }
.balance-copy { padding-left: 5vw; }
.balance-copy p:not(.eyebrow) { max-width: 410px; font-size: 1.25rem; color: rgba(244,247,255,.72); line-height: 1.45; }
.sheet { border-radius: 40px; padding: 1.2rem; transform: rotate(4deg); }
.balance-viz { width: 100%; display: block; }
.thin-grid { stroke: rgba(244, 247, 255, .12); stroke-width: 1; }
.curve { fill: none; stroke-linecap: round; stroke-width: 8; stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 1.8s ease; }
.curve-a { stroke: url(#auroraGradient); filter: drop-shadow(0 0 14px rgba(52,245,255,.65)); }
.curve-b { stroke: var(--champagne); opacity: .72; filter: drop-shadow(0 0 12px rgba(245,213,138,.45)); }
.in-view .curve { stroke-dashoffset: 0; }
.rhinestones circle { fill: var(--frost); stroke: var(--champagne); stroke-width: 2; filter: drop-shadow(0 0 12px rgba(255,107,214,.75)); opacity: 0; transform-origin: center; transition: opacity .5s ease .8s; }
.in-view .rhinestones circle { opacity: 1; animation: gemPulse 2.6s ease-in-out infinite; }
.sheet-caption { color: rgba(245,213,138,.72); font-size: .7rem; padding: 0 1rem 1rem; }
.co2-dust span { position: absolute; color: rgba(244,247,255,.13); font-family: Manrope, sans-serif; font-weight: 700; letter-spacing: .2em; animation: dustFloat 8s ease-in-out infinite; }
.co2-dust span:nth-child(1) { right: 18vw; top: 14vh; }
.co2-dust span:nth-child(2) { right: 42vw; bottom: 12vh; animation-delay: 1.2s; }
.co2-dust span:nth-child(3) { left: 12vw; top: 22vh; animation-delay: 2.1s; }
.co2-dust span:nth-child(4) { right: 8vw; bottom: 24vh; animation-delay: 3s; }

.material { display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: 3vw; }
.material-title { margin-left: 5vw; }
.molecule-field { position: relative; height: 64vh; border-radius: 48px; transform: rotate(-3deg); }
.atom { width: 28px; height: 28px; }
.atom-a { left: 22%; top: 28%; color: var(--champagne); background: var(--champagne); }
.atom-b { left: 58%; top: 22%; color: var(--aurora-cyan); background: var(--aurora-cyan); animation-delay: .4s; }
.atom-c { left: 70%; top: 62%; color: var(--rhinestone); background: var(--rhinestone); animation-delay: .8s; }
.atom-d { left: 30%; top: 70%; color: var(--acid-pearl); background: var(--acid-pearl); animation-delay: 1.2s; }
.bond { position: absolute; height: 1px; background: linear-gradient(90deg, transparent, var(--champagne), transparent); transform-origin: left center; opacity: .55; }
.bond-ab { left: 25%; top: 31%; width: 34%; transform: rotate(-9deg); }
.bond-bc { left: 60%; top: 27%; width: 36%; transform: rotate(67deg); }
.bond-cd { left: 32%; top: 73%; width: 39%; transform: rotate(-11deg); }
.bond-da { left: 24%; top: 31%; width: 44%; transform: rotate(80deg); }
.final-ledger { position: absolute; right: 7vw; bottom: 9vh; width: 330px; color: rgba(244,247,255,.72); }
.final-ledger span { font-family: "Cormorant Garamond", serif; font-size: 3.4rem; color: var(--champagne); }
.final-ledger p { margin: .35rem 0 0; font-size: 1.2rem; line-height: 1.25; }

.reveal-scene > * { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1); }
.reveal-scene.in-view > * { opacity: 1; transform: translateY(0); }
.reveal-scene.in-view .corridor-panel { transform: rotate(-8deg) translateY(0); }
.reveal-scene.in-view .sheet { transform: rotate(4deg) translateY(0); }
.reveal-scene.in-view .molecule-field { transform: rotate(-3deg) translateY(0); }

.sparkle {
  position: fixed;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rhinestone);
  box-shadow: 0 0 12px var(--rhinestone), 0 0 22px var(--champagne);
  pointer-events: none;
  z-index: 19;
  animation: sparkleFade .7s ease forwards;
}

@keyframes gridUnlock { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes spineGlow { from { opacity: .11; transform: rotate(-26deg) translateX(-2vw); } to { opacity: .23; transform: rotate(-23deg) translateX(3vw); } }
@keyframes lineDraw { from { clip-path: inset(0 100% 0 0); opacity: 0; } to { clip-path: inset(0); opacity: 1; } }
@keyframes ribbonReveal { to { stroke-dashoffset: 0; } }
@keyframes gemPulse { 0%,100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.28); filter: brightness(1.55); } }
@keyframes dustFloat { 0%,100% { transform: translate3d(0,0,0) rotate(-8deg); } 50% { transform: translate3d(20px,-28px,0) rotate(10deg); } }
@keyframes sparkleFade { to { opacity: 0; transform: scale(0) translateY(-18px); } }

@media (max-width: 850px) {
  .carbon-strand { right: 1rem; }
  .wordmark-wrap { width: 86vw; margin-left: 0; }
  .hero-copy { margin-left: 0; }
  .corridor, .balance, .material { grid-template-columns: 1fr; }
  .corridor-panel { width: 82vw; justify-self: start; }
  .jewelry-tag { position: relative; inset: auto; margin: 1rem 0; }
  .jewelry-tag::before { display: none; }
  .balance-copy, .material-title { padding-left: 0; margin-left: 0; }
  .final-ledger { position: relative; right: auto; bottom: auto; width: auto; }
}