/* ==========================================================================
   Ayah of the Day — Cosmic 3D section
   Quran x Science x Universe x Future. Calm, premium, not gamey.
   Everything here is scoped under .mrs-ayah-section — safe to load site-wide.
   ========================================================================== */

.mrs-ayah-section {
  /* Local tokens — reuse the site's real brand colors (see :root in base.html),
     not a duplicate palette. Extra shades below are derived from those. */
  --mrs-purple:        #8A22EB;
  --mrs-purple-dark:   #6a1ab8;
  --mrs-purple-light:  #b47ff0;
  --mrs-purple-50:     #F5F3FF;
  --mrs-orange:        #FF6607;
  --mrs-orange-light:  #ffab6b;
  --mrs-orange-50:     #FFF7ED;
  --mrs-ink:           #1A1625;
  --mrs-ink-soft:      #4B5563;
  --mrs-muted:         #6B7280;
  --mrs-card:          #FFFFFF;
  --mrs-page-1:        #FAF7FF;
  --mrs-page-2:        #EFE9FF;

  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(56px, 7vw, 96px) 20px;
  min-height: 520px;
  background: linear-gradient(180deg, var(--mrs-page-1) 0%, var(--mrs-page-2) 55%, var(--mrs-page-1) 100%);
}

.mrs-ayah-section > .container { position: relative; z-index: 3; }

/* ---------------------------------------------------------------------- *
 * Layer 0 — starfield canvas
 * ---------------------------------------------------------------------- */
.ayah-stars {
  position: absolute; inset: 0; z-index: 0;
  display: block; width: 100%; height: 100%;
  pointer-events: none;
}

/* ---------------------------------------------------------------------- *
 * Layer 1 — orbital clusters
 * ---------------------------------------------------------------------- */
.ayah-orbits {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  opacity: 0; /* entrance-animated in via .mrs-ayah-armed/.mrs-ayah-in-view on the section */
}
/* JS-only wrapper: pointer tilt is written here so it never fights the
   CSS-driven entrance transform on .ayah-orbits itself. */
.ayah-orbits-tilt {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
}
.ayah-cluster {
  position: absolute; top: 50%;
  width: 430px; height: 430px; margin-top: -215px;
  perspective: 900px;
  /* full opacity here — the fade-in/target dimming lives on .ayah-orbits only,
     so the two don't multiply together into something dimmer than intended */
  opacity: 1;
  /* transform is JS-only (scroll parallax) — nothing here to avoid conflicts */
}
.ayah-cluster-left  { left: clamp(-70px, 2vw, 10px); }
.ayah-cluster-right { right: clamp(-70px, 2vw, 10px); }

.ayah-ring {
  position: absolute; top: 50%; left: 50%;
  border-radius: 50%;
  transform-style: preserve-3d;
}
.ayah-ring-1 {
  width: 220px; height: 220px; margin: -110px 0 0 -110px;
  border: 2.5px solid rgba(138, 34, 235, .70);
  box-shadow: 0 0 22px rgba(138, 34, 235, .22);
  animation: ayah-ring1-spin 42s linear infinite;
}
.ayah-ring-2 {
  width: 320px; height: 320px; margin: -160px 0 0 -160px;
  border: 2.5px dashed rgba(255, 102, 7, .62);
  box-shadow: 0 0 22px rgba(255, 102, 7, .18);
  animation: ayah-ring2-spin 66s linear infinite reverse;
}
.ayah-ring-3 {
  width: 430px; height: 430px; margin: -215px 0 0 -215px;
  border: 2.5px solid rgba(180, 127, 240, .52);
  animation: ayah-ring3-spin 95s linear infinite;
}
@keyframes ayah-ring1-spin { from { transform: rotateX(58deg) rotateZ(0deg); }   to { transform: rotateX(58deg) rotateZ(360deg); } }
@keyframes ayah-ring2-spin { from { transform: rotateX(50deg) rotateY(18deg) rotateZ(0deg); }  to { transform: rotateX(50deg) rotateY(18deg) rotateZ(360deg); } }
@keyframes ayah-ring3-spin { from { transform: rotateX(62deg) rotateY(-12deg) rotateZ(0deg); } to { transform: rotateX(62deg) rotateY(-12deg) rotateZ(360deg); } }

.ayah-electron {
  position: absolute;
  width: 8px; height: 8px; margin: -4px;
  border-radius: 50%;
  box-shadow: 0 0 12px 3px currentColor;
}
.ayah-electron.is-purple { background: var(--mrs-purple-light); color: var(--mrs-purple); }
.ayah-electron.is-orange { background: var(--mrs-orange-light); color: var(--mrs-orange); }
.ayah-ring-1 .ayah-electron { top: 0;   left: 50%; }
.ayah-ring-2 .ayah-electron:nth-child(1) { top: 50%; left: 100%; }
.ayah-ring-2 .ayah-electron:nth-child(2) { top: 50%; left: 0; }
.ayah-ring-3 .ayah-electron { top: 100%; left: 50%; }

