:root {
  --sun-clay: #D98B4A;
  --warm-cream: #F4E7CF;
  --moss-olive: #6E7B4F;
  --umber-soil: #4A3327;
  --apricot-glow: #FFBE6B;
  --glitch-cyan: #41D6C3;
  --dust-rose: #C9796B;
  --shadow: rgba(74, 51, 39, 0.28);
  --light: rgba(255, 250, 236, 0.86);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--warm-cream);
}

body {
  margin: 0;
  color: var(--umber-soil);
  font-family: "Manrope", system-ui, sans-serif;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 190, 107, 0.42), transparent 32rem),
    radial-gradient(circle at 82% 24%, rgba(201, 121, 107, 0.28), transparent 28rem),
    linear-gradient(140deg, #F4E7CF 0%, #E8C89E 48%, #D98B4A 120%);
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  opacity: 0.28;
  background-image:
    radial-gradient(circle, rgba(74, 51, 39, 0.18) 0 1px, transparent 1.3px),
    radial-gradient(circle, rgba(255, 255, 255, 0.24) 0 1px, transparent 1.4px);
  background-size: 19px 23px, 31px 37px;
  mix-blend-mode: multiply;
}

#particle-field {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 4;
  pointer-events: none;
}

.signal-story { position: relative; z-index: 5; }

