/* Studio component: the arch hero (Sabeel's Today; DRAFT v0.2, inbox #3).
   A niche with a lamp at the apex. Its rim is a progress line: it fills from the previous prayer to the next, so the
   ornament does a job. Reads tokens only (color-hero-*, elevation-hero*, radius-arch, radius-hero-foot, font-family-name).
   Markup: see components/arch-hero.js (it draws the rim). */

.arch {
  position: relative; isolation: isolate; width: 100%; max-width: 360px; margin-inline: auto; aspect-ratio: 321 / 340;
  color: var(--color-hero-ink);
  border-radius: var(--radius-arch) var(--radius-arch) var(--radius-hero-foot) var(--radius-hero-foot);
  background:
    radial-gradient(90% 46% at 50% 0%, var(--color-hero-glow), transparent 72%),
    linear-gradient(180deg, var(--color-hero-lit) 0%, var(--color-hero-mid) 40%, var(--color-hero-deep) 100%);
  box-shadow: var(--elevation-hero);
}
.arch::before {                      /* the recess */
  content: ""; position: absolute; inset: 14px 14px 14px; z-index: -1;
  border-radius: var(--radius-arch) var(--radius-arch) calc(var(--radius-hero-foot) - 8px) calc(var(--radius-hero-foot) - 8px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-hero-deep) 40%, transparent), color-mix(in srgb, var(--color-hero-deep) 70%, transparent));
  box-shadow: var(--elevation-hero-niche);
}
.arch-rim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.arch-rim path { fill: none; stroke-linecap: round; stroke-width: 3.5px; }
.arch-rim .off { stroke: var(--color-hero-rim-off); }
.arch-rim .on { stroke: var(--color-hero-gold); transition: stroke-dasharray var(--motion-duration-sweep) var(--motion-easing-out); }
.arch-rim .now { fill: var(--color-hero-gold); stroke: none; filter: drop-shadow(0 0 8px var(--color-hero-gold)); }

.arch-niche { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 2px; padding: 22% 28px 8%; text-align: center; }
.arch-lab { margin: 0; font: 600 13px/1.2 var(--font-family-body); letter-spacing: .04em; color: var(--color-hero-gold); }
.arch-name { margin: 6px 0 0; font: 600 24px/1.1 var(--font-family-name); color: var(--color-hero-muted); }
.arch-time { margin: 0; font: 600 64px/1 var(--font-family-name); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--color-hero-ink); }
.arch-in { margin: 6px 0 0; font: 400 15px/1.3 var(--font-family-body); color: var(--color-hero-muted); }
.arch-iqama { margin: 10px 0 0; padding: 5px 14px; border-radius: var(--radius-chip); border: 1px solid var(--color-hero-rim-off); font: 600 13px/1.2 var(--font-family-body); color: var(--color-hero-gold); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .arch-rim .on { transition: none; } }