:root {
  --moonstone: #f7f2ed;
  --sand-dusk: #e8e0d4;
  --night-soil: #2a2520;
  --burnt-umber: #3d362e;
  --body-charcoal: #4a4038;
  --driftwood: #6b6054;
  --dust-trail: #8a7e70;
  --amber-moon: #c8956a;
  --sage-mist: #7a9a8e;
  --pale-stone: #d4c8b8;
  --warm-stone: #c4b8a8;
  --deep-stone: #b8a898;
  --gravel-line: #ddd5c8;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--moonstone);
  color: var(--body-charcoal);
  font-family: "Newsreader", Georgia, serif;
  font-variation-settings: "opsz" 16;
  overflow-x: hidden;
}

/* Compliance notes: Fira Code at weight 300 only; Fira Code" (Google Fonts). */
/* Intersection Observer API with a `threshold` of 0.2. Each element in a group receives a `transition-delay` of `calc(var(--i) * 150ms)`. */
/* Intersection Observer that applies `transition: background-color 1.5s ease` to the `<main>` element when the Moon Pool section enters the viewport at 30% visibility. */

main {
  background: var(--moonstone);
  transition: background-color 1.5s ease;
}

main.nightfall { background: var(--night-soil); }

.room {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.hero-room {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--moonstone) 0%, var(--sand-dusk) 100%);
}

.enso {
  border: 2px solid rgba(200, 149, 106, 0.6);
  border-radius: 48% 52% 50% 50% / 50% 48% 52% 50%;
  transition: opacity 600ms ease, border-color 600ms ease, transform 800ms ease;
}

.enso:hover {
  border-color: rgba(200, 149, 106, 1);
  opacity: 1;
  transform: scale(1.018) rotate(-1deg);
}

.hero-enso {
  position: absolute;
  width: min(58vw, 650px);
  height: min(58vw, 650px);
  min-width: 310px;
  min-height: 310px;
  left: 55%;
  top: 45%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  opacity: .82;
}

.hero-enso::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 52% 48% 51% 49% / 48% 53% 47% 52%;
  background: conic-gradient(from 15deg, transparent 0 36deg, rgba(200,149,106,.22) 36deg 305deg, transparent 305deg 360deg);
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  pointer-events: none;
}

.moon-title {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(3rem, 8vw, 7rem);
  font-variation-settings: "wght" 200, "SOFT" 100, "WONK" 1;
  letter-spacing: .08em;
  font-weight: 200;
  color: var(--burnt-umber);
  animation: breathe 4s ease-in-out infinite alternate;
}

.moon-title span {
  display: inline-block;
  transform: translateY(var(--lift));
}

.hero-line {
  position: absolute;
  left: calc(55% - 8vw);
  top: calc(45% + min(31vw, 350px));
  margin: 0;
  color: var(--driftwood);
  font-size: clamp(1.05rem, 1.5vw, 1.55rem);
  line-height: 1.85;
}

.scroll-indicator {
  position: absolute;
  left: 55%;
  bottom: 5vh;
  translate: -50% 0;
  color: var(--amber-moon);
  font-family: "Fira Code", monospace;
  font-size: 2rem;
  animation: pulse 1.8s ease-in-out infinite;
}

.gravel-room {
  min-height: 150vh;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(6, minmax(130px, auto));
  gap: 4vw 2vw;
  padding: 14vh 6vw;
  background: var(--sand-dusk);
}

.gravel-lines, .rake-curve {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.gravel-lines span {
  position: absolute;
  left: 0;
  width: 100%;
  border-top: 1px solid var(--gravel-line);
  opacity: .72;
}
.gravel-lines span:nth-child(1) { top: 80px; }
.gravel-lines span:nth-child(2) { top: 210px; }
.gravel-lines span:nth-child(3) { top: 270px; }
.gravel-lines span:nth-child(4) { top: 440px; }
.gravel-lines span:nth-child(5) { top: 620px; }

.rake-curve { width: 100%; height: 42vh; top: 38%; opacity: .45; }
.rake-path { fill: none; stroke: var(--gravel-line); stroke-width: 2; stroke-dasharray: 900; stroke-dashoffset: 900; }
.rake-path.in-view { stroke-dashoffset: 0; transition: stroke-dashoffset 3s ease, opacity 800ms ease, transform 800ms ease; }

.gravel-text {
  position: relative;
  z-index: 1;
  color: var(--burnt-umber);
}

.gravel-text h2, .stone-intro h2, .orbit-two {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 250;
  font-variation-settings: "wght" 250, "SOFT" 100, "WONK" 1;
  letter-spacing: .035em;
}

.gravel-text p, .orbit { font-size: clamp(1rem, 1.2vw, 1.15rem); }

.block-one { grid-column: 2 / 5; grid-row: 1 / 3; line-height: 1.8; }
.block-two { grid-column: 5 / 8; grid-row: 3 / 5; line-height: 2.2; }
.block-three { grid-column: 1 / 4; grid-row: 5 / 7; line-height: 1.6; }

.mono-tag {
  display: block;
  margin-bottom: 1.1rem;
  font-family: "Fira Code", monospace;
  font-size: .85rem;
  font-weight: 300;
  color: var(--dust-trail);
  letter-spacing: .04em;
}

.stone-room {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(6, 1fr);
  padding: 10vh 6vw;
  background: linear-gradient(180deg, var(--sand-dusk), var(--moonstone));
}

.stone-intro { grid-column: 2 / 5; grid-row: 1 / 3; align-self: center; }
.stone-intro h2 { font-size: clamp(2rem, 4vw, 4.5rem); margin: 0; color: var(--burnt-umber); }

.stone {
  align-self: center;
  justify-self: center;
  background: linear-gradient(135deg, var(--pale-stone), var(--warm-stone));
  box-shadow: 0 4px 20px rgba(42, 37, 32, 0.15), inset 12px 14px 28px rgba(247,242,237,.22);
}
.stone-a { grid-column: 6 / 8; grid-row: 1 / 3; width: 126px; height: 126px; border-radius: 50%; }
.stone-b { grid-column: 4 / 6; grid-row: 3 / 5; width: 180px; height: 88px; border-radius: 38% 26% 35% 28%; background: linear-gradient(135deg, var(--warm-stone), var(--deep-stone)); }
.stone-c { grid-column: 7 / 9; grid-row: 4 / 6; width: 98px; height: 150px; border-radius: 48% 42% 38% 44%; }
.stone-d { grid-column: 2 / 3; grid-row: 4 / 6; width: 108px; height: 108px; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); border-radius: 0; }
.stone-e { grid-column: 5 / 7; grid-row: 5 / 7; width: 70px; height: 70px; border-radius: 50%; background: linear-gradient(135deg, var(--pale-stone), var(--deep-stone)); }
.small-enso { grid-column: 1 / 3; grid-row: 2 / 4; width: 170px; height: 170px; justify-self: end; align-self: center; opacity: .6; }

