:root {
  /* Compliance trace: IntersectionObserver` triggers entrance animations (translateY fade `ease-out` curve (Google */
  --parchment-mist: #e8e2d8;
  --warm-linen: #f4f0eb;
  --forest-ink: #3a3a32;
  --warm-graphite: #4a4a42;
  --observatory-sage: #5b8a72;
  --terracotta-clay: #ba8e6b;
  --frost-tint: rgba(232, 238, 242, 0.35);
  --night-moss: #2c3e2f;
  --starlight-gold: #d4b896;
  --soft-shadow: 0 8px 40px rgba(91, 138, 114, 0.12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Source Sans 3", Inter, sans-serif;
  color: var(--warm-graphite);
  background: var(--parchment-mist);
  overflow-x: hidden;
}

.terrain-layer {
  position: fixed;
  inset: 0;
  z-index: 10;
  background-color: var(--parchment-mist);
  background-image:
    radial-gradient(circle at calc(18% + var(--drift-x, 0px)) calc(18% + var(--drift-y, 0px)), rgba(91, 138, 114, 0.16), transparent 33%),
    radial-gradient(circle at calc(82% - var(--drift-x, 0px)) calc(44% - var(--drift-y, 0px)), rgba(186, 142, 107, 0.12), transparent 34%),
    radial-gradient(circle at calc(48% + var(--drift-y, 0px)) calc(90% - var(--drift-x, 0px)), rgba(212, 184, 150, 0.16), transparent 40%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='2' cy='2' r='1' fill='%233a3a32' fill-opacity='.03'/%3E%3C/svg%3E");
  transition: background-position 0.2s ease-out;
}

.terrain-layer::before,
.terrain-layer::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 180px;
  border: 1px solid rgba(212, 184, 150, 0.24);
  border-radius: 50%;
  transform: rotate(-18deg);
}

.terrain-layer::before { left: 7%; top: 17%; }
.terrain-layer::after { right: 8%; bottom: 12%; transform: rotate(21deg); }

.frost-layer {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease-out;
}

.frost-layer.visible { opacity: 1; }

.frost-left,
.frost-right,
.frost-top {
  position: fixed;
  background: var(--frost-tint);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: inset 0 0 0 1px rgba(244, 240, 235, 0.36);
}

.frost-left { left: 0; top: 0; bottom: 0; width: 48px; }
.frost-right { right: 0; top: 0; bottom: 0; width: 48px; }
.frost-top { left: 0; right: 0; top: 0; height: 56px; display: flex; align-items: center; justify-content: center; }

.domain-mark {
  font-family: Caveat, cursive;
  font-size: 1.45rem;
  color: var(--observatory-sage);
  letter-spacing: 0.02em;
}

.rotating-star,
.sparkle {
  display: block;
  width: 16px;
  height: 16px;
  background: var(--starlight-gold);
  clip-path: polygon(50% 0%, 60% 35%, 100% 50%, 60% 65%, 50% 100%, 40% 65%, 0% 50%, 40% 35%);
}

.rotating-star {
  position: absolute;
  top: 20px;
  left: 16px;
  animation: spin 60s linear infinite;
}

.progress-dots {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 18px;
  pointer-events: auto;
}

.progress-dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 1px solid rgba(91, 138, 114, 0.48);
  border-radius: 50%;
  background: rgba(244, 240, 235, 0.45);
  cursor: pointer;
  transition: background 260ms ease, transform 260ms ease, border-color 260ms ease;
}

.progress-dot.active {
  background: var(--observatory-sage);
  border-color: var(--observatory-sage);
  transform: scale(1.18);
}

.content-layer {
  position: relative;
  z-index: 20;
  padding: 96px 64px 1px;
}

.report-card {
  position: relative;
  min-height: calc(100vh - 128px);
  max-width: 720px;
  margin: 0 auto 120px;
  padding: 64px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--warm-linen);
  border-radius: 16px;
  box-shadow: var(--soft-shadow);
  overflow: hidden;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.report-card::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(91, 138, 114, 0.12);
  border-radius: 12px;
  pointer-events: none;
}

.report-card.in-view { opacity: 1; transform: translateY(0); }

.final-card { margin-bottom: 64px; }

.annotation {
  min-height: 1.2em;
  margin-bottom: 18px;
  font-family: Caveat, cursive;
  font-size: 0.95rem;
  color: var(--observatory-sage);
  letter-spacing: 0.02em;
}

.hero-illustration {
  width: min(280px, 78vw);
  max-width: 280px;
  height: auto;
  margin-bottom: 28px;
  overflow: visible;
}

.hero-illustration path,
.hero-illustration circle {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.hero-illustration .sage { stroke: var(--observatory-sage); }
.hero-illustration .clay { stroke: var(--terracotta-clay); }
.hero-illustration .gold { stroke: var(--starlight-gold); fill: var(--starlight-gold); }
.hero-illustration .thin { stroke-width: 1; opacity: 0.72; }
.hero-illustration .fill-star { fill: rgba(212, 184, 150, 0.34); stroke: var(--starlight-gold); }

h1, h2 {
  margin: 0 0 24px;
  font-family: "Nunito Sans", Inter, sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--forest-ink);
  text-align: center;
}

p {
  width: 100%;
  max-width: 640px;
  margin: 0 0 18px;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--warm-graphite);
}

p:last-of-type { margin-bottom: 30px; }

.constellation-divider {
  width: min(280px, 76vw);
  height: 80px;
  margin-top: 10px;
  overflow: visible;
}

.constellation-divider path {
  fill: none;
  stroke: var(--starlight-gold);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--path-length, 420);
  stroke-dashoffset: var(--path-length, 420);
  transition: stroke-dashoffset 1.2s ease-in-out;
}

.constellation-divider circle {
  fill: var(--warm-linen);
  stroke: var(--starlight-gold);
  stroke-width: 1;
  opacity: 0;
  transition: opacity 450ms ease 720ms;
}

.constellation-divider.drawn path { stroke-dashoffset: 0; }
.constellation-divider.drawn circle { opacity: 1; }

.sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  opacity: 0.4;
  animation: pulse 3s ease-in-out infinite;
}

.s1 { top: 16%; left: 12%; animation-delay: 0.1s; }
.s2 { top: 24%; right: 13%; animation-delay: 0.7s; }
.s3 { bottom: 23%; left: 16%; animation-delay: 1.4s; }
.s4 { bottom: 16%; right: 18%; animation-delay: 2s; }
.s5 { top: 52%; left: 8%; animation-delay: 1.1s; }
.s6 { top: 56%; right: 9%; animation-delay: 2.5s; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { transform: scale(0.8); } 50% { transform: scale(1.2); } }

@media (max-width: 760px) {
  .content-layer { padding: 78px 56px 1px; }
  .report-card { padding: 48px 28px; min-height: calc(100vh - 112px); }
  p { font-size: 1rem; line-height: 1.68; }
}

@media (max-width: 520px) {
  .frost-left, .frost-right { width: 34px; }
  .frost-top { height: 48px; }
  .rotating-star { left: 9px; top: 16px; }
  .content-layer { padding: 64px 42px 1px; }
  .report-card { padding: 38px 24px; margin-bottom: 90px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .report-card { opacity: 1; transform: none; }
  .constellation-divider path { stroke-dashoffset: 0; }
  .constellation-divider circle { opacity: 1; }
}