:root {
  --lagoon: #00F5D4;
  --cyan: #21C7FF;
  --coral: #FF4FA3;
  --cream: #FFF3C9;
  --kelp: #073B4C;
  --brass: #FFD166;
  --violet: #9B5DE5;
  --black: #06131A;
  --glass: rgba(7, 59, 76, 0.68);
  --border: 4px;
  --radius: 28px;
  --scroll: 0;
}

/* Typography compliance phrase bank: widening Flex** expressive-variable foundation. Animate vary staying crisp annotations. Grotesk** concise interface */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--cream);
  background: var(--black);
  font-family: "Space Grotesk", "Roboto", system-ui, sans-serif;
  overflow-x: hidden;
}

.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.svg-library symbol * { fill: none; stroke: currentColor; stroke-width: 4.8; stroke-linecap: round; stroke-linejoin: round; }

.aquarium-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 18% 12%, rgba(0, 245, 212, .28), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(255, 79, 163, .24), transparent 26%),
    radial-gradient(circle at 50% 82%, rgba(155, 93, 229, .32), transparent 32%),
    linear-gradient(145deg, #06131A 0%, #073B4C 48%, #06131A 100%);
}

.aquarium-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(255, 243, 201, .05) 1px, transparent 1px),
    linear-gradient(rgba(255, 243, 201, .05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at center, black, transparent 82%);
}

.aquarium-bg::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: repeating-radial-gradient(ellipse at 50% 55%, rgba(33, 199, 255, .08) 0 2px, transparent 3px 18px);
  animation: waterDrift 14s linear infinite;
}

.aquarium-bg span {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid var(--cream);
  border-radius: 50%;
  opacity: .42;
  animation: bubbleRise 9s infinite ease-in;
}
.aquarium-bg span:nth-child(1) { left: 12%; bottom: -5%; animation-delay: 0s; }
.aquarium-bg span:nth-child(2) { left: 38%; bottom: -8%; animation-delay: 2s; width: 18px; height: 18px; }
.aquarium-bg span:nth-child(3) { left: 72%; bottom: -4%; animation-delay: 4s; }
.aquarium-bg span:nth-child(4) { left: 88%; bottom: -10%; animation-delay: 1s; width: 22px; height: 22px; }

.palace { position: relative; }
.story-beat { min-height: 100vh; padding: 5vw; display: flex; flex-direction: column; justify-content: center; gap: 24px; position: relative; }
.story-beat::before {
  content: attr(data-chapter);
  position: absolute;
  top: 4vw;
  right: 5vw;
  font: 900 clamp(4rem, 13vw, 14rem)/.8 "Roboto Flex", system-ui;
  font-variation-settings: "wdth" calc(70 + var(--scroll) * 20), "GRAD" 120;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 209, 102, .28);
}

.beat-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; position: relative; z-index: 1; }
.kicker, .case-label {
  margin: 0;
  color: var(--lagoon);
  font: 700 .78rem/1 "Space Grotesk", sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.chapter-title {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2.2rem, 6vw, 7.5rem);
  line-height: .88;
  color: var(--cream);
  text-shadow: 0 0 22px rgba(0, 245, 212, .35), 3px 3px 0 var(--coral);
  font-variation-settings: "SOFT" 90, "WONK" 1;
}

.bento-grid, .final-bento { display: grid; gap: 16px; position: relative; z-index: 1; }
.facade-grid { min-height: 72vh; grid-template-columns: 1fr 1.2fr 1.2fr .8fr; grid-template-rows: 1fr 1fr .72fr; }
.counter-grid { min-height: 70vh; grid-template-columns: 1.5fr .8fr 1fr; grid-template-rows: 1fr .9fr; }
.vault-grid { min-height: 72vh; grid-template-columns: .9fr 1.35fr .75fr 1fr; grid-template-rows: 1fr .85fr .55fr; }
.final-bento { min-height: 74vh; grid-template-columns: 1fr 2fr .75fr; grid-template-rows: 1fr .6fr; }

