/* The welcome page. Its own file, independent of the app, but in the app's language: a dim ground, soft gradients,
   no hard edges, nothing that snaps. Every arrival eases; the only motion is a slow drift. */
:root {
  --ease: cubic-bezier(.22, .61, .36, 1);
  --bg: #12141d; --ink: #ffffff; --ink2: rgba(255,255,255,.78); --faint: rgba(255,255,255,.5);
  --card: rgba(226,234,255,.07); --card2: rgba(226,234,255,.13); --line: rgba(226,234,255,.12);
  --a: #cfe0ff; --b: #ffd9a8;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wglow: 0 0 12px rgba(255,255,255,.45), 0 0 36px rgba(255,255,255,.22);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--sans);
  -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }

/* ---------------- the hero ---------------- */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; padding: 40px 20px; }
/* The ground is the app's own Sunset sky, the same film the room uses, with a veil over it so the words keep their
   contrast whatever the clouds are doing at that moment. The still stands in until the film is ready, and stands in
   for good on a phone that will not autoplay. */
.sky { position: absolute; inset: 0; overflow: hidden; background: #1a2030; }
.sky video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  animation: breathe 40s var(--ease) infinite alternate; }
.sky.gold video { animation-duration: 52s; }
.sky.linen video { animation-duration: 46s; animation-direction: alternate-reverse; }
.sky .veil { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(10,12,20,.62), rgba(10,12,20,.5) 42%, rgba(10,12,20,.82));
  }
@keyframes breathe { from { transform: scale(1.02); } to { transform: scale(1.09); } }

.board { position: absolute; inset: 0; pointer-events: none; }
/* Each card drifts at one speed and fades on the app's own easing. `will-change` keeps the drift on the compositor,
   so eight of them cost the main thread nothing. */
.tcard { position: absolute; width: min(268px, 46vw); padding: 16px 18px; border-radius: 20px;
  background: var(--card); border: 1px solid var(--line); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 1.6s var(--ease), transform 1.6s var(--ease);
  will-change: transform, opacity; }
.tcard.is-in { opacity: 1; transform: translate3d(0, 0, 0); }
.tcard .t { font: 300 clamp(15px, 1.5vw, 18px)/1.45 var(--serif); color: var(--ink); }
.tcard .w { margin-top: 9px; font: 500 11px/1 var(--sans); letter-spacing: .04em; color: var(--faint); }
.tcard .c { display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: 999px; background: var(--card2);
  font: 500 10.5px/1 var(--sans); letter-spacing: .05em; color: var(--ink2); }

