/* A Jerm Odyssey — base: tokens, type, buttons, hero */
:root {
  color-scheme: dark;
  --void: #0a0920;
  --deep: #14113a;
  --nebula: #241c62;
  --honey: #f5b83d;
  --honey-hi: #ffe08f;
  --pooh: #e5473b;
  --laser: #45e3d0;
  --far: #b56bff;
  --text: #efe8dc;
  --muted: #aaa4ca;
  --line: rgba(245, 184, 61, .28);
  --glass: rgba(15, 12, 46, .74);
  --paper: #f1e4c1;
  --paper-ink: #2b2113;
  --accent: var(--honey);
  --bg-a: #0b1a2c;
  --bg-b: #15382f;
  --f-display: 'IM Fell English', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --f-body: 'Crimson Pro', 'Iowan Old Style', Georgia, serif;
  --f-ui: 'Chakra Petch', ui-monospace, 'SF Mono', Menlo, monospace;
  --f-hand: 'Caveat', 'Bradley Hand', 'Segoe Script', cursive;
  --gutter: clamp(16px, 4vw, 48px);
  --col: 1180px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* per-act palettes: set on .act, .bg-layer and body */
[data-theme="woods"]   { --accent: #f5b83d; --bg-a: #0b1a2c; --bg-b: #17392f; }
[data-theme="loop"]    { --accent: #b58cff; --bg-a: #100a2e; --bg-b: #2d1258; }
[data-theme="stone"]   { --accent: #ffad5c; --bg-a: #180e0a; --bg-b: #35211a; }
[data-theme="lava"]    { --accent: #ff7a3d; --bg-a: #260906; --bg-b: #5c1b0a; }
[data-theme="siege"]   { --accent: #45e3d0; --bg-a: #08141d; --bg-b: #123441; }
[data-theme="bazaar"]  { --accent: #ff5fa8; --bg-a: #150720; --bg-b: #36103b; }
[data-theme="mine"]    { --accent: #ff6b57; --bg-a: #1b0c09; --bg-b: #3e1b13; }
[data-theme="far"]     { --accent: #7fd0ff; --bg-a: #0a0f2c; --bg-b: #1d1247; }
[data-theme="earth"]   { --accent: #d6c48e; --bg-a: #101318; --bg-b: #2b302c; }
[data-theme="party"]   { --accent: #ff9ad0; --bg-a: #1d1130; --bg-b: #40214f; }
[data-theme="train"]   { --accent: #d9b98a; --bg-a: #0c0e12; --bg-b: #292729; }
[data-theme="vatican"] { --accent: #ffd36a; --bg-a: #17110a; --bg-b: #47340f; }
[data-theme="return"]  { --accent: #f5b83d; --bg-a: #0d1428; --bg-b: #2c1930; }
[data-theme="lair"]    { --accent: #c47bff; --bg-a: #07030f; --bg-b: #2b0632; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font: 400 clamp(18px, .5vw + 15.4px, 21px)/1.62 var(--f-body);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
img, svg, canvas { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--honey-hi); }
:focus-visible { outline: 2px solid var(--honey-hi); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--honey); color: #1b1200; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* fixed atmosphere: gradient layers + star/particle canvas */
#bg { position: fixed; inset: 0; z-index: -3; background: var(--void); }
.bg-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease;
  background:
    radial-gradient(90% 70% at 50% 110%, color-mix(in srgb, var(--bg-b) 90%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bg-a), color-mix(in srgb, var(--bg-a) 55%, var(--bg-b))); }
.bg-layer.on { opacity: 1; }
#sky { position: fixed; inset: 0; z-index: -2; width: 100%; height: 100%; pointer-events: none; }
#grain { position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: 0; transition: opacity 1s;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay; animation: grain 1s steps(6) infinite; }
body[data-theme="earth"] #grain, body[data-theme="train"] #grain { opacity: .22; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); } 60% { transform: translate(-4%, -2%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }

/* type */
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 400; line-height: 1.06; margin: 0; text-wrap: balance; letter-spacing: -.005em; }
p { margin: 0 0 1em; text-wrap: pretty; }
.eyebrow { font: 500 12.5px/1.3 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin: 0 0 .9rem; }
.muted { color: var(--muted); }
.hand { font-family: var(--f-hand); font-weight: 500; }

/* buttons */
.btn { --c: var(--honey); display: inline-flex; align-items: center; gap: .6em; padding: .8em 1.35em;
  font: 600 13.5px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  color: var(--c); background: transparent; border: 1.5px solid color-mix(in srgb, var(--c) 70%, transparent);
  border-radius: 999px; transition: transform .25s var(--ease), background .25s, color .25s, box-shadow .25s; }
.btn:hover { background: var(--c); color: #1a1100; transform: translateY(-2px); box-shadow: 0 10px 30px -10px var(--c); }
.btn.primary { background: var(--c); color: #1a1100; }
.btn.primary:hover { background: var(--honey-hi); box-shadow: 0 12px 34px -8px var(--c); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn.sm { padding: .62em 1em; font-size: 12px; }

/* hero */
.hero { position: relative; width: 100%; max-width: calc(var(--col) + var(--gutter) * 2); margin: 0 auto;
  padding: clamp(84px, 11vh, 120px) var(--gutter) clamp(28px, 5vh, 56px);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(20px, 4vw, 64px); align-items: center; }
.hero-title { display: flex; flex-direction: column; gap: .2em; margin: 0 0 1.1rem; }
.hero-title .pre { font: 600 clamp(15px, 1.9vw, 22px)/1 var(--f-ui); letter-spacing: .5em; text-transform: uppercase; color: var(--honey); padding-left: .1em; }
.hero-title .main { font-family: var(--f-display); font-style: italic; font-size: clamp(3.6rem, 10.4vw, 8.6rem); line-height: .9; letter-spacing: -.02em;
  background: linear-gradient(180deg, #fff3cf 0%, var(--honey) 62%, #c9861e 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 26px rgba(245, 184, 61, .28)); padding-right: .08em; }
.hero .tagline { font-size: clamp(1.2rem, 1.3vw + .8rem, 1.6rem); max-width: 34ch; color: var(--text); margin-bottom: 1.6rem; }
.hero .tagline em { color: var(--honey-hi); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 2rem; }
.hero-stats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, auto); gap: 10px 26px; justify-content: start; }
.hero-stats li { display: flex; flex-direction: column; }
.hero-stats b { font: 600 clamp(1.5rem, 2.6vw, 2.2rem)/1 var(--f-ui); color: var(--honey-hi); font-variant-numeric: tabular-nums; }
.hero-stats span { font: 500 11px/1.3 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.hero-art { position: relative; aspect-ratio: 1 / 1; max-width: 560px; width: 100%; justify-self: center; }
.hero-art svg.tree { position: absolute; inset: 4% 6% 0; width: 88%; height: 96%; animation: bob 7s ease-in-out infinite; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-14px) rotate(.6deg); } }
.medal { position: absolute; width: clamp(64px, 11vw, 104px); aspect-ratio: 1; border-radius: 50%; padding: 4px;
  background: conic-gradient(from 210deg, var(--mc), #fff3cf, var(--mc)); box-shadow: 0 10px 34px -6px var(--mc), 0 0 0 1px rgba(0, 0, 0, .4);
  border: 0; transition: transform .35s var(--ease); animation: bob 6s ease-in-out infinite; }
.medal img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #10102a; }
.medal:hover { transform: scale(1.12) rotate(-3deg); z-index: 3; }
.medal .nm { position: absolute; left: 50%; bottom: -1.7em; transform: translateX(-50%); white-space: nowrap; font: 600 11px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text); text-shadow: 0 2px 8px #000; }
.medal:nth-of-type(2) { animation-delay: -1.4s; } .medal:nth-of-type(3) { animation-delay: -2.8s; } .medal:nth-of-type(4) { animation-delay: -4.2s; }
.scroll-hint { grid-column: 1 / -1; justify-self: center; font: 500 11px/1 var(--f-ui); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.scroll-hint i { width: 1px; height: 38px; background: linear-gradient(var(--honey), transparent); animation: drip 2.2s ease-in-out infinite; }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: 88px; }
  .hero-art { max-width: 420px; order: -1; }
  .hero-stats { grid-template-columns: repeat(2, auto); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}