:root {
  --pulp: #F4EAD2;
  --green: #1F7A4D;
  --cyan: #87D8D0;
  --red: #E14B3F;
  --aluminum: #B9B7AE;
  --ink: #27241F;
  --violet: #7C5CC4;
  --station: 0;
  --scroll: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--pulp);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  overflow-x: hidden;
  cursor: none;
}

button { font: inherit; color: inherit; cursor: none; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .42;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(39,36,31,.14) 0 1px, transparent 1.6px),
    radial-gradient(circle at 84% 28%, rgba(31,122,77,.18) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 43% 72%, rgba(225,75,63,.14) 0 1px, transparent 1.7px),
    radial-gradient(circle at 66% 61%, rgba(124,92,196,.13) 0 1px, transparent 1.6px),
    repeating-linear-gradient(9deg, transparent 0 13px, rgba(39,36,31,.035) 14px 15px);
  background-size: 41px 37px, 53px 47px, 61px 59px, 49px 43px, 100% 100%;
  mix-blend-mode: multiply;
}

.cursor-magnet {
  position: fixed;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border: 2px dashed var(--green);
  border-radius: 45% 55% 50% 42%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 120;
  background: rgba(135,216,208,.18);
  box-shadow: 0 0 0 9px rgba(135,216,208,.08), 0 0 22px rgba(31,122,77,.24);
}

.station-dial {
  position: fixed;
  right: 24px;
  top: 24px;
  width: 172px;
  height: 172px;
  z-index: 90;
  filter: drop-shadow(0 14px 20px rgba(39,36,31,.16));
}

.dial-face {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  background:
    radial-gradient(circle, var(--pulp) 0 32%, transparent 33%),
    conic-gradient(from calc(var(--station) * 72deg), var(--red), var(--cyan), var(--green), var(--violet), var(--aluminum), var(--red));
  border: 3px solid var(--ink);
  transform: rotate(calc(var(--station) * -18deg));
  transition: transform .7s cubic-bezier(.2,.9,.16,1), background .7s;
}

.dial-face::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px dashed rgba(39,36,31,.62);
  border-radius: 50%;
}

.dial-core {
  position: absolute;
  inset: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pulp);
  border: 2px solid var(--ink);
  font-family: "Gabarito", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 15px;
  z-index: 2;
}

.dial-needle {
  position: absolute;
  left: 50%;
  top: 11px;
  width: 10px;
  height: 68px;
  background: var(--red);
  border: 2px solid var(--ink);
  border-radius: 10px 10px 2px 2px;
  transform: translateX(-50%) rotate(calc(var(--station) * 72deg));
  transform-origin: 50% 75px;
  transition: transform .7s cubic-bezier(.2,.9,.16,1);
  z-index: 3;
}

.dial-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  padding: 4px 5px;
  border: 2px solid var(--ink);
  background: var(--pulp);
  font-family: "Gabarito", sans-serif;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
  transform: translate(-50%, -50%) rotate(calc(var(--i) * 72deg)) translateY(-98px) rotate(calc(var(--i) * -72deg));
}

.dial-mark:nth-of-type(1) { --i: 0; }
.dial-mark:nth-of-type(2) { --i: 1; }
.dial-mark:nth-of-type(3) { --i: 2; }
.dial-mark:nth-of-type(4) { --i: 3; }
.dial-mark:nth-of-type(5) { --i: 4; }
.dial-mark.active { background: var(--red); color: var(--pulp); }

.passport {
  position: fixed;
  left: 22px;
  bottom: 20px;
  width: 244px;
  z-index: 91;
  padding: 13px;
  background: rgba(244,234,210,.78);
  border: 2px solid var(--ink);
  clip-path: polygon(0 8%, 92% 0, 100% 83%, 8% 100%);
  box-shadow: 8px 9px 0 rgba(31,122,77,.2);
  backdrop-filter: blur(4px);
}

.passport-title, .chapter-tag, .stamp {
  font-family: "Gabarito", sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 900;
}

.passport-title { margin: 0 0 9px; font-size: 12px; }

.passport-stamps { display: flex; flex-wrap: wrap; gap: 7px; }

.stamp {
  border: 2px solid var(--ink);
  padding: 4px 7px;
  font-size: 10px;
  color: rgba(39,36,31,.46);
  transform: rotate(-2deg);
}

.stamp.active {
  color: var(--ink);
  background: var(--cyan);
  box-shadow: 2px 2px 0 var(--red);
}

.scene {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 120px 7vw;
  isolation: isolate;
}

