:root {
  /* Design prompt terms: Interactive states Intersection Observer feeds scroll progress (0–1 IntersectionObserver + requestAnimationFrame only. */
  --cream: #faf5ef;
  --cream-warm: #fdf8f0;
  --lavender-bg: #f0eaf5;
  --sage-bg: #eef3eb;
  --charcoal: #3d3632;
  --gray: #6b6560;
  --rose: #d8b0be;
  --rose-muted: #b89fa8;
  --violet: #c5b3d9;
  --sage: #a8c4a0;
  --iris-start: #e8c4b8;
  --iris-mid: #d5c7e8;
  --iris-end: #c7d9c0;
  --progress: 0;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100svh;
  overflow-x: hidden;
  font-family: "Nunito", Inter, system-ui, sans-serif;
  color: var(--gray);
  background: var(--cream);
}

.scroll-world {
  scroll-snap-type: y proximity;
  overflow-x: hidden;
}

.breath-section {
  position: relative;
  min-height: 100svh;
  padding-block: clamp(4rem, 10vh, 8rem);
  padding-inline: clamp(1.5rem, 6vw, 6rem);
  display: grid;
  place-items: center;
  scroll-snap-align: start;
  isolation: isolate;
  overflow: hidden;
}

.opening { background: var(--cream); padding: 0; }
.first-sight { background: var(--cream-warm); justify-items: start; }
.peripheral { background: var(--lavender-bg); }
.depth { background: var(--sage-bg); justify-items: start; }
.closing { background: var(--cream); text-align: center; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.72'/%3E%3C/svg%3E");
}

.section-dots {
  position: fixed;
  z-index: 40;
  right: clamp(1rem, 3vw, 2.2rem);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 1rem;
}

.dot {
  position: relative;
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  cursor: pointer;
  background: color-mix(in srgb, var(--rose-muted), var(--cream) 38%);
  transition: transform 680ms ease, background 680ms ease, box-shadow 680ms ease;
}

.dot span {
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Comfortaa", "Quicksand", sans-serif;
  font-size: clamp(0.65rem, 1vw, 0.8rem);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--rose-muted);
  opacity: 0;
  transition: opacity 500ms ease;
  white-space: nowrap;
}

.dot.active {
  transform: scale(1.55);
  background: var(--rose);
  box-shadow: 0 0 12px rgba(216, 176, 190, 0.6);
}

.dot:hover span, .dot.active span { opacity: 0.72; }

.content-shell {
  position: relative;
  z-index: 4;
  max-inline-size: min(680px, 85vw);
}

.left-weighted { margin-inline-start: clamp(0rem, 7vw, 8rem); }

.section-marker {
  margin: 0 0 1.2rem;
  font-family: "Comfortaa", "Quicksand", sans-serif;
  font-size: clamp(0.65rem, 1vw, 0.8rem);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--rose-muted);
}

.headline {
  margin: 0;
  font-family: "Quicksand", Inter, system-ui, sans-serif;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1.15;
  letter-spacing: 0.03em;
  font-weight: 700;
  color: var(--charcoal);
}

.whisper, .body-copy {
  margin: clamp(1.2rem, 3vh, 2rem) 0 0;
  max-inline-size: min(620px, 82vw);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.75;
  letter-spacing: 0.01em;
  font-weight: 300;
  color: var(--gray);
}

.delayed-whisper {
  opacity: 0;
  transform: translateY(10px);
  animation: whisperIn 1150ms ease 1500ms forwards;
}

.letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
}

.in-view .letter {
  animation: letterIn 400ms ease-out forwards;
  animation-delay: calc(var(--i) * 80ms + 120ms);
}

@keyframes letterIn { to { opacity: 1; transform: translateY(0); } }
@keyframes whisperIn { to { opacity: 1; transform: translateY(0); } }

.opening-iris-wrap {
  position: relative;
  width: 100vmin;
  height: 100vmin;
  display: grid;
  place-items: center;
}

.iris {
  border-radius: 999px;
  background:
    radial-gradient(circle at center, rgba(61, 54, 50, 0.34) 0 7%, transparent 7.5% 15%),
    repeating-radial-gradient(circle at center, rgba(250, 245, 239, 0.18) 0 2px, transparent 3px 24px),
    conic-gradient(from 0deg, var(--iris-start), var(--iris-mid), var(--iris-end), var(--iris-start));
  box-shadow: inset 0 0 42px rgba(250, 245, 239, 0.62), 0 0 70px rgba(216, 176, 190, 0.26);
  animation: irisRotate 120s linear infinite;
}

.iris-macro {
  width: 85vmin;
  height: 85vmin;
  transform: scale(0.005);
  animation: irisOpen 3000ms cubic-bezier(0.16, 1, 0.3, 1) forwards, irisRotate 120s linear infinite;
}

