:root {
  /* Interaction Pattern Pattern: Pattern* Pattern:* Pattern:** IntersectionObserver` transitions (no libraries scroll-triggered zoom-focus reveals other pure Total should under lines. (Google */
  --clay: #f4efe8;
  --sand: #eee8dd;
  --loam: #3b3226;
  --bark: #504536;
  --sage: #8a7e6b;
  --honey: #c4a67a;
  --celadon: #a3c4b5;
  --umber: #7a5c3e;
  --indicator: #5c4f3d;
  --washi: #e8e0d4;
  --column: 640px;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  scroll-snap-type: y proximity;
  background: var(--clay);
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--clay);
  color: var(--bark);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1rem, 1.15vw, 1.2rem);
  line-height: 1.75;
  letter-spacing: 0.005em;
  font-variation-settings: "wght" 340;
  overflow-x: hidden;
}

body::before,
.zone::before,
.grain {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-color: var(--washi);
  mix-blend-mode: multiply;
  opacity: 0.08;
  filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='4' seed='2' type='fractalNoise'/%3E%3C/filter%3E%3C/svg%3E#n");
  z-index: 1;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.26;
  background-image: repeating-linear-gradient(90deg, transparent 0 42px, rgba(59, 50, 38, 0.025) 42px 43px);
  z-index: 2;
}

