/**
 * Ours — public introduction (route #/).
 * Restrained scroll storytelling: sections reveal in editorial rhythm, the
 * fixed backdrop warms from quiet room → writing → fire → personal →
 * sharing. Everything respects prefers-reduced-motion (states remain,
 * motion stills). 200–400ms transitions only; no scroll-jacking.
 */

/* ── Backdrop stages (fixed; warmed by the scroll observer) ─────────── */
#landing-sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  transition: background 600ms ease;
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(232, 164, 100, 0.05) 0%, transparent 55%),
    linear-gradient(180deg, #17130F 0%, #1C1712 60%, #201A14 100%);
}
#landing-sky.stage-writing {
  background:
    radial-gradient(110% 80% at 50% 115%, rgba(232, 164, 100, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, #17130F 0%, #1E1813 60%, #221B15 100%);
}
#landing-sky.stage-fire {
  background:
    radial-gradient(130% 85% at 50% 108%, rgba(226, 140, 76, 0.16) 0%, rgba(180, 85, 45, 0.06) 42%, transparent 70%),
    linear-gradient(180deg, #17110D 0%, #1E1610 55%, #241A12 100%);
}
#landing-sky.stage-personal {
  background:
    radial-gradient(120% 80% at 50% 105%, rgba(232, 150, 84, 0.12) 0%, transparent 62%),
    linear-gradient(180deg, #18130F 0%, #1F1913 55%, #211A13 100%);
}
#landing-sky.stage-sharing {
  background:
    radial-gradient(115% 75% at 50% 100%, rgba(232, 164, 100, 0.07) 0%, transparent 58%),
    linear-gradient(180deg, #17130F 0%, #1C1712 60%, #1E1812 100%);
}

/* ── Hero: the entrance ─────────────────────────────────────────────── */
.land-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.land-hero-inner {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: var(--wide-frame, 1280px);
  margin: 0 auto;
  padding: 6rem var(--margin-mobile, 20px) 4rem;
}
@media (min-width: 768px) { .land-hero-inner { padding-inline: var(--margin-desktop, 40px); } }

/* Hearth illustration: authored CSS, a quiet fire in the lower right. */
.land-hearth {
  position: absolute;
  z-index: 0;
  right: -4%;
  bottom: -6%;
  width: min(52vw, 620px);
  aspect-ratio: 5 / 4;
  opacity: 0.9;
  pointer-events: none;
}
.land-hearth-wall {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #241D16 0%, #1B1510 78%);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(244, 239, 229, 0.05);
}
.land-hearth-box {
  position: absolute;
  left: 18%; bottom: 16%;
  width: 52%; height: 34%;
  background: #0B0908;
  border-radius: 10px 10px 4px 4px;
  overflow: hidden;
  box-shadow: inset 0 8px 26px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(244, 239, 229, 0.06);
}
.land-hearth-floor {
  position: absolute;
  left: 8%; right: 8%; bottom: 10%;
  height: 6%;
  background: #14100C;
  border-radius: 4px;
}
.land-logs { position: absolute; inset: auto 8% 12% 8%; height: 26%; }
.land-logs i {
  position: absolute; bottom: 0;
  width: 86%; height: 22%;
  border-radius: 999px;
  background: linear-gradient(180deg, #4A3A2A, #33281D);
}
.land-logs i + i { bottom: 22%; width: 70%; left: 12%; transform: rotate(-4deg); }
.land-flames { position: absolute; inset: 0; }
.land-flames i {
  position: absolute;
  bottom: 24%;
  width: 14%;
  aspect-ratio: 1 / 2.2;
  border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
  background: linear-gradient(180deg, rgba(240, 156, 82, 0.85), rgba(180, 85, 45, 0.55) 55%, transparent);
  filter: blur(1px);
  transform-origin: 50% 100%;
  animation: land-flame 2.6s ease-in-out infinite;
}
.land-flames i:nth-child(1) { left: 30%; animation-delay: 0s; height: 46%; }
.land-flames i:nth-child(2) { left: 42%; animation-delay: .5s; height: 60%; }
.land-flames i:nth-child(3) { left: 54%; animation-delay: .9s; height: 52%; }
.land-flames i:nth-child(4) { left: 63%; animation-delay: .2s; height: 38%; }
@keyframes land-flame {
  0%, 100% { transform: scaleY(1) skewX(0deg); opacity: .85; }
  50% { transform: scaleY(1.12) skewX(2deg); opacity: 1; }
}
.land-hearth::after {
  /* warm bounce light spilling from the box */
  content: "";
  position: absolute;
  left: 6%; bottom: 4%;
  width: 76%; height: 60%;
  background: radial-gradient(50% 55% at 44% 68%, rgba(232, 150, 84, 0.20), transparent 70%);
  pointer-events: none;
}

.land-bob { animation: land-bob 2.8s ease-in-out infinite; }
@keyframes land-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ── Sections: rhythm + reveal ──────────────────────────────────────── */
.land-section {
  position: relative;
  max-width: var(--wide-frame, 1280px);
  margin: 0 auto;
  padding: 5.5rem var(--margin-mobile, 20px);
}
@media (min-width: 768px) { .land-section { padding: 7.5rem var(--margin-desktop, 40px); } }

/* Sections clear the fixed public nav when scrolled to. */
.land-section,
.land-closing {
  scroll-margin-top: 5rem;
}

/* Editorial reveal: copy lifts softly as a section enters. */
[data-landing-section] .mask-line,
[data-landing-section] .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 400ms ease, transform 400ms ease;
}
[data-landing-section].in .mask-line,
[data-landing-section].in .reveal {
  opacity: 1;
  transform: none;
}
[data-landing-section].in .mask-line:nth-child(2) { transition-delay: 120ms; }
[data-landing-section].in .mask-line:nth-child(3) { transition-delay: 240ms; }

/* Example page: writing laid onto paper. */
.land-page {
  margin: 1.5rem auto 0;
  max-width: 620px;
  background: var(--card, #262019);
  border: 1px solid var(--hairline, #3A342A);
  border-radius: var(--r-lg, 10px);
  padding: 1.75rem 1.75rem 2rem;
  box-shadow: 0 24px 60px -40px rgba(0, 0, 0, 0.8);
}
@media (min-width: 768px) { .land-page { margin-top: -2rem; } }

/* Fire section: darker band with a low glow. */
.land-fire { max-width: none; background: linear-gradient(180deg, transparent, rgba(10, 8, 6, 0.55) 22%, rgba(10, 8, 6, 0.55) 78%, transparent); }
.land-fire > div:first-child,
.land-fire > .max-w-2xl { max-width: var(--wide-frame, 1280px); margin-inline: auto; padding-inline: inherit; }
.land-fire-glow { position: relative; height: 130px; margin-top: 2.5rem; }
.land-fire-glow i {
  position: absolute;
  left: 50%; bottom: 0;
  width: min(70vw, 760px); height: 120px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(50% 60% at 50% 100%, rgba(232, 150, 84, 0.22), transparent 72%);
  filter: blur(6px);
  animation: land-pulse 5s ease-in-out infinite;
}
.land-fire-glow i + i { width: min(46vw, 460px); height: 84px; animation-delay: 1.6s; opacity: .8; }
@keyframes land-pulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

/* Objects: small authored line drawings emerging near their copy. */
.land-objects {
  position: relative;
  height: 150px;
  margin-top: 2rem;
  color: rgba(240, 232, 216, 0.5);
}
.land-obj { position: absolute; bottom: 0; width: 92px; height: 150px; }
.land-obj-books { left: 4%; }
.land-obj-chair { left: 32%; width: 110px; }
.land-obj-lamp { left: 60%; }
.land-obj-plant { left: 84%; width: 78px; }
@media (max-width: 639px) {
  .land-obj-chair { left: 28%; }
  .land-obj-lamp { left: 56%; }
  .land-obj-plant { left: 80%; width: 64px; }
}

/* Sharing: one record passing from one person to another. */
.land-pass { display: flex; align-items: center; gap: 1.25rem; margin-top: 2.25rem; }
.land-pass-card {
  display: flex; align-items: center; gap: 0.9rem;
  background: var(--card, #262019);
  border: 1px solid var(--hairline, #3A342A);
  border-radius: var(--r-lg, 10px);
  padding: 0.9rem 1.1rem;
  max-width: 340px;
  box-shadow: 0 18px 44px -34px rgba(0, 0, 0, 0.8);
}
.land-pass-arrow { color: var(--ember, #B4552D); font-size: 20px; }
.land-pass-dot, .land-pass-dot-2 {
  width: 34px; height: 34px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 500 12px/1 var(--sans);
  background: var(--walnut-800, #211D16);
  color: var(--ivory, #F0E8D8);
  border: 1px solid rgba(244, 239, 229, 0.2);
  flex-shrink: 0;
}
.land-pass-dot-2 { border-color: rgba(232, 164, 100, 0.55); }

/* ── Closing + footer ───────────────────────────────────────────────── */
.land-closing {
  text-align: center;
  padding: 7rem var(--margin-mobile, 20px) 2rem;
}
.land-footer {
  margin-top: 6rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(244, 239, 229, 0.1);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem;
  max-width: var(--wide-frame, 1280px);
  margin-inline: auto;
  width: 100%;
}

/* ── Entry transition: the hero dims briefly, then the room resolves ── */
.land-hero { transition: opacity 280ms ease, filter 280ms ease; }
.land-hero.land-dim { opacity: 0; filter: brightness(0.5); }

/* ── Reduced motion: everything stills; states and content remain ───── */
@media (prefers-reduced-motion: reduce) {
  #landing-sky { transition: none; }
  .land-flames i, .land-fire-glow i, .land-bob { animation: none !important; }
  .land-hero { transition: none; }
  .land-hero.land-dim { opacity: 1; filter: none; }
  [data-landing-section] .mask-line,
  [data-landing-section] .reveal { opacity: 1; transform: none; transition: none; }
}