/* --------------------------------------------------------------------------
   The first sign-in, once.

   A teal curtain over the whole screen while the front door paints behind it,
   the seal, the man's name, and paper falling. It is shown exactly once per
   person — see welcome.js for where that is remembered and why it is not
   remembered on the phone.

   Nothing here is a new token. The curtain is `--brand-2` into `--brand`, the
   card is the sand the rest of the app already uses for anything set apart,
   and the paper's colours are in welcome.js because they are painted onto a
   canvas rather than styled.
   -------------------------------------------------------------------------- */

/* Flex with `margin:auto` on the card rather than `place-items:center`, because
   this one has to do both: centre the card on a tall phone AND scroll properly
   on a short one. A centred grid item taller than its container is clipped at
   the TOP and cannot be scrolled back to — the greeting and the man's name are
   the first things that would go. */
#welcome {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(26px + env(safe-area-inset-top)) 24px
           calc(26px + env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 90% at 50% 8%, #1c6360 0%, var(--brand) 44%, var(--brand-2) 100%);
  opacity: 0;
  transition: opacity .34s ease;
  overscroll-behavior: contain;

  /* ⚠ IT DOES NOT BLOCK UNTIL IT IS VISIBLE, and this line is the whole reason
     the app was reachable at all on 24 August 2026.

     This is a full-screen fixed layer at z-index 200: while it exists it
     swallows every click on the page, which is right for a modal and a
     catastrophe for a modal nobody can see. It has no timer and no
     tap-anywhere-to-close — both deliberately removed so a man reading ninety
     words is not interrupted — so the button and Escape are the ONLY ways out.
     If the reveal ever fails to run, an invisible sheet of glass covers the
     yeshiva's app for ever and every menu, every button and every name on
     every screen stops answering.

     So blocking is tied to being SEEN. No `.on`, no interception. */
  pointer-events: none;
}
#welcome.on   { opacity: 1; pointer-events: auto; }
#welcome.off  { opacity: 0; pointer-events: none; }

/* The paper. Behind everything, and never in the way of a tap. */
#welcome canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}

.wel-card {
  position: relative; z-index: 1;     /* above the canvas, and its own stack */
  margin: auto;                       /* centres, and still scrolls when tall */
  width: 100%; max-width: 400px;
  text-align: center; color: #fff;
  transform: translateY(14px) scale(.972);
  opacity: 0;
  transition: transform .5s cubic-bezier(.16,.84,.3,1), opacity .5s ease;
}
#welcome.on .wel-card { transform: none; opacity: 1; }

/* WHITE PAPER FALLING BEHIND WHITE TEXT. The words are drawn on top and stay
   on top — `z-index: 1` above makes sure of it — but a white square landing
   behind a white line still swallows it for the half-second it takes to fall
   past. This is a soft pool of the deep teal under the card only: the paper
   still crosses it and is still clearly in front of the background, and the
   sentence a man is reading never disappears. Nothing here has a hard edge, so
   it does not read as a box.

   `z-index: -1` is safe because .wel-card carries a z-index of its own and so
   opens a stacking context: this sits behind the card's own words and stays in
   front of the canvas. */
.wel-card::before {
  content: ''; position: absolute; z-index: -1;
  inset: -30px -22px;
  background: radial-gradient(66% 52% at 50% 50%,
    rgba(8,42,40,.66) 0%, rgba(8,42,40,.46) 52%, rgba(8,42,40,0) 100%);
  pointer-events: none;
}

.wel-seal {
  width: 82px; height: 82px; margin: 0 auto 18px; display: block;
  filter: drop-shadow(0 6px 22px rgba(0,0,0,.28));
}

/* The greeting. FrankRuhl because it is the letterhead face and this is the
   one screen in the app that is a letterhead moment rather than a working
   surface — docs/TYPOGRAPHY.md, and the reason it is nowhere else. */
.wel-heb {
  font-family: 'FrankRuhl', 'Assistant', serif;
  font-size: 40px; line-height: 1.15; font-weight: 500;
  margin: 0 0 8px; letter-spacing: .5px;
}
.wel-name {
  font-size: 19.5px; font-weight: 700; margin: 0 0 22px;
  letter-spacing: -.2px;
}

/* The promise, and the one line anybody will remember. It carries the
   letterhead face and the size, so that a man who reads nothing else on this
   screen has still read the sentence the system is for. */
.wel-tag {
  font-family: 'FrankRuhl', 'Assistant', serif;
  font-size: 21px; line-height: 1.35; font-weight: 500;
  margin: 0 auto 20px; max-width: 22ch;
}

.wel-body {
  font-size: 15px; line-height: 1.66; margin: 0 auto 13px;
  max-width: 34ch; color: rgba(255,255,255,.88);
}
.wel-body:last-of-type { margin-bottom: 22px; }

/* The sign-off, set apart by a hairline rather than by shouting. */
.wel-close {
  font-size: 14.5px; line-height: 1.5; font-weight: 700;
  margin: 0 auto 26px; padding-top: 20px; max-width: 30ch;
  border-top: 1px solid rgba(255,255,255,.22);
}

.wel-go {
  font: 700 15.5px/1 'Assistant', system-ui, sans-serif; cursor: pointer;
  min-height: 46px; padding: 0 30px;
  border: 1px solid rgba(255,255,255,.5); border-radius: 9px;
  background: transparent; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, transform .12s;
}
.wel-go:hover  { background: rgba(255,255,255,.12); border-color: #fff; }
.wel-go:active { transform: translateY(1px); }
.wel-go:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 380px), (max-height: 700px) {
  .wel-seal  { width: 68px; height: 68px; margin-bottom: 14px; }
  .wel-heb   { font-size: 34px; }
  .wel-name  { font-size: 18px; margin-bottom: 18px; }
  .wel-tag   { font-size: 19px; margin-bottom: 16px; }
  .wel-body  { font-size: 14.5px; margin-bottom: 11px; }
  .wel-close { padding-top: 16px; margin-bottom: 22px; }
}

/* A person who has asked their phone to stop moving things gets the same
   screen and none of the motion: no paper, no rise, no scale. The curtain
   still fades, because an overlay that appears instantly reads as a fault. */
@media (prefers-reduced-motion: reduce) {
  .wel-card { transform: none; transition: opacity .3s ease; }
  #welcome  { transition: opacity .3s ease; }
}