:root {
  --midnight: #07111F;
  --sapphire: #112A46;
  --lucite: #EAF8FF;
  --frost: #A9F3FF;
  --brass: #F5DFA6;
  --ultra: #7B4DFF;
  --cherry: #FF5C8A;
  --pearl: #C9D7E6;
  --display: "Righteous", "Arial Rounded MT Bold", system-ui, sans-serif;
  --ui: "Nunito Sans", Inter, system-ui, sans-serif;
  --body: "Quicksand", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--midnight); }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--lucite);
  font-family: var(--body);
  background:
    radial-gradient(circle at 18% 12%, rgba(123, 77, 255, .28), transparent 34rem),
    radial-gradient(circle at 82% 28%, rgba(169, 243, 255, .11), transparent 28rem),
    linear-gradient(135deg, #07111F 0%, #0a1628 45%, #112A46 100%);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
.frost-filter { position: absolute; width: 0; height: 0; overflow: hidden; }
.grain {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(234, 248, 255, .18) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 62%, rgba(245, 223, 166, .12) 0 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
}

.ritual-rail {
  position: fixed;
  z-index: 30;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  padding: 7px;
  border: 1px solid rgba(245, 223, 166, .35);
  border-radius: 999px;
  background: rgba(234, 248, 255, .075);
  box-shadow: inset 0 1px 18px rgba(234, 248, 255, .10), 0 16px 55px rgba(0, 0, 0, .34);
  backdrop-filter: blur(18px);
}
.ritual-rail a {
  position: relative;
  z-index: 2;
  min-width: 72px;
  padding: 9px 16px;
  border-radius: 999px;
  color: rgba(234, 248, 255, .68);
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .23em;
  text-transform: uppercase;
  transition: color .4s ease, text-shadow .4s ease;
}
.ritual-rail a.active { color: var(--brass); text-shadow: 0 0 18px rgba(245, 223, 166, .58); }
.rail-spark {
  position: absolute;
  left: 7px;
  top: 7px;
  width: 72px;
  height: calc(100% - 14px);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(169, 243, 255, .11), rgba(255, 92, 138, .18), rgba(245, 223, 166, .16));
  border: 1px solid rgba(169, 243, 255, .28);
  box-shadow: 0 0 24px rgba(255, 92, 138, .18);
  transition: transform .6s cubic-bezier(.22,1,.36,1), width .6s cubic-bezier(.22,1,.36,1);
}

.chamber {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: 112px 7vw 70px;
  border-bottom: 1px solid rgba(234, 248, 255, .08);
}
.chamber-depth {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at var(--x, 64%) var(--y, 46%), rgba(169, 243, 255, .18), transparent 7rem),
    radial-gradient(circle at calc(var(--x, 64%) - 9%) calc(var(--y, 46%) + 8%), rgba(123, 77, 255, .27), transparent 24rem),
    conic-gradient(from 110deg at var(--x, 64%) var(--y, 46%), rgba(7,17,31,.9), rgba(17,42,70,.88), rgba(7,17,31,.96), rgba(255,92,138,.07), rgba(7,17,31,.9));
}
.chamber::before {
  content: "";
  position: absolute;
  inset: 4vw;
  border: 1px solid rgba(201, 215, 230, .11);
  border-radius: 44px;
  pointer-events: none;
  box-shadow: inset 0 0 80px rgba(234, 248, 255, .035);
}
.field-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: .85;
  filter: drop-shadow(0 0 11px rgba(169, 243, 255, .32));
}
.field-svg path {
  fill: none;
  stroke: var(--frost);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 16 26;
  animation: fieldBreath 8s ease-in-out infinite, traceMove 18s linear infinite;
}
.field-svg .warm { stroke: var(--brass); }
.field-svg .slow { animation-duration: 11s, 24s; }
.particle-stream circle {
  fill: var(--brass);
  opacity: .8;
  animation: bead 5s ease-in-out infinite alternate;
}
.particle-stream circle:nth-child(2n) { fill: var(--cherry); animation-delay: -1.6s; }

