/* The three-frame landing (DECISIONS §19 amended; copy P1 · C3 · B2).
   Tokens shared with app/style.css; one meadow.
   DEFAULT (no JS): slides stack as a plain scrolling page — the words
   never depend on the pager. landing.js adds #frame.paged for the §17
   one-breath page turns. */

/* the display voice (user ruling 2026-08-20): Gloock, self-hosted */
@font-face {
  font-family: 'Gloock';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url(/app/gloock-400.woff2) format('woff2');
}

* { box-sizing: border-box; }
html { background: #090e18; }
body {
  margin: 0;
  color: #dfe5f0;
  background: linear-gradient(180deg, #090e18 0%, #0d1422 55%, #0f1b2b 100%);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#frame {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  overflow: hidden;
}

/* ---- static default: a plain page, every word reachable ---- */
.lslide {
  position: relative;
  min-height: 100dvh;
  padding: calc(26px + env(safe-area-inset-top)) 24px
           calc(64px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.inner { text-align: center; }

.eyebrow { font-size: 14px; letter-spacing: .12em; color: #9aa7ba; margin: 0 0 10px; }
.bigname {
  font-family: 'Gloock', Georgia, serif;
  font-size: clamp(36px, 11vw, 48px);
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
  color: #edf2fa;
  text-wrap: balance;
}
.lyric {
  font-family: 'Gloock', Georgia, serif;
  font-size: clamp(22px, 6.2vw, 28px);
  font-weight: 400;
  line-height: 1.45;
  margin: 0;
  color: #e6ebf4;
  text-wrap: balance;
}
.answer {
  font-size: 16px;
  line-height: 1.65;
  color: #b7c1d2;
  margin: 18px auto 0;
  max-width: 40ch;
  text-wrap: balance;
}
.sub { font-size: 14px; color: #9aa7ba; margin: 12px 0 0; }

.btn {
  display: inline-block;
  margin-top: 34px;
  text-decoration: none;
  font-size: 15px;
  padding: 12px 26px;
  min-height: 44px;
  border-radius: 11px;
  color: #edf5da;
  border: 1px solid rgba(214, 235, 170, .5);
  background: linear-gradient(180deg, rgba(158,196,108,.20), rgba(158,196,108,.06)),
              rgba(13, 20, 34, .55);
  box-shadow: 0 0 14px rgba(205,240,150,.14), inset 0 0 8px rgba(205,240,150,.06);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: box-shadow .25s ease, transform .12s ease;
}
.btn:hover { box-shadow: 0 0 22px rgba(205,240,150,.3), inset 0 0 10px rgba(205,240,150,.1); }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 1.5px solid rgba(214,235,170,.8); outline-offset: 3px; }

.cue {
  margin-top: 34px;
  text-align: center;
  color: #7e8ba0;
  font-size: 18px;
}

/* ---- paged mode: the §17 mechanic — a scroll is an event ---- */
#frame.paged { height: 100dvh; }
#frame.paged .lslide {
  position: absolute;
  inset: 0;
  min-height: 0;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#frame.paged .lslide.active { opacity: 1; visibility: visible; pointer-events: auto; }
#frame.paged .lslide.active.exitUp { animation: lsExitUp .38s cubic-bezier(0.4, 0, 0.7, 1) forwards; }
#frame.paged .lslide.active.exitDown { animation: lsExitDown .38s cubic-bezier(0.4, 0, 0.7, 1) forwards; }
@keyframes lsExitUp { to { opacity: 0; transform: translateY(-18px); } }
@keyframes lsExitDown { to { opacity: 0; transform: translateY(18px); } }
#frame.paged .lslide.active.enterFromBelow { animation: lsEnterBelow .5s cubic-bezier(0.2, 0, 0.2, 1) both; }
#frame.paged .lslide.active.enterFromAbove { animation: lsEnterAbove .5s cubic-bezier(0.2, 0, 0.2, 1) both; }
@keyframes lsEnterBelow { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes lsEnterAbove { from { opacity: 0; transform: translateY(-22px); } to { opacity: 1; transform: none; } }
#frame.paged .lslide.enterFromBelow, #frame.paged .lslide.enterFromAbove { z-index: 1; }
.noanim #frame.paged .lslide { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  #frame.paged .lslide { animation: none !important; }
}

/* the grown sun, painted by app/orb-shader.js */
#orb {
  position: absolute;
  left: 50%;
  bottom: 34px;
  width: 51px;
  height: 51px;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.orbCanvas {
  position: absolute; left: 50%; top: 50%;
  width: 280px; height: 280px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* kills the iOS layer-boundary square (see app/style.css note) */
  -webkit-mask-image: radial-gradient(circle closest-side, #000 55%, transparent 97%);
  mask-image: radial-gradient(circle closest-side, #000 55%, transparent 97%);
}
#orb.alive { background: none; }

/* fireflies, spawned by landing.js */
.fly {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(205, 240, 150, .8);
  box-shadow: 0 0 8px 2px rgba(205, 240, 150, .45);
  animation: drift 9s ease-in-out infinite;
  z-index: 0;
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0); opacity: .5; }
  50% { transform: translate(9px, -14px); opacity: 1; }
}

.noanim .fly, .noanim .btn { animation: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .fly { animation: none; }
  .btn { transition: none; }
  .btn:active { transform: none; }
}