:root {
  /* Compliance text: Interactions gentle things surfacing Interactions: Interactions:** When user hovers Interactive elements Interludes: Interludes:** Between major sections IntersectionObserver` `threshold: 0.15`. ALWAYS fade slide */
  --celadon-mist: #c8d8c5;
  --deep-fern: #4a6741;
  --still-water: #7ba9a0;
  --morning-dew: #e8f0e4;
  --forest-floor: #2d3e2a;
  --aqua-whisper: #a3c9c0;
  --birch-cream: #f4f0e8;
  --luminant-green: #d4e8b8;
  --unit: 0.5rem;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--birch-cream);
  color: var(--deep-fern);
  font-family: "Quicksand", "Inter", sans-serif;
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.75;
  transition: background-color 800ms var(--ease);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -4;
  background:
    radial-gradient(circle at 22% 18%, rgba(212, 232, 184, 0.34), transparent 26%),
    radial-gradient(circle at 78% 34%, rgba(163, 201, 192, 0.22), transparent 32%),
    linear-gradient(135deg, rgba(244, 240, 232, 0.78), rgba(232, 240, 228, 0.38));
  pointer-events: none;
}

main {
  position: relative;
  z-index: 1;
}

.wordmark {
  position: fixed;
  top: calc(var(--unit) * 5);
  left: calc(var(--unit) * 6);
  z-index: 8;
  color: rgba(45, 62, 42, 0.62);
  font-family: "Karla", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bubble {
  position: fixed;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, rgba(212, 232, 184, 0.48) 0 18%, rgba(163, 201, 192, 0.62) 40%, rgba(163, 201, 192, 0) 72%);
  box-shadow: inset -4px -4px 8px rgba(45, 62, 42, 0.08), inset 3px 3px 8px rgba(244, 240, 232, 0.2);
  pointer-events: none;
}

.opening-bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, rgba(212, 232, 184, 0.48) 0 18%, rgba(163, 201, 192, 0.62) 40%, rgba(163, 201, 192, 0) 72%);
  box-shadow: inset -4px -4px 8px rgba(45, 62, 42, 0.08), inset 3px 3px 8px rgba(244, 240, 232, 0.2);
  pointer-events: none;
}