.orb {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 25%, #EAF8FF 0 7%, rgba(234,248,255,.82) 8% 18%, transparent 19%),
    radial-gradient(circle at 42% 38%, rgba(169, 243, 255, .95), rgba(234, 248, 255, .36) 22%, rgba(17,42,70,.78) 53%, rgba(7,17,31,.98) 76%),
    conic-gradient(from 210deg, rgba(245,223,166,.7), rgba(123,77,255,.42), rgba(169,243,255,.66), rgba(245,223,166,.7));
  box-shadow:
    inset -22px -28px 54px rgba(0,0,0,.58),
    inset 16px 16px 48px rgba(234,248,255,.22),
    0 0 80px rgba(169,243,255,.26),
    0 0 150px rgba(123,77,255,.18);
  transition: transform .8s cubic-bezier(.22,1,.36,1), filter .5s ease;
}
.orb::after {
  content: "N";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(245, 223, 166, .58);
  font-family: var(--display);
  font-size: clamp(30px, 5vw, 88px);
  text-shadow: 0 0 20px rgba(245,223,166,.45);
}
.orb.is-warmed { filter: saturate(1.4) brightness(1.2); }

.hero-orb { width: clamp(250px, 36vw, 520px); height: clamp(250px, 36vw, 520px); right: 12vw; top: 18vh; animation: orbWake 3.2s ease both, float 9s ease-in-out infinite 3s; }
.one-side-pulse {
  position: absolute;
  right: calc(12vw + clamp(125px, 18vw, 260px));
  top: calc(18vh + clamp(125px, 18vw, 260px));
  width: 44vw;
  aspect-ratio: 1;
  border-radius: 50%;
  border-left: 2px solid rgba(255, 92, 138, .58);
  border-top: 1px solid rgba(169, 243, 255, .38);
  opacity: .48;
  transform: translate(-48%, -50%) scale(.72);
  animation: onePulse 4.8s ease-out infinite;
  filter: blur(.2px);
}
.wordmark-wrap { position: relative; z-index: 3; justify-self: start; max-width: 760px; margin-right: 28vw; filter: url(#frosted); }
.wordmark {
  margin: 0;
  color: var(--lucite);
  font-family: var(--display);
  font-size: clamp(58px, 11.5vw, 172px);
  line-height: .82;
  letter-spacing: -.045em;
  text-shadow: 0 2px 0 rgba(245,223,166,.45), 0 0 34px rgba(169,243,255,.32), 28px 18px 0 rgba(123,77,255,.09);
  animation: refractIn 2.6s cubic-bezier(.19,1,.22,1) both .7s;
}
.scene-copy { max-width: 510px; margin: 28px 0 0; color: rgba(234,248,255,.78); font-size: clamp(18px, 2vw, 25px); line-height: 1.45; }
.plaque-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 15px;
  color: var(--brass);
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.plaque-label::before { content: ""; width: 34px; height: 1px; background: var(--cherry); box-shadow: 0 0 15px var(--cherry); }
.glass-pane {
  position: absolute;
  z-index: 4;
  width: min(360px, 78vw);
  padding: 24px;
  border: 1px solid rgba(245, 223, 166, .34);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(234,248,255,.13), rgba(169,243,255,.045));
  box-shadow: inset 0 1px 22px rgba(234,248,255,.10), 0 18px 60px rgba(0,0,0,.38);
  backdrop-filter: blur(18px);
}
.glass-pane span { color: var(--frost); font-family: var(--ui); font-size: 10px; font-weight: 900; letter-spacing: .24em; }
.glass-pane p { margin: 12px 0 0; color: rgba(201,215,230,.88); line-height: 1.55; }
.hero-pane { right: 7vw; bottom: 9vh; }

.service { --x: 28%; --y: 42%; }
.service-orb { width: 210px; height: 210px; left: 20vw; top: 22vh; animation: float 8s ease-in-out infinite; }
.bar-counter { position: absolute; left: 6vw; right: 6vw; bottom: 13vh; height: 230px; border-radius: 42px 42px 10px 10px; background: linear-gradient(180deg, rgba(234,248,255,.13), rgba(17,42,70,.32)); border-top: 1px solid rgba(245,223,166,.5); box-shadow: inset 0 28px 65px rgba(234,248,255,.07), 0 -14px 60px rgba(169,243,255,.08); backdrop-filter: blur(14px); }
.chrome-rail { position: absolute; top: 42px; left: 5%; right: 5%; height: 9px; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--brass), var(--frost), var(--cherry), var(--brass), transparent); box-shadow: 0 0 28px rgba(245,223,166,.4); animation: railGlow 5s ease-in-out infinite; }
.coupe { position: absolute; bottom: 34px; width: 130px; height: 120px; border: 2px solid rgba(234,248,255,.45); border-top-width: 4px; border-radius: 8px 8px 70px 70px; background: linear-gradient(180deg, rgba(169,243,255,.16), rgba(255,92,138,.08)); transform: rotate(var(--r)); }
.coupe::after { content: ""; position: absolute; left: 50%; bottom: -54px; width: 2px; height: 56px; background: rgba(245,223,166,.62); box-shadow: -28px 56px 0 12px rgba(245,223,166,.12), 28px 56px 0 12px rgba(245,223,166,.12); }
.coupe span { position: absolute; inset: 58% 13px 14px; border-radius: 0 0 60px 60px; background: linear-gradient(90deg, rgba(255,92,138,.38), rgba(169,243,255,.34)); animation: liquid 4s ease-in-out infinite; }
.coupe-one { left: 55%; --r: -6deg; } .coupe-two { left: 70%; --r: 4deg; } .coupe-three { left: 84%; --r: -2deg; }
.scene-title { position: relative; z-index: 3; max-width: 560px; }
.left-title { justify-self: end; margin-left: 32vw; }
.scene-title h2, .glass-pane h2, .final-copy h2 { margin: 0; color: var(--lucite); font-family: var(--display); font-size: clamp(44px, 7vw, 104px); line-height: .9; letter-spacing: -.03em; text-shadow: 0 0 25px rgba(169,243,255,.22); }
.scene-title p, .final-copy p { color: rgba(234,248,255,.74); font-size: clamp(17px, 1.6vw, 22px); line-height: 1.55; }
.ticker-ribbon { position: absolute; left: -4vw; right: -4vw; bottom: 5vh; padding: 12px 0; transform: rotate(-1.8deg); background: rgba(245,223,166,.09); border-block: 1px solid rgba(245,223,166,.28); color: var(--brass); font-family: var(--ui); font-size: 11px; font-weight: 900; letter-spacing: .32em; text-transform: uppercase; text-align: center; white-space: nowrap; }

