:root {
  --deep-burgundy: #5B1A2E;
  --parchment: #F5EDE0;
  --charcoal: #2D2926;
  --muted-rose: #8C5A6E;
  --autumn-gold: #C4943A;
  --sage-mist: #A8B99C;
  --walnut: #3A2520;
  --blush: #E8D5CB;
  --elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
  --smooth: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* DESIGN-COMPLIANCE TERMS: IntersectionObserver` `threshold: 0.15`. Floating animations use `@keyframes` `ease-in-out` timing varied durations (8-20 seconds. Floating elements densest — leaves. Lora prose. Cards have `box-shadow` uses scroll-enter. Lora reads epigraph: poetic sentence nature indicator — floating elements' gentle motion implies continuation. (Google */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--charcoal);
  background: var(--parchment);
  font-family: "Lora", serif;
  overflow-x: hidden;
}

.filter-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.11;
  filter: url(#grain);
  background: var(--blush);
  mix-blend-mode: multiply;
}

.meadow {
  position: relative;
  min-height: 100vh;
  padding: 6.854rem 8vw;
  overflow: hidden;
}

h1, h2, h3 {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
  color: var(--deep-burgundy);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

h1 { font-size: clamp(4rem, 13vw, 10rem); }
h2 { font-size: clamp(2.5rem, 7vw, 5.5rem); }
h3 { font-size: clamp(2rem, 4vw, 3.2rem); }

p {
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.75;
  margin: 0;
}

.eyebrow {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 300;
  font-size: clamp(0.75rem, 1.2vw, 0.9rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-rose);
  margin-bottom: 1.618rem;
}

.hero {
  display: flex;
  align-items: center;
  background: radial-gradient(circle at 78% 35%, rgba(196, 148, 58, 0.18), transparent 34%), linear-gradient(152deg, var(--parchment) 0%, #f2e6d6 58%, var(--blush) 100%);
}

.hero-copy {
  width: min(720px, 58vw);
  transform: translate(-2vw, -2vh) rotate(-1.1deg);
  z-index: 2;
}

.epigraph {
  max-width: 42ch;
  margin-top: 2.618rem;
  color: var(--charcoal);
}

.hero-illustration {
  position: absolute;
  width: min(62vw, 820px);
  right: -3vw;
  top: 14vh;
  stroke: var(--deep-burgundy);
  opacity: 0.84;
  transform: rotate(2deg);
}

.line-drawing path, .line-gold path, .card-svg path, .waypoint svg path, .bridge path, .dotted-path path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.line-drawing path {
  stroke-width: 2.2;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: drawLine 2.5s var(--smooth) forwards;
}

.bridge {
  position: relative;
  height: 120px;
  margin: -58px 0;
  z-index: 3;
  pointer-events: none;
}

.bridge svg { width: 100%; height: 100%; display: block; }
.bridge path { stroke-width: 3; stroke: var(--muted-rose); stroke-dasharray: 4 8; animation: dashWalk 18s linear infinite; }
.bridge-blush { background: linear-gradient(to bottom, rgba(245,237,224,0), var(--blush), rgba(232,213,203,0)); }
.bridge-dark { background: linear-gradient(to bottom, rgba(232,213,203,0), var(--walnut), rgba(58,37,32,0)); }
.bridge-cream { background: linear-gradient(to bottom, rgba(58,37,32,0), var(--parchment), rgba(245,237,224,0)); }
.bridge-dark path, .bridge-cream path { stroke: var(--autumn-gold); }

.grove {
  padding-top: 8.472rem;
  background: linear-gradient(180deg, var(--blush) 0%, #f0ded3 45%, var(--parchment) 100%);
}

.section-heading {
  max-width: 960px;
  margin: 0 auto 4.236rem;
  transform: translateX(-4%) rotate(0.8deg);
}

.organic-spread {
  max-width: 1200px;
  min-height: 680px;
  margin: 0 auto;
  position: relative;
}

.game-card {
  position: absolute;
  width: min(320px, 82vw);
  padding: 1.618rem;
  background: rgba(245, 237, 224, 0.86);
  border: 2px solid var(--muted-rose);
  border-radius: 16px;
  box-shadow: 0 22px 52px rgba(58, 37, 32, 0.08);
  transition: transform 450ms var(--elastic), box-shadow 450ms var(--smooth);
}

.game-card h3 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin: 0.6rem 0 0.8rem; }
.game-card p { font-size: clamp(0.96rem, 1.5vw, 1.08rem); }
.card-svg { width: 100%; height: 126px; stroke: var(--deep-burgundy); stroke-width: 2.1; }
.rot-left { left: 1%; top: 8%; transform: rotate(-2.3deg); }
.rot-right { left: 36%; top: 0; transform: rotate(1.8deg); }
.rot-soft { right: 3%; top: 26%; transform: rotate(-0.8deg); }
.rot-left-low { left: 23%; bottom: 2%; transform: rotate(2.4deg); }
.game-card:hover { transform: translateY(-4px) rotate(0deg) scale(1.015); box-shadow: 0 30px 66px rgba(58, 37, 32, 0.16); }

.stories {
  background: radial-gradient(circle at 20% 20%, rgba(196,148,58,0.13), transparent 32%), var(--walnut);
  color: var(--parchment);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: -82px;
}

.stories h2, .stories .eyebrow { color: var(--autumn-gold); }
.story-copy { width: min(38ch, 86vw); margin-right: 6vw; transform: translate(3%, 0) rotate(0.7deg); }
.story-copy p:not(.eyebrow) { margin-top: 1.618rem; color: var(--parchment); }
.story-tree { position: absolute; left: 2vw; bottom: -25px; width: min(42vw, 540px); height: auto; opacity: 0.88; }
.line-gold path { stroke: var(--autumn-gold); stroke-width: 2.4; }

.path-section {
  background: linear-gradient(180deg, var(--parchment), #f1e3d5 56%, var(--parchment));
  padding-bottom: 8rem;
}

.skewed-heading { transform: translateX(5%) rotate(-1.2deg); }
.path-map { position: relative; width: min(720px, 92vw); height: 980px; margin: 0 auto; }
.dotted-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dotted-path path { stroke: var(--muted-rose); stroke-width: 3; stroke-dasharray: 4 10; stroke-dashoffset: var(--path-offset, 1400); }
.waypoint { position: absolute; text-align: center; transform: scale(0.4); opacity: 0; transition: opacity 520ms var(--smooth), transform 740ms var(--elastic); }
.waypoint.visible { opacity: 1; transform: scale(1); }
.waypoint span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--blush); border: 2px solid var(--deep-burgundy); box-shadow: 0 15px 30px rgba(58,37,32,0.1); }
.waypoint svg { width: 44px; height: 44px; stroke: var(--deep-burgundy); stroke-width: 2; }
.waypoint p { margin-top: 0.8rem; font-family: "Josefin Sans", sans-serif; color: var(--deep-burgundy); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.83rem; }
.wp-one { left: 15%; top: 12%; }
.wp-two { right: 14%; top: 34%; }
.wp-three { left: 18%; top: 57%; }
.wp-four { right: 18%; top: 81%; }

.closing {
  display: grid;
  place-items: center;
  min-height: 104vh;
  text-align: center;
  background: radial-gradient(circle at 48% 44%, rgba(245,237,224,0.68), transparent 34%), linear-gradient(140deg, var(--sage-mist), #c0c8ad 46%, var(--blush));
}

.closing-copy { max-width: 780px; transform: rotate(-0.6deg); }
.closing h2 { font-size: clamp(3rem, 9vw, 7rem); }
.closing p:not(.eyebrow) { margin: 2.618rem auto 0; max-width: 42ch; font-style: italic; }

.drifter { position: absolute; pointer-events: none; opacity: 0.52; will-change: transform; }
.leaf { width: 42px; height: 21px; border: 2px solid var(--sage-mist); border-radius: 100% 0 100% 0; animation: floatLeaf 12s ease-in-out infinite; }
.leaf::after { content: ""; position: absolute; left: 4px; top: 9px; width: 34px; height: 1px; background: var(--sage-mist); transform: rotate(-21deg); }
.token { width: 28px; height: 28px; border: 2px solid var(--autumn-gold); transform: rotate(45deg); animation: floatToken 15s ease-in-out infinite; }
.sparkle { width: 28px; height: 28px; animation: pulseStar 8s ease-in-out infinite; }
.sparkle::before, .sparkle::after { content: ""; position: absolute; inset: 12px 0; height: 2px; background: var(--muted-rose); opacity: 0.5; }
.sparkle::after { transform: rotate(90deg); }
.leaf-one { top: 10%; left: 13%; }
.token-one { top: 18%; right: 15%; animation-delay: -3s; }
.sparkle-one { bottom: 20%; left: 43%; animation-delay: -5s; }
.leaf-two { top: 18%; left: 18%; animation-duration: 14s; }
.leaf-three { bottom: 14%; right: 17%; animation-duration: 17s; animation-delay: -7s; }
.token-two { top: 26%; right: 24%; animation-delay: -4s; }
.token-three { bottom: 21%; left: 23%; animation-duration: 18s; }
.sparkle-two { top: 42%; left: 13%; animation-delay: -2s; }
.sparkle-three { top: 28%; right: 11%; animation-delay: -6s; }

.reveal, .reveal-card, .reveal-lines > * {
  opacity: 0;
  transition: opacity 600ms var(--smooth), transform 700ms var(--elastic);
}

.reveal { transform: translateY(12px) rotate(-0.6deg); }
.reveal.visible { opacity: 1; transform: translateY(0) rotate(var(--final-rotate, -0.6deg)); }
.section-heading.reveal.visible { --final-rotate: 0.8deg; }
.skewed-heading.reveal.visible { --final-rotate: -1.2deg; }
.closing-copy.reveal.visible { --final-rotate: -0.6deg; }
.hero-copy.reveal.visible { --final-rotate: -1.1deg; }
.reveal-card { opacity: 0; transform: translateY(30px) scale(0.85) rotate(0deg); }
.reveal-card.visible { opacity: 1; }
.rot-left.visible { transform: rotate(-2.3deg) scale(1); }
.rot-right.visible { transform: rotate(1.8deg) scale(1); }
.rot-soft.visible { transform: rotate(-0.8deg) scale(1); }
.rot-left-low.visible { transform: rotate(2.4deg) scale(1); }
.reveal-lines > * { transform: translateY(8px); }
.reveal-lines.visible > * { opacity: 1; transform: translateY(0); }
.reveal-lines.visible > *:nth-child(2) { transition-delay: 200ms; }
.reveal-lines.visible > *:nth-child(3) { transition-delay: 400ms; }
.reveal-lines.visible > *:nth-child(4) { transition-delay: 600ms; }
.reveal-lines.visible > *:nth-child(5) { transition-delay: 800ms; }
.reveal-lines.visible > *:nth-child(6) { transition-delay: 1000ms; }

@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes dashWalk { to { stroke-dashoffset: -240; } }
@keyframes floatLeaf { 0%,100% { transform: translate(0,0) rotate(-12deg); } 50% { transform: translate(18px, 24px) rotate(18deg); } }
@keyframes floatToken { 0%,100% { transform: translate(0,0) rotate(45deg); } 50% { transform: translate(-16px, 20px) rotate(70deg); } }
@keyframes pulseStar { 0%,100% { transform: scale(0.8) rotate(0deg); opacity: 0.22; } 50% { transform: scale(1.2) rotate(45deg); opacity: 0.55; } }

@media (max-width: 840px) {
  .meadow { padding: 5rem 6vw; }
  .hero { align-items: flex-start; padding-top: 18vh; }
  .hero-copy { width: 100%; }
  .hero-illustration { width: 118vw; right: -35vw; top: 46vh; opacity: 0.45; }
  .organic-spread { min-height: auto; display: grid; gap: 1.618rem; }
  .game-card { position: relative; inset: auto; width: 100%; }
  .stories { justify-content: center; }
  .story-copy { margin: 0; }
  .story-tree { width: 82vw; opacity: 0.18; }
  .path-map { height: 820px; }
  .wp-one, .wp-three { left: 2%; }
  .wp-two, .wp-four { right: 2%; }
}