:root {
  --ink: #3B2A21;
  --vermilion: #E34234;
  --paw: #F2A7A0;
  --lantern: #F8B84E;
  --moss: #6F8A4F;
  --indigo: #1D2437;
  --paper: #F6EAD2;
  --shadow: rgba(29, 36, 55, .28);
  --title: "Yeseva One", Georgia, "Times New Roman", serif;
  --body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", Inter, system-ui, sans-serif;
  --hand: "Klee One", "Comic Sans MS", "Bradley Hand", cursive;
  --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* only for small inventory marks */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--indigo);
  font-family: var(--body);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .32;
  mix-blend-mode: multiply;
  background:
    radial-gradient(circle at 18% 22%, rgba(59,42,33,.08) 0 1px, transparent 2px),
    radial-gradient(circle at 77% 42%, rgba(227,66,52,.07) 0 1px, transparent 2px),
    repeating-linear-gradient(96deg, rgba(255,255,255,.045) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(4deg, rgba(59,42,33,.025) 0 1px, transparent 1px 11px);
}

.progress-talisman {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%) rotate(2deg);
  z-index: 45;
  display: grid;
  gap: 12px;
  padding: 14px 10px;
  background: rgba(246,234,210,.86);
  border: 2px solid var(--ink);
  box-shadow: 5px 6px 0 rgba(59,42,33,.25);
}
.seal-dot {
  width: 14px; height: 14px; border-radius: 2px;
  background: var(--paper); border: 1px solid var(--vermilion);
  transform: rotate(45deg); transition: background .35s, transform .35s;
}
.seal-dot.active { background: var(--vermilion); transform: rotate(45deg) scale(1.25); }

.scene {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 20% 15%, rgba(248,184,78,.12), transparent 22%),
    linear-gradient(135deg, var(--indigo), #151a2a 55%, #20283b);
}
.scene::before {
  content: "";
  position: absolute;
  inset: 7vh 5vw;
  background: var(--paper);
  clip-path: polygon(2% 4%, 98% 1%, 96% 96%, 4% 99%);
  box-shadow: 0 24px 50px var(--shadow), inset 0 0 0 2px rgba(59,42,33,.09);
  z-index: -3;
}
.scene::after {
  content: "";
  position: absolute;
  inset: 9vh 7vw;
  opacity: .35;
  background:
    repeating-radial-gradient(ellipse at 50% 50%, transparent 0 14px, rgba(59,42,33,.12) 15px 17px, transparent 18px 32px);
  transform: rotate(-4deg);
  z-index: -2;
}

h1, h2 { font-family: var(--title); font-weight: 700; line-height: .95; margin: 0; }
h1 { font-size: clamp(4rem, 15vw, 12rem); color: var(--vermilion); letter-spacing: -.05em; text-shadow: 3px 4px 0 rgba(59,42,33,.17); }
h2 { font-size: clamp(2.7rem, 6vw, 6.8rem); color: var(--ink); }
p { font-size: clamp(1rem, 1.6vw, 1.35rem); line-height: 1.65; }
.inventory { font-family: var(--mono); font-size: .76rem; letter-spacing: .16em; color: var(--vermilion); text-transform: uppercase; margin: 0 0 14px; }
.handwritten { font-family: var(--hand); color: var(--moss); }

