:root {
  --frost-bg-hex: #f0f4f8;
  --ink-primary-hex: #3a4a5c;
  --ink-secondary-hex: #5a6b7e;
  --ink-tertiary-hex: #8fa3b8;
  --lotus-pink-hex: #d4a0b0;
  --pond-blue-hex: #a8c4d8;
  --leaf-jade-hex: #b0c8b4;
  --ice-line-hex: #c8d4e0;
  --dawn-blush-hex: #e8d0d8;
  --frost-bg: rgba(240, 244, 248, 1);
  --ink-primary: rgba(58, 74, 92, 1);
  --ink-secondary: rgba(90, 107, 126, 1);
  --ink-tertiary: rgba(143, 163, 184, 1);
  --lotus-pink: rgba(212, 160, 176, 0.6);
  --pond-blue: rgba(168, 196, 216, 0.5);
  --leaf-jade: rgba(176, 200, 180, 0.5);
  --ice-line: rgba(200, 212, 224, 1);
  --dawn-blush: rgba(232, 208, 216, 0.3);
}

/* Intersection Observer for Scroll-Triggered Fades:** Intersection Observer with `threshold: 0.15` and `rootMargin: '0px 0px -10% 0px'` to trigger fade-in animations. Each observed element starts with `opacity: 0` and `transform: translateY(8px Intersection Observer. No frameworks */

* {
  box-sizing: border-box;
}