.scene {
  position: relative;
  min-height: 100vh;
  padding: clamp(2rem, 5vw, 5rem);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

.scene::before {
  content: attr(data-chapter);
  position: absolute;
  top: 6vh;
  right: 7vw;
  font-family: "Cinzel Decorative", Georgia, serif;
  font-size: clamp(2.2rem, 8vw, 8rem);
  color: rgba(74, 51, 39, 0.08);
  text-shadow: -8px -8px 18px rgba(255, 250, 236, 0.58), 9px 9px 18px rgba(74, 51, 39, 0.13);
}

.calibration-rail {
  position: fixed;
  left: clamp(0.75rem, 2vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.9rem 0.5rem;
  border-radius: 999px;
  background: rgba(244, 231, 207, 0.55);
  box-shadow: inset 7px 7px 15px rgba(74, 51, 39, 0.12), inset -7px -7px 15px rgba(255, 250, 236, 0.72), 8px 8px 22px rgba(74, 51, 39, 0.12);
}

.calibration-rail a {
  writing-mode: vertical-rl;
  text-decoration: none;
  color: var(--moss-olive);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.7rem 0.28rem;
  border-radius: 999px;
  transition: color 280ms ease, background 280ms ease, transform 280ms ease;
}

.calibration-rail a.active,
.calibration-rail a:hover {
  color: var(--umber-soil);
  background: rgba(255, 190, 107, 0.45);
  transform: translateX(3px);
}

.scene-arrival { min-height: 108vh; }

.depression {
  position: absolute;
  width: min(66vw, 780px);
  height: min(44vw, 430px);
  border-radius: 50%;
  background: #EACFA7;
  box-shadow: inset 28px 28px 52px rgba(74, 51, 39, 0.22), inset -30px -30px 52px rgba(255, 250, 236, 0.85), 0 22px 70px rgba(217, 139, 74, 0.18);
  transform: rotate(-8deg) translate(4vw, 2vh);
}

.sleeping-particles i {
  position: absolute;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--glitch-cyan);
  box-shadow: 0 0 18px var(--glitch-cyan);
  animation: sleepPulse 3.5s ease-in-out infinite;
}

.sleeping-particles i:nth-child(1) { left: 27%; top: 45%; }
.sleeping-particles i:nth-child(2) { left: 41%; top: 36%; background: var(--apricot-glow); }
.sleeping-particles i:nth-child(3) { left: 55%; top: 52%; background: var(--dust-rose); }
.sleeping-particles i:nth-child(4) { left: 66%; top: 42%; }
.sleeping-particles i:nth-child(5) { left: 48%; top: 62%; background: var(--apricot-glow); }
.sleeping-particles i:nth-child(6) { left: 35%; top: 58%; background: var(--moss-olive); }
.sleeping-particles i:nth-child(7) { left: 60%; top: 30%; background: var(--sun-clay); }

.wordmark-wrap {
  position: relative;
  text-align: center;
  transform: translateX(5vw);
  animation: riseFromClay 1400ms cubic-bezier(.2, 1.45, .32, 1) both;
}

.wordmark {
  position: relative;
  margin: 0;
  font-family: "Poiret One", system-ui, sans-serif;
  font-size: clamp(5rem, 17vw, 17rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.82;
  color: var(--umber-soil);
  text-shadow: -10px -10px 20px rgba(255, 250, 236, 0.85), 12px 14px 24px rgba(74, 51, 39, 0.22);
}

.wordmark::before,
.wordmark::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.wordmark::before { color: var(--glitch-cyan); transform: translate(-7px, 2px); }
.wordmark::after { color: var(--apricot-glow); transform: translate(7px, -2px); }
body.glitching .wordmark::before,
body.glitching .wordmark::after { opacity: 0.75; animation: channelJitter 560ms steps(2, end); }

.ceremony-label,
.coordinate-chip,
.orbit-caption,
.final-stamp {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  color: var(--moss-olive);
}

.opening-copy {
  max-width: 35rem;
  margin: 1.1rem auto 0;
  font-size: clamp(1rem, 2vw, 1.35rem);
  color: rgba(74, 51, 39, 0.78);
}

.coordinate-chip {
  position: absolute;
  padding: 0.8rem 1rem;
  border-radius: 999px;
  background: rgba(244, 231, 207, 0.68);
  box-shadow: 9px 9px 20px rgba(74, 51, 39, 0.14), -9px -9px 20px rgba(255, 250, 236, 0.82);
}
.chip-one { left: 18vw; top: 20vh; }
.chip-two { right: 9vw; bottom: 24vh; }

.corner {
  position: absolute;
  width: 9rem;
  height: 9rem;
  border-color: rgba(74, 51, 39, 0.25);
}
.corner-tl { top: 2rem; left: 2rem; border-top: 1px solid; border-left: 1px solid; border-radius: 1.5rem 0 0 0; }
.corner-br { right: 2rem; bottom: 2rem; border-right: 1px solid; border-bottom: 1px solid; border-radius: 0 0 1.5rem 0; }

.hud-ring {
  position: absolute;
  width: min(72vw, 720px);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: inset 11px 11px 26px rgba(74, 51, 39, 0.18), inset -13px -13px 28px rgba(255, 250, 236, 0.72), 18px 18px 48px rgba(74, 51, 39, 0.12);
  border: 1px solid rgba(74, 51, 39, 0.12);
}
.hud-ring span {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Poiret One", sans-serif;
  font-size: clamp(1.4rem, 4vw, 3rem);
  letter-spacing: 0.08em;
}
.hud-ring b {
  position: absolute;
  width: 1px;
  height: 12%;
  left: 50%;
  top: 0;
  background: var(--moss-olive);
  transform-origin: 50% 360px;
  opacity: 0.45;
}
.hud-ring b:nth-of-type(2) { transform: rotate(60deg); }
.hud-ring b:nth-of-type(3) { transform: rotate(145deg); }
.hud-ring b:nth-of-type(4) { transform: rotate(260deg); }

.inset-panel,
.crescent-note,
.horizon-copy {
  position: relative;
  padding: clamp(1.4rem, 4vw, 3rem);
  max-width: 34rem;
  border-radius: 2.2rem;
  background: rgba(244, 231, 207, 0.58);
  box-shadow: inset 12px 12px 25px rgba(74, 51, 39, 0.13), inset -14px -14px 28px rgba(255, 250, 236, 0.78), 18px 18px 46px rgba(74, 51, 39, 0.13);
}
.shape-panel { justify-self: end; margin-right: 8vw; }
.signal-panel { justify-self: start; margin-left: 9vw; }
h2 {
  margin: 0.3rem 0 1rem;
  font-family: "Poiret One", sans-serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 5.8rem);
  line-height: 0.95;
}
p { line-height: 1.75; }
.chapter-mark {
  font-family: "Cinzel Decorative", Georgia, serif;
  color: var(--dust-rose);
  font-size: 2.4rem;
}

.stone,
.signal-button,
.node {
  position: absolute;
  border: 0;
  border-radius: 999px;
  padding: 1rem 1.35rem;
  color: var(--umber-soil);
  background: linear-gradient(145deg, #E7A05F, #CF7942);
  box-shadow: 12px 12px 24px rgba(74, 51, 39, 0.24), -10px -10px 24px rgba(255, 250, 236, 0.58), inset 2px 2px 5px rgba(255, 250, 236, 0.45);
  font-family: "Manrope", sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.stone-a { left: 17vw; top: 26vh; }
.stone-b { right: 12vw; top: 23vh; background: linear-gradient(145deg, #899462, #6E7B4F); color: var(--warm-cream); }
.stone-c { left: 31vw; bottom: 16vh; background: linear-gradient(145deg, #FFD18F, #FFBE6B); }
.orbit-caption { position: absolute; right: 7vw; bottom: 11vh; max-width: 19rem; }

.glitch-collage {
  position: absolute;
  right: 8vw;
  top: 16vh;
  width: min(46vw, 560px);
  height: 56vh;
  filter: drop-shadow(18px 24px 26px rgba(74, 51, 39, 0.18));
}
.tile {
  position: absolute;
  display: grid;
  place-items: center;
  font-family: "Poiret One", sans-serif;
  font-size: clamp(2rem, 8vw, 7rem);
  border-radius: 1.1rem;
  background: linear-gradient(135deg, rgba(244, 231, 207, 0.88), rgba(217, 139, 74, 0.62));
  box-shadow: inset 7px 7px 16px rgba(74, 51, 39, 0.13), inset -9px -9px 18px rgba(255, 250, 236, 0.66), 11px 11px 24px rgba(74, 51, 39, 0.15);
  overflow: hidden;
}
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 9px, rgba(65, 214, 195, 0.22) 10px 11px, transparent 12px 18px);
  opacity: 0.55;
}
.tile-a { width: 36%; height: 32%; left: 2%; top: 10%; }
.tile-b { width: 23%; height: 27%; left: 42%; top: 4%; background-color: var(--dust-rose); }
.tile-c { width: 30%; height: 34%; right: 2%; top: 19%; }
.tile-d { width: 28%; height: 29%; left: 18%; bottom: 17%; background-color: var(--apricot-glow); }
.tile-e { width: 23%; height: 24%; left: 51%; bottom: 27%; background-color: var(--moss-olive); color: var(--warm-cream); }
.tile-f { width: 31%; height: 23%; right: 3%; bottom: 5%; background-color: var(--glitch-cyan); }
.glitch-collage.active .tile { animation: tileGlitch 620ms steps(3, end); }
.signal-button { left: 13vw; bottom: 17vh; cursor: pointer; background: linear-gradient(145deg, #41D6C3, #29B6A7); }
.scan-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24%;
  height: 1.2rem;
  background: repeating-linear-gradient(90deg, rgba(65, 214, 195, 0.8) 0 16px, rgba(255, 190, 107, 0.75) 16px 32px, rgba(74, 51, 39, 0.35) 32px 42px);
  opacity: 0.35;
  transform: skewY(-4deg);
}

.constellation {
  position: absolute;
  inset: 12vh 10vw;
  border-radius: 45%;
  box-shadow: inset 16px 16px 34px rgba(74, 51, 39, 0.1), inset -16px -16px 34px rgba(255, 250, 236, 0.52);
}
.node { background: var(--warm-cream); }
.node-one { left: 12%; top: 32%; }
.node-two { right: 18%; top: 18%; }
.node-three { left: 45%; bottom: 12%; }
.node-four { right: 11%; bottom: 27%; }
.crescent-note {
  margin-left: auto;
  margin-right: 8vw;
  border-radius: 4rem 1.4rem 4rem 1.4rem;
}
.crescent-note span { color: var(--moss-olive); text-transform: uppercase; letter-spacing: 0.18em; }
.dotted-path {
  position: absolute;
  width: 34vw;
  border-top: 3px dotted rgba(110, 123, 79, 0.48);
  transform-origin: left center;
}
.path-a { left: 20vw; top: 45vh; transform: rotate(-13deg); }
.path-b { right: 16vw; bottom: 28vh; transform: rotate(19deg); }

.scene-horizon {
  background: radial-gradient(circle at 50% 90%, #FFBE6B 0 16%, #D98B4A 32%, rgba(244, 231, 207, 0) 66%);
}
.sun-dial {
  position: absolute;
  width: min(80vw, 850px);
  aspect-ratio: 2 / 1;
  bottom: -4vw;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  box-shadow: inset 20px 20px 48px rgba(74, 51, 39, 0.15), inset -18px -18px 44px rgba(255, 250, 236, 0.55);
  border: 1px solid rgba(74, 51, 39, 0.13);
}
.sun-dial span {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 92%;
  background: rgba(74, 51, 39, 0.22);
  transform-origin: bottom center;
}
.sun-dial span:nth-child(1) { transform: rotate(-58deg); }
.sun-dial span:nth-child(2) { transform: rotate(-28deg); }
.sun-dial span:nth-child(3) { transform: rotate(0); }
.sun-dial span:nth-child(4) { transform: rotate(28deg); }
.sun-dial span:nth-child(5) { transform: rotate(58deg); }
.horizon-copy { text-align: center; background: rgba(244, 231, 207, 0.48); }
.final-stamp { position: absolute; right: 8vw; bottom: 10vh; }

.bounce-in { animation: bounceEnter 1050ms cubic-bezier(.21, 1.62, .36, .94) both; }
.is-visible .inset-panel,
.is-visible .crescent-note,
.is-visible .horizon-copy { animation: bounceEnter 900ms cubic-bezier(.21, 1.45, .36, .94) both; }

@keyframes bounceEnter {
  0% { opacity: 0; transform: translateY(34px) scale(0.84); }
  68% { opacity: 1; transform: translateY(-8px) scale(1.045); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes riseFromClay {
  0% { opacity: 0; transform: translateX(5vw) translateY(60px) scaleY(0.72); filter: blur(10px); }
  100% { opacity: 1; transform: translateX(5vw) translateY(0) scaleY(1); filter: blur(0); }
}

@keyframes sleepPulse {
  0%, 100% { transform: translateY(0) scale(0.75); opacity: 0.45; }
  50% { transform: translateY(-16px) scale(1.2); opacity: 1; }
}

@keyframes channelJitter {
  0% { clip-path: inset(0 0 75% 0); }
  25% { clip-path: inset(30% 0 38% 0); transform: translate(11px, -4px); }
  50% { clip-path: inset(62% 0 8% 0); transform: translate(-9px, 5px); }
  100% { clip-path: inset(0 0 0 0); }
}

@keyframes tileGlitch {
  0% { transform: translate(0, 0) skew(0); filter: hue-rotate(0); }
  35% { transform: translate(12px, -5px) skew(4deg); filter: hue-rotate(45deg); }
  70% { transform: translate(-8px, 7px) skew(-3deg); filter: hue-rotate(-30deg); }
  100% { transform: translate(0, 0) skew(0); filter: hue-rotate(0); }
}

@media (max-width: 760px) {
  .calibration-rail { left: 50%; top: auto; bottom: 0.8rem; transform: translateX(-50%); flex-direction: row; }
  .calibration-rail a { writing-mode: initial; font-size: 0.58rem; }
  .wordmark-wrap { transform: none; }
  .wordmark { font-size: clamp(4rem, 21vw, 8rem); }
  .chip-one, .chip-two, .orbit-caption, .final-stamp { display: none; }
  .shape-panel, .signal-panel, .crescent-note { margin: 0; justify-self: center; }
  .glitch-collage { position: relative; inset: auto; width: 86vw; height: 42vh; margin-top: 2rem; }
  .signal-button { left: 50%; transform: translateX(-50%); bottom: 9vh; }
}