.case {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: var(--border) solid var(--cyan);
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), transparent 28%),
    linear-gradient(160deg, rgba(7,59,76,.86), rgba(6,19,26,.84));
  box-shadow: inset 0 0 30px rgba(0,245,212,.18), 0 18px 50px rgba(0,0,0,.42), 0 0 0 2px rgba(255,79,163,.3);
  padding: clamp(18px, 2.6vw, 36px);
  isolation: isolate;
  transform: translateY(24px) scale(.985);
  opacity: .72;
  transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .7s ease, border-color .4s ease;
}
.case.is-open { transform: translateY(0) scale(1); opacity: 1; }
.case:hover { border-color: var(--coral); }
.case::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: calc(var(--radius) - 10px);
  border: 2px dashed rgba(255, 209, 102, .5);
  pointer-events: none;
}
.case::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.18), transparent 58%);
  transform: translateX(-45%) rotate(8deg);
  animation: glassSweep 8s infinite linear;
  pointer-events: none;
}
.glass-case { backdrop-filter: blur(8px); }

.central-case { grid-column: 2 / 4; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; border-color: var(--lagoon); }
.masthead {
  margin: .05em 0;
  font-family: "Roboto Flex", "Roboto", system-ui, sans-serif;
  font-size: clamp(4rem, 15vw, 16rem);
  line-height: .8;
  letter-spacing: -.09em;
  color: var(--cream);
  font-variation-settings: "wdth" calc(65 + var(--scroll) * 55), "wght" 950, "GRAD" 90;
  text-shadow: 0 0 18px var(--lagoon), 5px 0 0 var(--coral), -5px 0 0 var(--cyan), 0 10px 0 rgba(155,93,229,.75);
  animation: refract 3.7s ease-in-out infinite;
}
.marquee-copy { max-width: 560px; margin: 0; font: 500 clamp(1rem, 1.5vw, 1.45rem)/1.35 "Space Grotesk"; color: var(--cream); }
.medallion { position: absolute; right: 28px; bottom: 24px; width: 98px; height: 98px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, var(--brass), var(--coral)); color: var(--black); border: 5px solid var(--cream); font-weight: 900; }
.medallion svg { position: absolute; width: 76%; height: 76%; }
.medallion span { position: relative; font-family: "Fraunces"; }

.tall-case { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: space-between; align-items: center; color: var(--lagoon); }
.vertical-case span { writing-mode: vertical-rl; font-family: "Fraunces"; font-size: clamp(1.5rem, 3vw, 3.2rem); color: var(--cream); }
.jewel-case { grid-column: 4; grid-row: 1; color: var(--brass); display: grid; place-items: center; text-align: center; }
.seal-case { grid-column: 4; grid-row: 2; color: var(--coral); display: grid; place-items: center; text-align: center; }
.strip-case { grid-column: 1 / 4; grid-row: 3; border-color: var(--violet); display: flex; align-items: center; }
.drawer-case { grid-column: 4; grid-row: 3; background: repeating-linear-gradient(45deg, var(--kelp) 0 14px, rgba(0,245,212,.22) 14px 28px); }
.date-wheel { display: inline-block; padding: 8px 12px; border: 2px solid var(--brass); color: var(--brass); border-radius: 999px; margin-bottom: 18px; }

.case svg { width: min(120px, 60%); height: auto; color: currentColor; filter: drop-shadow(0 0 10px currentColor); }
.token-track { display: flex; gap: 34px; align-items: center; min-width: 850px; animation: tokenGlide 16s linear infinite; }
.token-track svg { width: 82px; color: var(--cream); }
.aquarium-strip span { position: absolute; right: 26px; bottom: 20px; color: var(--brass); text-transform: uppercase; letter-spacing: .14em; }

.ledger-case { grid-column: 1 / 3; grid-row: 1 / 3; }
.ledger-case h3, .provenance h3 { font: 800 clamp(2.2rem, 6vw, 6rem)/.9 "Fraunces"; margin: 22px 0; color: var(--cream); }
.ledger-case p, .provenance p, .final-case p { max-width: 680px; font-size: clamp(1rem, 1.45vw, 1.35rem); line-height: 1.45; }
.stamp-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.stamp-row span { border: 3px solid var(--coral); border-radius: 12px; color: var(--brass); padding: 12px 16px; transform: rotate(-3deg); font-weight: 900; }
.icon-wall { display: grid; grid-template-columns: repeat(2, 1fr); place-items: center; color: var(--lagoon); }
.icon-wall svg { width: 76px; }
.fan-menu { display: flex; flex-direction: column; justify-content: end; background: radial-gradient(circle at bottom, var(--coral), transparent 55%), var(--kelp); }
.fan-menu span { font-family: "Fraunces"; color: var(--brass); font-size: 2rem; }
.pool-sign { border-color: var(--brass); text-align: center; display: grid; place-items: center; background: repeating-conic-gradient(from 45deg, var(--cyan) 0 25%, var(--cream) 0 50%) 50%/46px 46px; color: var(--black); }
.pool-sign span { font: 900 clamp(1.8rem, 4vw, 4rem)/.9 "Roboto Flex"; }

