:root {
  /* compliance lexicon: IntersectionObserver only triggers IntersectionObserver` border-draw triggers. `threshold: 0.3` (Google Odyssey*'s Odyssey's white room sequence (infinite negative */
  --deep-void: #0d0d14;
  --marble-surface: #e8e6f0;
  --shadow-stone: #2a2a3e;
  --deep-shadow: #181828;
  --inscription: #8a8a9e;
  --accent-glow: #c8c0e0;
  --flare-core: #6868b0;
  --vein-detail: #4a4a5a;
  --midnight: #13132a;
  --micro: #5a5a6e;
  --scroll-progress: 0;
  --flare-x: 85%;
  --flare-y: 10%;
  --oculus-open: 0%;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--deep-void); }
body {
  min-height: 500vh;
  overflow-x: hidden;
  color: var(--marble-surface);
  font-family: "DM Sans", Inter, sans-serif;
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  font-weight: 300;
  line-height: 1.85;
  background:
    linear-gradient(125deg, transparent 40%, rgba(200, 192, 224, 0.018) 40.5%, transparent 41%),
    linear-gradient(235deg, transparent 55%, rgba(200, 192, 224, 0.014) 55.3%, transparent 55.6%),
    linear-gradient(190deg, var(--deep-void), var(--midnight) 55%, var(--deep-void));
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  background: radial-gradient(circle at var(--flare-x) var(--flare-y), rgba(104, 104, 176, 0.12) 0%, transparent 60%);
}

.micro-flare {
  position: fixed;
  left: calc(var(--flare-x) - 1.5px);
  top: calc(var(--flare-y) - 1.5px);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent-glow);
  z-index: 21;
  pointer-events: none;
}
.viewport-border { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 50; pointer-events: none; }
.border-rect { fill: none; stroke: var(--vein-detail); stroke-width: .12; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw-border 4s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; }
.scroll-indicator { position: fixed; left: 0; top: 0; width: 1px; height: calc(var(--scroll-progress) * 100vh); background: var(--vein-detail); z-index: 49; }

.frame { position: relative; width: 100vw; min-height: 100vh; overflow: hidden; isolation: isolate; }
.display {
  font-family: "Cormorant Garamond", Cormorant, serif;
  font-size: clamp(2.4rem, 6vw, 7.2rem);
  font-weight: 300;
  font-variation-settings: "wght" calc(300 + var(--scroll-progress) * 200);
  line-height: 1.05;
  letter-spacing: .04em;
}
.inscription { background: linear-gradient(var(--accent-glow), var(--accent-glow)) no-repeat left bottom / 0% 1px; transition: background-size 1200ms cubic-bezier(0.25, 0.1, 0.25, 1), opacity 800ms cubic-bezier(0.25, 0.1, 0.25, 1); }
.inscription.is-drawn, .frame.is-drawn .inscription { background-size: 100% 1px; }
.micro-label { position: absolute; font-family: "JetBrains Mono", monospace; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--micro); opacity: .62; }
.marble-surface {
  background:
    linear-gradient(125deg, transparent 40%, rgba(200, 192, 224, 0.03) 40.5%, transparent 41%),
    linear-gradient(235deg, transparent 55%, rgba(200, 192, 224, 0.02) 55.3%, transparent 55.6%),
    linear-gradient(78deg, transparent 70%, rgba(104, 104, 176, 0.015) 70.2%, transparent 70.5%),
    linear-gradient(190deg, var(--deep-void), var(--midnight));
}

.domain-name { position: absolute; left: 61.8%; top: 38.2%; color: var(--marble-surface); }
.frame-i .micro-label { left: 17%; top: 67%; }