.scene::before {
  content: "";
  position: absolute;
  inset: 4vw;
  border: 2px dashed rgba(39,36,31,.24);
  border-radius: 42% 58% 48% 52% / 58% 36% 64% 42%;
  transform: rotate(calc(var(--scroll) * 30deg));
  z-index: -1;
}

h1, h2 { margin: 0; }

h1 {
  font-family: "Climate Crisis", sans-serif;
  font-size: clamp(3.2rem, 11vw, 11rem);
  line-height: .82;
  letter-spacing: -.06em;
  color: var(--green);
  text-shadow: 4px 5px 0 var(--cyan), -3px -2px 0 rgba(225,75,63,.55);
  max-width: 950px;
}

h2 {
  font-family: "Fraunces", serif;
  font-size: clamp(2.4rem, 6vw, 6.6rem);
  line-height: .9;
  font-weight: 800;
  font-variation-settings: "SOFT" 72, "WONK" 1;
}

p { font-size: clamp(1rem, 1.6vw, 1.25rem); line-height: 1.55; }

.chapter-tag {
  color: var(--red);
  margin: 0 0 12px;
  font-size: 13px;
}

.loop-bench {
  position: relative;
  width: min(78vw, 920px);
  min-height: 56vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 40px;
  border-radius: 48% 52% 44% 56% / 56% 41% 59% 44%;
  background:
    radial-gradient(circle at 50% 50%, rgba(244,234,210,.9) 0 39%, transparent 40%),
    repeating-conic-gradient(from 16deg, rgba(185,183,174,.34) 0 9deg, rgba(244,234,210,.42) 10deg 18deg),
    radial-gradient(circle at 50% 50%, var(--aluminum), var(--pulp) 68%);
  border: 4px solid var(--ink);
  box-shadow: inset 0 0 0 18px rgba(31,122,77,.08), 0 24px 60px rgba(39,36,31,.2);
}

.loop-bench > * { position: relative; z-index: 3; }

.scene-copy { max-width: 630px; margin: 20px auto 24px; }

.orbit-ring {
  position: absolute;
  border: 2px dashed rgba(31,122,77,.45);
  border-radius: 50%;
  inset: -26px;
  animation: spin 32s linear infinite;
}

.ring-two { inset: 42px; border-color: rgba(225,75,63,.4); animation-duration: 23s; animation-direction: reverse; }

.story-prompt, .final-prompt {
  border: 3px solid var(--ink);
  background: var(--red);
  color: var(--pulp);
  padding: 15px 22px;
  font-family: "Gabarito", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  box-shadow: 7px 7px 0 var(--green);
  transform: rotate(-2deg);
  transition: transform .25s, box-shadow .25s;
}

.story-prompt:hover, .final-prompt:hover { transform: rotate(1deg) translateY(-4px); box-shadow: 10px 11px 0 var(--violet); }

.scrap {
  position: absolute;
  border: 2px solid var(--ink);
  font-family: "Gabarito", sans-serif;
  font-weight: 900;
  font-size: 12px;
  text-transform: uppercase;
  box-shadow: 5px 6px 0 rgba(39,36,31,.16);
  transition: transform .35s cubic-bezier(.2,.9,.16,1), left .8s, top .8s;
  will-change: transform;
}

.field-green { background: var(--green); color: var(--pulp); }
.field-cyan { background: rgba(135,216,208,.75); }
.field-red { background: var(--red); color: var(--pulp); border-radius: 50%; }
.field-metal { background: var(--aluminum); }
.field-violet { background: var(--violet); color: var(--pulp); }
.field-paper { background: var(--pulp); }

.shard-a { left: 12%; top: 23%; width: 116px; height: 74px; clip-path: polygon(12% 0, 100% 19%, 82% 100%, 0 76%); padding: 18px; animation: drift 9s ease-in-out infinite; }
.shard-b { left: 73%; top: 18%; width: 94px; height: 122px; clip-path: polygon(26% 0, 94% 10%, 100% 80%, 36% 100%, 0 38%); padding: 22px 11px; animation: drift 10s ease-in-out infinite reverse; }
.cap-a { left: 69%; top: 67%; width: 72px; height: 72px; display: grid; place-items: center; animation: wobble 6s ease-in-out infinite; }
.tab-a { left: 24%; top: 72%; width: 104px; height: 42px; border-radius: 50% 14px 50% 14px; display: grid; place-items: center; animation: drift 8s ease-in-out infinite; }
.label-a { left: 83%; top: 48%; width: 120px; height: 55px; transform: rotate(12deg); padding: 15px; animation: wobble 7s ease-in-out infinite; }
.receipt-a { left: 7%; top: 52%; width: 96px; height: 128px; padding: 17px; transform: rotate(-9deg); background-image: repeating-linear-gradient(0deg, transparent 0 14px, rgba(39,36,31,.13) 15px); animation: drift 12s ease-in-out infinite reverse; }

