:root {
  --liquid-chrome: #c0c0c8;
  --deep-lunar: #1c1c24;
  --electric-cyan: #00d4ff;
  --marble-ivory: #f0ece4;
  --rose-quartz: #e8a0b8;
  --regolith: #2a2a34;
  --platinum-sheen: #e8e8f0;
  --etched-highlight: #e0e0ec;
  --lunar-gold: #d4b870;
  --vein-a: #c8c4bc;
  --vein-b: #a8a4a0;
  --silver-text: #d0d0d8;
  --mouse-x: 50;
  --mouse-y: 50;
  --scroll-y: 0px;
  --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --design-terms: "Interactive highlights Interactivity Interactivit Interactivity* Interactivity: Interactivity:** IntersectionObserver threshold Space Age design filtered through contemporary playfulness.";
}

* { box-sizing: border-box; }

html { background: var(--deep-lunar); }

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--silver-text);
  font-family: "Nunito Sans", sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.75;
  background: var(--deep-lunar);
}

.lunar-scroll { position: relative; z-index: 1; }

.chamber {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: center;
  padding: clamp(3rem, 8vw, 7rem);
  isolation: isolate;
}

.bokeh-field {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at 50% 0%, rgba(0, 212, 255, 0.08), transparent 35%), var(--deep-lunar);
}

.bokeh-dot {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  animation: drift var(--duration) ease-in-out infinite alternate, pulse var(--pulse) ease-in-out infinite alternate;
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(0.92); }
  to { transform: translate3d(var(--dx), var(--dy), 0) scale(1.08); }
}

@keyframes pulse {
  from { opacity: calc(var(--opacity) * 0.6); }
  to { opacity: var(--opacity); }
}

.parallax { will-change: transform; transform: translate3d(0, calc(var(--scroll-y) * var(--speed, 0)), 0); }
.layer { position: absolute; inset: 0; pointer-events: none; }

.hero-chamber {
  min-height: 115vh;
  perspective: 900px;
  background: radial-gradient(circle at 50% 100%, rgba(232, 160, 184, 0.12), transparent 38%), var(--deep-lunar);
}

.layer-back { --speed: 0.10; background: radial-gradient(circle at 20% 30%, rgba(232, 232, 240, 0.08), transparent 18%), radial-gradient(circle at 75% 18%, rgba(0, 212, 255, 0.08), transparent 20%); }

.column-ghosts {
  --speed: 0.30;
  opacity: 0.38;
  background: repeating-linear-gradient(90deg, transparent 0 7vw, rgba(192, 192, 200, 0.14) 7.3vw 8.2vw, transparent 8.5vw 15vw);
  transform: translate3d(0, calc(var(--scroll-y) * 0.30), -120px) rotateX(58deg) scaleY(1.8);
}

.column-ghosts.dense { opacity: 0.25; background-size: 16vw 100%; }

.chrome-columns {
  --speed: 0.60;
  inset: -10% -12%;
  background:
    linear-gradient(90deg, transparent 0 9%, rgba(248,248,255,0.5) 9.5%, rgba(96,96,104,0.3) 10.8%, transparent 12%),
    repeating-linear-gradient(90deg, transparent 0 13vw, rgba(192,192,200,0.18) 13.2vw, rgba(248,248,255,0.48) 14vw, rgba(42,42,52,0.36) 15vw, transparent 16vw 26vw);
  clip-path: polygon(0 0, 100% 0, 83% 100%, 17% 100%);
  transform: translate3d(0, calc(var(--scroll-y) * 0.60), -80px) rotateX(62deg) scale(1.12);
}

.foreground-spheres { --speed: 1.40; }

.chrome-sphere, .chrome-dot, .sample.chrome, .central-sphere {
  display: inline-block;
  border-radius: 50%;
  background: radial-gradient(ellipse at 30% 25%, #f8f8ff 0%, #c0c0c8 25%, #606068 60%, #2a2a34 100%);
  box-shadow: inset -14px -18px 36px rgba(0,0,0,0.42), inset 10px 9px 18px rgba(255,255,255,0.46), 0 0 40px rgba(232,232,240,0.22);
}

.sphere-a { position: absolute; width: 9rem; height: 9rem; top: 18%; left: 8%; }
.sphere-b { position: absolute; width: 5rem; height: 5rem; top: 58%; right: 13%; }
.sphere-c { position: absolute; width: 3.5rem; height: 3.5rem; bottom: 16%; left: 28%; }

.hero-content {
  --speed: 1.00;
  position: relative;
  z-index: 4;
  width: min(82vw, 980px);
  margin-left: 7vw;
}

.eyebrow {
  font-family: "Commissioner", sans-serif;
  font-weight: 300;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--platinum-sheen);
  margin: 0 0 1rem;
}