html {
  background: #f0f4f8;
  color: #3a4a5c;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: "Cormorant Garamond", serif;
  background:
    radial-gradient(circle at 8% 12%, rgba(232, 208, 216, 0.22), transparent 28vw),
    radial-gradient(circle at 92% 8%, rgba(168, 196, 216, 0.18), transparent 24vw),
    linear-gradient(180deg, #f0f4f8 0%, #f4f7fa 48%, #eef3f7 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.42;
  background-image:
    linear-gradient(rgba(58, 74, 92, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58, 74, 92, 0.014) 1px, transparent 1px);
  background-size: 78px 78px, 78px 78px;
  mask-image: radial-gradient(circle at 50% 30%, black, transparent 76%);
}

body::after {
  content: "Fades:** -10%";
  position: fixed;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
}

.meditation-scroll {
  position: relative;
  width: 100%;
}

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

.void-canvas {
  min-height: 112vh;
}

.hero-mark {
  position: absolute;
  top: 38.2%;
  left: 61.8%;
  width: min(46vw, 560px);
  transform: translate(-50%, -50%);
  text-align: center;
}

h1 {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: clamp(2.5rem, 6vw, 5rem);
  letter-spacing: 0.15em;
  color: #3a4a5c;
  line-height: 1;
}

.caption {
  margin: 0 0 21px;
  font-family: "Karla", sans-serif;
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8fa3b8;
}

.ink-line {
  height: 1px;
  width: 100%;
  margin: 34px auto 0;
  background: #c8d4e0;
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
  transition: transform 1.5s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 1.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.hero-line {
  max-width: 40vw;
  transition-duration: 3s;
  transition-delay: 1.2s;
}

.reveal-line {
  width: 48vw;
  max-width: 620px;
  min-width: 240px;
}

.is-visible .ink-line,
.ink-line.is-visible {
  opacity: 1;
  transform: scaleX(1);
}

.fade-target {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 3s cubic-bezier(0.25, 0.1, 0.25, 1), transform 3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

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

.hero-mark.fade-target {
  transition-duration: 3s;
  transform: translate(-50%, calc(-50% + 8px));
}

.hero-mark.fade-target.is-visible {
  transform: translate(-50%, -50%);
}

.garden-zone {
  min-height: 130vh;
}

.garden-left .content-island {
  top: 24vh;
  left: 11vw;
}

.garden-left .reveal-line {
  position: absolute;
  top: 68vh;
  left: 19vw;
}

.garden-right .content-island {
  right: 10vw;
  bottom: 22vh;
}

.garden-center {
  min-height: 138vh;
}

.garden-center .content-island {
  top: 36vh;
  left: 50%;
  transform: translate(-50%, 8px);
  text-align: center;
}

.garden-center .content-island.is-visible {
  transform: translate(-50%, 0);
}

.garden-center .reveal-line {
  position: absolute;
  top: 78vh;
  left: 50%;
  margin-left: -24vw;
}

.content-island {
  position: absolute;
  width: min(38vw, 28ch);
  max-width: 28ch;
  padding: 34px 38px;
  border-radius: 56% 44% 52% 48% / 44% 56% 44% 56%;
  background: rgba(240, 244, 248, 0.32);
  backdrop-filter: blur(2px);
}

.content-island p:not(.caption) {
  margin: 0;
  max-width: 28ch;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 2;
  color: #5a6b7e;
}

.empty-field {
  min-height: 112vh;
}

.final-pause {
  min-height: 128vh;
}

.breathing-circle {
  position: absolute;
  display: block;
  width: 40px;
  height: 40px;
  border: 1px solid #c8d4e0;
  border-radius: 50%;
  opacity: 0.44;
  animation: breathe 6s cubic-bezier(0.25, 0.1, 0.25, 1) infinite alternate;
}

.circle-one {
  top: 74vh;
  left: 22vw;
}

.circle-two {
  top: 44vh;
  right: 18vw;
}

.circle-three {
  top: 52vh;
  left: 47vw;
}

.wash {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(42px);
  opacity: 0.65;
}

.wash-hero {
  width: 38vw;
  height: 38vw;
  top: -10vw;
  left: -12vw;
  background: rgba(232, 208, 216, 0.3);
}

.wash-blue {
  width: 52vw;
  height: 30vw;
  right: -16vw;
  top: 18vh;
  background: rgba(168, 196, 216, 0.5);
  opacity: 0.22;
}

.wash-pond {
  width: 86vw;
  height: 50vw;
  left: 7vw;
  top: 22vh;
  background:
    radial-gradient(circle at 32% 48%, rgba(168, 196, 216, 0.5), transparent 34%),
    radial-gradient(circle at 67% 58%, rgba(232, 208, 216, 0.3), transparent 31%),
    radial-gradient(circle at 50% 50%, rgba(176, 200, 180, 0.5), transparent 42%);
  filter: blur(50px);
  opacity: 0.5;
}

.wash-blush {
  width: 46vw;
  height: 46vw;
  bottom: 4vh;
  left: -12vw;
  background: rgba(212, 160, 176, 0.6);
  opacity: 0.18;
}

.lotus-pond {
  min-height: 150vh;
}

.pond-lotus {
  position: absolute;
  width: clamp(120px, 18vw, 230px);
  aspect-ratio: 1;
  transition-duration: 4.8s;
}

.lotus-svg {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.lotus-bud {
  top: 25vh;
  left: 16vw;
  width: clamp(96px, 12vw, 150px);
}

.lotus-half {
  top: 62vh;
  right: 18vw;
  width: clamp(140px, 17vw, 220px);
}

.lotus-full {
  top: 102vh;
  left: 43vw;
  width: clamp(165px, 21vw, 280px);
}

.petal {
  opacity: 0;
  filter: blur(0.35px);
}

.pond-lotus.is-visible .petal {
  animation: petalReveal 5.2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.pond-lotus.is-visible .p1 { animation-delay: 0.15s; }
.pond-lotus.is-visible .p2 { animation-delay: 0.55s; }
.pond-lotus.is-visible .p3 { animation-delay: 0.95s; }
.pond-lotus.is-visible .p4 { animation-delay: 1.35s; }
.pond-lotus.is-visible .p5 { animation-delay: 1.75s; }
.pond-lotus.is-visible .p6 { animation-delay: 2.15s; }
.pond-lotus.is-visible .p7 { animation-delay: 2.55s; }
.pond-lotus.is-visible .p8 { animation-delay: 2.95s; }
.pond-lotus.is-visible .p9 { animation-delay: 3.35s; }

.ripple {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 54%;
  height: 54%;
  border: 1px solid #c8d4e0;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
}

.pond-lotus.is-visible .ripple {
  animation: ripple 3s ease-out forwards;
}

.pond-lotus.is-visible .ripple-b { animation-delay: 0.7s; }
.pond-lotus.is-visible .ripple-c { animation-delay: 1.4s; }

.stone-arrangement {
  min-height: 100vh;
}

.stones {
  position: absolute;
  left: 50%;
  bottom: 13vh;
  width: min(70vw, 520px);
  transform: translate(-50%, 8px);
  color: #5a6b7e;
}

.stones.is-visible {
  transform: translate(-50%, 0);
}

.stones p {
  margin: 0;
}

.stone-name {
  margin-left: 13% !important;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 300;
  letter-spacing: 0.15em;
  color: #3a4a5c;
}

.stone-sentence {
  margin-top: 8px !important;
  margin-left: 42% !important;
  max-width: 24ch;
  font-size: 1.125rem;
  line-height: 2;
  color: #5a6b7e;
}

.stone-year {
  margin-top: 13px !important;
  margin-left: 28% !important;
  font-family: "Karla", sans-serif;
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: #8fa3b8;
}

@keyframes breathe {
  from { transform: scale(0.95); }
  to { transform: scale(1.05); }
}

@keyframes petalReveal {
  from { opacity: 0; }
  to { opacity: var(--petal-opacity); }
}

@keyframes ripple {
  from {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.4;
  }
  to {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}

@media (max-width: 640px) {
  .void-canvas,
  .empty-field,
  .final-pause,
  .stone-arrangement {
    min-height: 90vh;
  }

  .garden-zone {
    min-height: 105vh;
  }

  .lotus-pond {
    min-height: 118vh;
  }

  .hero-mark {
    top: 38%;
    left: 50%;
    width: 85vw;
  }

  .hero-line {
    max-width: 58vw;
  }

  .content-island {
    width: 85vw;
    max-width: 28ch;
    padding: 26px 28px;
  }

  .garden-left .content-island,
  .garden-right .content-island,
  .garden-center .content-island {
    top: 30vh;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, 8px);
  }

  .garden-left .content-island.is-visible,
  .garden-right .content-island.is-visible,
  .garden-center .content-island.is-visible {
    transform: translate(-50%, 0);
  }

  .garden-left .reveal-line,
  .garden-center .reveal-line {
    top: 70vh;
    left: 50%;
    width: 60vw;
    margin-left: -30vw;
    min-width: 0;
  }

  .lotus-bud { top: 20vh; left: 9vw; }
  .lotus-half { top: 50vh; right: 9vw; }
  .lotus-full { top: 80vh; left: 28vw; }

  .circle-one { left: 13vw; }
  .circle-two { right: 14vw; }
  .circle-three { left: 42vw; }

  .stones {
    width: 86vw;
  }

  .stone-sentence {
    margin-left: 22% !important;
  }
}