.ayah-core {
  position: absolute; top: 50%; left: 50%;
  width: 76px; height: 76px; margin: -38px 0 0 -38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 32% 30%, var(--mrs-purple-light), var(--mrs-purple) 60%, var(--mrs-purple-dark));
  box-shadow: 0 0 56px rgba(138, 34, 235, .46);
  animation: ayah-core-float 6s ease-in-out infinite;
}
.ayah-cluster-right .ayah-core {
  background: radial-gradient(circle at 32% 30%, var(--mrs-orange-light), var(--mrs-orange) 60%, #c94e02);
  box-shadow: 0 0 56px rgba(255, 102, 7, .40);
  animation-delay: -3s;
}
.ayah-core svg { width: 30px; height: 30px; }
@keyframes ayah-core-float {
  0%, 100% { transform: translateY(-8px); }
  50%      { transform: translateY(8px); }
}

/* ---------------------------------------------------------------------- *
 * Layer 2 — nebula glow
 * ---------------------------------------------------------------------- */
.ayah-glow { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ayah-blob {
  position: absolute; border-radius: 50%;
}
.ayah-blob-a {
  width: 520px; height: 520px; top: -10%; left: -8%;
  background: radial-gradient(circle, rgba(138, 34, 235, .24), transparent 68%);
  filter: blur(60px);
  animation: ayah-drift-a 20s ease-in-out infinite alternate;
}
.ayah-blob-b {
  width: 460px; height: 460px; bottom: -14%; right: -6%;
  background: radial-gradient(circle, rgba(255, 102, 7, .20), transparent 70%);
  filter: blur(70px);
  animation: ayah-drift-b 24s ease-in-out infinite alternate;
}
@keyframes ayah-drift-a { from { transform: translate(0, 0); } to { transform: translate(20px, 20px); } }
@keyframes ayah-drift-b { from { transform: translate(0, 0); } to { transform: translate(-20px, -20px); } }

/* ---------------------------------------------------------------------- *
 * Layer 3 — the ayah card
 * ---------------------------------------------------------------------- */
.mrs-ayah-card {
  position: relative;
  z-index: 3;
  overflow: hidden;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  backdrop-filter: blur(6px) saturate(140%);
  border: 1px solid rgba(124, 58, 237, .14);
  border-radius: 24px;
  padding: clamp(32px, 4vw, 52px) clamp(24px, 4vw, 56px);
  box-shadow: 0 20px 50px -20px rgba(106, 26, 184, .28), 0 2px 8px rgba(31, 41, 55, .05);
}
.ayah-card-accent {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--mrs-orange), #FB923C 45%, var(--mrs-purple));
}
.mrs-ayah-card::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(138, 34, 235, .06) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.mrs-ayah-watermark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 15rem;
  color: var(--mrs-purple);
  opacity: .06;
  pointer-events: none;
  z-index: 0;
  line-height: 1;
  animation: ayah-watermark-spin 120s linear infinite;
}
@keyframes ayah-watermark-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }

.mrs-ayah-badge {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 16px; border-radius: 999px;
  border: 1px solid rgba(255, 102, 7, .35);
  background: rgba(255, 102, 7, .08);
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  color: var(--mrs-purple);
}

.mrs-ayah-quote { margin: 0; }
.mrs-ayah-arabic {
  position: relative; z-index: 1;
  font-family: 'Amiri', 'Noto Nastaliq Urdu', serif;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  line-height: 2.0; font-weight: 400;
  color: var(--mrs-ink);
  text-align: center;
  margin: 26px 0 22px;
}
.mrs-ayah-divider {
  position: relative; z-index: 1;
  height: 1px; width: 120px;
  margin: 0 auto 22px;
  background: linear-gradient(90deg, transparent, var(--mrs-orange), transparent);
}
.mrs-ayah-urdu {
  position: relative; z-index: 1;
  font-family: 'Noto Nastaliq Urdu', 'Amiri', serif;
  font-size: clamp(.95rem, 1.6vw, 1.15rem);
  line-height: 2.4;
  color: var(--mrs-ink-soft);
  text-align: center;
  margin: 0 0 12px;
}
.mrs-ayah-en {
  position: relative; z-index: 1;
  font-size: clamp(.9rem, 1.4vw, 1.02rem);
  font-style: italic;
  color: var(--mrs-muted);
  text-align: center;
  margin: 0 0 18px;
}
.mrs-ayah-ref {
  position: relative; z-index: 1;
  display: block;
  font-weight: 600; font-size: .92rem; letter-spacing: .02em;
  font-style: normal;
  color: var(--mrs-orange);
  text-align: center;
}

/* ---------------------------------------------------------------------- *
 * Entrance animation — fires once, gated by JS toggling .mrs-armed then
 * .in-view (see ayah_section.js). Content stays fully visible if JS never
 * runs, so nothing is ever stuck hidden.
 * ---------------------------------------------------------------------- */