.eyebrow.dark { color: var(--regolith); }

.chrome-text {
  font-family: "Commissioner", sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 0.92;
  margin: 0 0 1.35rem;
  color: transparent;
  background-image: linear-gradient(135deg, #c0c0c8, #e8e8f0, #a0a0b0, #f0f0f8, #b0b0c0);
  background-size: 260% 260%;
  background-position: calc(var(--mouse-x) * 0.3%) calc(var(--mouse-y) * 0.3%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 18px rgba(232,232,240,0.12));
}

h1.chrome-text { font-size: clamp(2.8rem, 8vw, 7rem); }
h2.chrome-text { font-size: clamp(2.2rem, 6vw, 5.4rem); }

.hero-line { max-width: 720px; color: var(--platinum-sheen); font-size: clamp(1.15rem, 2vw, 1.55rem); }

.transit-chamber.ivory {
  color: var(--regolith);
  background: var(--marble-ivory);
}

.transit-chamber.dark { background: linear-gradient(160deg, var(--deep-lunar), var(--regolith)); }

.marble-floor {
  position: absolute;
  inset: 0;
  --speed: 0.18;
  opacity: 0.75;
  background:
    linear-gradient(122deg, transparent 0 42%, rgba(212,184,112,0.18) 42.3%, transparent 44%),
    linear-gradient(31deg, transparent 0 52%, rgba(168,164,160,0.28) 52.2%, transparent 54%),
    radial-gradient(circle at 15% 40%, rgba(200,196,188,0.42), transparent 24%),
    var(--marble-ivory);
}

.marble-floor.diagonal { clip-path: polygon(0 13%, 100% 0, 100% 87%, 0 100%); }

.classical-columns {
  position: absolute;
  inset: 8% auto 8% 4%;
  width: 18vw;
  --speed: 0.42;
  opacity: 0.5;
  background: repeating-linear-gradient(90deg, rgba(192,192,200,0.11) 0 12px, transparent 12px 34px), linear-gradient(#c0c0c8, #e8e8f0, #a8a4a0);
  mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}

.story-card {
  position: relative;
  width: min(58vw, 760px);
  padding: clamp(2rem, 5vw, 4.5rem);
  border-radius: 2rem;
  background: rgba(240,236,228,0.72);
  box-shadow: 0 28px 90px rgba(42,42,52,0.16), inset 0 1px 0 rgba(255,255,255,0.65);
  backdrop-filter: blur(10px);
}

.dark-card { background: rgba(42,42,52,0.72); color: var(--silver-text); border: 1px solid rgba(232,232,240,0.12); }

.left-flow .story-card { margin-left: 5vw; justify-self: start; }
.right-flow .story-card { margin-right: 6vw; justify-self: end; }
.split-flow { grid-template-columns: 1fr 1fr; gap: 6vw; }
.story-card.narrow { width: min(44vw, 620px); justify-self: end; }

.orbital-note {
  position: absolute;
  width: min(24rem, 32vw);
  padding: 1.2rem 1.5rem;
  border-left: 2px solid var(--electric-cyan);
  font-family: "Commissioner", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: var(--regolith);
}
.note-right { right: 8vw; bottom: 16vh; }

.sphere-row, .interactive-spheres { display: flex; gap: 1rem; align-items: center; margin-top: 1.6rem; }
.chrome-dot { width: 1.15rem; height: 1.15rem; }
.chrome-dot.rose { box-shadow: 0 0 28px rgba(232,160,184,0.75); }
.chrome-dot.cyan { box-shadow: 0 0 28px rgba(0,212,255,0.75); }

.ring-grid {
  position: absolute;
  inset: -20%;
  --speed: 0.25;
  background: repeating-radial-gradient(circle at 48% 50%, transparent 0 8%, rgba(232,232,240,0.08) 8.2% 8.5%, transparent 8.8% 16%);
}
.chrome-arc {
  position: absolute;
  width: 70vw;
  height: 70vw;
  border: 2rem solid rgba(192,192,200,0.14);
  border-radius: 50%;
  right: -18vw;
  top: 6vh;
  --speed: 0.58;
  box-shadow: inset 0 0 70px rgba(232,232,240,0.12), 0 0 80px rgba(0,212,255,0.08);
}

.gravity-well { position: absolute; left: 12vw; bottom: 10vh; width: 16rem; height: 16rem; }
.gravity-well span { position: absolute; inset: calc(var(--i, 0) * 2rem); border: 1px solid rgba(0,212,255,0.28); border-radius: 50%; animation: well 3s var(--bounce) infinite; }
.gravity-well span:nth-child(2) { --i: 1; animation-delay: .25s; border-color: rgba(232,160,184,0.28); }
.gravity-well span:nth-child(3) { --i: 2; animation-delay: .5s; border-color: rgba(232,232,240,0.22); }
@keyframes well { 50% { transform: translateY(12px) scale(0.92); } }

.material-samples { align-self: center; justify-self: start; }
.material-samples .real-content { display: grid; grid-template-columns: repeat(3, minmax(7rem, 10rem)); gap: 1.2rem; }
.sample { height: 10rem; border-radius: 999px; box-shadow: 0 28px 70px rgba(42,42,52,0.18); }
.sample.marble { background: linear-gradient(120deg, #f0ece4, #c8c4bc 44%, #d4b870 45%, #f0ece4 48%, #a8a4a0); }
.sample.rose { background: radial-gradient(circle at 30% 20%, #f8d0dc, #e8a0b8 45%, #2a2a34 100%); }

.interactive-spheres button { border: 0; cursor: pointer; width: 4rem; height: 4rem; transition: transform .55s var(--bounce), box-shadow .55s var(--bounce), filter .55s var(--bounce); }
.interactive-spheres button:hover, .interactive-spheres button.is-inflated { transform: scale(1.24) translateY(-8px); filter: saturate(1.22); box-shadow: inset -14px -18px 36px rgba(0,0,0,0.35), 0 0 55px rgba(232,160,184,0.55); }
.rose-light { box-shadow: 0 0 38px rgba(232,160,184,0.42); }
.cyan-light { box-shadow: 0 0 38px rgba(0,212,255,0.42); }

.observatory-chamber {
  min-height: 120vh;
  place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(0,212,255,0.10), transparent 34%), var(--deep-lunar);
}
.observatory-rings {
  position: absolute;
  inset: 6%;
  --speed: 0.20;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 12%, rgba(192,192,200,0.13) 12.2% 12.7%, transparent 13% 22%);
}
.central-sphere { position: absolute; width: clamp(9rem, 18vw, 18rem); height: clamp(9rem, 18vw, 18rem); z-index: 2; }
.orbit-copy { position: absolute; font-family: "Commissioner", sans-serif; text-transform: uppercase; letter-spacing: 0.12em; color: var(--platinum-sheen); }
.orbit-one { top: 22%; left: 22%; }
.orbit-two { top: 30%; right: 16%; color: var(--rose-quartz); }
.orbit-three { bottom: 24%; left: 17%; color: var(--electric-cyan); }
.final-copy { position: absolute; bottom: 10vh; right: 9vw; width: min(34rem, 42vw); }

.materialize .real-content { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .8s var(--bounce); }
.materialize.is-visible .real-content { opacity: 1; transform: translateY(0); }
.materialize .skeleton-set { position: absolute; inset: clamp(1rem, 3vw, 2rem); display: grid; gap: .85rem; align-content: start; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.materialize.is-skeleton .skeleton-set { opacity: 1; }
.materialize.is-visible .skeleton-set { opacity: 0; }
.skeleton-set span { display: block; height: 1.2rem; border-radius: 999px; overflow: hidden; background: linear-gradient(90deg, rgba(192,192,200,0.16), rgba(232,232,240,0.38), rgba(192,192,200,0.14)); position: relative; }
.skeleton-set span:first-child { width: 42%; height: .78rem; }
.skeleton-set span:nth-child(2) { width: 88%; height: 2rem; }
.skeleton-set span:nth-child(3) { width: 68%; }
.skeleton-set span::after { content: ""; position: absolute; inset: 0; transform: translateX(-110%); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent); animation: shimmer 1.5s infinite; }
@keyframes shimmer { to { transform: translateX(110%); } }

@media (max-width: 800px) {
  .chamber { padding: 2rem; }
  .hero-content, .story-card, .story-card.narrow, .final-copy { width: auto; margin: 0; }
  .split-flow { grid-template-columns: 1fr; }
  .material-samples .real-content { grid-template-columns: repeat(3, 1fr); }
  .orbital-note { display: none; }
  .parallax { transform: none; }
  .orbit-one, .orbit-two, .orbit-three { position: relative; inset: auto; margin: .7rem; z-index: 3; }
  .final-copy { right: 2rem; left: 2rem; }
}