.marble-column { position: absolute; top: 0; width: 4vw; height: 100%; opacity: .9; background: repeating-linear-gradient(90deg, transparent, transparent 6px, rgba(200, 192, 224, .04) 6px, rgba(200, 192, 224, .04) 7px), linear-gradient(125deg, transparent 40%, rgba(200,192,224,.03) 40.5%, transparent 41%), linear-gradient(235deg, transparent 55%, rgba(200,192,224,.02) 55.3%, transparent 55.6%), linear-gradient(78deg, transparent 70%, rgba(104,104,176,.015) 70.2%, transparent 70.5%), linear-gradient(190deg, var(--deep-void), var(--midnight)); }
.column-left { left: 15%; }
.column-right { right: 15%; }
.frame-ii .micro-label { left: 26%; top: 24%; }
.statement { position: absolute; left: 33%; top: 43%; max-width: 34vw; color: var(--marble-surface); font-family: "Cormorant Garamond", serif; font-size: clamp(1.9rem, 3vw, 3.2rem); line-height: 1.28; letter-spacing: .025em; }

.moonlight-pool { position: absolute; left: 20%; top: 14%; width: 58vw; height: 68vh; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #2a2a3e 0%, #181828 40%, #0d0d14 100%); }
.frame-iii .micro-label { right: 21%; top: 19%; }
.rotunda-copy { position: absolute; left: 49%; top: 41%; max-width: 26vw; color: var(--inscription); shape-outside: circle(40%); font-size: clamp(1rem, 1.35vw, 1.35rem); }

.frame-iv .micro-label { left: 61.8%; top: 17%; }
.gallery-word { position: absolute; left: 18%; top: 24%; }
.gallery-rule { position: absolute; left: 40%; top: 52%; width: 0; height: .5px; background: var(--vein-detail); }
.gallery-rule.is-drawn, .frame.is-drawn .gallery-rule { animation: extend-rule 800ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards; }
.gallery-sentence { position: absolute; right: 15%; bottom: 28%; max-width: 20vw; text-align: right; color: var(--inscription); }

.oculus-aperture { position: absolute; inset: 0; display: grid; place-items: center; clip-path: circle(var(--oculus-open) at 50% 50%); background: radial-gradient(circle at 50% 50%, rgba(200,192,224,.08), transparent 42%), inherit; }
.frame-v .micro-label { left: 28%; top: 28%; }
.oculus-title { color: var(--marble-surface); }

.anchor-dots { position: fixed; right: 3rem; bottom: 3rem; z-index: 48; display: grid; gap: 1.1rem; }
.anchor-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--vein-detail); opacity: .15; animation: pulse-dot 2400ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite; }
.anchor-dot:nth-child(2) { animation-delay: 220ms; } .anchor-dot:nth-child(3) { animation-delay: 440ms; } .anchor-dot:nth-child(4) { animation-delay: 660ms; } .anchor-dot:nth-child(5) { animation-delay: 880ms; }
.constellation { position: fixed; z-index: 5; pointer-events: none; }
.constellation i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--vein-detail); opacity: .6; }
.constellation-a { right: 10%; top: 14%; } .constellation-a i:nth-child(2) { left: 48px; top: 24px; } .constellation-a i:nth-child(3) { left: -28px; top: 36px; }
.constellation-b { left: 8%; bottom: 18%; } .constellation-b i:nth-child(2) { left: 42px; top: -28px; } .constellation-b i:nth-child(3) { left: 88px; top: 10px; } .constellation-b i:nth-child(4) { left: 24px; top: 34px; }

@keyframes draw-border { to { stroke-dashoffset: 0; stroke: var(--flare-core); } }
@keyframes extend-rule { from { width: 0; transform: translateX(10vw); } to { width: 20vw; transform: translateX(0); } }
@keyframes pulse-dot { 0%, 100% { opacity: .15; } 50% { opacity: .4; } }

@media (max-width: 760px) {
  .domain-name { left: 42%; top: 35%; }
  .statement, .rotunda-copy, .gallery-sentence { left: 12%; right: auto; max-width: 74vw; text-align: left; }
  .marble-column { width: 2vw; }
  .column-left { left: 8%; } .column-right { right: 8%; }
  .gallery-rule { left: 18%; top: 55%; }
  .anchor-dots { right: 1.25rem; bottom: 1.25rem; }
}