.scene-envelope { background: radial-gradient(circle at 50% 48%, #39415b, var(--indigo) 60%); }
.envelope {
  width: min(82vw, 980px); height: min(70vh, 620px); position: relative;
  filter: drop-shadow(0 38px 35px rgba(0,0,0,.36));
  transform: rotate(-1deg); transition: transform .8s cubic-bezier(.2,.9,.2,1);
}
.envelope.open { transform: rotate(1.5deg) translateY(-2vh); }
.envelope-shadow, .paper-flap, .stamp-reveal {
  position: absolute; inset: 0; background: var(--paper);
  background-image: radial-gradient(circle at 12% 20%, rgba(59,42,33,.08), transparent 2px), radial-gradient(circle at 72% 80%, rgba(227,66,52,.08), transparent 2px), repeating-linear-gradient(80deg, transparent 0 8px, rgba(59,42,33,.035) 9px 10px);
}
.envelope-shadow { transform: translate(18px, 20px); background: rgba(59,42,33,.22); }
.top-flap { clip-path: polygon(0 0, 100% 0, 50% 54%); transform-origin: top; transition: transform .85s cubic-bezier(.2,.9,.2,1); }
.envelope.open .top-flap { transform: rotateX(72deg) translateY(-10px); }
.side-flap.left { clip-path: polygon(0 0, 50% 52%, 0 100%); opacity: .95; }
.side-flap.right { clip-path: polygon(100% 0, 50% 52%, 100% 100%); opacity: .9; }
.stamp-reveal { inset: 11% 12%; display: grid; place-content: center; text-align: center; padding: 5vw; transform: scale(.92); opacity: 0; transition: opacity .6s .35s, transform .6s .35s; border: 2px dashed rgba(227,66,52,.42); }
.envelope.open .stamp-reveal { opacity: 1; transform: scale(1); }
.stamp-reveal p:last-child { font-family: var(--hand); font-size: clamp(1.15rem, 2.3vw, 2rem); margin: 12px 0 0; }
.vermilion-seal {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 5;
  width: 106px; height: 106px; border: 0; border-radius: 50%;
  background: var(--vermilion); color: var(--paper); font: 3rem var(--title);
  box-shadow: inset 0 -10px 0 rgba(59,42,33,.18), 0 9px 0 rgba(59,42,33,.2);
  cursor: pointer; transition: transform .2s, opacity .45s;
}
.vermilion-seal:hover { transform: scale(.96); }
.envelope.open .vermilion-seal { opacity: .12; transform: scale(1.8) rotate(18deg); }
.paw-press { position: absolute; z-index: 4; left: 46%; top: 42%; width: 150px; height: 130px; opacity: .6; animation: pawPress 2.7s ease-in-out infinite; }
.paw-press span { position: absolute; background: var(--paw); border-radius: 50%; filter: blur(.3px); }
.paw-press span:first-child { width: 62px; height: 58px; left: 42px; top: 48px; }
.paw-press span:nth-child(2) { width: 28px; height: 34px; left: 20px; top: 20px; }
.paw-press span:nth-child(3) { width: 28px; height: 34px; left: 62px; top: 8px; }
.paw-press span:nth-child(4) { width: 28px; height: 34px; left: 104px; top: 24px; }
@keyframes pawPress { 50% { transform: scale(1.08); opacity: .85; } }
.scroll-note { position: absolute; bottom: 7vh; color: var(--paper); transform: rotate(-3deg); font-size: 1.3rem; }
.moon-crumbs i { position: absolute; width: 8px; height: 8px; background: var(--lantern); border-radius: 50%; box-shadow: 0 0 22px var(--lantern); }
.moon-crumbs i:nth-child(1) { left: 15%; top: 18%; }.moon-crumbs i:nth-child(2) { right: 18%; top: 28%; }.moon-crumbs i:nth-child(3) { left: 31%; bottom: 16%; }.moon-crumbs i:nth-child(4) { right: 33%; bottom: 19%; }

.braided-cord { position: absolute; inset: 0; z-index: 4; pointer-events: stroke; cursor: grab; }
.braided-cord path { fill: none; stroke-width: 18; stroke-linecap: round; stroke-dasharray: 24 22; filter: drop-shadow(3px 4px 0 rgba(59,42,33,.18)); stroke-dashoffset: var(--cord-offset, 900); transition: stroke-dashoffset .7s ease-out; }
.cord-white { stroke: var(--paper); }.cord-red { stroke: var(--vermilion); stroke-dasharray: 22 24; }
.scene.in-view .braided-cord path { stroke-dashoffset: 0; }

.artifact, .prayer-strip, .final-packet {
  position: relative; z-index: 8; max-width: min(680px, 78vw); padding: clamp(28px, 5vw, 58px);
  background: var(--paper); box-shadow: 12px 14px 0 rgba(59,42,33,.2), inset 0 0 0 2px rgba(59,42,33,.08);
  background-image: repeating-linear-gradient(92deg, rgba(255,255,255,.2) 0 2px, transparent 2px 10px), radial-gradient(circle at 80% 12%, rgba(248,184,78,.18), transparent 18%);
}
.title-plaque { margin-left: 28vw; margin-top: 12vh; clip-path: polygon(7% 0, 100% 5%, 94% 92%, 8% 100%, 0 49%); transform: rotate(2deg); }
.hook { position: absolute; top: -32px; left: 50%; width: 90px; height: 54px; border: 8px solid var(--ink); border-bottom: 0; border-radius: 50px 50px 0 0; }
.paper-torii { position: absolute; left: 9vw; top: 18vh; width: 360px; height: 400px; transform: rotate(-7deg); z-index: 6; }
.paper-torii span { position: absolute; background: var(--vermilion); box-shadow: 8px 10px 0 rgba(59,42,33,.18); }
.beam.top { width: 360px; height: 42px; top: 0; clip-path: polygon(3% 0, 100% 12%, 94% 100%, 0 80%); }
.beam.lower { width: 290px; height: 34px; left: 35px; top: 82px; }
.pillar { width: 42px; height: 300px; top: 92px; }.pillar.left { left: 70px; }.pillar.right { right: 70px; }.tie { width: 70px; height: 70px; left: 145px; top: 118px; transform: rotate(45deg); background: var(--paper) !important; border: 8px solid var(--vermilion); }
.bell { position: absolute; right: 17vw; top: 23vh; z-index: 9; width: 58px; height: 62px; background: var(--lantern); border-radius: 50% 50% 44% 44%; border: 4px solid var(--ink); transform-origin: 50% -40px; animation: bellSway 3.5s ease-in-out infinite; }
.bell::before { content:""; position:absolute; left: 24px; top:-54px; width:5px; height:55px; background:var(--vermilion); }.bell span { position:absolute; left:22px; bottom:-10px; width:14px; height:14px; border-radius:50%; background:var(--ink); }
.bell.tremble { animation: bellTremble .38s ease-in-out 4; }
@keyframes bellSway { 50% { transform: rotate(7deg); } }
@keyframes bellTremble { 25% { transform: rotate(-13deg); } 75% { transform: rotate(13deg); } }
.paw-trail { position:absolute; left:26vw; bottom:17vh; display:flex; gap:34px; transform:rotate(-17deg); z-index:10; }
.paw-trail button { width:42px; height:36px; border:0; background:var(--paw); border-radius:50%; opacity:.75; cursor:pointer; box-shadow: 0 -18px 0 -8px var(--paw), 15px -12px 0 -9px var(--paw), -15px -12px 0 -9px var(--paw); }

.scene-gravel::before { background: #eadfc8; }
.raked-gravel { position:absolute; inset:16vh 9vw; border-radius:45%; opacity:.34; background: repeating-radial-gradient(ellipse, transparent 0 17px, rgba(59,42,33,.24) 18px 20px, transparent 21px 36px); transform:rotate(8deg); }
.prayer-strip { margin-right:30vw; transform:rotate(-2deg); clip-path: polygon(0 2%, 96% 0, 100% 92%, 4% 100%); }
.basin { position:absolute; right:18vw; bottom:18vh; width:220px; height:170px; border-radius:45% 45% 50% 50%; background:var(--moss); padding:24px; transform:rotate(5deg); }
.water { height:100%; border-radius:50%; background:rgba(29,36,55,.85); position:relative; overflow:hidden; }
.water span { position:absolute; inset:25%; border:2px solid var(--paw); border-radius:50%; animation:ripple 2.6s infinite; opacity:0; }.water span:nth-child(2){animation-delay:.7s}.water span:nth-child(3){animation-delay:1.4s}
@keyframes ripple { 0%{transform:scale(.3);opacity:.7} 100%{transform:scale(2.2);opacity:0} }
.fox-tail { position:absolute; right:11vw; top:20vh; width:150px; height:310px; background:var(--vermilion); clip-path:polygon(48% 0, 91% 23%, 70% 100%, 33% 100%, 52% 33%, 14% 15%); opacity:.9; transform:rotate(14deg); }
.fox-tail::after { content:""; position:absolute; left:34px; top:0; width:72px; height:80px; background:var(--paper); clip-path:polygon(50% 0,100% 90%,0 90%); }

.scene-counter::before { clip-path: polygon(0 7%, 94% 0, 100% 100%, 6% 94%); }
.cedar-rail { position:absolute; left:0; right:0; bottom:12vh; height:120px; background:linear-gradient(90deg, #2d1d16, var(--ink), #4d3428); box-shadow:0 -12px 0 rgba(59,42,33,.16); transform:rotate(-2deg); }
.charm-counter { transform:rotate(1.3deg); }
.charms { display:flex; gap:22px; flex-wrap:wrap; margin-top:28px; }
.charm { width:150px; height:205px; position:relative; border:0; background:transparent; perspective:800px; cursor:pointer; font-family:var(--hand); color:var(--paper); }
.charm span { position:absolute; inset:0; display:grid; place-items:center; padding:20px; border-radius:18px 18px 28px 28px; backface-visibility:hidden; transition:transform .65s cubic-bezier(.2,.9,.2,1); box-shadow:8px 9px 0 rgba(59,42,33,.2); clip-path:polygon(15% 0,85% 0,100% 18%,100% 100%,0 100%,0 18%); }
.charm .front { background:var(--vermilion); font-size:3rem; }.charm small { font: .9rem var(--mono); letter-spacing:.12em; }.charm .back { background:var(--moss); color:var(--paper); transform:rotateY(180deg); font-size:1.25rem; }
.charm.flipped .front { transform:rotateY(180deg); }.charm.flipped .back { transform:rotateY(360deg); }
.stamp-blocks { position:absolute; right:13vw; top:16vh; display:grid; gap:18px; transform:rotate(8deg); }
.stamp-blocks span { display:grid; place-items:center; width:86px; height:86px; background:var(--vermilion); color:var(--paper); font-family:var(--title); font-size:1.7rem; border:5px solid rgba(59,42,33,.25); opacity:.85; }

.scene-lantern { background: radial-gradient(circle at 22% 25%, rgba(248,184,78,.24), transparent 28%), linear-gradient(130deg, var(--indigo), #101522); }
.lantern-room { position:absolute; inset:12vh 9vw; z-index:5; }
.lantern { position:absolute; left:15%; top:5%; width:120px; height:170px; border-radius:48%; background:var(--lantern); box-shadow:0 0 70px 22px rgba(248,184,78,.42); animation:flicker 2.2s infinite; border:5px solid var(--ink); }
.lantern.small { left:auto; right:14%; top:20%; transform:scale(.72); animation-delay:.5s; }
.lantern::before { content:""; position:absolute; left:50%; top:-66px; width:5px; height:70px; background:var(--vermilion); }.lantern span { position:absolute; inset:16px; border-left:2px solid rgba(59,42,33,.32); border-right:2px solid rgba(59,42,33,.32); }
@keyframes flicker { 0%,100%{filter:brightness(1)} 45%{filter:brightness(1.18)} 70%{filter:brightness(.88)} }
.paper-screen { position:absolute; right:25%; bottom:8%; width:340px; height:430px; background:rgba(246,234,210,.7); border:9px solid var(--ink); box-shadow:14px 18px 0 rgba(0,0,0,.18); overflow:hidden; }
.tail-shadow { position:absolute; left:90px; top:80px; width:170px; height:280px; background:var(--indigo); opacity:.55; clip-path:polygon(50% 0,90% 25%,65% 100%,35% 100%,52% 31%,13% 18%); animation:tailPeek 4s ease-in-out infinite; }
@keyframes tailPeek { 50% { transform:translateX(30px) rotate(5deg); } }
.note-pocket { margin-left:-24vw; transform:rotate(-2deg); }
.whiskers { position:absolute; right:18vw; bottom:23vh; width:230px; height:90px; z-index:8; }
.whiskers i { position:absolute; left:0; right:0; height:3px; background:var(--ink); border-radius:50%; transform-origin:left center; }.whiskers i:nth-child(1){top:10px;transform:rotate(-12deg)}.whiskers i:nth-child(2){top:42px}.whiskers i:nth-child(3){top:74px;transform:rotate(12deg)}

.scene-offering::before { background:var(--paper); clip-path:polygon(4% 0,100% 6%,94% 98%,0 91%); }
.sleepy-cushion { position:absolute; left:13vw; bottom:17vh; width:330px; height:150px; background:var(--paw); border-radius:50%; box-shadow:12px 16px 0 rgba(59,42,33,.2); transform:rotate(-8deg); }
.sleepy-cushion .nose { position:absolute; left:55%; top:45%; width:22px; height:16px; background:var(--ink); border-radius:50%; }.sleepy-cushion .paw { position:absolute; left:25%; top:36%; width:55px; height:45px; background:rgba(246,234,210,.8); border-radius:50%; }
.final-packet { margin-left:28vw; transform:rotate(2deg); overflow:hidden; }
.packet-flap { position:absolute; inset:0 0 auto 0; height:44%; background:rgba(227,66,52,.12); clip-path:polygon(0 0,100% 0,50% 100%); transform-origin:top; transition:transform .8s; }
.final-packet.closed .packet-flap { transform:rotateX(72deg); }
.blessing-button { margin-top:20px; border:3px solid var(--vermilion); background:var(--vermilion); color:var(--paper); padding:14px 20px; font:1rem var(--mono); text-transform:uppercase; letter-spacing:.09em; cursor:pointer; box-shadow:6px 6px 0 rgba(59,42,33,.22); }
.ink-bloom { position:absolute; right:42px; bottom:36px; width:110px; height:110px; border-radius:50%; display:grid; place-items:center; background:var(--vermilion); color:var(--paper); font-family:var(--title); font-size:1.8rem; transform:scale(0) rotate(-12deg); opacity:0; transition:transform .55s cubic-bezier(.2,1.5,.4,1), opacity .35s; }
.ink-bloom.show { transform:scale(1) rotate(-12deg); opacity:.95; }
.shide { position:absolute; right:13vw; top:16vh; display:flex; gap:22px; transform:rotate(10deg); }.shide span { width:48px; height:180px; background:var(--paper); clip-path:polygon(0 0,100% 0,63% 32%,100% 32%,50% 65%,84% 65%,0 100%); box-shadow:6px 7px 0 rgba(59,42,33,.15); }

.scene .artifact, .scene .prayer-strip, .scene .final-packet, .paper-torii, .basin, .fox-tail, .lantern-room, .sleepy-cushion, .shide { opacity:0; transform: translateY(38px) rotate(var(--r, 0deg)); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.9,.2,1); }
.scene.in-view .artifact, .scene.in-view .prayer-strip, .scene.in-view .final-packet, .scene.in-view .paper-torii, .scene.in-view .basin, .scene.in-view .fox-tail, .scene.in-view .lantern-room, .scene.in-view .sleepy-cushion, .scene.in-view .shide { opacity:1; transform: translateY(0) rotate(var(--r, 0deg)); }
.title-plaque { --r: 2deg; }.paper-torii { --r: -7deg; }.prayer-strip { --r: -2deg; }.basin { --r: 5deg; }.fox-tail { --r: 14deg; }.charm-counter { --r: 1.3deg; }.note-pocket { --r: -2deg; }.final-packet { --r: 2deg; }.sleepy-cushion { --r: -8deg; }.shide { --r: 10deg; }

body.cord-pulled .scene.in-view .artifact, body.cord-pulled .scene.in-view .prayer-strip, body.cord-pulled .scene.in-view .final-packet { transform: translateX(-18px) rotate(var(--r, 0deg)); }

@media (max-width: 760px) {
  .progress-talisman { right: 8px; transform: translateY(-50%) scale(.75); }
  .scene::before { inset: 5vh 3vw; }
  .title-plaque, .prayer-strip, .note-pocket, .final-packet { margin: 0; max-width: 86vw; }
  .paper-torii { left: -30px; top: 10vh; transform: scale(.64) rotate(-7deg); }
  .basin, .fox-tail, .stamp-blocks, .whiskers { display: none; }
  .charms { justify-content: center; }
  .charm { width: 118px; height: 164px; }
  .sleepy-cushion { left: 4vw; width: 220px; }
}