/* ============================================================
   نادم — Home (Mihrab) · single full-screen mobile design
   Traditional Persian-Islamic · turquoise + gold + cream · light
   ============================================================ */

@import url("assets/fonts/fonts.css");

:root {
  --t-950: #063b39;
  --t-900: #0a4b47;
  --t-800: #0b5c56;
  --t-700: #0d6c64;
  --t-600: #0f8077;
  --t-100: #e3f1ec;

  --g-700: #9c7726;
  --g-600: #b6862c;
  --g-500: #c79a3a;
  --g-400: #d8b25a;
  --g-300: #e7cd86;
  --g-200: #f2e3b4;
  --g-100: #f6ead0;

  --cream: #f7f1e4;
  --cream-2: #fbf6ea;
  --paper: #fffdf7;
  --ink: #1a322e;
  --muted: #75837d;
  --line: rgba(12, 92, 86, 0.14);
  --gold-line: rgba(156, 119, 38, 0.34);

  --shadow-card: 0 16px 38px rgba(10, 64, 60, 0.12);
  --shadow-soft: 0 8px 22px rgba(10, 64, 60, 0.09);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--cream);
  font-family: "Vazirmatn", Tahoma, sans-serif;
  min-height: 100svh;
}

/* --------- content column (web-app, mobile-first, no frame clipping) --------- */
.phone {
  position: relative;
  width: 100%;
  max-width: 412px;
  min-height: 100svh;
  margin: 0 auto;
  background: var(--cream);
  color: var(--ink);
  direction: rtl;
}

/* ================= BRAND HEAD (floating crest) =================
   At rest the logo floats free over the page — no backdrop at all.
   --shrink (0→1) — driven by an inertial scroll listener — scales the
   logo down and fades in a soft, borderless cream panel behind it
   (hanging from the top edge) so it stays legible over the content. */
.brandhead {
  position: fixed;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 412px;
  z-index: 30;
  padding-bottom: calc(22px - 8px * var(--shrink, 0));
  pointer-events: none; /* scroll gestures pass through to the content */
}
/* scroll backdrop: invisible at rest, fades in as the logo shrinks.
   A plain soft panel — no border, no hairlines, no ribbon shape —
   dropping from the top edge with gently rounded lower corners. */
.brand-ribbon {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: calc(118px - 18px * var(--shrink, 0));
  transform: translateX(-50%);
  z-index: -1;
  opacity: var(--shrink, 0);
  filter: drop-shadow(0 10px 18px rgba(6, 59, 57, calc(0.3 * var(--shrink, 0))));
}
.brand-ribbon .rb {
  position: absolute; inset: 0; display: block;
  border-radius: 0 0 26px 26px;
  background:
    radial-gradient(90% 56% at 50% 0%, rgba(15, 128, 119, 0.07), transparent 75%),
    linear-gradient(180deg, rgba(241, 231, 208, 0.94) 0%, rgba(247, 239, 222, 0.88) 100%);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
}
.statusbar {
  position: relative;
  z-index: 2;
  height: 40px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px;
  font-size: 13px; font-weight: 700; color: var(--t-800);
  /* no backdrop anymore — a soft cream halo keeps the glyphs legible
     over whatever scrolls beneath */
  text-shadow: 0 0 3px var(--cream), 0 0 10px var(--cream), 0 1px 14px var(--cream);
}
.statusbar .sb { display: flex; align-items: center; gap: 6px; }
.statusbar .sb i { width: 16px; height: 16px; }

/* centered calligraphic logo lockup — the mark IS the wordmark.
   Sits a touch higher, tucked up toward the status bar, and rides the
   ribbon upward as it retracts on scroll. */
.brandbar {
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
  margin-top: 14px;
  padding: 0 26px;
  transform: translateY(calc(-4px * var(--shrink, 0)));
}
.brand-logo {
  display: block;
  height: calc(80px - 26px * var(--shrink, 0));
  width: auto; flex: 0 0 auto;
  filter: drop-shadow(0 4px 10px rgba(6, 59, 57, calc(0.14 + 0.1 * var(--shrink, 0))));
}

