:root {
  --ink: #171412;
  --parchment: #F4E4C8;
  --silk: #E45F2B;
  --plum: #4A2638;
  --gold: #F2B84B;
  --jade: #5D7A54;
  --display: "M PLUS Rounded 1c", "Trebuchet MS", system-ui, sans-serif;
  --hand: "Yomogi", "Comic Sans MS", cursive;
  --body: "Nunito Sans", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: var(--body);
  overflow-x: hidden;
}

button { font: inherit; color: inherit; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .22;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(23,20,18,.18) 0 1px, transparent 1.5px),
    radial-gradient(circle at 76% 44%, rgba(228,95,43,.16) 0 1px, transparent 1.7px),
    radial-gradient(circle at 38% 82%, rgba(242,184,75,.14) 0 1px, transparent 1.4px);
  background-size: 34px 37px, 47px 43px, 23px 29px;
  mix-blend-mode: multiply;
}

.cursor-smoke {
  position: fixed;
  width: 160px;
  height: 160px;
  margin: -80px 0 0 -80px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 25;
  opacity: .16;
  transform: translate3d(-200px, -200px, 0);
  background: radial-gradient(circle, rgba(242,184,75,.5), rgba(228,95,43,.18) 42%, transparent 68%);
  filter: blur(18px);
}

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

.scene-copy {
  position: relative;
  z-index: 5;
  max-width: min(640px, 82vw);
  transition: transform 900ms cubic-bezier(.2,.9,.2,1), opacity 900ms ease;
}

.scene:not(.in-view) .scene-copy {
  opacity: .18;
  transform: translateY(46px) scale(.98);
}

.whisper {
  margin: 0 0 14px;
  font-family: var(--hand);
  color: var(--silk);
  font-size: clamp(1.05rem, 2vw, 1.55rem);
  letter-spacing: .08em;
}

h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: .045em;
  line-height: .9;
}

h1 { font-size: clamp(4rem, 13vw, 12.5rem); }
h2 { font-size: clamp(3.1rem, 9vw, 8.5rem); }

p {
  font-size: clamp(1.02rem, 1.55vw, 1.36rem);
  line-height: 1.75;
  font-weight: 300;
}

.silk-path {
  position: fixed;
  top: 0;
  left: 50%;
  width: min(28vw, 260px);
  height: 100vh;
  transform: translateX(-50%);
  z-index: 20;
  pointer-events: none;
  opacity: .92;
}

.silk-path path {
  fill: none;
  stroke: var(--silk);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 8 8;
  filter: drop-shadow(0 0 8px rgba(228,95,43,.5));
}