.mrs-ayah-card.mrs-armed {
  opacity: 0;
  /* 2D-only on purpose: a rotateX() here, combined with overflow:hidden on an
     auto-height box, triggers a Chromium layout bug that inflates the box to
     thousands of px tall during/after the transition. */
  transform: translateY(38px) scale(.97);
  transition: opacity 900ms cubic-bezier(.22,.9,.32,1), transform 900ms cubic-bezier(.22,.9,.32,1);
}
.mrs-ayah-card.mrs-armed .mrs-ayah-badge { opacity: 0; transform: translateY(12px); transition: opacity 500ms cubic-bezier(.22,.9,.32,1) 120ms, transform 500ms cubic-bezier(.22,.9,.32,1) 120ms; }
.mrs-ayah-card.mrs-armed .mrs-ayah-arabic { opacity: 0; transform: translateY(20px); filter: blur(6px); transition: opacity 800ms cubic-bezier(.22,.9,.32,1) 260ms, transform 800ms cubic-bezier(.22,.9,.32,1) 260ms, filter 800ms cubic-bezier(.22,.9,.32,1) 260ms; }
.mrs-ayah-card.mrs-armed .mrs-ayah-divider { transform: scaleX(0); transition: transform 600ms cubic-bezier(.22,.9,.32,1) 520ms; }
.mrs-ayah-card.mrs-armed .mrs-ayah-urdu { opacity: 0; transform: translateY(14px); transition: opacity 600ms cubic-bezier(.22,.9,.32,1) 620ms, transform 600ms cubic-bezier(.22,.9,.32,1) 620ms; }
.mrs-ayah-card.mrs-armed .mrs-ayah-en { opacity: 0; transform: translateY(14px); transition: opacity 600ms cubic-bezier(.22,.9,.32,1) 720ms, transform 600ms cubic-bezier(.22,.9,.32,1) 720ms; }
.mrs-ayah-card.mrs-armed .mrs-ayah-ref { opacity: 0; transform: translateY(14px); transition: opacity 600ms cubic-bezier(.22,.9,.32,1) 820ms, transform 600ms cubic-bezier(.22,.9,.32,1) 820ms; }

.mrs-ayah-card.mrs-armed.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.mrs-ayah-card.mrs-armed.in-view .mrs-ayah-badge,
.mrs-ayah-card.mrs-armed.in-view .mrs-ayah-arabic,
.mrs-ayah-card.mrs-armed.in-view .mrs-ayah-urdu,
.mrs-ayah-card.mrs-armed.in-view .mrs-ayah-en,
.mrs-ayah-card.mrs-armed.in-view .mrs-ayah-ref {
  opacity: 1; transform: translateY(0); filter: blur(0);
}
.mrs-ayah-card.mrs-armed.in-view .mrs-ayah-divider { transform: scaleX(1); }

.mrs-ayah-section.mrs-ayah-armed .ayah-orbits {
  transform: scale(.86);
  transition: opacity 1200ms cubic-bezier(.22,.9,.32,1) 100ms, transform 1200ms cubic-bezier(.22,.9,.32,1) 100ms;
}
.mrs-ayah-section.mrs-ayah-armed.mrs-ayah-in-view .ayah-orbits {
  opacity: .96; transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .mrs-ayah-card.mrs-armed,
  .mrs-ayah-card.mrs-armed .mrs-ayah-badge,
  .mrs-ayah-card.mrs-armed .mrs-ayah-arabic,
  .mrs-ayah-card.mrs-armed .mrs-ayah-urdu,
  .mrs-ayah-card.mrs-armed .mrs-ayah-en,
  .mrs-ayah-card.mrs-armed .mrs-ayah-ref {
    opacity: 1; transform: none; filter: none; transition: none;
  }
  .mrs-ayah-card.mrs-armed .mrs-ayah-divider { transform: scaleX(1); transition: none; }
  .mrs-ayah-section.mrs-ayah-armed .ayah-orbits { opacity: .96; transform: scale(1); transition: none; }
  .ayah-ring-1, .ayah-ring-2, .ayah-ring-3, .ayah-core, .ayah-blob-a, .ayah-blob-b, .mrs-ayah-watermark { animation: none !important; }
}

/* ---------------------------------------------------------------------- *
 * Low-power mode (navigator.hardwareConcurrency <= 4) — set by JS
 * ---------------------------------------------------------------------- */
.mrs-ayah-section.ayah-low-power .ayah-ring-3 { display: none; }

/* ---------------------------------------------------------------------- *
 * Responsive
 * ---------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .mrs-ayah-section.mrs-ayah-armed .ayah-orbits { transform: scale(.68); }
  .mrs-ayah-section.mrs-ayah-armed.mrs-ayah-in-view .ayah-orbits { transform: scale(.8); }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .ayah-cluster-left { display: none; }
  .ayah-cluster-right { opacity: .35; }
}
@media (max-width: 767.98px) {
  .ayah-orbits { display: none; }
  .mrs-ayah-section { min-height: 420px; }
  .mrs-ayah-card { padding: 28px 20px; }
  .mrs-ayah-arabic { font-size: clamp(1.6rem, 4.2vw, 3.1rem); }
}

.mrs-ayah-section, .mrs-ayah-card, .ayah-orbits, .ayah-stars, .ayah-glow { max-width: 100%; }