.middle { position: relative; text-align: center; max-width: 720px; }
.kick { margin: 0 0 18px; font: 500 11.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--faint); }
.hero h1 { margin: 0; font: 300 clamp(44px, 9.5vw, 96px)/1.04 var(--serif); letter-spacing: -.01em; text-shadow: var(--wglow); }
.lede { margin: 20px 0 0; font: 400 clamp(15px, 1.8vw, 18px)/1.6 var(--sans); color: var(--ink2); }
.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  font: 500 14px/1 var(--sans); transition: background .7s var(--ease), transform .7s var(--ease); }
.btn:hover { background: var(--card2); }
.btn:active { transform: scale(.98); }
.btn.dark { background: #f0ece4; color: #15140f; border-color: #f0ece4; }
.fade { position: absolute; left: 0; right: 0; bottom: -160px; height: 34vh; background: linear-gradient(transparent, var(--bg) 62%, transparent); }

/* ---------------- the numbers ---------------- */
main { position: relative; }
section { position: relative; padding: 92px 0; }
.numbers, .close { isolation: isolate; }  /* each ground keeps its own stack, so a fade can reach over the seam */
.inner { max-width: 940px; margin: 0 auto; padding: 0 20px; position: relative; }
h2 { margin: 0; font: 300 clamp(30px, 5vw, 48px)/1.15 var(--serif); letter-spacing: -.01em; text-shadow: var(--wglow); }
.sub { margin: 16px 0 0; font: 400 15px/1.65 var(--sans); color: var(--ink2); max-width: 62ch; }

/* the numbers stand on Golden rays, with their own veil so the words and the lines keep their contrast */
.numbers { position: relative; }
.sky.gold { position: absolute; inset: -160px 0; overflow: hidden; background: #241b12;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 170px, #000 calc(100% - 170px), transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 170px, #000 calc(100% - 170px), transparent); }
.sky.gold .veil { background: linear-gradient(180deg, rgba(14,11,8,.86), rgba(14,11,8,.72) 40%, rgba(14,11,8,.9)); }
.numbers .inner { position: relative; }
.controls { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-end; }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.seg button { appearance: none; border: 0; background: transparent; color: var(--faint); cursor: pointer;
  font: 500 13px/1 var(--sans); padding: 11px 18px; border-radius: 999px;
  transition: color .7s var(--ease), background .7s var(--ease); }
.seg button.is-on { color: var(--ink); background: var(--card2); }
.filters { display: flex; gap: 12px; flex-wrap: wrap; }
.filters label { display: flex; flex-direction: column; gap: 6px; }
.filters span { font: 500 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.filters select { appearance: none; min-height: 44px; min-width: 150px; padding: 0 34px 0 14px; border-radius: 14px;
  background: var(--card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.5)' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 10px center;
  background-size: 16px; border: 1px solid var(--line); color: var(--ink); font: 400 13.5px/1 var(--sans); }

.panel { margin-top: 26px; padding: 26px; border-radius: 26px; background: var(--card); border: 1px solid var(--line); }
.totals { display: flex; gap: 40px; flex-wrap: wrap; }
.tot .n { font: 300 clamp(34px, 6vw, 54px)/1 var(--serif); text-shadow: var(--wglow);
  transition: opacity .8s var(--ease); }
.tot .l { margin-top: 8px; display: flex; align-items: center; gap: 8px; font: 500 12px/1 var(--sans); color: var(--ink2); }
.dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.dot.a { background: var(--a); } .dot.b { background: var(--b); }

/* The readings run down the left in the same quiet type as the days along the bottom, and there is no rule beside
   them -- a line would be one more thing to look at (Josh, 13 Sep 2026). The plot holds them and the chart side by
   side so the labels can never sit on top of the curve. */
.chartwrap { margin-top: 26px; }
.plot { display: flex; align-items: stretch; gap: 12px; }
.yaxis { flex: none; width: 30px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;
  padding: 0; margin: -5px 0; }
.yaxis span { font: 500 10px/1 var(--sans); color: var(--faint); white-space: nowrap; }
#chart { display: block; flex: 1 1 auto; min-width: 0; height: 260px; overflow: visible; }
#chart path { transition: d 1.1s var(--ease), opacity 1.1s var(--ease); }
.axis { display: flex; margin-top: 10px; margin-left: 42px; }
.axis span { flex: 1 1 0; min-width: 0; text-align: center; font: 500 10px/1 var(--sans); color: var(--faint);
  white-space: nowrap; overflow: hidden; }
.note { margin: 20px 0 0; font: 400 12.5px/1.6 var(--sans); color: var(--faint); }

.close { position: relative; text-align: center; padding: 76px 0 30px; }
.sky.linen { position: absolute; inset: -160px 0 0; overflow: hidden; background: #1b1f26;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 170px);
          mask-image: linear-gradient(to bottom, transparent, #000 170px); }
.sky.linen .veil { background: linear-gradient(180deg, rgba(10,12,17,.7), rgba(10,12,17,.58) 34%, rgba(10,12,17,.88)); }
.close .inner { position: relative; }
/* The door. `--t` runs 0 to 1 as the page reaches its end and everything below is a function of it: a dark pill
   becomes a tall lit arch, its words falling to the foot of it. The pane holds the open height from the start, so the
   document never grows while the scroll that drives the door is being read. */
.doorpane { --t: 0; height: calc(76px + var(--t) * (var(--doorH, 420px) - 76px)); display: flex; align-items: flex-end; justify-content: center; margin-top: 24px; }
.doorbtn {
  position: relative; display: flex; align-items: center; justify-content: center; text-decoration: none;
  width: calc(230px + var(--t) * (clamp(240px, 26vh, 320px) - 230px));
  height: calc(52px + var(--t) * (var(--doorH, 420px) - 52px));
  /* a rectangle, not a pill: the foot of the button is already the foot of a door, so only the head of it has to
     travel -- from a slight round to a full arch -- and the bottom edges barely move at all (Josh, 13 Sep 2026) */
  border-radius: calc(14px + var(--t) * (clamp(120px, 14vh, 170px) - 14px)) calc(14px + var(--t) * (clamp(120px, 14vh, 170px) - 14px)) calc(14px - var(--t) * 12px) calc(14px - var(--t) * 12px);
  background: rgb(calc(20 + var(--t) * 235), calc(18 + var(--t) * 231), calc(24 + var(--t) * 213));
  border: 1px solid rgba(255,247,225, calc(.14 + var(--t) * .76));
  color: rgb(calc(255 - var(--t) * 139), calc(255 - var(--t) * 180), calc(255 - var(--t) * 220));
  font: 300 calc(17px + var(--t) * 15px)/1 var(--serif);   /* the face of "Come up here." right above it (Josh, 13 Sep 2026) */
  letter-spacing: calc(.04em + var(--t) * .16em);
  box-shadow: 0 0 calc(var(--t) * 34px) rgba(255,246,224, calc(var(--t) * .85)),
              0 0 calc(var(--t) * 100px) rgba(255,238,196, calc(var(--t) * .6)),
              0 0 calc(var(--t) * 180px) rgba(255,232,178, calc(var(--t) * .4));
  will-change: width, height, border-radius, background; }
/* the word keeps one weight and one face the whole way across -- only its size and its tracking open out, so the
   letters never appear to thicken as the door arrives (Josh, 13 Sep 2026) */
.doorbtn span { text-transform: none; font-weight: 300; }
.doorbtn:active { transform: scale(.99); }
@media (prefers-reduced-motion: reduce) { .doorpane { --t: 1 !important; } }
.close .sub { margin-left: auto; margin-right: auto; }
/* the foot of the site: the mark and the name on one side, where to find Pray on the other, then the notice */
.site-foot { background: #0b0d13; border-top: 1px solid var(--line); }
.fwrap { max-width: 940px; margin: 0 auto; padding: 34px 20px 44px; }
.ftop { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 26px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink);
  font: 300 clamp(22px, 3vw, 28px)/1 var(--serif); letter-spacing: .14em; }
.brand .mark { width: 26px; height: 26px; color: #f0ece4; filter: drop-shadow(0 0 10px rgba(255,255,255,.35)); }
.social { display: flex; gap: 10px; }
.social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line); color: var(--ink2);
  transition: background .7s var(--ease), color .7s var(--ease), transform .7s var(--ease); }
.social a:hover { background: var(--card2); color: var(--ink); }
.social a:active { transform: scale(.96); }
.social svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.fbot { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 22px;
  font: 500 11px/1.5 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.fbot a { color: var(--faint); text-decoration: none; }
.fbot a:hover { color: var(--ink2); }
.ftag { font-style: italic; letter-spacing: .08em; color: var(--ink2); text-transform: none; }
@media (max-width: 620px) { .fbot { justify-content: center; text-align: center; } .fmid { order: 3; } }

@media (prefers-reduced-motion: reduce) {
  .sky { animation: none; }
  .tcard { transition-duration: .01ms; }
}