.grain { opacity: 0.055; filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='1.2' numOctaves='3' seed='7' type='fractalNoise'/%3E%3C/filter%3E%3C/svg%3E#n"); }

.scroll-story { position: relative; z-index: 3; }
.snap { scroll-snap-align: start; }

.zone {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: clamp(72px, 12vh, 150px) clamp(24px, 7vw, 120px);
  overflow: hidden;
}

.zone::before { position: absolute; z-index: -1; opacity: 0.075; }
.opening::before { filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='1.2' numOctaves='3' seed='11' type='fractalNoise'/%3E%3C/filter%3E%3C/svg%3E#n"); }
.grounding::before { filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='4' seed='2' type='fractalNoise'/%3E%3C/filter%3E%3C/svg%3E#n"); opacity: 0.1; }
.equilibrium::before { filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.52' numOctaves='4' seed='5' type='fractalNoise'/%3E%3C/filter%3E%3C/svg%3E#n"); }
.rising { background: var(--sand); }
.rising::before { filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.4' numOctaves='5' seed='13' type='fractalNoise'/%3E%3C/filter%3E%3C/svg%3E#n"); opacity: 0.12; }
.dissolution::before { opacity: 0.02; filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='1.2' numOctaves='2' seed='17' type='fractalNoise'/%3E%3C/filter%3E%3C/svg%3E#n"); }

.column {
  width: min(100%, var(--column));
  margin-inline: auto;
  position: relative;
}

@media (min-width: 1200px) {
  .column { transform: translateX(-3.5vw); }
  .center-column { transform: translateX(-3.5vw); }
}

h1, h2, .sora-glyph, #slow-counter {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  color: var(--loam);
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144, "wght" 300, "WONK" 1;
}

h1 {
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 1.05;
  font-variation-settings: "opsz" 144, "wght" 200, "WONK" 1;
  animation: emptySky 3s ease forwards;
  opacity: 0;
}

h2 {
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 1.05;
}

p { margin: 1.5rem 0 0; }
.mono-label {
  margin: 0 0 1.1rem;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--sage);
}

.opening-column { text-align: left; }
.opening-column .mono-label { opacity: 0; animation: emptySky 3s 0.5s ease forwards; }
.grounding { min-height: 150vh; align-items: flex-start; padding-top: 16vh; }
.rising { min-height: 120vh; align-items: flex-start; padding-top: 14vh; }

.block { position: relative; margin: 0 0 clamp(76px, 13vh, 170px); }
.wide { max-width: 640px; }
.narrow { max-width: 380px; margin-inline: auto; }
.display-block { margin-bottom: clamp(120px, 18vh, 220px); }
.display-block h2 { color: var(--umber); font-variation-settings: "opsz" 144, "wght" 260, "WONK" 1; }
.slender { max-width: 520px; }

.ma {
  height: clamp(120px, 18vh, 240px);
  position: relative;
}

.ma span {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--celadon);
  opacity: 0.55;
  animation: pulseBubble 6s ease-in-out infinite;
}

.rhythm-line {
  width: 120px;
  height: 1px;
  margin: 0 auto clamp(90px, 14vh, 190px);
  background: rgba(138, 126, 107, 0.3);
  transform-origin: center;
}

.enso::before {
  content: "";
  position: absolute;
  width: 80px;
  height: 80px;
  left: -20px;
  top: -30px;
  border: 2px solid rgba(196, 166, 122, 0.5);
  border-right-color: transparent;
  border-radius: 50%;
  animation: meditate 30s linear infinite;
  z-index: -1;
}

.center-column { text-align: center; display: grid; place-items: center; }
.large-enso {
  width: min(72vw, 280px);
  height: min(72vw, 280px);
  border: 2px solid rgba(196, 166, 122, 0.5);
  border-right-color: transparent;
  border-radius: 50%;
  transform: rotate(-48deg) scale(0.8);
  opacity: 0;
  transition: transform 4s var(--ease), opacity 4s var(--ease);
}
.center-column.in-view .large-enso { transform: rotate(258deg) scale(1); opacity: 1; }
.counter-wrap { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
#slow-counter { font-size: clamp(4rem, 15vw, 9.5rem); font-variation-settings: "opsz" 144, "wght" 900, "WONK" 1; color: rgba(59, 50, 38, 0.9); }
.still-caption { max-width: 390px; color: var(--sage); }

.dissolution-column { text-align: center; }
.sora-glyph { font-size: clamp(7rem, 24vw, 17rem); line-height: 1; font-variation-settings: "opsz" 144, "wght" 100, "WONK" 1; opacity: 0.72; }

.reveal {
  opacity: 0;
  transform: scale(0.94);
  filter: blur(3px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease), filter 800ms var(--ease);
}
.reveal.in-view { opacity: 1; transform: scale(1); filter: blur(0); }
@media (min-width: 1200px) { .column.reveal.in-view { transform: translateX(-3.5vw) scale(1); } }

.bubbles { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.bubbles span {
  position: absolute;
  left: var(--bubble-x);
  bottom: -60px;
  width: var(--bubble-size);
  height: var(--bubble-size);
  border: 1px solid rgba(163, 196, 181, 0.4);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(163, 196, 181, 0.08) 0%, transparent 70%);
  backdrop-filter: blur(1px);
  animation: rise var(--speed, 12s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.bubbles span:nth-child(1) { --bubble-x: 13%; --bubble-size: 18px; --delay: -1s; --speed: 13s; }
.bubbles span:nth-child(2) { --bubble-x: 24%; --bubble-size: 9px; --delay: -5s; --speed: 12s; }
.bubbles span:nth-child(3) { --bubble-x: 38%; --bubble-size: 32px; --delay: -9s; --speed: 18s; }
.bubbles span:nth-child(4) { --bubble-x: 52%; --bubble-size: 14px; --delay: -3s; --speed: 14s; }
.bubbles span:nth-child(5) { --bubble-x: 66%; --bubble-size: 24px; --delay: -7s; --speed: 16s; }
.bubbles span:nth-child(6) { --bubble-x: 78%; --bubble-size: 8px; --delay: -2s; --speed: 11s; }
.bubbles span:nth-child(7) { --bubble-x: 86%; --bubble-size: 20px; --delay: -11s; --speed: 17s; }
.dense span:nth-child(8) { --bubble-x: 18%; --bubble-size: 26px; --delay: -6s; --speed: 15s; }
.dense span:nth-child(9) { --bubble-x: 31%; --bubble-size: 12px; --delay: -4s; --speed: 10s; }
.dense span:nth-child(10) { --bubble-x: 45%; --bubble-size: 30px; --delay: -13s; --speed: 19s; }
.dense span:nth-child(11) { --bubble-x: 59%; --bubble-size: 17px; --delay: -8s; --speed: 14s; }
.dense span:nth-child(12) { --bubble-x: 72%; --bubble-size: 28px; --delay: -10s; --speed: 18s; }
.dense span:nth-child(13) { --bubble-x: 91%; --bubble-size: 11px; --delay: -5s; --speed: 12s; }
.dense span:nth-child(14) { --bubble-x: 7%; --bubble-size: 22px; --delay: -12s; --speed: 16s; }
.dense span:nth-child(15) { --bubble-x: 83%; --bubble-size: 16px; --delay: -14s; --speed: 13s; }

.progress {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 24px;
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--indicator) 60%, transparent);
  border-radius: 50%;
  overflow: hidden;
  z-index: 10;
}
.progress span { display: block; position: absolute; inset: auto 0 0; height: 0%; background: color-mix(in srgb, var(--indicator) 60%, transparent); transition: height 120ms linear; }

@keyframes emptySky { to { opacity: 1; } }
@keyframes pulseBubble { 0%, 100% { transform: translate(-50%, -50%) scale(1); width: 4px; height: 4px; } 50% { transform: translate(-50%, -50%) scale(1); width: 12px; height: 12px; opacity: 0.25; } }
@keyframes meditate { to { transform: rotate(360deg); } }
@keyframes rise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 15%, 78% { opacity: 0.75; } 100% { transform: translateY(-115vh) translateX(18px); opacity: 0; } }

@media (max-width: 720px) {
  .zone { padding-inline: 22px; }
  .enso::before { left: -10px; }
  .progress { right: 16px; bottom: 16px; }
}