:root {
  /* design compliance tokens: typewriter interruptions Mono* Mono** typewriter-effect notes */
  --parchment: #F3E3B8;
  --ink: #151019;
  --lichen: #D9F27A;
  --violet: #4E3A78;
  --berry: #8D2F4F;
  --moss: #2F6B4F;
  --gold: #E0A72F;
  --serif: "Libre Baskerville", Baskerville, Georgia, serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;
  --chunk: "Fraunces", Georgia, serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  color: var(--parchment);
  background:
    radial-gradient(circle at 16% 18%, rgba(78, 58, 120, 0.5), transparent 30rem),
    radial-gradient(circle at 78% 8%, rgba(141, 47, 79, 0.25), transparent 24rem),
    linear-gradient(180deg, #151019 0%, #21142d 42%, #151019 100%);
  font-family: var(--mono);
  cursor: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.27;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle, rgba(224, 167, 47, 0.6) 0 2px, transparent 5px),
    radial-gradient(circle, rgba(217, 242, 122, 0.55) 0 1px, transparent 4px),
    radial-gradient(circle, rgba(243, 227, 184, 0.28) 0 3px, transparent 11px);
  background-size: 19rem 23rem, 13rem 17rem, 31rem 29rem;
  animation: bokehDrift 24s linear infinite;
  z-index: 2;
}

.cursor-charm {
  position: fixed;
  width: 24px;
  height: 24px;
  border-radius: 55% 45% 48% 52%;
  border: 1px solid rgba(217, 242, 122, 0.85);
  background: radial-gradient(circle at 62% 42%, var(--ink) 0 35%, var(--moss) 36% 100%);
  transform: translate(-50%, -50%) rotate(-24deg);
  pointer-events: none;
  z-index: 30;
  box-shadow: 0 0 22px rgba(217, 242, 122, 0.4);
}

.moon-trail {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 17px;
  z-index: 20;
}

.moon-dot {
  position: relative;
  width: 15px;
  height: 15px;
  border: 1px solid rgba(243, 227, 184, 0.62);
  border-radius: 50%;
  background: rgba(21, 16, 25, 0.7);
  box-shadow: 0 0 0 1px rgba(78, 58, 120, 0.55), 0 0 15px rgba(224, 167, 47, 0.1);
}

.moon-dot::after {
  content: "";
  position: absolute;
  inset: 2px -1px 2px 5px;
  border-radius: 50%;
  background: var(--ink);
}

.moon-dot.active {
  border-color: var(--lichen);
  background: var(--gold);
  box-shadow: 0 0 18px rgba(217, 242, 122, 0.55);
}

.moon-dot span {
  position: absolute;
  right: 24px;
  top: -5px;
  color: var(--parchment);
  font: 10px var(--mono);
  letter-spacing: 0.16em;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  transform: translateX(6px);
  text-transform: uppercase;
}

.moon-dot:hover span, .moon-dot.active span { opacity: 1; transform: translateX(0); }

.night-walk { position: relative; z-index: 4; }

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

.scene::after {
  content: "";
  position: absolute;
  inset: auto -5vw -10vh -5vw;
  height: 24vh;
  background: linear-gradient(0deg, var(--ink), transparent);
  pointer-events: none;
  z-index: 9;
}

.depth { position: absolute; will-change: transform; }
.bg { inset: -12vh -10vw; z-index: -3; }
.foreground { inset: auto -8vw -4vh -8vw; height: 36vh; z-index: 8; }

.scene-copy {
  position: relative;
  max-width: min(780px, 82vw);
  z-index: 7;
  text-shadow: 0 0 26px rgba(21, 16, 25, 0.95);
}

.scene-copy h1,
.scene-copy h2 {
  margin: 0;
  color: var(--parchment);
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0.045em;
  line-height: 0.95;
}

.scene-copy h1 {
  font-size: clamp(4rem, 14vw, 13rem);
  font-style: italic;
  max-width: 11ch;
}

