:root {
  /* Design prompt tokens: IntersectionObserver `requestAnimationFrame` reveals 80ms intervals. trigger entrance animations. starts `opacity: */
  --teal: #0A6E5C;
  --cream: #F8F0E3;
  --sage: #88B7A0;
  --navy: #1B1F3B;
  --orange: #E85D3A;
  --ink: #2B2D42;
  --ivory: #FFF5E1;
  --amber: #F4A261;
  --ease-blob: cubic-bezier(.68,-.55,.27,1.55);
}

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

html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  overflow-x: hidden;
  font-family: 'Nunito', Inter, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 8%, rgba(136, 183, 160, .35), transparent 30rem),
    radial-gradient(circle at 82% 18%, rgba(244, 162, 97, .3), transparent 26rem),
    linear-gradient(180deg, var(--ivory), var(--cream) 28%, var(--navy) 28%, var(--navy) 51%, var(--ivory) 51%, var(--cream) 74%, var(--navy) 74%);
  line-height: 1.72;
}

.ambient-field { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: -1; }
.drift { position: absolute; width: 34vmax; height: 30vmax; border-radius: 48% 52% 63% 37% / 43% 37% 63% 57%; filter: blur(18px); opacity: .2; animation: drift 22s ease-in-out infinite; }
.drift-a { left: -12vmax; top: 10vh; background: var(--teal); }
.drift-b { right: -10vmax; top: 45vh; background: var(--orange); animation-delay: -7s; }
.drift-c { left: 20vw; bottom: -16vmax; background: var(--sage); animation-delay: -14s; }

@keyframes drift { 0%,100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); } 50% { transform: translate3d(8vw,-7vh,0) rotate(25deg) scale(1.16); } }

.narrative-shell {
  width: min(760px, calc(100% - 32px));
  margin: 0 auto;
  position: relative;
}

.chapter {
  min-height: 92vh;
  display: grid;
  place-items: center;
  padding: clamp(5rem, 10vw, 8rem) clamp(1rem, 3vw, 2rem);
  position: relative;
  clip-path: polygon(8% 0, 100% 3%, 93% 31%, 100% 62%, 90% 100%, 0 96%, 7% 68%, 0 36%);
}

.chapter:nth-of-type(even) {
  color: var(--ivory);
  background: linear-gradient(145deg, rgba(27, 31, 59, .96), rgba(43, 45, 66, .94));
  clip-path: polygon(0 4%, 91% 0, 100% 30%, 93% 63%, 100% 95%, 10% 100%, 0 70%, 8% 36%);
}

h1, h2, h3 { font-family: 'Caveat', cursive; font-weight: 700; line-height: 1.15; letter-spacing: .01em; }
h1 { font-size: clamp(4.5rem, 10vw, 9rem); color: var(--ivory); text-align: center; max-width: 7ch; }
h2 { font-size: clamp(2.8rem, 7vw, 6rem); color: var(--teal); text-align: center; margin-bottom: 2rem; }
.chapter:nth-of-type(even) h2 { color: var(--orange); }

.hero-chapter { min-height: 100vh; clip-path: none; background: transparent; }
.hero-blob {
  width: min(84vmin, 640px);
  min-height: min(84vmin, 640px);
  padding: clamp(2rem, 7vw, 5rem);
  border-radius: 42% 58% 65% 35% / 35% 43% 57% 65%;
  background:
    radial-gradient(circle at 58% 38%, rgba(255,245,225,.18), transparent 22%),
    radial-gradient(circle at 34% 68%, var(--teal), transparent 55%),
    linear-gradient(135deg, var(--navy), var(--ink));
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1.2rem;
  box-shadow: 0 45px 95px rgba(27,31,59,.38), inset 0 0 0 3px rgba(255,245,225,.12);
  animation: morph 12s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}

.particle-ring { position: absolute; inset: 8%; border: 3px dotted rgba(244,162,97,.55); border-radius: 50%; animation: spin 24s linear infinite; }
.eyebrow, .tap-note, .stamp, .liquid-rating small { font-family: 'Permanent Marker', cursive; text-transform: uppercase; letter-spacing: .08em; }
.eyebrow { color: var(--amber); font-size: clamp(.85rem, 1.7vw, 1.1rem); }
.hero-copy { max-width: 34ch; text-align: center; color: var(--cream); font-size: 1.05rem; }

@keyframes morph { 0%,100% { border-radius: 42% 58% 65% 35% / 35% 43% 57% 65%; } 25% { border-radius: 61% 39% 44% 56% / 51% 35% 65% 49%; } 50% { border-radius: 37% 63% 55% 45% / 67% 50% 50% 33%; } 75% { border-radius: 55% 45% 35% 65% / 38% 61% 39% 62%; } }
@keyframes spin { to { transform: rotate(360deg); } }

.flow-arrow { height: 9rem; display: grid; place-items: center; color: var(--orange); margin: -2rem 0; position: relative; z-index: 2; }
.flow-arrow svg { width: 4.75rem; fill: currentColor; filter: drop-shadow(0 12px 20px rgba(232,93,58,.22)); animation: bob 4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-18px) scale(1.08); } }