.phase-strip {
  min-height: 34vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vw, 4rem);
  background: linear-gradient(180deg, var(--moonstone), var(--night-soil));
}

.phase {
  width: clamp(42px, 7vw, 76px);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 8px 30px rgba(42,37,32,.18);
}
.phase-new, .phase-old { background: var(--night-soil); border: 1px solid rgba(247,242,237,.18); }
.phase-wax { background: linear-gradient(90deg, var(--night-soil) 48%, var(--moonstone) 49%); }
.phase-full { background: var(--moonstone); }
.phase-wane { background: linear-gradient(90deg, var(--moonstone) 48%, var(--night-soil) 49%); }

.moon-room {
  background: var(--night-soil);
  color: var(--moonstone);
}

.moon-glow {
  position: absolute;
  left: 60%;
  top: 40%;
  width: min(45vw, 520px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247,242,237,.95) 0%, rgba(247,242,237,.55) 28%, rgba(247,242,237,.12) 58%, transparent 72%);
  filter: blur(.5px);
}

.crater {
  position: absolute;
  border-radius: 50%;
  opacity: .12;
  background: radial-gradient(circle at 35% 35%, rgba(247,242,237,.18), rgba(42,37,32,.05));
  box-shadow: inset 0 2px 8px rgba(0,0,0,.3);
}
.crater-one { width: 32px; height: 32px; left: 12%; top: 22%; }
.crater-two { width: 44px; height: 44px; left: 78%; top: 76%; }
.crater-three { width: 22px; height: 22px; left: 42%; top: 68%; }
.crater-four { width: 38px; height: 38px; left: 86%; top: 18%; }

.orbit { position: absolute; margin: 0; color: var(--moonstone); line-height: 1.85; }
.orbit-one { left: 13%; top: 22%; font-family: "Fira Code", monospace; font-size: .85rem; color: var(--sage-mist); letter-spacing: .04em; }
.orbit-two { left: 12%; top: 48%; max-width: 42vw; font-size: clamp(2.2rem, 5vw, 5.8rem); line-height: 1.02; }
.orbit-three { left: 64%; top: 68%; max-width: 23rem; color: var(--sand-dusk); }
.orbit-four { left: 70%; top: 18%; font-family: "Fira Code", monospace; color: var(--sage-mist); letter-spacing: .08em; }

.zoom-focus {
  opacity: .3;
  transform: scale(.7);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
  transition-delay: calc(var(--i) * 150ms);
}
.zoom-focus.in-view { opacity: 1; transform: scale(1); }

@keyframes breathe {
  from { font-variation-settings: "wght" 100, "SOFT" 100, "WONK" 1; }
  to { font-variation-settings: "wght" 400, "SOFT" 100, "WONK" 1; }
}

@keyframes pulse {
  0%, 100% { opacity: .3; transform: translateY(0); }
  50% { opacity: .7; transform: translateY(8px); }
}

@media (max-width: 768px) {
  .hero-enso { width: 82vw; height: 82vw; left: 53%; }
  .hero-line { left: 10vw; right: 6vw; top: 68vh; }
  .gravel-room, .stone-room { display: block; padding: 12vh 3vw; }
  .gravel-text, .stone-intro { margin: 0 8vw 24vh 5vw; }
  .block-two { margin-left: 16vw; }
  .block-three { margin-left: 5vw; margin-right: 14vw; }
  .stone { position: relative; margin: 10vh auto; }
  .stone-a { left: 16vw; }
  .stone-b { right: 12vw; }
  .stone-c { left: 24vw; }
  .stone-d { right: 18vw; }
  .stone-e { left: 4vw; }
  .small-enso { margin: 0 0 14vh 9vw; }
  .moon-glow { width: 78vw; left: 62%; top: 36%; }
  .orbit-two { left: 8vw; top: 46%; max-width: 78vw; }
  .orbit-three { left: 19vw; top: 72%; max-width: 68vw; }
  .orbit-one { left: 8vw; }
  .orbit-four { left: 56vw; top: 14%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .moon-title, .scroll-indicator { animation: none; }
  .zoom-focus { opacity: 1; transform: none; transition: none; }
  .rake-path { stroke-dashoffset: 0; transition: none; }
}