body.sorted .shard-a { left: 18%; top: 36%; }
body.sorted .shard-b { left: 61%; top: 31%; }
body.sorted .cap-a { left: 58%; top: 58%; }
body.sorted .tab-a { left: 31%; top: 60%; }
body.sorted .label-a { left: 70%; top: 46%; }
body.sorted .receipt-a { left: 19%; top: 49%; }

.annotation {
  position: absolute;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
}

.annotation span {
  display: inline-block;
  width: 96px;
  border-top: 1px solid var(--ink);
  transform: translateY(-5px) rotate(-8deg);
  margin-right: 8px;
}

.note-one { left: 16%; top: 15%; transform: rotate(-4deg); }
.note-two { right: 16%; bottom: 14%; transform: rotate(3deg); }

.wash {
  background:
    radial-gradient(circle at 18% 24%, rgba(135,216,208,.55), transparent 36%),
    linear-gradient(135deg, var(--pulp), rgba(135,216,208,.44));
}

.basin {
  position: absolute;
  left: -8vw;
  top: 12vh;
  width: min(72vw, 850px);
  height: 68vh;
  border: 4px solid var(--ink);
  border-radius: 48% 52% 57% 43% / 44% 35% 65% 56%;
  background:
    radial-gradient(circle at 28% 23%, rgba(244,234,210,.6) 0 3%, transparent 4%),
    repeating-radial-gradient(circle at 45% 50%, rgba(255,255,255,.25) 0 8px, transparent 9px 24px),
    linear-gradient(115deg, rgba(135,216,208,.78), rgba(31,122,77,.18));
  overflow: hidden;
  box-shadow: inset 0 0 50px rgba(31,122,77,.24), 0 22px 0 rgba(185,183,174,.42);
}

.water-sheen { position: absolute; inset: -20%; background: repeating-linear-gradient(96deg, transparent 0 28px, rgba(244,234,210,.42) 30px 34px); animation: rinse 8s ease-in-out infinite; }

.bubble {
  position: absolute;
  border: 2px solid rgba(39,36,31,.66);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "Gabarito", sans-serif;
  text-transform: uppercase;
  font-size: 11px;
  background: rgba(244,234,210,.3);
  animation: bubble 6s ease-in-out infinite;
}

.b1 { width: 128px; height: 128px; left: 18%; top: 19%; }
.b2 { width: 92px; height: 92px; left: 59%; top: 45%; animation-delay: -2s; }
.b3 { width: 74px; height: 74px; left: 42%; top: 70%; animation-delay: -3.5s; }

.floating-label { position: absolute; left: 40%; top: 28%; padding: 14px 38px; border: 2px solid var(--ink); background: rgba(244,234,210,.54); font-family: "Fraunces", serif; transform: rotate(-10deg); filter: blur(.25px); }

.plastic-shard { position: absolute; background: rgba(135,216,208,.42); border: 2px solid var(--ink); mix-blend-mode: multiply; }
.ps1 { left: 24%; top: 55%; width: 90px; height: 126px; clip-path: polygon(18% 0, 100% 14%, 74% 100%, 0 69%); }
.ps2 { left: 69%; top: 14%; width: 145px; height: 80px; clip-path: polygon(0 18%, 90% 0, 100% 70%, 18% 100%); }
.ps3 { left: 48%; top: 7%; width: 76px; height: 116px; clip-path: polygon(42% 0, 100% 44%, 72% 100%, 0 78%, 9% 18%); }

.sample-board {
  position: relative;
  width: min(520px, 78vw);
  padding: clamp(26px, 4vw, 48px);
  border: 3px solid var(--ink);
  background: rgba(244,234,210,.88);
  box-shadow: 14px 15px 0 rgba(39,36,31,.13);
  clip-path: polygon(3% 0, 100% 5%, 94% 100%, 0 91%);
  z-index: 4;
}

.wash-board { margin-left: auto; }
.shred-board { margin-right: auto; background: rgba(185,183,174,.88); }
.press-board { margin-left: auto; background: rgba(244,234,210,.94); }

.shred {
  background:
    linear-gradient(90deg, rgba(39,36,31,.08) 0 1px, transparent 1px 44px),
    radial-gradient(circle at 72% 22%, rgba(225,75,63,.22), transparent 34%),
    var(--pulp);
}

