/* The splash (index.html), Berel, 3 Nov 2026: "it starts off showing loading…". The year's data can take a few
   seconds when the database wakes, so the page opens on the lockup drawing itself in instead:
   - the line drawing appears from left to right, as if drawn;
   - EVERY and DAY rise into place, then WITH THE REBBE fades in;
   - if the wait goes on, the line drawing breathes, and after a few seconds a quiet line says what is happening.
   It begins only after a short wait (--s0): until then it is bare paper, and a page that is ready by then skips the
   splash altogether. Once it has begun it plays to the end, and only then does main.ts fade it out to the page
   (Berel, 3 Nov 2026: "once we start the splash, we need to show it all the way").

   A file of the app, not inline: labs.chabad.org serves it under "default-src 'self'". The colours are the
   site's tokens, with Tekhelet as the fallback until the main stylesheet is in. The layers are the same masks
   the top bar uses (web/public/logos/every-day-l-*.png, from design/studies/src/split-logo.py). */
.splash {
  --s0: 0.3s; /* the wait before the splash begins; main.ts reads the same 300ms */
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg, #fafbfc);
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.splash.is-off {
  opacity: 0;
  visibility: hidden;
}

.splash-in {
  --sm: min(120px, 28vw); /* the mark's height */
  display: grid;
  justify-items: center;
  gap: calc(var(--sm) * 0.1);
}

.splash-mark,
.splash-tag {
  position: relative;
  display: block;
}

.splash-mark {
  height: var(--sm);
  aspect-ratio: 324 / 120;
}

.splash-tag {
  height: calc(var(--sm) * 0.13);
  aspect-ratio: 597 / 45;
}

.sl {
  position: absolute;
  inset: 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.sl-lines {
  -webkit-mask-image: url(logos/every-day-l-lines.png);
  mask-image: url(logos/every-day-l-lines.png);
  background: var(--accent, #1f4e9c);
}

.sl-every {
  -webkit-mask-image: url(logos/every-day-l-every.png);
  mask-image: url(logos/every-day-l-every.png);
  background: var(--logo-brown, #796b5c);
}

.sl-day {
  -webkit-mask-image: url(logos/every-day-l-day.png);
  mask-image: url(logos/every-day-l-day.png);
  background: var(--logo-dark, #4a4a4a);
}

.sl-with {
  -webkit-mask-image: url(logos/every-day-l-with.png);
  mask-image: url(logos/every-day-l-with.png);
  background: var(--logo-dark, #4a4a4a);
}

.sl-rebbe {
  -webkit-mask-image: url(logos/every-day-l-rebbe.png);
  mask-image: url(logos/every-day-l-rebbe.png);
  background: var(--logo-brown, #796b5c);
}

/* the wait, said quietly, only if it goes on (main.ts writes it in the page's language) */
.splash-note {
  margin: calc(var(--sm) * 0.12) 0 0;
  min-height: 1.4em;
  font: 400 14px / 1.4 'IBM Plex Sans', 'IBM Plex Sans Hebrew', system-ui, sans-serif;
  color: var(--muted, #5c6879);
  opacity: 0;
  animation: sl-fade 0.6s ease-out calc(var(--s0) + 2.5s) both;
}

@media (prefers-reduced-motion: no-preference) {
  .sl-lines {
    animation: sl-draw 0.9s cubic-bezier(0.4, 0, 0.2, 1) var(--s0) both, sl-breathe 1.8s ease-in-out calc(var(--s0) + 1.6s) infinite;
  }
  .sl-every {
    animation: sl-rise 0.5s ease-out calc(var(--s0) + 0.35s) both;
  }
  .sl-day {
    animation: sl-rise 0.5s ease-out calc(var(--s0) + 0.5s) both;
  }
  .sl-with,
  .sl-rebbe {
    animation: sl-fade 0.5s ease-out calc(var(--s0) + 0.75s) both;
  }
}

/* less motion: the lockup fades in whole, and the same rule holds (skipped if the page is quicker, else shown in full) */
@media (prefers-reduced-motion: reduce) {
  .sl {
    animation: sl-fade 0.5s ease-out var(--s0) both;
  }
}

@keyframes sl-draw {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes sl-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes sl-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes sl-breathe {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}