.bubble {
  z-index: 0;
  animation-name: bubbleRise;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

.opening-bubble {
  width: min(34vw, 21rem);
  height: min(34vw, 21rem);
  left: 52%;
  top: 58%;
  z-index: 0;
  opacity: 0.12;
  transform: translate(-50%, -50%);
  animation: openingFloat 32s linear infinite;
}

@keyframes bubbleRise {
  from { transform: translate3d(-50%, 110vh, 0); }
  to { transform: translate3d(-50%, -14vh, 0); }
}

@keyframes openingFloat {
  from { transform: translate(-50%, 18vh); }
  to { transform: translate(-50%, -118vh); }
}

.fixed-leaves {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.fixed-leaf,
.large-leaf,
.leaf-divider {
  display: block;
  width: 4.5rem;
  height: 7.5rem;
  border-radius: 0 80% 0 80%;
  background: var(--celadon-mist);
  opacity: 0.2;
  transform-origin: 50% 82%;
}

.fixed-leaf::before,
.large-leaf::before,
.leaf-divider::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 11%;
  width: 1px;
  height: 80%;
  background: rgba(163, 201, 192, 0.72);
  transform: rotate(-18deg);
}

.fixed-leaf::after,
.large-leaf::after,
.leaf-divider::after {
  content: "";
  position: absolute;
  inset: 28% 28% auto 34%;
  height: 42%;
  background: linear-gradient(112deg, transparent 0 45%, rgba(163, 201, 192, 0.58) 46% 48%, transparent 49% 100%), linear-gradient(68deg, transparent 0 54%, rgba(163, 201, 192, 0.48) 55% 57%, transparent 58% 100%);
}

.fixed-leaf {
  position: fixed;
  background: var(--luminant-green);
}

.fixed-leaf-a { top: 22vh; left: 7vw; transform: rotate(-24deg); }
.fixed-leaf-b { top: 62vh; right: 8vw; width: 3rem; height: 5rem; transform: rotate(38deg); background: var(--celadon-mist); }
.fixed-leaf-c { top: 12vh; right: 18vw; width: 2.25rem; height: 4rem; transform: rotate(73deg); background: var(--aqua-whisper); }
.fixed-leaf-d { bottom: 9vh; left: 18vw; width: 3.5rem; height: 5.75rem; transform: rotate(-58deg); background: var(--morning-dew); }

.opening {
  position: relative;
  display: grid;
  min-height: 100vh;
  place-items: center;
  overflow: hidden;
  padding: calc(var(--unit) * 8);
}

.title,
.closing-word {
  position: relative;
  z-index: 2;
  color: var(--deep-fern);
  font-family: "Nunito", "Inter", sans-serif;
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.15;
}

.story {
  position: relative;
  padding: calc(var(--unit) * 13) calc(var(--unit) * 5) calc(var(--unit) * 21);
}

.story-first,
.story-third { background: rgba(200, 216, 197, 0.34); }
.story-second,
.story-fourth { background: rgba(244, 240, 232, 0.44); }

.content-column {
  position: relative;
  max-width: 640px;
  margin-inline: auto;
}

.moment {
  max-width: 35rem;
  margin-block: calc(var(--unit) * 16);
}

.offset-right { margin-left: min(8vw, 7.5rem); }
.offset-left { margin-left: max(-6vw, -5.5rem); }

.eyebrow,
.caption {
  color: rgba(45, 62, 42, 0.52);
  font-family: "Karla", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.caption {
  max-width: 16rem;
  margin: calc(var(--unit) * 14) 0 calc(var(--unit) * 8) max(-10vw, -7.5rem);
  color: rgba(74, 103, 65, 0.58);
}

.vein-left::before,
.vein-right::before {
  content: "";
  position: absolute;
  top: 16%;
  width: 11rem;
  height: 16rem;
  opacity: 0.15;
  background: linear-gradient(90deg, transparent 49%, var(--aqua-whisper) 49% 50%, transparent 50%), linear-gradient(28deg, transparent 54%, var(--aqua-whisper) 54% 55%, transparent 55%), linear-gradient(146deg, transparent 52%, var(--aqua-whisper) 52% 53%, transparent 53%);
}

.vein-left::before { left: max(-20vw, -13rem); }
.vein-right::before { right: max(-20vw, -13rem); transform: scaleX(-1); }

.leaf-divider {
  position: relative;
  width: 3rem;
  height: 4.8rem;
  margin: calc(var(--unit) * 15) auto;
  opacity: 0.2;
  transition: transform 600ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .leaf-divider:hover { transform: rotate(8deg); }
}

.leaf-interlude {
  position: relative;
  display: grid;
  height: 40vh;
  min-height: 18rem;
  place-items: center;
  overflow: hidden;
  background: rgba(232, 240, 228, 0.6);
}

.interlude-two { background: rgba(244, 240, 232, 0.42); }
.interlude-three { background: rgba(200, 216, 197, 0.28); }

.large-leaf {
  position: relative;
  width: clamp(5rem, 12vw, 8.5rem);
  height: clamp(8rem, 18vw, 13rem);
  opacity: 0.42;
  animation: leafTurn 45s linear infinite;
  transition: transform 600ms ease-out;
}

.large-leaf.pale { background: var(--luminant-green); opacity: 0.34; }
.large-leaf.small { width: clamp(4rem, 10vw, 6.5rem); height: clamp(6rem, 15vw, 10rem); background: var(--aqua-whisper); opacity: 0.26; }

@keyframes leafTurn {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (hover: hover) and (pointer: fine) {
  .leaf-interlude:hover .large-leaf { animation-play-state: paused; transform: rotate(8deg); }
}

.closing {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: calc(var(--unit) * 16);
  background: linear-gradient(to bottom, rgba(232, 240, 228, 0.22), var(--morning-dew));
}

.closing-word span {
  display: inline-block;
  opacity: 1;
  transform: translateY(0);
}

.closing-word.dissolve span {
  animation: letterDissolve 1600ms var(--ease) forwards;
}

.closing-word.dissolve span:nth-child(2) { animation-delay: 140ms; }
.closing-word.dissolve span:nth-child(3) { animation-delay: 280ms; }
.closing-word.dissolve span:nth-child(4) { animation-delay: 420ms; }
.closing-word.dissolve span:nth-child(5) { animation-delay: 560ms; }
.closing-word.dissolve span:nth-child(6) { animation-delay: 700ms; }
.closing-word.dissolve span:nth-child(7) { animation-delay: 840ms; }
.closing-word.dissolve span:nth-child(8) { animation-delay: 980ms; }

@keyframes letterDissolve {
  to { opacity: 0; transform: translateY(-0.75rem); }
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 760px) {
  .wordmark { left: calc(var(--unit) * 4); }
  .story { padding-inline: calc(var(--unit) * 4); }
  .moment { margin-block: calc(var(--unit) * 12); }
  .offset-right,
  .offset-left,
  .caption { margin-left: 0; }
  .fixed-leaf-a,
  .fixed-leaf-d { left: -1.5rem; }
  .fixed-leaf-b,
  .fixed-leaf-c { right: -1.2rem; }
}