.serpentine-panel, .footer-blob {
  width: 100%;
  padding: clamp(2.2rem, 7vw, 5rem);
  border: 2px solid currentColor;
  border-radius: 48% 52% 57% 43% / 42% 55% 45% 58%;
  background: radial-gradient(circle at 30% 30%, rgba(10,110,92,.12), transparent 55%), rgba(255,245,225,.7);
  animation: morph 16s ease-in-out infinite;
}
.chapter:nth-of-type(even) .serpentine-panel { background: radial-gradient(circle at 70% 35%, rgba(232,93,58,.16), transparent 58%), rgba(27,31,59,.45); }
.manifesto-text { max-width: 62ch; margin: 0 auto; font-size: clamp(1rem, 1.2vw, 1.15rem); }
.manifesto-text span { opacity: .13; filter: blur(4px); transition: opacity .45s ease, filter .45s ease, color .45s ease; }
.manifesto-text span.visible { opacity: 1; filter: blur(0); color: var(--ink); }

.reviews-chapter { display: block; padding-left: 0; padding-right: 0; }
.review-stream { display: grid; gap: 3rem; }
.review-card { height: 430px; perspective: 1200px; cursor: pointer; opacity: 0; transform: translateY(50px) scale(.9); transition: opacity .7s var(--ease-blob), transform .7s var(--ease-blob); }
.review-card.in-view { opacity: 1; transform: translateY(0) scale(1); }
.offset-card { width: 92%; margin-left: auto; }
.reverse-card { width: 94%; }
.review-inner { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform .75s var(--ease-blob); }
.review-card.flipped .review-inner { transform: rotateY(180deg); }
.review-face { position: absolute; inset: 0; backface-visibility: hidden; overflow: hidden; padding: clamp(1.4rem, 4vw, 2.6rem); display: flex; flex-direction: column; justify-content: space-between; border-radius: 35% 65% 59% 41% / 44% 39% 61% 56%; box-shadow: 0 25px 70px rgba(27,31,59,.22); }
.review-front { background: linear-gradient(140deg, var(--teal), var(--sage)); color: var(--ivory); }
.review-back { transform: rotateY(180deg); background: linear-gradient(140deg, var(--cream), var(--amber)); color: var(--ink); justify-content: center; gap: 1.4rem; font-size: 1.05rem; }
.duotone-scene { height: 185px; border-radius: 45% 55% 52% 48% / 48% 43% 57% 52%; background: linear-gradient(135deg, var(--teal), var(--orange)); position: relative; overflow: hidden; mix-blend-mode: normal; }
.duotone-scene::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,245,225,.22) 0 10px, rgba(27,31,59,.18) 10px 20px); mix-blend-mode: luminosity; }
.duotone-scene span { position: absolute; border-radius: 50%; background: rgba(255,245,225,.72); mix-blend-mode: overlay; }
.duotone-scene span:nth-child(1) { width: 8rem; height: 8rem; left: 10%; top: 18%; }
.duotone-scene span:nth-child(2) { width: 5rem; height: 5rem; right: 17%; top: 12%; }
.duotone-scene span:nth-child(3) { width: 10rem; height: 3rem; right: 12%; bottom: 18%; border-radius: 60% 40% 45% 55%; }
.scene-plastic { background: linear-gradient(135deg, var(--navy), var(--teal) 45%, var(--orange)); }
.scene-glass { background: linear-gradient(135deg, var(--ivory), var(--sage), var(--orange)); }
.review-meta { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.review-meta h3 { font-size: clamp(2.1rem, 5vw, 3.8rem); }
.liquid-rating { min-width: 8rem; min-height: 5.6rem; padding: 1rem; border-radius: 52% 48% 44% 56% / 52% 43% 57% 48%; display: grid; place-items: center; background: linear-gradient(to top, var(--orange) 0 var(--score), rgba(255,245,225,.28) var(--score)); color: var(--ivory); text-align: center; }
.liquid-rating b { font-size: 1.8rem; line-height: 1; }
.liquid-rating small { font-size: .56rem; }
.tap-note { color: rgba(255,245,225,.72); font-size: .75rem; }
.stamp { width: max-content; color: var(--orange); border: 3px solid var(--orange); padding: .35rem .8rem; transform: rotate(-10deg); font-size: 1.1rem; }

.cycle-panel { min-height: 650px; }
.cycle-diagram { position: relative; width: min(520px, 100%); height: 470px; margin: 0 auto; }
.cycle-orbit { position: absolute; inset: 14%; border: 4px dashed var(--orange); border-radius: 50%; animation: spin 28s linear infinite reverse; opacity: .65; }
.cycle-node { position: absolute; width: 13rem; min-height: 11rem; padding: 1.8rem; display: grid; align-content: center; gap: .45rem; text-align: center; color: var(--ivory); background: var(--teal); border-radius: 46% 54% 62% 38% / 42% 44% 56% 58%; animation: morph 10s ease-in-out infinite; box-shadow: 0 22px 45px rgba(10,110,92,.28); }
.cycle-node strong { font-family: 'Caveat', cursive; font-size: 2.3rem; line-height: 1; }
.cycle-node span { font-size: .84rem; }
.node-collect { left: 0; top: 20px; }
.node-transform { left: 50%; bottom: 0; transform: translateX(-50%); background: var(--orange); animation-delay: -3s; }
.node-renew { right: 0; top: 88px; background: var(--sage); animation-delay: -6s; }

.rating-chapter { color: var(--ivory); background: linear-gradient(145deg, var(--navy), var(--ink)); }
.rating-organism { width: min(420px, 88vw); height: 420px; position: relative; overflow: hidden; cursor: grab; border-radius: 52% 48% 47% 53% / 44% 58% 42% 56%; background: var(--amber); box-shadow: inset 0 0 0 3px rgba(255,245,225,.24), 0 30px 80px rgba(27,31,59,.34); animation: morph 13s ease-in-out infinite; touch-action: none; }
.rating-organism:active { cursor: grabbing; }
.rating-fill { position: absolute; inset: auto 0 0; height: 0%; background: linear-gradient(0deg, var(--teal), var(--sage)); border-radius: 55% 45% 0 0 / 18% 28% 0 0; transition: height .12s ease-out; }
.rating-readout { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; color: var(--ivory); text-shadow: 0 2px 12px rgba(27,31,59,.45); pointer-events: none; }
.rating-readout span { font-family: 'Permanent Marker', cursive; text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; }
.rating-readout strong { font-family: 'Caveat', cursive; font-size: clamp(4rem, 10vw, 7rem); line-height: 1; }
.rating-caption { text-align: center; max-width: 42ch; margin: 1.5rem auto 0; }

.footer-chapter { min-height: 70vh; clip-path: polygon(7% 5%, 100% 0, 92% 50%, 100% 100%, 0 94%, 9% 48%); }
.footer-blob { text-align: center; color: var(--ink); background: linear-gradient(135deg, var(--ivory), var(--cream)); }
.footer-blob h2 { margin-bottom: .5rem; }
.footer-blob p { font-size: 1.25rem; }
.footer-blob small { display: block; margin-top: 1.5rem; font-family: 'Permanent Marker', cursive; color: var(--orange); }

.nav-blob { position: fixed; right: clamp(1rem, 4vw, 2.5rem); bottom: clamp(1rem, 4vw, 2.5rem); width: 5rem; height: 5rem; border: 0; border-radius: 46% 54% 62% 38% / 39% 44% 56% 61%; background: var(--orange); color: var(--ivory); font-size: 2.8rem; z-index: 20; cursor: pointer; box-shadow: 0 15px 42px rgba(232,93,58,.35); animation: morph 9s ease-in-out infinite; transition: transform .35s var(--ease-blob); }
.nav-blob span { display: block; transition: transform .35s ease; }
.nav-blob.active span { transform: rotate(45deg); }
.nav-menu { position: fixed; right: clamp(1rem, 4vw, 2.5rem); bottom: 7.8rem; display: grid; gap: .75rem; z-index: 19; pointer-events: none; opacity: 0; transform: translateY(1rem) scale(.9); transition: opacity .35s ease, transform .35s var(--ease-blob); }
.nav-menu.active { pointer-events: auto; opacity: 1; transform: translateY(0) scale(1); }
.nav-menu a { width: 5rem; height: 5rem; display: grid; place-items: center; text-align: center; text-decoration: none; color: var(--ivory); background: var(--teal); border-radius: 56% 44% 50% 50% / 45% 57% 43% 55%; font-size: .82rem; font-weight: 800; box-shadow: 0 10px 25px rgba(10,110,92,.28); transition: transform .28s var(--ease-blob), background .28s ease; }
.nav-menu a:hover { transform: scale(1.12) rotate(-4deg); background: var(--navy); }

.serpentine-panel, .cycle-node, .footer-blob { opacity: 0; transform: translateY(45px) scale(.92); transition: opacity .8s var(--ease-blob), transform .8s var(--ease-blob); }
.serpentine-panel.in-view, .cycle-node.in-view, .footer-blob.in-view { opacity: 1; transform: translateY(0) scale(1); }
.node-transform.in-view { transform: translateX(-50%) scale(1); }

@media (max-width: 720px) {
  .narrative-shell { width: min(100% - 20px, 760px); }
  .chapter { min-height: auto; padding: 5rem 1rem; clip-path: polygon(0 0,100% 2%,96% 100%,3% 98%); }
  h1 { font-size: clamp(3.3rem, 18vw, 5rem); }
  .hero-blob { width: 92vmin; min-height: 92vmin; }
  .review-card, .offset-card, .reverse-card { width: 100%; height: 465px; }
  .review-meta { align-items: start; flex-direction: column; }
  .cycle-diagram { height: 620px; }
  .cycle-node { width: 12rem; }
  .node-collect { left: 50%; top: 0; transform: translateX(-50%); }
  .node-transform { bottom: 0; }
  .node-renew { right: auto; left: 50%; top: 220px; transform: translateX(-50%); }
  .node-collect.in-view, .node-renew.in-view { transform: translateX(-50%) scale(1); }
  .rating-organism { height: 340px; }
}