.iris-echo {
  position: absolute;
  width: 85vmin;
  height: 85vmin;
  border-radius: 999px;
  border: 2px solid rgba(216, 176, 190, 0.3);
  transform: scale(0.005);
  animation: echoOpen 2100ms cubic-bezier(0.16, 1, 0.3, 1) 120ms forwards;
}

@keyframes irisOpen { to { transform: scale(1); } }
@keyframes echoOpen { to { transform: scale(0.7); opacity: 0.4; } }
@keyframes irisRotate { to { rotate: 360deg; } }

.soft-orb {
  position: absolute;
  width: clamp(16rem, 32vw, 34rem);
  height: clamp(16rem, 32vw, 34rem);
  border-radius: 999px;
  filter: blur(20px);
  opacity: 0.32;
  background: radial-gradient(circle, var(--iris-start), transparent 68%);
}

.orb-one { right: 5vw; top: 14vh; }

.peripheral-grid {
  position: relative;
  z-index: 4;
  width: min(60vw, 980px);
  min-height: 62vh;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.drift-card {
  opacity: 0;
  transition: opacity 1340ms ease, transform 1340ms cubic-bezier(0.16, 1, 0.3, 1);
}

.drift-left { transform: translateX(-12vw); align-self: start; }
.drift-right { transform: translateX(12vw); align-self: end; margin-top: 15vh; }
.peripheral.in-view .drift-card { opacity: 1; transform: translateX(0); }

.peripheral-iris {
  position: absolute;
  width: clamp(200px, 24vw, 400px);
  height: clamp(200px, 24vw, 400px);
  opacity: 0.18;
  right: 8vw;
  top: 10vh;
}

.depth { --scroll-progress: 0; }
.layer { position: absolute; inset: 0; will-change: transform; }
.layer-bg { transform: translateY(calc(var(--scroll-progress) * -120px)); z-index: 1; }
.layer-mid { transform: translateY(calc(var(--scroll-progress) * -60px)); z-index: 2; }
.layer-fg { position: relative; z-index: 5; transform: translateY(0); }

.radar-rings {
  position: absolute;
  width: min(74vmin, 760px);
  height: min(74vmin, 760px);
  right: 4vw;
  top: 8vh;
  fill: none;
  stroke: var(--sage);
  stroke-width: 2;
  opacity: 0.08;
  transform-origin: center;
  transition: transform 1800ms ease;
}

.depth.in-view .radar-rings { transform: scale(1.08); }
.rings-two { left: 5vw; top: 50vh; width: min(48vmin, 520px); height: min(48vmin, 520px); opacity: 0.1; }

.floater {
  position: absolute;
  border-radius: 48px;
  background: linear-gradient(135deg, rgba(240, 234, 245, 0.68), rgba(238, 243, 235, 0.54));
  backdrop-filter: blur(2px);
  box-shadow: 0 24px 80px rgba(184, 159, 168, 0.12);
}

.floater-a { width: 22vw; aspect-ratio: 3 / 2; left: 16vw; top: 16vh; opacity: 0.48; animation: floatA 12.4s ease-in-out infinite alternate; }
.floater-b { width: 16vw; aspect-ratio: 2 / 3; right: 17vw; bottom: 12vh; opacity: 0.38; animation: floatB 14.8s ease-in-out infinite alternate; }
.depth-iris { position: absolute; width: 240px; height: 240px; right: 28vw; top: 27vh; opacity: 0.2; }

@keyframes floatA { to { transform: translate(2vw, 3vh) rotate(4deg); } }
@keyframes floatB { to { transform: translate(-2vw, -2vh) rotate(-3deg); } }

.section-blend {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 15vh;
  z-index: 8;
  pointer-events: none;
}
.blend-cream { background: linear-gradient(to bottom, transparent, var(--cream-warm)); }
.blend-lavender { background: linear-gradient(to bottom, transparent, var(--lavender-bg)); }
.blend-sage { background: linear-gradient(to bottom, transparent, var(--sage-bg)); }

.closing-glow {
  position: absolute;
  width: 70vmin;
  height: 70vmin;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(253, 248, 240, 0.96), rgba(216, 176, 190, 0.15), transparent 72%);
}

.closing-statement {
  position: relative;
  z-index: 4;
  max-inline-size: min(760px, 85vw);
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1150ms ease, transform 1150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.closing.in-view .closing-statement { opacity: 1; transform: scale(1); }
.iris-micro { display: inline-block; width: 32px; height: 32px; opacity: 0.75; }

@media (max-width: 760px) {
  .left-weighted { margin-inline-start: 0; }
  .peripheral-grid { width: min(86vw, 560px); grid-template-columns: 1fr; gap: 2rem; }
  .drift-right { margin-top: 0; }
  .section-dots { right: 0.8rem; }
  .dot span { display: none; }
}