/* ============================================================
   The front door, light theme (2026-10-30)
   ------------------------------------------------------------
   Source: docs/previews/light-theme/Splash.dc.html (390x844) and
   SPEC.md in the same folder. The rest of the app is still dark;
   this screen is the only light one until the other artboards ship.

   Everything is rem or a percentage, so the screen fits 320x568
   without scrolling. The artboard's absolute pixel positions
   became a centred flex column; the waves, orbs and notes keep
   their artboard coordinates inside one viewBox that is
   anchored to the logo. Motion is transform and opacity only.
   ============================================================ */

@font-face {
  font-family: 'Lalezar';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/lalezar-arabic-400.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
}
/* Only fetched where the title is Latin (lang=en). */
@font-face {
  font-family: 'Lalezar';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/lalezar-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+200F-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(fonts/vazirmatn-arabic-wght.woff2) format('woff2-variations'),
       url(fonts/vazirmatn-arabic-wght.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
}

.sp {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 40;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* The top padding is what puts the logo circle at y=194 on the 390x844
     board (measured: the column is centred between it and the foot, so
     each pixel off on the board is two pixels of padding). Taller or
     shorter screens keep the column centred. */
  padding: 3.57375rem 2.25rem 4.75rem;
  padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
  background: var(--paper);
  color: var(--paper-ink);
  /* The foot's small labels use --paper-ink-3 (5.4:1 on --paper); the SPEC's
     ink-3, #8f8a9a, is 3.3:1 and was not used. The dark theme's --ink-2 is a
     light grey and would vanish on this ground, so this screen has its own ink. */
  font-family: Vazirmatn, Tahoma, sans-serif;
  text-align: center;
}

/* Strings arrive from fa.json / en.json a moment after the first paint. */
.sp-wait [data-i18n] { visibility: hidden; }

/* ── the logo, its ring, and the artboard behind them ─────── */
.sp-hero {
  position: relative;
  flex: none;
  display: flex;
  justify-content: center;
  width: calc(100% + 4.5rem);
  margin: 0 -2.25rem;
}

/* 390 x 844 artboard, width = the screen, its y=250 line on the logo's
   centre: 250/390 = 64.1% (negative margins are a share of the hero's
   width), 844/390 = 216.41% (padding-bottom likewise). */
.sp-bg {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: -1;
  width: 100%;
  height: 0;
  margin-top: -64.1%;
  padding-bottom: 216.41%;
  pointer-events: none;
}
.sp-bg svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
/* the board draws all but the waves at --art-scale around the logo */
.sp-scale { transform-box: view-box; transform-origin: 195px 250px; transform: scale(var(--art-scale)); }

.sp-ring { position: relative; flex: none; width: var(--splash-mark); height: var(--splash-mark); }
/* The ring's 188 box (r 82 plus the star) at --art-scale around the 112
   circle: 159.8 / 112 = 142.68%, offset (159.8 - 112) / 2 / 112. */
.sp-track, .sp-orbit {
  position: absolute;
  left: -21.34%; top: -21.34%;
  width: 142.68%; height: 142.68%;
}
.sp-orbit { animation: sp-orbit .9s cubic-bezier(.45, 0, .2, 1) 0s both; }
/* the 24 star centred at y 172 of the board, scaled around (195, 250) */
.sp-star {
  position: absolute;
  left: 40.89%; top: -18.30%;
  width: 18.21%; height: 0; padding-bottom: 18.21%;
  animation: sp-spark 3.6s ease-out 1s infinite;
}
.sp-star svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

.sp-mark {
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--mark-bg);
  box-shadow: 0 0 0 1px var(--paper-edge), 0 18px 36px -16px rgba(var(--mark-shadow-rgb), .45);
  animation: sp-bob 4.5s ease-in-out infinite alternate;
}
.sp-mark img { display: block; width: 58.93%; height: auto; }

/* ── the words ───────────────────────────────────────────── */
.sp-title {
  position: relative;
  flex: none;
  margin-top: 3.375rem;
  font-family: Lalezar, Vazirmatn, Tahoma, sans-serif;
  font-size: var(--splash-title);
  font-weight: 400;
  line-height: 1.4;
  animation: sp-rise .6s cubic-bezier(.2, .8, .2, 1) .1s both;
}
/* The white edge, behind the red face. */
.sp-title-o {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  color: var(--title-edge);
  -webkit-text-stroke: .057em var(--title-edge);
  filter: drop-shadow(0 .034em .057em rgba(var(--pillow-shadow-rgb), .22));
}
.sp-title-f { position: relative; color: var(--brand); filter: url(#pillow); }

.sp-tagline {
  margin-top: .5rem;
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: normal;
  color: var(--paper-ink);
  animation: sp-fade .4s ease-out .3s both;
}
.sp-line {
  max-width: 18.125rem;
  margin-top: .5rem;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--paper-ink-2);
  animation: sp-fade .4s ease-out .3s both;
}

.sp-act {
  position: relative;
  flex: none;
  margin-top: 1.875rem;
  animation: sp-fade .4s ease-out .4s both;
}
.sp-start {
  box-sizing: border-box;
  min-width: var(--btn-min-w);
  min-height: var(--btn-h);
  padding: var(--btn-pad);
  border: 0;
  border-radius: 999px;
  font-family: Vazirmatn, Tahoma, sans-serif;
  font-size: var(--fs-btn);
  font-weight: 800;
  cursor: pointer;
}
.ruby {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--btn-primary-0) 0%, var(--btn-primary-1) var(--btn-primary-stop), var(--btn-primary-2) 100%);
  color: var(--btn-primary-ink);
  text-shadow: 0 1px 0 rgba(var(--btn-primary-deep-rgb), .35);
  box-shadow: inset 0 1px 0 rgba(var(--btn-primary-hi-rgb), .6), inset 0 -3px 0 rgba(var(--btn-primary-shade-rgb), .35), 0 14px 30px -10px rgba(var(--btn-primary-glow-rgb), .6), 0 0 0 1px var(--btn-primary-edge);
}
.ruby:after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 38%;
  background: linear-gradient(90deg, transparent, rgba(var(--btn-primary-hi-rgb), .55), transparent);
  animation: sp-sweep 3.4s ease-in-out infinite;
}