.roller-machine {
  position: absolute;
  right: 5vw;
  top: 13vh;
  width: min(56vw, 680px);
  height: 72vh;
  border: 4px solid var(--ink);
  background: rgba(185,183,174,.72);
  clip-path: polygon(8% 0, 100% 7%, 92% 100%, 0 91%);
  overflow: hidden;
}

.roller { position: absolute; left: 10%; width: 80%; height: 88px; border: 3px solid var(--ink); border-radius: 999px; background: repeating-linear-gradient(90deg, var(--aluminum) 0 16px, var(--ink) 17px 20px); animation: roll 2.1s linear infinite; }
.roller.top { top: 23%; }
.roller.bottom { top: 42%; animation-direction: reverse; }
.comb { position: absolute; top: 7%; bottom: 5%; width: 42px; background: repeating-linear-gradient(0deg, var(--ink) 0 14px, transparent 15px 29px); }
.left-comb { left: 4%; }
.right-comb { right: 4%; }

.flake-stream span {
  position: absolute;
  width: 28px;
  height: 44px;
  top: 56%;
  left: calc(13% + var(--n) * 8%);
  border: 2px solid var(--ink);
  background: var(--c);
  clip-path: polygon(20% 0, 100% 30%, 75% 100%, 0 74%);
  animation: fall 2.8s linear infinite;
}
.flake-stream span:nth-child(1) { --n: 0; --c: var(--red); }
.flake-stream span:nth-child(2) { --n: 1; --c: var(--green); animation-delay: -.4s; }
.flake-stream span:nth-child(3) { --n: 2; --c: var(--cyan); animation-delay: -.8s; }
.flake-stream span:nth-child(4) { --n: 3; --c: var(--violet); animation-delay: -1.2s; }
.flake-stream span:nth-child(5) { --n: 4; --c: var(--pulp); animation-delay: -1.6s; }
.flake-stream span:nth-child(6) { --n: 5; --c: var(--aluminum); animation-delay: -2s; }
.flake-stream span:nth-child(7) { --n: 6; --c: var(--red); animation-delay: -2.4s; }
.flake-stream span:nth-child(8) { --n: 7; --c: var(--green); animation-delay: -1s; }
.flake-stream span:nth-child(9) { --n: 8; --c: var(--cyan); animation-delay: -1.8s; }

.sound-marks { position: absolute; left: 36%; bottom: 16%; color: var(--red); font-family: "Climate Crisis", sans-serif; font-size: clamp(3rem, 9vw, 8rem); opacity: .32; transform: rotate(-12deg); }

.press {
  background:
    radial-gradient(circle at 40% 40%, rgba(225,75,63,.22), transparent 38%),
    linear-gradient(160deg, var(--pulp), rgba(185,183,174,.55));
}

.press-frame {
  position: absolute;
  left: 4vw;
  top: 12vh;
  width: min(58vw, 760px);
  height: 72vh;
  border: 5px solid var(--ink);
  background: rgba(185,183,174,.62);
  box-shadow: inset 0 0 0 24px rgba(39,36,31,.06);
}

.top-plate {
  position: absolute;
  left: 12%;
  top: 12%;
  width: 76%;
  height: 94px;
  background: var(--aluminum);
  border: 4px solid var(--ink);
  animation: compress 5s ease-in-out infinite;
}

.sheet-stack { position: absolute; left: 18%; right: 18%; bottom: 16%; height: 210px; }
.sheet-stack span { position: absolute; left: 0; right: 0; height: 72px; border: 3px solid var(--ink); background: radial-gradient(circle at 20% 30%, var(--red) 0 4px, transparent 5px), radial-gradient(circle at 70% 50%, var(--violet) 0 5px, transparent 6px), radial-gradient(circle at 48% 72%, var(--green) 0 4px, transparent 5px), var(--pulp); }
.sheet-stack span:nth-child(1) { bottom: 0; transform: rotate(-2deg); }
.sheet-stack span:nth-child(2) { bottom: 45px; transform: rotate(1deg); background-color: var(--cyan); }
.sheet-stack span:nth-child(3) { bottom: 90px; transform: rotate(-1deg); }
.sheet-stack span:nth-child(4) { bottom: 135px; transform: rotate(2deg); background-color: var(--aluminum); }

