/* ============================================================
   The three cards that end chapter 1 (light theme)
   ------------------------------------------------------------
   Source: docs/previews/light-theme/Main.dc.html (range),
   Type.dc.html (voice type), Invite.dc.html (invitation) and SPEC.md.
   Built by shared/cards.js. Every colour is a token in style.css.

   The artboards are 390 x 844 with absolute positions. Here each card is
   a flex column: an art zone, the text, and a foot that takes the height
   that is left. At 390 x 844 the zone, the text and the foot land exactly
   where the artboard has them (zone height + the zone's top margin = the
   artboard's text top); on a short screen the art zone is what gives.
   Everything is rem; motion is transform and opacity only.
   ============================================================ */

/* The card is the screen: a full-bleed light layer over the dark app, like
   the splash. [data-screen].cs beats the glass-panel rules of [data-screen] (and of body.av-ux [data-screen] in
   beta-ux.css, which is why both selectors are written). */
[data-screen].cs,
body.av-ux [data-screen].cs {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 40;
  box-sizing: border-box;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--paper);
  box-shadow: none;
  color: var(--paper-ink);
  font-family: Vazirmatn, Tahoma, sans-serif;
  line-height: normal;
  text-align: center;
  overflow: hidden;
  opacity: 0;
  transform: none;
  transition: opacity 0.45s ease;
}
[data-screen].cs.active,
body.av-ux [data-screen].cs.active { display: flex; opacity: 1; }
[data-screen].cs.active > * { animation: none; }

/* ── art zone ─────────────────────────────────────────────── */
.cs-art {
  position: relative;
  flex: 0 1 var(--art-basis);
  width: 100%;
  min-height: 6rem;
}
/* The 390 x 844 picture, centred on the zone at its own anchor (--cs-anchor,
   the artboard y of the picture's middle). Scaled by width, or by height on a
   short screen so it never grows past the zone's room. */
.cs-bg {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 100%;
  width: min(100%, 46.21dvh);
  pointer-events: none;
  transform: translate(-50%, calc(var(--cs-anchor) / 844 * -100%));
}
.cs-bg svg { display: block; width: 100%; height: auto; overflow: visible; }
/* All but the waves at --art-scale, around each board's own centre. */
.cs-scale { transform-box: view-box; transform: scale(var(--art-scale)); }
.cs-range .cs-scale  { transform-origin: 195px 270px; }
.cs-voice .cs-scale  { transform-origin: 195px 230px; }
.cs-invite .cs-scale { transform-origin: 195px 250px; }
.cs-halo { font-family: Vazirmatn, Tahoma, sans-serif; }

.cs-range .cs-art  { margin-top: 5.5rem;  --art-basis: 22.75rem; }
.cs-voice .cs-art  { margin-top: 1.5rem;  --art-basis: 24.75rem; }
.cs-invite .cs-art { margin-top: 1.75rem; --art-basis: 26.5rem; }

/* ── text ─────────────────────────────────────────────────── */
.cs-text {
  flex: none;
  /* never touches the foot: on a short screen the art zone is what gives */
  margin-bottom: 1rem;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cs-range .cs-text,
.cs-invite .cs-text { gap: 0.625rem; padding: 0 2.5rem; }
.cs-voice .cs-text  { gap: 0.25rem;  padding: 0 2.25rem; }

.cs-label { font-size: var(--fs-small); color: var(--paper-ink-2); }
.cs-title { display: grid; font-size: var(--fs-hero); font-weight: 800; line-height: 1.4; }
.cs-sizer, .cs-live { grid-area: 1 / 1; }
.cs-sizer { visibility: hidden; }
.cs-line {
  max-width: 18.125rem;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--paper-ink-2);
}
.cs-voice .cs-line { max-width: 18.75rem; }
/* the range card's «از C3 تا G4 رو با صدای خودت خوندی» (Main.dc.html):
   a little larger, and the two notes in full ink */
.cs-range .cs-line { max-width: 19.375rem; font-size: var(--fs-lead); font-weight: 600; }
.cs-line .cs-note { font-weight: 800; color: var(--paper-ink); }
.cs-hint { margin-top: 0.375rem; font-size: var(--fs-small); color: var(--paper-ink-3); }
.cs-gap { flex: none; height: 0.625rem; }

/* The type's name: red, in the pillow style (the filter is #pillow in
   index.html), on a white outline layer. Its size is set inline from the
   name's length. */
