/* ============================================================
   MY PET PUMPKIN — a story that grows
   mobile-first · scroll-driven · mood-shifting
   ============================================================ */

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

:root {
  --ease: cubic-bezier(.22, 1, .36, 1);
  --serif: "Spectral", Georgia, serif;
  --display: "Playfair Display", Georgia, serif;
  --hand: "Caveat", cursive;
}

/* ---------- mood palettes (crossfaded via body transition) ---------- */
body {
  --bg: #fdf3e3; --bg2: #f7dfb4;
  --ink: #472d1e; --ink-dim: #8a6a52;
  --accent: #e8730c; --glow: #ffce4d;
  --vine: #4e8a2b;
}
body[data-mood="day"]   { --bg:#fdeecb; --bg2:#fbd98f; --ink:#4a2c14; --ink-dim:#8f6b44; --accent:#e8730c; --glow:#ffce4d; --vine:#4e8a2b; }
body[data-mood="gold"]  { --bg:#f9dfa6; --bg2:#f2b95c; --ink:#4d2a10; --ink-dim:#8f6535; --accent:#d95f02; --glow:#ffe9a8; --vine:#5a8a2b; }
body[data-mood="dusk"]  { --bg:#48254e; --bg2:#7b3554; --ink:#ffd9b0; --ink-dim:#c99b84; --accent:#ff8c2f; --glow:#ffce4d; --vine:#7aa04a; }
body[data-mood="night"] { --bg:#131a30; --bg2:#25204a; --ink:#d8dcf0; --ink-dim:#8a90b8; --accent:#ffa64d; --glow:#ffe9a8; --vine:#4a6a3a; }
body[data-mood="blood"] { --bg:#0d0407; --bg2:#2a080d; --ink:#e8d5c8; --ink-dim:#8f7568; --accent:#d62828; --glow:#ff6b35; --vine:#2c4a1e; }
body[data-mood="frost"] { --bg:#05070d; --bg2:#101726; --ink:#dfe8f5; --ink-dim:#8792ab; --accent:#ffb347; --glow:#fff3c4; --vine:#3a5a30; }
body[data-mood="ember"] { --bg:#1c0f0a; --bg2:#3a2012; --ink:#f2ddc9; --ink-dim:#a5876c; --accent:#ff8c2f; --glow:#ffd27a; --vine:#4e7a2b; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--serif);
  color: var(--ink);
  background:
    radial-gradient(120vw 80vh at 50% -10%, var(--bg2), transparent 70%),
    var(--bg);
  transition: background 1.4s ease, color 1.4s ease;
  overflow-x: hidden;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

#book { position: relative; z-index: 2; }

/* ---------- panels ---------- */
.panel {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: clamp(3rem, 10vh, 6rem) 1.4rem;
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
}
.panel--short { min-height: 70svh; }
.panel--breather { min-height: 90svh; }
:where(.panel) p { max-width: 34ch; font-size: clamp(1.06rem, 2.6vw, 1.3rem); }

/* childlike chapters read a touch bigger + rounder */
:where(.ch--young .panel) p { font-weight: 400; }
:where(.ch--grown .panel) p { font-weight: 300; letter-spacing: .01em; }

/* ---------- chapter headings ---------- */
.chapnum span {
  display: block;
  font-family: var(--hand);
  font-size: 1.3rem;
  color: var(--accent);
  letter-spacing: .2em;
  margin-bottom: .4rem;
}
.chapnum h2 {
  font-size: clamp(2.2rem, 8vw, 3.6rem);
  line-height: 1.1;
  color: var(--ink);
}
.ch--young .chapnum h2 { font-family: var(--hand); font-weight: 700; }
.ch--grown .chapnum h2 { font-family: var(--display); font-weight: 800; font-style: italic; letter-spacing: .01em; }
.ch--grown .chapnum span { font-family: var(--display); font-style: italic; font-size: 1rem; }

/* ---------- text flourishes ---------- */
.drop { font-size: clamp(1.4rem, 4.5vw, 1.9rem) !important; font-family: var(--display); }
.big-line { font-family: var(--display); font-size: clamp(1.3rem, 4vw, 1.7rem) !important; font-weight: 600; line-height: 1.35; }
.hand { font-family: var(--hand); font-size: 1.25em; color: var(--accent); }
.gordo { font-family: var(--hand); font-size: 1.35em; color: var(--accent); font-weight: 700; }
em { font-style: italic; }
.quote {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.35rem, 4.5vw, 1.8rem) !important;
  line-height: 1.4;
  color: var(--accent);
  padding: .6rem 0;
}
.quote.glowing { text-shadow: 0 0 24px var(--glow), 0 0 60px var(--accent); }
.interlude {
  font-family: var(--display);
  font-size: clamp(1.5rem, 5.5vw, 2.3rem) !important;
  line-height: 1.4;
  max-width: 22ch !important;
}
.interlude span { display: block; margin-top: 1rem; font-size: .6em; font-style: italic; color: var(--ink-dim); }
.interlude.red { color: var(--accent); }
.fogword, .fogword-big {
  font-family: var(--hand);
  letter-spacing: .3em;
  color: var(--glow);
  text-shadow: 0 0 18px var(--glow);
}
.fogword-big { font-size: clamp(2.2rem, 9vw, 3.4rem) !important; }
.inventory p {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.05rem, 3vw, 1.25rem);
  padding: .3rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
.fin { font-size: clamp(1.6rem, 6vw, 2.4rem) !important; line-height: 1.6; }
.fin span { font-family: var(--display); letter-spacing: .4em; font-size: .8em; }
.fin small { font-family: var(--hand); font-size: .55em; color: var(--ink-dim); }

/* ---------- title screen ---------- */
.panel--title { min-height: 100svh; position: relative; }
.titlewrap { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.kicker { font-family: var(--hand); font-size: 1.25rem; color: var(--accent); letter-spacing: .12em; }
h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3rem, 14vw, 6.5rem);
  line-height: .95;
  letter-spacing: .02em;
  background: linear-gradient(160deg, var(--accent), #b34a0e 70%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.subtitle { font-family: var(--display); font-style: italic; font-size: clamp(1.1rem, 4vw, 1.5rem); color: var(--ink-dim); margin-top: .6rem; }
.warn { font-family: var(--hand); font-size: 1.05rem; color: var(--ink-dim); margin-top: 1.2rem; }
.art-hero { width: min(62vw, 260px); margin-bottom: .5rem; }

.scrollhint {
  position: absolute; bottom: max(1.6rem, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  font-family: var(--hand); font-size: 1.1rem; color: var(--ink-dim);
  animation: hintfade 3s ease infinite;
}
.scrollhint i {
  width: 2px; height: 44px; border-radius: 2px;
  background: linear-gradient(var(--accent), transparent);
  animation: hintdrop 1.8s var(--ease) infinite;
}
@keyframes hintdrop { 0% { transform: scaleY(0); transform-origin: top; } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes hintfade { 0%,100% { opacity: .9; } 50% { opacity: .5; } }

/* ---------- artwork ---------- */
.art { width: min(78vw, 340px); height: auto; overflow: visible; }
.art-sm { width: min(60vw, 240px); }
.art-big { width: min(88vw, 420px); }
.svgnote { font-family: var(--hand); font-size: 15px; fill: var(--ink-dim); }
.chalk { fill: #fdf3e3; font-size: 17px; }

/* ---------- rules card ---------- */
.rules {
  background: color-mix(in srgb, var(--bg2) 60%, #ffffff 25%);
  border: 2px dashed var(--accent);
  border-radius: 14px;
  padding: 1.6rem 1.8rem;
  rotate: -1.2deg;
  box-shadow: 0 14px 40px -18px rgba(0,0,0,.35);
  font-family: var(--hand);
  font-size: clamp(1.25rem, 4vw, 1.55rem);
  line-height: 1.7;
  color: #472d1e;
}
.rules-head { font-weight: 700; font-size: 1.15em; margin-bottom: .6rem; }
.rules ol { list-style: none; text-align: left; }
.rules li b { color: var(--accent); margin-right: .3rem; }

/* ---------- rating card ---------- */
.panel--rating { min-height: 100svh; }
.rating-card {
  background: #f5f0e6; color: #14100c;
  border: 3px solid #14100c;
  padding: 2rem 1.8rem;
  max-width: 24rem;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.8);
}
.rating-band { font-family: var(--display); font-weight: 600; letter-spacing: .22em; font-size: .8rem; }
.rating-R { font-family: var(--display); font-weight: 800; font-size: 7rem; line-height: 1; margin: .6rem 0 .4rem; }
.rating-reasons { font-family: var(--display); letter-spacing: .18em; font-size: .85rem; font-weight: 600; }
.rating-card hr { border: none; border-top: 2px solid #14100c; margin: 1.2rem 0; }
.rating-note { font-family: var(--serif); font-style: italic; font-size: .95rem; line-height: 1.6; }
.rating-note.dim { opacity: .55; margin-top: .5rem; }

/* ---------- recipe card ---------- */
.recipe {
  background: #f3ecd8;
  color: #3a2c1a;
  border-radius: 6px;
  rotate: 1.6deg;
  padding: 1.4rem 1.6rem 1rem;
  max-width: 22rem;
  box-shadow: 0 20px 60px -18px rgba(0,0,0,.7);
  background-image: repeating-linear-gradient(#0000 0 26px, #b8a67e44 26px 27px);
}
.recipe-tab { font-family: var(--display); font-weight: 600; font-size: .72rem; letter-spacing: .18em; border-bottom: 2px solid #a3241f; display: inline-block; padding-bottom: .2rem; }
.recipe-body { font-family: var(--hand); font-size: 1.5rem; line-height: 1.55; margin-top: .8rem; color: #7a1f1b; }
.recipe-init { font-family: var(--hand); text-align: right; font-size: 1.2rem; color: #3a2c1a; }

/* ---------- fogged window ---------- */
.window { position: relative; }
.window-frame {
  width: min(70vw, 280px); aspect-ratio: 3 / 4;
  border: 10px solid #241610;
  border-radius: 6px;
  background:
    radial-gradient(80% 60% at 50% 40%, #23384d, #0c1420 80%);
  box-shadow: inset 0 0 60px #00000090, 0 24px 70px -20px rgba(0,0,0,.85);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.window-frame::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, #ffffff14, transparent 45%);
}
.window-word {
  font-family: var(--hand);
  font-size: clamp(2.6rem, 12vw, 4rem);
  letter-spacing: .25em;
  color: #cfe4f5;
  text-shadow: 0 0 14px #cfe4f5aa;
  opacity: .92;
  transform: rotate(-3deg);
}
.window-vine { position: absolute; inset: 0; width: 100%; height: 100%; }
.tap { transform-origin: 100% 100%; animation: tap 2.6s ease-in-out infinite; }
@keyframes tap { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-4deg); } }

/* ---------- reveal engine ---------- */
.rv {
  opacity: 0;
  transform: translateY(34px);
  filter: blur(6px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform, filter;
}
.rv-s { transform: translateY(24px) scale(.92); }
.rv.on { opacity: 1; transform: none; filter: none; }

/* ---------- vine progress ---------- */
#vine {
  position: fixed; top: 0; left: 0; height: 100svh; width: 22px;
  z-index: 5; pointer-events: none;
}
#vinepath { stroke: var(--vine); stroke-width: 3.5; opacity: .85; transition: stroke 1.4s ease; }
#vinetip { fill: var(--accent); stroke: var(--glow); stroke-width: 2; transition: fill 1.4s ease; }

/* ---------- ambient particles ---------- */
#particles { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.pt { position: absolute; border-radius: 50%; opacity: 0; animation: drift linear infinite; }
.pt--seed  { width: 7px; height: 10px; background: #e8d5a3; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.pt--leaf  { width: 12px; height: 9px;  background: var(--vine); border-radius: 0 70% 0 70%; }
.pt--fire  { width: 5px; height: 5px;  background: var(--glow); box-shadow: 0 0 10px 2px var(--glow); }
.pt--snow  { width: 5px; height: 5px;  background: #eef3fb; }
.pt--ember { width: 4px; height: 4px;  background: var(--accent); box-shadow: 0 0 8px 2px var(--accent); }
@keyframes drift {
  0%   { transform: translate3d(0, 105vh, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: var(--o, .8); }
  92%  { opacity: var(--o, .8); }
  100% { transform: translate3d(var(--dx, 40px), -8vh, 0) rotate(var(--rot, 240deg)); opacity: 0; }
}
.pt.fall { animation-name: driftdown; }
@keyframes driftdown {
  0%   { transform: translate3d(0, -8vh, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: var(--o, .8); }
  92%  { opacity: var(--o, .8); }
  100% { transform: translate3d(var(--dx, 40px), 108vh, 0) rotate(var(--rot, 240deg)); opacity: 0; }
}

/* ---------- svg micro-animations ---------- */
.bob        { animation: bob 5s ease-in-out infinite; transform-origin: center; }
.bob-slow   { animation: bob 8s ease-in-out infinite; transform-origin: center; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.sun-spin { animation: sunspin 40s linear infinite; transform-origin: 262px 52px; }
@keyframes sunspin { to { transform: rotate(360deg); } }

.curl { stroke-dasharray: 90; stroke-dashoffset: 90; animation: drawin 2.4s var(--ease) .6s forwards; }
.draw { stroke-dasharray: 240; stroke-dashoffset: 240; }
.rv.on .draw, .rv.on.draw { animation: drawin 2.2s var(--ease) .3s forwards; }
.rv.on .d2 { animation-delay: 1s; } .rv.on .d3 { animation-delay: 1.6s; }
@keyframes drawin { to { stroke-dashoffset: 0; } }

.marks line { stroke-dasharray: 120; stroke-dashoffset: 120; }
.rv.on .m1 { animation: drawin 1s var(--ease) .2s forwards; }
.rv.on .m2 { animation: drawin 1s var(--ease) .5s forwards; }
.rv.on .m3 { animation: drawin 1s var(--ease) .8s forwards; }
.rv.on .m4 { animation: drawin 1s var(--ease) 1.1s forwards; }
.rv.on .m5 { animation: drawin 1s var(--ease) 1.4s forwards; }

.twinkle circle { animation: twk 2.6s ease-in-out infinite; }
.twinkle circle:nth-child(2) { animation-delay: .9s; }
.twinkle circle:nth-child(3) { animation-delay: 1.7s; }
.twinkle circle:nth-child(4) { animation-delay: .4s; }
@keyframes twk { 0%,100% { opacity: .25; } 50% { opacity: 1; } }

.tail-wag { animation: wag 1s ease-in-out infinite; transform-origin: 160px 150px; }
@keyframes wag { 0%,100% { transform: rotate(0); } 50% { transform: rotate(14deg); } }
.dog-breathe { animation: bob 4s ease-in-out infinite; }

.tilt { animation: tilt 3.4s ease-in-out infinite; transform-origin: 120px 100px; }
@keyframes tilt { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(3deg); } }
.drip { animation: drip 1.4s ease-in infinite; }
.drip.r2 { animation-delay: .45s; } .drip.r3 { animation-delay: .9s; }
@keyframes drip { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(44px); opacity: 0; } }

.rock { animation: rock 5s ease-in-out infinite; transform-origin: 130px 176px; }
@keyframes rock { 0%,100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }

.flicker { animation: flick 3.2s ease-in-out infinite; }
@keyframes flick { 0%,100% { opacity: 1; } 42% { opacity: .82; } 47% { opacity: .96; } 74% { opacity: .86; } }

.pulse { animation: pulse 3.2s ease-in-out infinite; transform-origin: center; }
@keyframes pulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

.snowfall circle { animation: snow 5s linear infinite; }
.snowfall circle:nth-child(odd) { animation-duration: 7s; animation-delay: 1.4s; }
@keyframes snow { 0% { transform: translateY(-16px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(120px); opacity: 0; } }

.rainfall line { animation: rain 1s linear infinite; }
.rainfall line:nth-child(odd) { animation-delay: .5s; }
@keyframes rain { 0% { transform: translateY(-12px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(90px); opacity: 0; } }

.loom { animation: loom 7s ease-in-out infinite; transform-origin: center; }
@keyframes loom { 0%,100% { transform: scale(1); } 50% { transform: scale(1.025); } }
.maw-breathe { animation: maw 5s ease-in-out infinite; transform-origin: 160px 180px; }
@keyframes maw { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(1.08); } }

.hero-smile { stroke-dasharray: 90; stroke-dashoffset: 90; animation: drawin 1.6s var(--ease) 1.2s forwards; }

/* ---------- desktop ---------- */
@media (min-width: 760px) {
  .panel { gap: 1.8rem; }
  :where(.panel) p { max-width: 38ch; }
  #vine { width: 30px; }
  .art { width: min(40vw, 400px); }
  .art-big { width: min(48vw, 500px); }
  body {
    background:
      radial-gradient(90vw 70vh at 50% -10%, var(--bg2), transparent 70%),
      radial-gradient(60vw 60vh at 105% 110%, color-mix(in srgb, var(--bg2) 60%, transparent), transparent 70%),
      var(--bg);
  }
}

/* ---------- vignette for dark chapters ---------- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.55));
  opacity: 0; transition: opacity 1.4s ease;
}
body[data-mood="blood"]::after, body[data-mood="frost"]::after { opacity: 1; }
body[data-mood="night"]::after, body[data-mood="ember"]::after { opacity: .5; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { transition-duration: .01s; transform: none; filter: none; }
  .pt, .bob, .bob-slow, .sun-spin, .tilt, .rock, .loom, .maw-breathe,
  .tail-wag, .dog-breathe, .tap, .scrollhint i { animation: none !important; }
  .draw, .curl, .marks line, .hero-smile { stroke-dashoffset: 0 !important; animation: none !important; }
}