.instruments { --x: 72%; --y: 46%; }
.instrument-wall { position: relative; z-index: 3; display: flex; gap: clamp(18px, 3vw, 44px); align-items: center; justify-content: center; margin-right: 29vw; }
.gauge { width: clamp(170px, 18vw, 250px); aspect-ratio: .82; border: 1px solid rgba(245,223,166,.38); border-radius: 42% 42% 28px 28px; background: radial-gradient(circle at 50% 32%, rgba(234,248,255,.16), transparent 42%), linear-gradient(145deg, rgba(234,248,255,.12), rgba(7,17,31,.42)); box-shadow: inset 0 0 42px rgba(234,248,255,.08), 0 22px 70px rgba(0,0,0,.35); backdrop-filter: blur(18px); cursor: pointer; transition: transform .55s ease, border-color .55s ease; }
.gauge:hover, .gauge.is-twitching { transform: translateY(-12px) rotate(-1.5deg); border-color: var(--cherry); }
.gauge-face { display: block; position: relative; width: 72%; aspect-ratio: 1; margin: 20px auto 18px; border-radius: 50%; border: 1px solid rgba(169,243,255,.43); background: conic-gradient(from 210deg, rgba(255,92,138,.5) 0 18deg, transparent 18deg 260deg, rgba(245,223,166,.5) 260deg 282deg, transparent 282deg), radial-gradient(circle, rgba(234,248,255,.10), rgba(17,42,70,.46)); }
.gauge-face::before { content: ""; position: absolute; inset: 17%; border-radius: 50%; border: 1px dashed rgba(245,223,166,.35); }
.gauge-face i { position: absolute; left: 50%; bottom: 50%; width: 3px; height: 43%; transform-origin: bottom; transform: translateX(-50%) rotate(-38deg); border-radius: 999px; background: var(--brass); box-shadow: 0 0 13px rgba(245,223,166,.6); transition: transform .42s cubic-bezier(.25,1.7,.45,1); }
.gauge:hover i, .gauge.is-twitching i { transform: translateX(-50%) rotate(58deg); background: var(--cherry); box-shadow: 0 0 18px rgba(255,92,138,.85); }
.gauge strong { display: block; color: var(--brass); font-family: var(--display); font-size: 26px; letter-spacing: .08em; }
.gauge small { display: block; margin-top: 8px; color: rgba(201,215,230,.78); font-family: var(--ui); font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.gauge-orb { width: 260px; height: 260px; right: 14vw; bottom: 22vh; animation: float 10s ease-in-out infinite -2s; }
.instrument-pane { right: 8vw; top: 18vh; width: min(430px, 82vw); }
.brass-ticks { position: absolute; right: 7vw; top: 13vh; width: 430px; aspect-ratio: 1; border-radius: 50%; background: repeating-conic-gradient(from 5deg, rgba(245,223,166,.6) 0 1deg, transparent 1deg 8deg); mask: radial-gradient(circle, transparent 0 62%, #000 63% 66%, transparent 67%); opacity: .45; animation: spinSlow 30s linear infinite; }

.convergence { --x: 50%; --y: 42%; text-align: center; }
.chandelier { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; pointer-events: none; }
.crown-orb { position: relative; width: min(38vw, 420px); height: min(38vw, 420px); animation: float 9s ease-in-out infinite; }
.halo { position: absolute; width: min(58vw, 720px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(169,243,255,.28); box-shadow: inset 0 0 38px rgba(169,243,255,.06), 0 0 42px rgba(123,77,255,.13); animation: haloDrift 8s ease-in-out infinite; }
.halo-two { width: min(44vw, 560px); border-color: rgba(245,223,166,.32); animation-delay: -2s; }
.halo-three { width: min(28vw, 360px); border-color: rgba(255,92,138,.38); animation-delay: -4s; }
.final-copy { position: relative; z-index: 4; max-width: 760px; margin-top: 46vh; padding: 28px 34px; border-radius: 34px; background: rgba(7,17,31,.45); border: 1px solid rgba(234,248,255,.13); backdrop-filter: blur(16px); }
.bloom-lines path { stroke-width: 1.2; stroke: var(--frost); animation-duration: 10s, 20s; }
.bloom-lines path:nth-child(2n) { stroke: var(--brass); }
.bloom-lines path:nth-child(3n) { stroke: var(--cherry); opacity: .58; }

@keyframes fieldBreath { 0%,100% { opacity: .32; stroke-width: 1.1; } 50% { opacity: .92; stroke-width: 2.2; } }
@keyframes traceMove { to { stroke-dashoffset: -220; } }
@keyframes bead { to { transform: translate(22px, -16px); opacity: .35; } }
@keyframes orbWake { from { opacity: .08; transform: scale(.72); filter: blur(12px); } to { opacity: 1; transform: scale(1); filter: blur(0); } }
@keyframes float { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-22px,0); } }
@keyframes onePulse { 0% { opacity: 0; transform: translate(-46%,-50%) scale(.18); } 30% { opacity: .55; } 100% { opacity: 0; transform: translate(-58%,-50%) scale(1.38); } }
@keyframes refractIn { from { opacity: 0; letter-spacing: .06em; transform: translateY(30px) skewX(-8deg); } to { opacity: 1; letter-spacing: -.045em; transform: none; } }
@keyframes railGlow { 0%,100% { filter: saturate(1); } 50% { filter: saturate(1.8) brightness(1.25); } }
@keyframes liquid { 0%,100% { transform: translateY(0) skewX(-5deg); } 50% { transform: translateY(-10px) skewX(6deg); } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes haloDrift { 0%,100% { transform: scale(.96) rotate(0deg); opacity: .34; } 50% { transform: scale(1.04) rotate(16deg); opacity: .72; } }

@media (max-width: 900px) {
  .ritual-rail { top: auto; bottom: 16px; width: calc(100% - 24px); justify-content: space-between; }
  .ritual-rail a { min-width: auto; padding-inline: 10px; font-size: 9px; }
  .rail-spark { display: none; }
  .chamber { padding: 92px 24px 90px; align-items: start; }
  .wordmark-wrap, .left-title, .instrument-wall { margin: 0; justify-self: start; }
  .hero-orb { right: -70px; top: 22vh; opacity: .78; }
  .hero-pane, .instrument-pane { position: relative; right: auto; top: auto; bottom: auto; margin-top: 36px; justify-self: start; }
  .service-orb { left: -35px; top: 34vh; }
  .coupe { width: 86px; height: 86px; }
  .coupe-one { left: 16%; } .coupe-two { left: 47%; } .coupe-three { left: 74%; }
  .instrument-wall { flex-direction: column; width: 100%; }
  .gauge { width: min(260px, 74vw); }
  .gauge-orb, .brass-ticks { opacity: .35; right: -90px; }
  .final-copy { margin-top: 50vh; }
}