/* The welcome splash's look (#486). Its own file and its own :root, same
   split reasoning settings.css's header gives: a shared stylesheet between
   pages drifts the moment one of them needs a colour the others don't. The
   token values themselves were originally copied from the queue page's
   palette on purpose -- "the app's existing type and colour tokens", not a
   new palette for one screen. */

:root {
  color-scheme:light dark;
  --chalk:#F2F1EC; --surface:#FBFAF7; --raise:#FFFFFF; --ink:#17191E; --muted:#6E6A60;
  --rule:#D9D5CB; --blue:#2A4FC4; --blue-dim:#E4E7F6; --amber:#8A5E17; --amber-dim:#F6EBD6;
  --good:#3F6B4A; --good-dim:#E1EBE3; --clay:#B44A32; --faint:#8C8779; --on-accent:#FFFFFF;
  --display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --ui:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  /* --heb is defined once in shared/fonts.css (#752), not copy-pasted here. */
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  /* #1758's "Reveal" opening (concept 2 of `docs/design/2026-09-05-fable/
     04-startup-concepts.md`): the same curve `study.css` and `skills.css`
     already declare under this name, copied rather than shared because
     `--ease-out` is a per-file token there too -- there is no shared-motion
     stylesheet the way `--heb` has shared/fonts.css. Not a colour, so it
     does not fall under the "no new colour literal" fence in the ticket. */
  --ease-out:cubic-bezier(.2,.7,.3,1);
}
@media (prefers-color-scheme: dark) {
  :root { color-scheme:dark; --chalk:#15171C; --surface:#1D2027; --raise:#252932; --ink:#E7E4DD; --muted:#9A9487;
    --rule:#31353E; --blue:#8AA0F0; --blue-dim:#232A44; --amber:#E0B063; --amber-dim:#33291A;
    --good:#7FB48D; --good-dim:#1F2A22; --clay:#DE8168; --faint:#75726A; --on-accent:#15171C; }
}
:root[data-theme="dark"] { color-scheme:dark; --chalk:#15171C; --surface:#1D2027; --raise:#252932; --ink:#E7E4DD; --muted:#9A9487;
  --rule:#31353E; --blue:#8AA0F0; --blue-dim:#232A44; --amber:#E0B063; --amber-dim:#33291A;
  --good:#7FB48D; --good-dim:#1F2A22; --clay:#DE8168; --faint:#75726A; --on-accent:#15171C; }
:root[data-theme="light"] { color-scheme:light; --chalk:#F2F1EC; --surface:#FBFAF7; --raise:#FFFFFF; --ink:#17191E; --muted:#6E6A60;
  --rule:#D9D5CB; --blue:#2A4FC4; --blue-dim:#E4E7F6; --amber:#8A5E17; --amber-dim:#F6EBD6;
  --good:#3F6B4A; --good-dim:#E1EBE3; --clay:#B44A32; --faint:#8C8779; --on-accent:#FFFFFF; }

* { box-sizing:border-box; }
/* #498: `html, body { height:100%; margin:0; overflow:hidden }` now lives in
   shared/phone.css, loaded by welcome.html -- `.page` (which now carries
   `data-milim-main`, added for exactly this) picks up `display:flex;
   flex-direction:column; height:100dvh; overflow-y:auto` from that same
   shared rule via `[data-milim-main]`. Welcome has no bottom bar (this page
   is deliberately the one exception -- see shared/nav.js's header, "a
   splash with a navigation bar is not a splash"), but it gets the same
   capped-document contract as every other page for the same reason: "one
   screen, nothing to scroll" was already this page's own stated intent
   (see below), and #498's fix is what actually holds the document to that
   promise rather than merely fitting today's short content into it. */
body { background:var(--chalk); color:var(--ink); font-family:var(--ui);
       -webkit-font-smoothing:antialiased; }

/* The whole point of a splash: one screen, nothing to scroll, the mark on
   the app's own ground colour. viewport-fit=cover (set in welcome.html) is
   what makes the safe-area padding below resolve to anything on a real
   phone rather than 0px in a browser tab -- see shared/phone.css's #116 note. */
.page { max-width:28rem; margin:0 auto;
        padding:calc(1.5rem + env(safe-area-inset-top)) calc(1.25rem + env(safe-area-inset-right))
          calc(2rem + env(safe-area-inset-bottom)) calc(1.25rem + env(safe-area-inset-left));
        align-items:center; justify-content:center; gap:1.6rem;
        text-align:center; }

/* The mark: the mem, alone, drawn in the app's own Hebrew type rather than
   an image -- there is no logo asset in this repo. #518 (the owner, through
   the feedback flag: "the מ should be bold and bigger"): it must be
   unambiguously the largest and heaviest thing on the screen -- bigger than
   the (now-larger, RTL) greeting below it, heavier than its 600 weight, and
   still clear of its descender at a phone's height. 800 is this type's
   boldest widely-available weight; heavier synthetic bolding on a serif
   Hebrew face starts eating the letterform's counters. 7.5rem (was 6rem)
   measured with no clipping and no document scroll down to a 568px-tall
   viewport (iPhone SE) -- see the PR body for the measurement.

   #406 took this slot for the streak picture; #759 gives it back. The
   owner's own instruction ("you should always see the start page --
   followed by the streak page -- then the main app") is three screens, not
   two, so the picture had its own screen for a time (its own HTML page and
   stylesheet) rather than sharing this one; #1281 later folded that screen
   into progress.html -- see progress.css's own header for the rules that
   moved with it, twice now. */
.mem { font-family:var(--heb); font-size:7.5rem; font-weight:800; line-height:1;
       color:var(--ink); direction:rtl; position:relative;
       /* #1758 "Reveal": the mem is unmasked bottom-to-top -- for a letter
          with a flat base this reads as it being *set* on the page rather
          than fading in. `animation-fill-mode: both` is the readiness rule:
          the "from" frame applies at t=0 (no flash of the fully-formed
          glyph before the animation engine attaches) and the "to" frame
          holds once the 460ms is over, both without gating anything below
          on `animationend`. Timings copied verbatim from
          `docs/design/2026-09-05-fable/04-startup-concepts.md`'s Concept 2
          table and matching the rendered reference in `02-directions.html`. */
       animation:mem-unmask 460ms var(--ease-out) both,
                 mem-settle 300ms ease-in 1300ms forwards; }
@keyframes mem-unmask {
  from { clip-path:inset(100% 0 0 0); transform:translateY(6px); }
  to   { clip-path:inset(0 0 0 0); transform:none; }
}
/* #3032: the exit. The mem eases down a touch as the page hands off; it does
   NOT fade out, because on a slow /study (a cold Fly boot, #3015) the mark on
   screen is the only "loading" indicator there is, and a mark that vanished
   would leave a blank page for as long as the load takes. `forwards` only, no
   backwards fill: a backwards fill would apply this keyframe's `from` over
   mem-unmask's own transform during the entrance. Delays are written against
   welcome.js's SPLASH_MS (1600ms): the exit ends as the hand-off fires. */
@keyframes mem-settle {
  from { transform:none; }
  to   { transform:scale(.94); }
}

/* #518: Hebrew now (see welcome.html), so RTL -- the same pattern as .mem
   above and every other Hebrew run in this app (study.css's `.asktarget`,
   flashcards.css's `.front`). */
/* #1758 "Reveal": rises in after the mem is set (260-560ms), then a
   hairline in the page's own accent (`--blue`, the only accent this page
   already has -- no new colour literal) draws in under it from the right,
   because the greeting is RTL and its reading edge is the right edge
   (480-800ms). `position:relative` is new here so `::after` can anchor to
   the greeting's own box rather than the page. */
.greeting { margin:0; font-family:var(--display); font-weight:400; font-size:1.4rem;
            color:var(--ink); letter-spacing:-.01em; direction:rtl; position:relative;
            animation:rise-in 300ms var(--ease-out) 260ms both,
                      greeting-out 300ms ease-in 1250ms forwards; }
.greeting::after {
  content:""; position:absolute; right:0; bottom:-6px; height:1px; width:0;
  background:var(--blue);
  animation:rule-draw 320ms var(--ease-out) 480ms both;
}
@keyframes rise-in {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:none; }
}
@keyframes rule-draw {
  from { width:0; }
  to   { width:100%; }
}
/* #3032: the greeting (and its hairline, a child) lifts and fades as the page
   hands off -- see mem-settle above for why only this half leaves. */
@keyframes greeting-out {
  from { opacity:1; transform:none; }
  to   { opacity:0; transform:translateY(-6px); }
}

/* #3032: the one control this screen had, the יאללה button (`.yalla`, a 52px
   pill), is gone -- the splash hands off to /study by itself and on any tap.
   Its rules, its `:focus-visible` ring and its `:hover` tint went with it, and
   so did the 44px-floor guard's positional read of `.yalla` (tests/
   test_welcome_settings_pages.py). The whole page is the tap target now; the
   cursor and the tap-highlight suppression in this rule are what make iOS Safari treat
   a tap on bare chalk as a tap at all. */
.page { cursor:pointer; -webkit-tap-highlight-color:transparent; }

/* #1758 "Reveal", reduced motion: the spec's parked frame is specific --
   none of the four beats animate, AND the underline is present at full
   width (in this concept the hairline is state, not motion: it belongs to
   the resting layout, not to the reveal). So this is not a blanket
   `animation:none` -- `.greeting::after` gets its own override to the
   width the animation would have left it at, rather than falling back to
   its unanimated base state of width:0. */
/* #3032: the same holds for the exit -- reduced motion removes the entrance AND
   the exit, and nothing else: welcome.js's 1.6s hand-off is unchanged, so the
   timing is identical and only the movement is gone. */
@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; }
  .mem, .greeting { animation:none; }
  .greeting::after { animation:none; width:100%; }
}