/* symmetric ornamental wings: hairline fading outward + diamond finial.
   On scroll they GATHER into the logo: the hairline reels in toward the
   logo edge while the diamond finial glides along it — spinning and
   shrinking as it travels — then the whole wing dissolves at the end.
   All driven by --shrink, so it inherits the inertial smoothing. */
.brand-wing {
  position: relative;
  flex: 1 1 auto; max-width: 104px; height: 9px;
  /* hold fully visible through the first half, dissolve in the last part */
  opacity: clamp(0, calc((0.92 - var(--shrink, 0)) / 0.36), 1);
  transform: translateX(calc(-10px * var(--shrink, 0)));
}
.brand-wing:last-child {
  transform: translateX(calc(10px * var(--shrink, 0)));
}
/* hairline reels in toward the logo-adjacent edge */
.brand-wing::before {
  content: ""; position: absolute; left: 0; right: 9px; top: 50%;
  height: 1px;
  transform: translateY(-50%) scaleX(calc(1 - var(--shrink, 0)));
  transform-origin: left center;
  background: linear-gradient(270deg, rgba(156, 119, 38, 0.5), transparent);
}
/* diamond finial glides from the outer tip to the logo edge, pirouetting */
.brand-wing::after {
  content: ""; position: absolute; top: 50%;
  width: 6px; height: 6px;
  right: calc(var(--shrink, 0) * (100% - 6px));
  transform: translate(0, -50%)
             rotate(calc(45deg + 180deg * var(--shrink, 0)))
             scale(calc(1 - 0.45 * var(--shrink, 0)));
  background: var(--g-400);
}
.brand-wing:last-child::before {
  left: 9px; right: 0;
  transform-origin: right center;
  background: linear-gradient(90deg, rgba(156, 119, 38, 0.5), transparent);
}
.brand-wing:last-child::after {
  right: auto;
  left: calc(var(--shrink, 0) * (100% - 6px));
}

/* ================= CONTENT (scrolls) ================= */
.content {
  /* clears the fixed brand head (top) and fixed tab bar (bottom) */
  padding: 112px 20px calc(96px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
}
.content > * { flex-shrink: 0; }

/* ===== Mihrab card (today's dhikr) — separate, compact ===== */
.mihrab-card {
  position: relative;
  padding: 16px 18px 14px;
  color: #fdf7e6;
  background:
    radial-gradient(120% 60% at 50% 18%, rgba(15,128,119,0.5), transparent 62%),
    linear-gradient(165deg, #0f8077 0%, #0b5c56 48%, #063b39 100%);
  border: 1px solid rgba(231, 205, 134, 0.34);
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(6, 59, 57, 0.3);
  overflow: hidden;
  isolation: isolate;
}
.mihrab-card::before { /* lattice */
  content: "";
  position: absolute; inset: 0; z-index: -1; opacity: 0.45;
  background-image:
    repeating-linear-gradient(45deg, rgba(231,205,134,0.08) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(-45deg, rgba(231,205,134,0.08) 0 1px, transparent 1px 20px);
}
.mihrab-card .cta { margin-top: 8px; }

/* نیت ثابت درون کارت سبز، بالای دکمهٔ ورود (هم‌سبک hero-foot صفحهٔ جزئیات) */
.hero-foot { text-align: center; margin-top: 14px; }
.hero-foot h2 { margin: 0; font-size: 19px; font-weight: 800; color: #fdf7e6; }
.hero-foot p {
  margin: 5px 0 0; font-size: 12px; line-height: 1.8; color: rgba(247,234,208,0.78);
}

.card-head {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  text-align: center; margin-bottom: 2px;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 13px; font-weight: 700; letter-spacing: 1px; color: var(--g-300);
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--g-300);
  box-shadow: 0 0 0 3px rgba(231,205,134,0.18);
}
.today-date {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 12px; font-weight: 700; color: var(--g-200);
  padding: 5px 12px; border-radius: 999px;
  background: rgba(253,247,230,0.08);
  border: 1px solid rgba(231,205,134,0.28);
}
.today-date i { width: 14px; height: 14px; }

/* arch frame holding the dhikr */
.arch {
  position: relative;
  width: 100%;
  height: 198px;
  margin-top: 8px;
}
.arch > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.arch-inner {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 12px;
  padding: 44px 22px 20px;
}
.lamp { position: relative; color: var(--g-300); animation: floatY 5s ease-in-out infinite; }
.lamp svg { width: 25px; height: 25px; }
.lamp::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 54px; height: 54px; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(231,205,134,0.55), transparent 65%);
  z-index: -1;
  animation: glowPulse 3.2s ease-in-out infinite;
}
.dhikr-plate {
  position: relative;
  max-width: 100%;
  padding: 9px 18px;
  border-radius: 14px;
  background: rgba(253, 247, 230, 0.06);
  border: 1px solid rgba(231, 205, 134, 0.3);
  overflow: hidden;
}
.dhikr-plate::before { /* shimmer sweep */
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(247,234,208,0.2), transparent);
  animation: shimmer 5.5s ease-in-out infinite;
}
.dhikr {
  margin: 0;
  font-family: "Amiri", serif; font-weight: 700;
  font-size: 22px; line-height: 1.5; white-space: nowrap;
  color: #fbeec6;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* ===== title ===== */
.title-row { text-align: center; margin-top: 18px; }
.title { margin: 0; font-size: 23px; font-weight: 800; color: var(--t-950); }
.subtitle { margin: 6px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--muted); }

.stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 16px;
}
.stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 13px 12px;
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.stat .ic { color: var(--g-600); margin-bottom: 5px; }
.stat .ic i { width: 18px; height: 18px; }
.stat b { display: block; font-size: 18px; font-weight: 800; color: var(--t-900); }
.stat span { font-size: 11px; color: var(--muted); }

.cta {
  margin-top: 14px;
  width: 100%; height: 54px; border: 0; border-radius: 16px;
  font-family: inherit; font-size: 15.5px; font-weight: 800; color: var(--t-950);
  background: linear-gradient(135deg, var(--g-200), var(--g-500));
  box-shadow: 0 14px 30px rgba(182, 134, 44, 0.34);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  cursor: pointer; white-space: nowrap;
  position: relative; overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(182,134,44,0.4); }
.cta:active { transform: translateY(0); }
.cta i { width: 19px; height: 19px; }
.cta::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -50%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
  animation: shimmer 4.5s ease-in-out infinite 1s;
}

/* active sessions */
.sessions { margin-top: 22px; }
.sec-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.sec-head h2 { margin: 0; font-size: 16px; font-weight: 800; color: var(--t-900); white-space: nowrap; }
.sec-head .sec-tag {
  font-size: 11px; font-weight: 700; color: var(--t-700); white-space: nowrap;
  background: var(--t-100); padding: 4px 11px; border-radius: 999px;
}

.sess-card {
  width: 100%; text-align: right;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow-soft);
  display: grid; gap: 10px; cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.sess-card:hover { transform: translateY(-2px); border-color: var(--gold-line); box-shadow: var(--shadow-card); }
.sess-top { display: flex; align-items: center; justify-content: space-between; }
.chip { font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.chip-t { color: var(--t-800); background: var(--t-100); }
.chip-g { color: var(--g-700); background: rgba(231, 205, 134, 0.34); }
.sess-title { margin: 0; font-size: 16px; font-weight: 800; color: var(--t-950); }
.sess-dhikr { margin: 0; font-family: "Amiri", serif; font-size: 19px; font-weight: 700; color: var(--t-700); }
.sess-meta { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.sess-meta i { width: 15px; height: 15px; color: var(--g-600); }

/* Bottom nav styles moved to shared naadem-tabbar.css */

/* ================= ANIMATIONS ================= */
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes glowPulse {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.92); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
}
@keyframes shimmer { 0% { left: -60%; } 55%, 100% { left: 130%; } }

/* Ambient motion only — content is always visible at rest (robust to
   paused/captured rendering). The mihrab lamp glows + floats and a gold
   shimmer sweeps the calligraphy plate. */

@media (prefers-reduced-motion: reduce) {
  .logo-mark, .lamp, .lamp::after, .dhikr-plate::before, .cta::after {
    animation: none !important;
  }
}