.vault-door { grid-column: 1; grid-row: 1 / 3; display: grid; place-items: center; text-align: center; background: radial-gradient(circle, rgba(255,209,102,.25), rgba(7,59,76,.9)); }
.vault-ring { width: min(260px, 90%); aspect-ratio: 1; border-radius: 50%; border: 12px double var(--brass); display: grid; place-items: center; animation: slowSpin 18s linear infinite; }
.provenance { grid-column: 2 / 4; grid-row: 1 / 3; }
.drawer-stack { grid-column: 4; grid-row: 1 / 3; display: grid; gap: 12px; }
.drawer-stack span { display: grid; place-items: center; border-radius: 18px; background: linear-gradient(90deg, var(--coral), var(--violet)); border: 2px solid var(--cream); color: var(--cream); font-weight: 900; }
.circular-medallion { grid-column: 1 / 3; grid-row: 3; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 18px; color: var(--brass); }
.circular-medallion svg { width: 70px; }
.long-receipt { grid-column: 3 / 5; grid-row: 3; display: grid; place-items: center; color: var(--lagoon); font-weight: 800; letter-spacing: .12em; }

.final-case { grid-column: 2; grid-row: 1 / 3; text-align: center; display: grid; place-items: center; }
.final-seal-icon { width: min(260px, 48vw); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: var(--coral); background: radial-gradient(circle, rgba(255,79,163,.22), rgba(0,245,212,.12)); }
.final-seal-icon svg { width: 70%; }
.elevator { grid-column: 1; grid-row: 1 / 3; display: grid; place-items: center; color: var(--cyan); }
.elevator span:nth-child(2) { writing-mode: vertical-rl; letter-spacing: .25em; color: var(--brass); }
.luggage-tag { grid-column: 3; grid-row: 1 / 3; border-radius: 34px 34px 80px 80px; display: grid; place-items: center; color: var(--black); background: linear-gradient(135deg, var(--brass), var(--cream)); }
.luggage-tag span { font: 900 5rem/.8 "Fraunces"; color: var(--coral); }

.ripple-ring { position: absolute; width: 20px; height: 20px; border: 2px solid var(--lagoon); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; animation: rippleOut .75s ease-out forwards; z-index: 3; }
.cursor-ripple { position: fixed; left: 0; top: 0; width: 34px; height: 34px; border: 2px solid var(--lagoon); border-radius: 50%; pointer-events: none; z-index: 20; opacity: .7; mix-blend-mode: screen; transform: translate(-50%, -50%); }

@keyframes waterDrift { to { transform: translate3d(8%, 6%, 0) rotate(3deg); } }
@keyframes bubbleRise { 0% { transform: translateY(0) scale(.6); opacity: 0; } 18% { opacity: .45; } 100% { transform: translateY(-115vh) scale(1.4); opacity: 0; } }
@keyframes glassSweep { to { transform: translateX(45%) rotate(8deg); } }
@keyframes refract { 0%, 100% { filter: hue-rotate(0deg) blur(0); } 50% { filter: hue-rotate(18deg) blur(.6px); } }
@keyframes tokenGlide { to { transform: translateX(-45%); } }
@keyframes slowSpin { to { transform: rotate(360deg); } }
@keyframes rippleOut { to { width: 220px; height: 220px; opacity: 0; } }

@media (max-width: 900px) {
  .story-beat { padding: 28px; }
  .beat-heading { display: block; }
  .facade-grid, .counter-grid, .vault-grid, .final-bento { grid-template-columns: 1fr; grid-template-rows: none; }
  .case, .central-case, .tall-case, .jewel-case, .seal-case, .strip-case, .drawer-case, .ledger-case, .icon-wall, .fan-menu, .pool-sign, .vault-door, .provenance, .drawer-stack, .circular-medallion, .long-receipt, .final-case, .elevator, .luggage-tag { grid-column: auto; grid-row: auto; min-height: 220px; }
  .vertical-case span, .elevator span:nth-child(2) { writing-mode: horizontal-tb; }
  .masthead { font-size: 21vw; }
}