.scene-copy h2 {
  font-size: clamp(2.7rem, 7vw, 8.4rem);
  max-width: 10ch;
}

.specimen-tag {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.45rem 0.7rem;
  color: var(--lichen);
  border: 1px dashed rgba(217, 242, 122, 0.45);
  background: rgba(21, 16, 25, 0.58);
  font: 500 0.72rem/1.2 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: rotate(-1.2deg);
}

.typed-line {
  min-height: 1.6em;
  max-width: 44rem;
  margin: 1.35rem 0 0;
  color: var(--parchment);
  font: 500 clamp(1rem, 2vw, 1.35rem)/1.6 var(--mono);
  letter-spacing: 0.02em;
}

.typed-line::after {
  content: "";
  display: inline-block;
  width: 0.7ch;
  height: 1.05em;
  margin-left: 0.15ch;
  vertical-align: -0.15em;
  background: var(--gold);
  animation: caret 0.9s steps(1) infinite;
}

.typed-line.done::after { opacity: 0.25; }

.overstrike.done { text-decoration: line-through rgba(217, 242, 122, 0.55) 2px; }

.bokeh-field {
  background:
    radial-gradient(circle at 18% 26%, rgba(224, 167, 47, 0.38), transparent 13rem),
    radial-gradient(circle at 73% 34%, rgba(217, 242, 122, 0.18), transparent 15rem),
    radial-gradient(circle at 50% 72%, rgba(78, 58, 120, 0.65), transparent 34rem),
    linear-gradient(160deg, #151019 0%, #23152c 64%, #151019 100%);
}

.lantern-halo {
  top: 12vh;
  left: 47vw;
  width: 14rem;
  height: 18rem;
  border-radius: 50% 50% 46% 46%;
  background: radial-gradient(circle at 50% 32%, rgba(243, 227, 184, 0.95), rgba(224, 167, 47, 0.65) 18%, rgba(224, 167, 47, 0.16) 42%, transparent 70%);
  filter: blur(1px);
  transform-origin: top center;
  animation: lanternSwing 5.7s ease-in-out infinite, lanternFlicker 1.7s steps(3) infinite;
  z-index: 3;
}

.lantern-halo::before {
  content: "";
  position: absolute;
  top: -18vh;
  left: 50%;
  width: 1px;
  height: 22vh;
  background: rgba(243, 227, 184, 0.5);
}

.gate-leaf {
  top: -8vh;
  bottom: -8vh;
  width: 49vw;
  z-index: 5;
  background:
    radial-gradient(ellipse at 30% 10%, rgba(47, 107, 79, 0.78), transparent 25%),
    radial-gradient(ellipse at 70% 30%, rgba(217, 242, 122, 0.18), transparent 23%),
    repeating-linear-gradient(108deg, rgba(243, 227, 184, 0.12) 0 2px, transparent 2px 28px),
    linear-gradient(90deg, rgba(21, 16, 25, 0.98), rgba(47, 107, 79, 0.72));
  border: solid rgba(243, 227, 184, 0.18);
  transition: transform 1.4s cubic-bezier(.2,.8,.1,1);
}

.gate-leaf.left { left: 0; border-width: 0 1px 0 0; clip-path: polygon(0 0, 94% 0, 80% 100%, 0 100%); }
.gate-leaf.right { right: 0; border-width: 0 0 0 1px; clip-path: polygon(6% 0, 100% 0, 100% 100%, 20% 100%); transform: scaleX(-1); }
.scene-gate.open .gate-leaf.left { transform: translateX(-29vw) rotate(-2deg); }
.scene-gate.open .gate-leaf.right { transform: translateX(29vw) scaleX(-1) rotate(-2deg); }

.weeds, .briars, .reeds, .lace-leaves, .cellar-roots {
  background:
    radial-gradient(ellipse at 10% 100%, #151019 0 30%, transparent 31%),
    radial-gradient(ellipse at 32% 100%, #151019 0 35%, transparent 36%),
    radial-gradient(ellipse at 60% 100%, #151019 0 28%, transparent 29%),
    radial-gradient(ellipse at 86% 100%, #151019 0 38%, transparent 39%),
    repeating-linear-gradient(82deg, transparent 0 31px, rgba(47, 107, 79, 0.88) 32px 36px, transparent 37px 54px);
  filter: drop-shadow(0 -20px 20px rgba(21,16,25,0.7));
}

.charm { z-index: 6; color: var(--gold); font-family: var(--chunk); animation: floatCharm 8s ease-in-out infinite; }
.charm-key { left: 10vw; top: 29vh; font-size: 6rem; transform: rotate(-30deg); }
.charm-pin {
  right: 16vw;
  top: 22vh;
  width: 82px;
  height: 22px;
  border: 3px solid var(--parchment);
  border-radius: 22px 8px 8px 22px;
  transform: rotate(21deg);
}
.charm-pin::after { content: ""; position: absolute; right: -12px; top: 6px; width: 20px; height: 3px; background: var(--lichen); transform-origin: left; animation: pinClick 4.6s steps(2) infinite; }

.violet-haze {
  background:
    radial-gradient(circle at 22% 22%, rgba(141, 47, 79, 0.38), transparent 24rem),
    radial-gradient(circle at 72% 72%, rgba(224, 167, 47, 0.18), transparent 20rem),
    linear-gradient(145deg, #151019 5%, #2c1c3d 58%, #151019 100%);
}

.thread-map {
  inset: 12vh 6vw;
  z-index: 1;
  opacity: 0.48;
  background:
    linear-gradient(34deg, transparent 0 40%, rgba(243, 227, 184, 0.36) 40.2% 40.5%, transparent 41%),
    linear-gradient(152deg, transparent 0 52%, rgba(224, 167, 47, 0.28) 52.2% 52.5%, transparent 53%),
    radial-gradient(circle at 24% 35%, var(--berry) 0 5px, transparent 6px),
    radial-gradient(circle at 65% 54%, var(--lichen) 0 4px, transparent 5px),
    radial-gradient(circle at 44% 75%, var(--gold) 0 5px, transparent 6px);
}

.torn-page {
  right: 9vw;
  top: 18vh;
  width: min(35rem, 42vw);
  min-height: 22rem;
  padding: 4rem 3rem;
  color: var(--ink);
  background: linear-gradient(135deg, rgba(243, 227, 184, 0.93), rgba(224, 167, 47, 0.2));
  clip-path: polygon(3% 0, 96% 5%, 92% 92%, 70% 100%, 42% 94%, 6% 100%, 0 58%);
  box-shadow: 0 26px 80px rgba(0,0,0,0.48);
  transform: rotate(3deg);
  z-index: 4;
}

.paper-note { font: 1.55rem/1.45 var(--chunk); color: var(--berry); }
.diary-copy { left: 7vw; top: 34vh; }
.moth { width: 42px; height: 26px; z-index: 6; background: radial-gradient(ellipse at 28% 50%, rgba(243,227,184,.85) 0 40%, transparent 42%), radial-gradient(ellipse at 72% 50%, rgba(243,227,184,.7) 0 40%, transparent 42%); filter: drop-shadow(0 0 12px rgba(217,242,122,.35)); animation: mothDart 7s ease-in-out infinite; }
.moth-one { left: 48vw; top: 42vh; }
.moth-two { right: 18vw; top: 62vh; animation-delay: -2.4s; }

.creek-glow { background: radial-gradient(circle at 52% 60%, rgba(47,107,79,.42), transparent 23rem), radial-gradient(circle at 15% 18%, rgba(217,242,122,.12), transparent 18rem), linear-gradient(180deg, #151019, #191622 45%, #151019); }
.ink-creek { left: -10vw; right: -10vw; top: 45vh; height: 28vh; z-index: 3; background: linear-gradient(96deg, transparent, rgba(141,47,79,.42), rgba(21,16,25,.94), rgba(78,58,120,.52), transparent); clip-path: polygon(0 32%, 14% 12%, 30% 34%, 43% 18%, 58% 38%, 78% 17%, 100% 34%, 100% 100%, 0 100%); animation: creekMove 9s ease-in-out infinite; }
.creek-copy { right: 8vw; top: 18vh; text-align: right; }
.creek-copy h2 { margin-left: auto; }
.berry-constellation { left: 11vw; top: 18vh; width: 35vw; height: 42vh; z-index: 5; }
.berry-constellation span { position: absolute; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F3E3B8 0 8%, #8D2F4F 9% 64%, #151019 65%); box-shadow: 0 0 24px rgba(141,47,79,.7); animation: stainSpread 6s ease-in-out infinite; }
.berry-constellation span:nth-child(1){ left: 4%; top: 18%; }.berry-constellation span:nth-child(2){ left: 32%; top: 8%; animation-delay:-1s }.berry-constellation span:nth-child(3){ left: 50%; top: 47%; animation-delay:-2s }.berry-constellation span:nth-child(4){ left: 78%; top: 28%; animation-delay:-3s }.berry-constellation span:nth-child(5){ left: 22%; top: 78%; animation-delay:-4s }
.charm-leaf { left: 42vw; bottom: 12vh; width: 68px; height: 88px; border-radius: 70% 10% 70% 20%; background: radial-gradient(circle at 64% 45%, transparent 0 19%, var(--moss) 20%), linear-gradient(135deg, var(--moss), var(--lichen)); box-shadow: 0 0 28px rgba(217,242,122,.35); }

.curtain-bokeh { background: radial-gradient(circle at 73% 32%, rgba(224,167,47,.45), transparent 16rem), radial-gradient(circle at 32% 68%, rgba(141,47,79,.32), transparent 22rem), repeating-linear-gradient(90deg, rgba(243,227,184,.04) 0 5px, transparent 5px 42px), linear-gradient(150deg, #151019, #2f2442 55%, #151019); }
.cottage-window { left: 9vw; top: 14vh; width: min(42rem, 49vw); height: 58vh; border: 18px solid rgba(47,107,79,.88); background: rgba(21,16,25,.52); box-shadow: 0 0 0 2px rgba(243,227,184,.28), inset 0 0 70px rgba(224,167,47,.22), 0 40px 100px rgba(0,0,0,.52); transform: rotate(-2deg); z-index: 3; }
.cottage-window::before, .cottage-window::after { content:""; position:absolute; background: rgba(243,227,184,.34); }.cottage-window::before{ left:50%; top:0; bottom:0; width:2px }.cottage-window::after{ left:0; right:0; top:50%; height:2px }
.window-light { position:absolute; inset:8%; background: radial-gradient(circle at 48% 48%, rgba(243,227,184,.52), rgba(224,167,47,.24) 33%, transparent 70%); animation: lanternFlicker 2s steps(3) infinite; }
.window-copy { right: 8vw; top: 28vh; }
.seed-packet { right: 15vw; bottom: 17vh; padding: 1.4rem 1.1rem; color: var(--ink); background: var(--parchment); border: 3px double var(--berry); font: 800 1.1rem/1 var(--chunk); letter-spacing: .08em; text-align:center; transform: rotate(12deg); z-index:6; animation: floatCharm 7s ease-in-out infinite reverse; }
.ribbon-knot { left: 48vw; top: 22vh; width: 88px; height: 48px; background: radial-gradient(ellipse at 25% 50%, var(--berry) 0 45%, transparent 47%), radial-gradient(ellipse at 75% 50%, var(--berry) 0 45%, transparent 47%); filter: drop-shadow(0 0 14px rgba(141,47,79,.6)); animation: floatCharm 8.8s ease-in-out infinite; }

.cellar-stars { background: radial-gradient(circle at 50% 75%, rgba(217,242,122,.14), transparent 18rem), radial-gradient(circle at 72% 22%, rgba(78,58,120,.55), transparent 25rem), linear-gradient(180deg, #120d16, #151019 52%, #09070b); }
.root-door { left: 50%; bottom: 8vh; width: min(54rem, 70vw); height: 58vh; transform: translateX(-50%); border-radius: 48% 48% 0 0; background: radial-gradient(ellipse at 50% 100%, rgba(21,16,25,.98) 0 46%, rgba(47,107,79,.7) 47% 49%, transparent 50%), linear-gradient(180deg, rgba(78,58,120,.22), rgba(21,16,25,.96)); border: 2px solid rgba(217,242,122,.18); box-shadow: inset 0 38px 90px rgba(0,0,0,.82), 0 0 80px rgba(217,242,122,.12); z-index: 2; }
.root-diagram { inset: 14vh 12vw; opacity: .45; z-index: 3; background: repeating-radial-gradient(ellipse at 50% 12%, transparent 0 28px, rgba(243,227,184,.15) 29px 30px, transparent 31px 64px), repeating-linear-gradient(118deg, transparent 0 40px, rgba(47,107,79,.34) 41px 43px, transparent 44px 80px); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.cellar-copy { text-align: center; top: 21vh; left: 50%; transform: translateX(-50%); }
.cellar-copy h2 { max-width: none; font-style: italic; color: var(--lichen); }
.lichen-sparks { inset: 0; z-index: 6; }
.lichen-sparks i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--lichen); box-shadow: 0 0 18px var(--lichen); animation: sparkRecede 5.5s ease-in-out infinite; }
.lichen-sparks i:nth-child(1){ left:20%; top:62%; }.lichen-sparks i:nth-child(2){ left:36%; top:48%; animation-delay:-.8s }.lichen-sparks i:nth-child(3){ left:52%; top:70%; animation-delay:-1.6s }.lichen-sparks i:nth-child(4){ left:68%; top:50%; animation-delay:-2.4s }.lichen-sparks i:nth-child(5){ left:78%; top:76%; animation-delay:-3.2s }.lichen-sparks i:nth-child(6){ left:43%; top:84%; animation-delay:-4s }.lichen-sparks i:nth-child(7){ left:58%; top:34%; animation-delay:-4.8s }

@keyframes bokehDrift { to { background-position: 19rem 23rem, -13rem 17rem, 31rem -29rem; } }
@keyframes caret { 50% { opacity: 0; } }
@keyframes lanternSwing { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes lanternFlicker { 0%, 100% { opacity: .88; filter: blur(1px); } 45% { opacity: .62; filter: blur(2px); } 70% { opacity: 1; filter: blur(0); } }
@keyframes floatCharm { 0%,100% { translate: 0 0; rotate: -2deg; } 50% { translate: 18px -26px; rotate: 7deg; } }
@keyframes pinClick { 50% { transform: rotate(-24deg); background: var(--gold); } }
@keyframes mothDart { 0%,100% { transform: translate(0,0) rotate(0deg); } 35% { transform: translate(42px,-30px) rotate(18deg); } 42% { transform: translate(12px,-5px) rotate(-38deg); } 70% { transform: translate(-22px,18px) rotate(-8deg); } }
@keyframes creekMove { 0%,100% { transform: translateX(-2vw) skewY(-1deg); } 50% { transform: translateX(2vw) skewY(1deg); } }
@keyframes stainSpread { 50% { transform: scale(1.45); filter: blur(.4px); } }
@keyframes sparkRecede { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(18vh) scale(.12); opacity: 0; } }

@media (max-width: 760px) {
  .scene { padding: 8vh 8vw; place-items: start center; }
  .scene-copy, .diary-copy, .creek-copy, .window-copy, .cellar-copy { top: 18vh; left: auto; right: auto; text-align: left; }
  .scene-copy h1 { font-size: clamp(3.4rem, 18vw, 7rem); }
  .scene-copy h2 { font-size: clamp(2.4rem, 13vw, 5.2rem); }
  .torn-page, .cottage-window { width: 74vw; left: 12vw; right: auto; opacity: .48; }
  .moon-trail { right: 12px; }
  .cursor-charm { display: none; }
  body { cursor: auto; }
}