/* The quiet door — landing page for the site root (DECISIONS §19).
   Tokens lifted from app/style.css; this page and the app are one meadow. */

* { box-sizing: border-box; }
html, body { height: 100%; }
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;
  height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
  padding: calc(26px + env(safe-area-inset-top)) 24px
           calc(30px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wordmark { font-size: 12px; letter-spacing: .24em; color: #9aa7ba; }

.door { margin: auto 0; text-align: center; }
h1 {
  font-size: clamp(21px, 5.6vw, 27px);
  line-height: 1.5;
  font-weight: 400;
  margin: 0;
  color: #dfe5f0;
  text-wrap: balance;
}
.sub { font-size: 14px; color: #9aa7ba; margin: 10px 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; }

/* the grown sun, low on the page — 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;
}
.orbCanvas {
  position: absolute; left: 50%; top: 50%;
  width: 280px; height: 280px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
/* the shader module adds .alive to hide CSS-art suns; the landing has none */
#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;
}
@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; }
}