.cs-name {
  position: relative;
  margin: 0.25rem 0 0.625rem;
  font-family: Lalezar, Vazirmatn, Tahoma, sans-serif;
  line-height: 1.45;
  animation: cs-rise 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both;
}
.cs-name-edge {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  color: var(--title-edge);
  -webkit-text-stroke: 0.3125rem var(--title-edge);
  filter: drop-shadow(0 0.1875rem 0.3125rem rgba(var(--pillow-shadow-rgb), 0.22));
}
.cs-name-face { position: relative; color: var(--brand); filter: url(#pillow); }

/* The singers whose range is near this one (Type2): the Iranian name in the
   same pillow style, violet, then «و» and a foreign name in Latin letters.
   The box keeps its height while the pair swaps, so the card does not jump. */
.cs-near { margin-top: 0.125rem; }
.cs-singer { display: flex; align-items: center; justify-content: center; height: 4.3rem; max-width: 100%; }
.cs-singer-box {
  position: relative;
  font-family: Lalezar, Vazirmatn, Tahoma, sans-serif;
  line-height: 1.5;
  white-space: nowrap;
}
.cs-singer-edge {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  color: var(--title-edge);
  -webkit-text-stroke: 0.3125rem var(--title-edge);
  filter: drop-shadow(0 0.1875rem 0.3125rem rgba(var(--pillow-shadow-rgb), 0.18));
}
.cs-singer-face { position: relative; color: var(--singer); filter: url(#pillow); }
.cs-and { font-size: var(--fs-body); font-weight: 700; color: var(--paper-ink); min-height: 1.5rem; }

/* ── foot: the button, then the page dots ─────────────────── */
.cs-foot {
  flex: none;
  margin-top: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
}
.cs-foot .cs-btn + .cs-dots { margin-top: 1.875rem; }

.cs-btn {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: max-content;
  margin: 0 auto;
  border: 0;
  border-radius: 999px;
  font-family: Vazirmatn, Tahoma, sans-serif;
  font-weight: 800;
  overflow: hidden;
  cursor: pointer;
}
.cs-silver {
  padding: var(--btn-pad-arrow);
  min-height: var(--btn-h);
  font-size: var(--fs-btn);
  background: linear-gradient(180deg,
    var(--btn-secondary-0) 0%, var(--btn-secondary-1) 38%, var(--btn-secondary-2) 52%,
    var(--btn-secondary-3) 70%, var(--btn-secondary-4) 100%);
  color: var(--btn-secondary-ink);
  box-shadow: inset 0 1px 0 var(--btn-secondary-hi),
    inset 0 -3px 0 rgba(var(--btn-secondary-shade-rgb), 0.22),
    0 14px 30px -10px rgba(var(--btn-secondary-glow-rgb), 0.45),
    0 0 0 1px var(--btn-secondary-edge);
}
.cs-silver:after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 38%;
  background: linear-gradient(90deg, transparent, rgba(var(--btn-secondary-hi-rgb), 0.95), transparent);
  animation: cs-sweep 3.4s ease-in-out infinite;
}
/* The red one is .ruby (splash.css): gradient, edge and shine. */
.cs-ruby {
  padding: var(--btn-pad);
  min-width: var(--btn-min-w);
  min-height: var(--btn-h);
  font-size: var(--fs-btn);
}
.cs-nudge { display: inline-block; animation: cs-nudge 2.6s ease-in-out infinite; }
.cs-arrow { display: inline-block; }
.cs[dir="ltr"] .cs-arrow { transform: scaleX(-1); }

.cs-dots { flex: none; display: flex; justify-content: center; gap: 0.5rem; }
.cs-dots i {
  display: block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 0.375rem;
  background: var(--dot-off);
}
.cs-dots i.on { width: 1.375rem; background: var(--dot-on); }

/* The correction link of the voice-type card (on the board since the size
   scale: top 20, at the end side, 16 in). */
.cs-switch {
  position: absolute;
  top: 1.25rem;
  inset-inline-end: 1rem;
  z-index: 1;
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;
  border: 0;
  background: none;
  color: var(--paper-ink-2);
  font: inherit;
  font-size: var(--fs-small);
  cursor: pointer;
}

/* ── shorter screens: the art zone gives, the margins tighten ── */
@media (max-height: 720px) {
  .cs-range .cs-art  { margin-top: 2.5rem; }
  .cs-voice .cs-art,
  .cs-invite .cs-art { margin-top: 1rem; }
  .cs-foot { padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); }
  .cs-foot .cs-btn + .cs-dots { margin-top: 1.25rem; }
}

/* ── motion: transform and opacity only ───────────────────── */
.cs-flow { animation: cs-flow var(--wave-back) linear infinite; }
.cs-flow-b { animation-duration: var(--wave-front); }
.cs-bob { animation: cs-bob 4.5s ease-in-out infinite alternate; }
.cs-bob2 { animation: cs-bob 5.5s ease-in-out -2s infinite alternate; }
.cs-range .cs-bob, .cs-range .cs-bob2 { animation-name: cs-bob-m; }
.cs-swap { animation: cs-swap 0.5s ease-out both; }
.cs-tw { transform-box: fill-box; transform-origin: center; animation: cs-tw 2.8s ease-in-out infinite; }
.cs-scan { transform-box: view-box; transform-origin: 200px 240px; animation: cs-scan 6s ease-in-out infinite; }
@keyframes cs-flow { to { transform: translateX(-260px); } }
@keyframes cs-bob { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
@keyframes cs-bob-m { from { transform: translateY(-5px); } to { transform: translateY(6px); } }
@keyframes cs-tw {
  0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  45%, 55% { opacity: 1; transform: scale(1) rotate(45deg); }
}
@keyframes cs-scan {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-18px, 8px) rotate(-6deg); }
}
@keyframes cs-nudge {
  0%, 70%, 100% { transform: translateX(0); }
  80% { transform: translateX(-6px); }
}
@keyframes cs-rise {
  0% { opacity: 0; transform: translateY(40px) scale(0.5); }
  55% { opacity: 1; transform: translateY(-6px) scale(1.14); }
  75% { transform: scale(0.96); }
  100% { opacity: 1; transform: none; }
}
@keyframes cs-swap {
  0% { opacity: 0; transform: translateY(0.625rem); }
  100% { opacity: 1; transform: none; }
}
@keyframes cs-sweep {
  0%, 62% { transform: translateX(-160%) skewX(-20deg); }
  100% { transform: translateX(260%) skewX(-20deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cs *, .cs *:after { animation: none; }
  /* the silver shine is hidden, not parked (SPEC; .ruby in splash.css) */
  .cs-silver:after { display: none; }
  .cs .cs-tw { opacity: 1; }
}