/* Not ready: the page is drawn before the scripts that make the button work
   have arrived, so until then (index.html removes the class) the button is
   disabled, keeps its size and its label's room, and a small ring turns where
   the label will be. No shine either, it would say the button is live. */
.sp-start.sp-notready {
  color: transparent;
  text-shadow: none;
  cursor: default;
  opacity: .8;
}
.sp-start.sp-notready:after { display: none; }
.sp-start.sp-notready:before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  box-sizing: border-box;
  width: 1.25rem; height: 1.25rem;
  margin: -.625rem 0 0 -.625rem;
  border: .1875rem solid rgba(var(--btn-primary-hi-rgb), .35);
  border-top-color: var(--btn-primary-ink);
  border-radius: 50%;
  animation: sp-spin .9s linear infinite;
}
@keyframes sp-spin { to { transform: rotate(360deg); } }

/* Only ever says something while the piano is still downloading, or (the
   second line) when the scripts never arrived. */
.brand-loading {
  position: absolute;
  top: 100%; left: -2rem; right: -2rem;
  margin-top: .5rem;
  font-size: .76rem;
  line-height: 1.4;
  color: var(--paper-ink-2);
  opacity: 0;
  transition: opacity 220ms ease;
}
.brand-loading.show { opacity: 1; }

/* ── the foot: the café, and the app's version ───────────── */
.sp-foot {
  position: absolute;
  left: 0; right: 0;
  bottom: 2.125rem;
  bottom: calc(2.125rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sp-by { font-size: var(--fs-small); line-height: normal; color: var(--paper-ink-3); }
/* Filled by shared/version.js. */
.brand-version {
  margin-top: .125rem;
  font-size: .6875rem;
  line-height: 1.2;
  color: var(--paper-ink-3);
  direction: ltr;
  pointer-events: none;
}

/* ── lang=en: the Latin title is wider than the Persian one (about 4.1 em
   against 2.1 em), so it is sized to the width that is left. ─────────── */
.sp[lang=en] { direction: ltr; }
.sp[lang=en] .sp-title { font-size: min(var(--splash-title), calc((100vw - 4.5rem) / 4.1)); }

/* ── shorter screens: under 720 the artboard no longer fits ── */
@media (max-height: 720px) {
  .sp { padding-top: .75rem; }
  .sp-ring { width: 6rem; height: 6rem; }
  .sp-title { margin-top: 2.25rem; font-size: 4rem; }
  .sp[lang=en] .sp-title { font-size: min(4rem, calc((100vw - 4.5rem) / 4.1)); }
  .sp-tagline, .sp-line { margin-top: .25rem; }
  .sp-line { line-height: 1.7; }
  .sp-act { margin-top: 1.125rem; }
}

/* ── motion: transform and opacity only ──────────────────── */
.sp-flow { animation: sp-flow var(--wave-back) linear infinite; }
.sp-flow-b { animation-duration: var(--wave-front); }
.sp-bob { animation: sp-bob 4.5s ease-in-out infinite alternate; }
.sp-bob2 { animation: sp-bob 5.5s ease-in-out -2s infinite alternate; }
@keyframes sp-flow { to { transform: translateX(-260px); } }
@keyframes sp-bob { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
@keyframes sp-orbit { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
@keyframes sp-spark {
  0%, 80% { opacity: 0; transform: scale(.3); }
  88% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(.6); }
}
@keyframes sp-rise {
  0% { opacity: 0; transform: translateY(30px) scale(.6); }
  60% { opacity: 1; transform: translateY(-4px) scale(1.08); }
  80% { transform: scale(.98); }
  100% { opacity: 1; transform: none; }
}
@keyframes sp-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sp-sweep {
  0%, 62% { transform: translateX(-160%) skewX(-20deg); }
  100% { transform: translateX(260%) skewX(-20deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sp *, .sp *:after { animation: none; }
  /* The red button's shine is not parked on the button, it is gone: parked,
     it dropped the label under it below 3:1 (SPEC, 2026-11-02). Every .ruby,
     on every screen. */
  .ruby:after { display: none; }
}