.knot-nav {
  position: fixed;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 35;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.knot {
  width: 17px;
  height: 17px;
  border: 0;
  border-radius: 45% 55% 48% 52%;
  background: var(--plum);
  box-shadow: 0 0 0 3px rgba(244,228,200,.38), 0 0 18px rgba(23,20,18,.24);
  cursor: pointer;
  transition: transform 300ms cubic-bezier(.2,1.7,.4,1), background 300ms ease;
}

.knot span {
  position: absolute;
  right: 28px;
  white-space: nowrap;
  transform: translateY(-4px);
  color: var(--parchment);
  font-family: var(--hand);
  opacity: 0;
  transition: opacity 260ms ease, transform 260ms ease;
}

.knot:hover span, .knot.active span { opacity: 1; transform: translate(-4px, -4px); }
.knot.active { background: var(--silk); transform: rotate(42deg) scale(1.36); }

.paper-gate {
  background:
    linear-gradient(90deg, rgba(23,20,18,.08) 0 1px, transparent 1px 19%),
    radial-gradient(circle at 76% 24%, rgba(242,184,75,.4), transparent 22%),
    linear-gradient(135deg, var(--parchment), #f6d99d 58%, var(--parchment));
}

.paper-rails, .paper-rails::before, .paper-rails::after {
  position: absolute;
  inset: 12vh 9vw;
  border: 2px solid rgba(23,20,18,.18);
  z-index: 1;
}

.paper-rails::before, .paper-rails::after { content: ""; inset: 0 33%; border-top: 0; border-bottom: 0; }
.paper-rails::after { inset: 0 66% 0 16%; }

.sliding-shadow {
  position: absolute;
  inset: 0 auto 0 43%;
  width: 38vw;
  background: linear-gradient(90deg, rgba(23,20,18,0), rgba(23,20,18,.58), rgba(74,38,56,.72));
  clip-path: polygon(0 0, 100% 0, 76% 100%, 0 100%);
  z-index: 4;
  animation: shadowSlide 5.5s ease-in-out infinite alternate;
}

@keyframes shadowSlide { from { transform: translateX(-7vw); } to { transform: translateX(4vw); } }

.moon-disc {
  position: absolute;
  width: 26vmin;
  height: 26vmin;
  border-radius: 50%;
  left: 8vw;
  top: 12vh;
  background: var(--gold);
  box-shadow: 0 0 70px rgba(242,184,75,.42);
  opacity: .55;
}

.gate-mark {
  position: absolute;
  right: 8vw;
  bottom: 3vh;
  font-family: var(--display);
  font-size: 38vw;
  color: rgba(74,38,56,.08);
  font-weight: 900;
}

.gate-copy { justify-self: start; margin-left: 8vw; }
.gate-copy h1 span { display: block; color: var(--ink); }
.gate-copy h1 em { display: block; color: var(--silk); font-style: normal; text-shadow: 5px 0 0 rgba(74,38,56,.22), -4px 2px 0 rgba(242,184,75,.44); }
.mission-note { max-width: 460px; }

.curtain-clue {
  position: absolute;
  z-index: 8;
  right: 10vw;
  bottom: 18vh;
  border: 1px solid rgba(23,20,18,.22);
  background: rgba(244,228,200,.64);
  border-radius: 999px;
  padding: 12px 22px;
  font-family: var(--hand);
  cursor: pointer;
  box-shadow: 0 18px 50px rgba(23,20,18,.14);
}

.curtain-clue.revealed::after {
  content: attr(data-clue);
  position: absolute;
  right: 0;
  bottom: 128%;
  width: 230px;
  color: var(--parchment);
  background: var(--plum);
  border-radius: 24px 24px 6px 24px;
  padding: 16px;
}

.thread-entry {
  position: absolute;
  left: calc(50% - 2px);
  bottom: -3vh;
  width: 4px;
  height: 28vh;
  border-radius: 99px;
  background: var(--silk);
  box-shadow: 0 0 20px rgba(228,95,43,.72);
  animation: threadTwitch 2.7s cubic-bezier(.2,1.4,.4,1) both;
}

@keyframes threadTwitch { 0% { transform: translateY(20vh) scaleY(.3); } 60% { transform: translateY(0) scaleY(1); } 74% { transform: translateX(-9px); } 82% { transform: translateX(7px); } 100% { transform: translateX(0); } }

.rooftop-breath { background: linear-gradient(160deg, var(--ink), var(--plum) 58%, #2a2018); color: var(--parchment); }
.roof { position: absolute; height: 42vh; left: -10vw; right: -10vw; background: var(--ink); transform: skewY(-8deg); box-shadow: 0 -16px 0 rgba(244,228,200,.05) inset; }
.roof-back { top: 18vh; opacity: .62; }
.roof-front { bottom: -16vh; height: 52vh; transform: skewY(7deg); }
.roof::after { content: ""; position: absolute; inset: 18px 0 auto; height: 14px; background: repeating-linear-gradient(90deg, rgba(244,228,200,.14) 0 28px, transparent 28px 52px); }
.roof-copy { justify-self: end; margin-right: 8vw; text-align: right; }
.roof-copy h2 { color: var(--gold); }
.wind-curve { position: absolute; border: 2px solid rgba(244,228,200,.2); border-left: 0; border-bottom: 0; border-radius: 50%; transform: rotate(-18deg); }
.curve-one { width: 58vw; height: 34vh; left: 3vw; top: 19vh; }
.curve-two { width: 38vw; height: 27vh; right: 12vw; bottom: 18vh; }
.fox-mask { position: absolute; left: 14vw; top: 22vh; width: 19vmin; height: 23vmin; background: rgba(244,228,200,.12); clip-path: polygon(50% 0, 80% 20%, 100% 72%, 70% 100%, 50% 84%, 30% 100%, 0 72%, 20% 20%); filter: drop-shadow(14px 8px 0 rgba(228,95,43,.2)); transition: opacity 900ms ease, transform 900ms ease; }
.scene.in-view .fox-mask { opacity: 1; transform: translateY(0) rotate(-5deg); }
.scene:not(.in-view) .fox-mask { opacity: 0; transform: translateY(60px) rotate(12deg); }
.shuriken-leaf { position: absolute; left: 28vw; bottom: 28vh; width: 70px; height: 70px; background: var(--silk); clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%); transition: clip-path 500ms ease, border-radius 500ms ease, transform 500ms ease; cursor: pointer; z-index: 7; }
.shuriken-leaf.leaf { clip-path: ellipse(34% 50% at 50% 50%); border-radius: 100% 0 100% 0; transform: rotate(42deg); background: var(--gold); }
.brush-clue { position: absolute; left: 11vw; bottom: 14vh; font-family: var(--hand); color: var(--gold); font-size: clamp(1.2rem, 2.2vw, 2rem); }

.lantern-cipher { background: linear-gradient(90deg, var(--parchment), #efd7ad 50%, var(--parchment)); }
.screen-panel { position: absolute; top: 0; bottom: 0; width: 44vw; background: rgba(244,228,200,.78); border-inline: 2px solid rgba(23,20,18,.18); z-index: 2; transition: transform 1.1s cubic-bezier(.25,.9,.22,1); }
.left-panel { left: 0; }
.right-panel { right: 0; }
.lantern-cipher.in-view .left-panel { transform: translateX(-16vw); }
.lantern-cipher.in-view .right-panel { transform: translateX(16vw); }
.lantern-field { position: absolute; left: 9vw; top: 12vh; bottom: 12vh; display: flex; flex-direction: column; justify-content: space-around; z-index: 5; }
.lantern { position: relative; width: 118px; height: 152px; border: 0; background: transparent; cursor: pointer; }
.lantern span { position: absolute; inset: 18px 12px; border-radius: 48% 48% 42% 42%; background: radial-gradient(circle, var(--gold), var(--silk) 62%, var(--plum)); box-shadow: 0 0 46px rgba(242,184,75,.7); animation: lanternBreath 3.2s ease-in-out infinite; }
.lantern b { position: relative; z-index: 1; color: var(--parchment); font-family: var(--display); font-size: 2.4rem; top: 56px; }
.lantern.lit span { animation: lanternBlink 420ms steps(2) 2, lanternBreath 3.2s ease-in-out infinite; }
@keyframes lanternBreath { 50% { transform: scale(1.06); filter: brightness(1.12); } }
@keyframes lanternBlink { 50% { transform: translateX(6px) scale(.96); filter: hue-rotate(-18deg); } }
.cipher-copy { justify-self: end; margin-right: 8vw; max-width: 520px; }
.cipher-copy h2 { color: var(--plum); text-shadow: 4px 0 0 rgba(228,95,43,.22), -3px 2px 0 rgba(242,184,75,.48); }
.cipher-result { font-family: var(--hand); color: var(--silk); min-height: 2.2em; }
.glitch-strokes { position: absolute; right: 12vw; bottom: 15vh; width: 30vw; height: 12vh; }
.glitch-strokes i { position: absolute; width: 80%; height: 10px; background: var(--ink); border-radius: 999px; opacity: .22; transform: rotate(-7deg); }
.glitch-strokes i:nth-child(2) { top: 34px; left: 22px; background: var(--silk); opacity: .48; }
.glitch-strokes i:nth-child(3) { top: 68px; left: -14px; background: var(--gold); opacity: .42; }

.silk-current { background: radial-gradient(circle at 20% 76%, rgba(242,184,75,.26), transparent 25%), linear-gradient(145deg, var(--plum), var(--ink)); color: var(--parchment); }
.current-copy { justify-self: start; margin-left: 9vw; }
.current-copy h2 { color: var(--parchment); text-shadow: 5px 4px 0 rgba(228,95,43,.34); }
.current-ribbon { position: absolute; width: 88vw; height: 36vh; border: 7px solid var(--silk); border-left: 0; border-top: 0; border-radius: 50%; opacity: .48; filter: drop-shadow(0 0 16px rgba(228,95,43,.35)); }
.ribbon-a { right: -12vw; top: 15vh; transform: rotate(13deg); }
.ribbon-b { left: -22vw; bottom: 6vh; transform: rotate(-16deg); border-color: var(--gold); opacity: .22; }
.koi-glitch { position: absolute; width: 150px; height: 28px; border-radius: 80% 20% 80% 20%; background: linear-gradient(90deg, transparent, var(--silk), var(--gold), transparent); opacity: .62; animation: koiSwim 6s ease-in-out infinite; }
.koi-one { right: 18vw; top: 34vh; }
.koi-two { right: 30vw; bottom: 22vh; animation-delay: -2s; transform: scale(.7); }
@keyframes koiSwim { 50% { transform: translate(-70px, 24px) skewX(-18deg); filter: blur(1px); } }
.folded-note { position: absolute; right: 11vw; bottom: 15vh; width: 270px; min-height: 160px; background: var(--parchment); color: var(--ink); padding: 30px 28px; box-shadow: -18px 24px 0 rgba(23,20,18,.25); clip-path: polygon(0 0, 82% 0, 100% 22%, 100% 100%, 0 100%); cursor: pointer; transition: transform 420ms cubic-bezier(.2,1.5,.35,1); z-index: 7; }
.folded-note span { display: block; font-family: var(--hand); color: var(--silk); margin-bottom: 16px; }
.folded-note strong { font-family: var(--display); font-size: 1.45rem; line-height: 1.15; }
.folded-note.open { transform: rotate(-4deg) scale(1.06); }

.hidden-garden { background: radial-gradient(circle at 50% 48%, rgba(244,228,200,.26), transparent 27%), linear-gradient(150deg, var(--jade), #34492f 52%, var(--ink)); color: var(--parchment); }
.garden-copy { text-align: center; }
.garden-copy h2 { color: var(--gold); }
.final-name { margin: 24px 0 0; font-family: var(--display); font-weight: 900; font-size: clamp(2rem, 5vw, 5.6rem); color: var(--parchment); }
.garden-moon { position: absolute; width: 34vmin; height: 34vmin; border-radius: 50%; top: 9vh; right: 12vw; background: rgba(244,228,200,.34); box-shadow: 0 0 90px rgba(244,228,200,.2); }
.circle-thread { position: absolute; width: min(72vw, 720px); height: min(72vw, 720px); border: 4px solid var(--silk); border-radius: 50%; box-shadow: 0 0 36px rgba(228,95,43,.42), inset 0 0 34px rgba(228,95,43,.18); transform: scale(.8); opacity: .34; transition: transform 1.1s ease, opacity 1.1s ease; }
.hidden-garden.in-view .circle-thread { transform: scale(1); opacity: .82; }
.stone { position: absolute; width: 115px; height: 62px; background: rgba(244,228,200,.25); border-radius: 50%; box-shadow: inset -18px -10px 0 rgba(23,20,18,.12); }
.stone-one { left: 18vw; bottom: 17vh; }
.stone-two { left: 32vw; bottom: 10vh; transform: scale(.72); }
.stone-three { right: 24vw; bottom: 18vh; transform: scale(.9); }
.stone-four { right: 12vw; bottom: 31vh; transform: scale(.58); }
.bowing-shadow { position: absolute; left: 10vw; bottom: 6vh; width: 26vmin; height: 18vmin; background: rgba(23,20,18,.45); border-radius: 50%; transform-origin: bottom center; animation: bow 5s ease-in-out infinite; }
@keyframes bow { 50% { transform: scaleX(1.25) scaleY(.55); } }

@media (max-width: 760px) {
  .knot-nav { right: 14px; gap: 14px; }
  .knot span { display: none; }
  .scene-copy, .gate-copy, .roof-copy, .cipher-copy, .current-copy { justify-self: center; margin: 0; text-align: left; }
  .lantern-field { left: 4vw; opacity: .55; }
  .lantern { width: 78px; height: 104px; }
  .lantern b { top: 35px; font-size: 1.8rem; }
  .folded-note { right: 8vw; bottom: 8vh; width: 220px; }
}