.clamp { position: absolute; top: 0; bottom: 0; width: 42px; background: var(--ink); }
.clamp::after { content: ""; position: absolute; top: 33%; left: -24px; width: 88px; height: 88px; border: 4px solid var(--ink); background: var(--red); border-radius: 50%; }
.clamp-left { left: 5%; }
.clamp-right { right: 5%; }

.steam { position: absolute; width: 42px; height: 116px; border-left: 4px solid rgba(225,75,63,.55); border-radius: 50%; animation: steam 3.6s ease-in-out infinite; }
.s1 { left: 36%; top: 32%; }
.s2 { left: 50%; top: 28%; animation-delay: -1s; }
.s3 { left: 62%; top: 35%; animation-delay: -2s; }

.gallery {
  background:
    radial-gradient(circle at 50% 52%, rgba(124,92,196,.18), transparent 46%),
    var(--pulp);
  align-content: center;
  gap: 32px;
}

.gallery-intro { text-align: center; max-width: 900px; }
.gallery-intro p:not(.chapter-tag) { max-width: 700px; margin: 22px auto 0; }

.plinths {
  width: min(1050px, 90vw);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.plinth {
  min-height: 240px;
  position: relative;
  border: 3px solid var(--ink);
  background: var(--aluminum);
  display: grid;
  place-items: end center;
  padding: 20px;
  box-shadow: 9px 11px 0 rgba(39,36,31,.14);
  animation: displayTurn 7s ease-in-out infinite;
}
.plinth::before { content: ""; position: absolute; top: 25px; width: 45%; height: 45%; border: 3px solid var(--ink); background: var(--pulp); box-shadow: inset 0 0 0 12px rgba(135,216,208,.25); }
.plinth span { position: relative; z-index: 2; font-family: "Gabarito", sans-serif; font-weight: 900; text-transform: uppercase; background: var(--pulp); border: 2px solid var(--ink); padding: 6px 10px; }
.tile { clip-path: polygon(0 8%, 100% 0, 92% 100%, 8% 94%); }
.tile::before { border-radius: 8px; background: radial-gradient(circle at 20% 30%, var(--red) 0 5px, transparent 6px), radial-gradient(circle at 70% 60%, var(--green) 0 5px, transparent 6px), var(--pulp); }
.lamp { transform: translateY(30px); animation-delay: -1.2s; }
.lamp::before { border-radius: 50% 50% 8px 8px; background: var(--red); }
.notebook { transform: translateY(-12px); animation-delay: -2s; }
.notebook::before { width: 55%; height: 38%; background: repeating-linear-gradient(90deg, var(--pulp) 0 14px, rgba(31,122,77,.25) 15px 17px); }
.planter { transform: translateY(22px); animation-delay: -3s; }
.planter::before { clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%); background: rgba(135,216,208,.7); }

.final-prompt { background: var(--green); box-shadow: 7px 7px 0 var(--red); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { 0%,100% { transform: translate(0,0) rotate(-7deg); } 50% { transform: translate(15px,-18px) rotate(9deg); } }
@keyframes wobble { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(13deg) scale(1.05); } }
@keyframes rinse { 0%,100% { transform: translateX(-8%) rotate(0deg); } 50% { transform: translateX(8%) rotate(3deg); } }
@keyframes bubble { 0%,100% { transform: translateY(0) scale(.95); } 50% { transform: translateY(-22px) scale(1.08); } }
@keyframes roll { to { background-position: 80px 0; } }
@keyframes fall { 0% { transform: translateY(-20px) rotate(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(230px) rotate(230deg); opacity: .75; } }
@keyframes compress { 0%,100% { transform: translateY(0); } 50% { transform: translateY(140px); } }
@keyframes steam { 0%,100% { transform: translateY(18px) scaleX(.8); opacity: .15; } 50% { transform: translateY(-32px) scaleX(1.25); opacity: .72; } }
@keyframes displayTurn { 0%,100% { rotate: -1deg; } 50% { rotate: 2deg; } }

@media (max-width: 820px) {
  .station-dial { transform: scale(.72); transform-origin: top right; right: 8px; top: 8px; }
  .passport { width: 200px; transform: scale(.86); transform-origin: bottom left; }
  .scene { padding: 108px 24px; }
  .loop-bench { width: 92vw; padding: 28px; }
  .basin, .roller-machine, .press-frame { position: relative; left: auto; right: auto; top: auto; width: 92vw; height: 50vh; margin-bottom: 28px; }
  .wash, .shred, .press { display: flex; flex-direction: column; }
  .sample-board { margin: 0; }
  .plinths { grid-template-columns: 1fr 1fr; }
  .scrap { transform: scale(.75); }
}