/* =====================================================================
   Wedding invitation — styles
   Palette: deep emerald ink + antique gold + cream
   ===================================================================== */
:root{
  --ink:#071a15;
  --ink-2:#0c2620;
  --ink-3:#143b31;
  --gold:#c9a961;
  --gold-2:#e8d6a4;
  --gold-3:#9d8043;
  --cream:#f4eee1;
  --cream-2:#e9e0ca;
  --text:#f1eadb;
  --muted:rgba(241,234,219,.62);
  --line:rgba(201,169,97,.35);

  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ar:'Amiri','Scheherazade New','Noto Naskh Arabic',serif;
  --ar-display:'Aref Ruqaa','Amiri',serif;

  /* live values written by JS: tilt (-1..1) and foil sheen position (%) */
  --tx:0; --ty:0; --sheen:50%;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; } /* no scroll-behavior:smooth — it breaks ScrollTrigger refresh */
html,body{ margin:0; background:var(--ink); color:var(--text); }
body{
  font-family:var(--serif);
  font-size:1.0625rem;
  line-height:1.6;
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
  min-height:100svh;
}
body.locked{ overflow:hidden; height:100%; }
img,svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; border-radius:2px; }
.defs{ position:absolute; width:0; height:0; overflow:hidden; }
[hidden]{ display:none !important; }
[lang="ar"]{ font-family:var(--ar); }

/* ---------- ambient background ---------- */
.bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bg__tilt{
  position:absolute; inset:-12%;
  transform:translate3d(calc(var(--tx) * 22px), calc(var(--ty) * 22px), 0);
  will-change:transform;
}
.bg__scroll{ position:absolute; inset:0; }
.bg__svg{ width:100%; height:100%; max-width:none; opacity:.16; animation:breathe 26s ease-in-out infinite alternate; }
@keyframes breathe{ from{ transform:scale(1); } to{ transform:scale(1.05); } }
.bg__sweep{ /* a slow band of light travelling across the pattern */
  position:absolute; inset:-60%;
  background:linear-gradient(115deg, transparent 42%, rgba(232,214,164,.10) 50%, transparent 58%);
  mix-blend-mode:screen; animation:sweep 16s ease-in-out infinite;
}
@keyframes sweep{ 0%{ transform:translateX(-30%); } 100%{ transform:translateX(30%); } }
.bg__shine{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 45% at calc(50% + var(--tx) * 28%) calc(38% + var(--ty) * 28%),
      rgba(232,214,164,.13), transparent 70%);
  mix-blend-mode:screen;
}

/* ---------- drifting verses ---------- */
.ayat{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent),
                     linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent),
             linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
  mask-composite:intersect;
}
.ayat--cover{ position:absolute; z-index:1; }
.ayat__inner{
  position:absolute; inset:-6%;
  transform:translate3d(calc(var(--tx) * 14px), calc(var(--ty) * 14px), 0); will-change:transform;
}
.ayah{
  position:absolute; left:var(--x); top:var(--y); margin:0;
  font-family:var(--ar); font-size:var(--s); line-height:1.4; white-space:nowrap; direction:rtl;
  color:var(--gold-2); opacity:0; filter:blur(var(--b));
  text-shadow:0 0 22px rgba(201,169,97,.35);
  animation:ayahRise var(--dur) var(--delay) ease-in-out infinite;
}
@keyframes ayahRise{
  0%  { opacity:0; transform:translate3d(0, 46px, 0); }
  22% { opacity:var(--o); }
  78% { opacity:var(--o); }
  100%{ opacity:0; transform:translate3d(0, -76px, 0); }
}

/* spotlight dimmer: darkens the page around a point (--sx/--sy) */
.spot{
  position:fixed; inset:0; z-index:80; pointer-events:none; opacity:0;
  background:radial-gradient(circle at var(--sx,50%) var(--sy,50%), rgba(3,12,10,0) 70px, rgba(3,12,10,.55) 200px, rgba(3,12,10,.88) 100%);
}

/* gold dust + tap ripples (above content, below cover) */
.dust{ position:fixed; inset:0; width:100%; height:100%; z-index:90; pointer-events:none; }
.ripple{
  position:fixed; z-index:85; width:160px; height:160px; margin:-80px 0 0 -80px; pointer-events:none;
  color:var(--gold); animation:rippleStar .95s cubic-bezier(.2,.7,.2,1) forwards;
}
.ripple svg{ width:100%; height:100%; overflow:visible; }
@keyframes rippleStar{ from{ transform:scale(.12) rotate(0deg); opacity:.75; } to{ transform:scale(1.7) rotate(45deg); opacity:0; } }
.ripple--big{ width:min(90vw,520px); height:min(90vw,520px); margin:calc(min(90vw,520px) / -2) 0 0 calc(min(90vw,520px) / -2); animation-duration:2.2s; color:var(--gold-2); }

/* ---------- layout primitives ---------- */
main{ position:relative; z-index:1; }
section,footer{ position:relative; padding:5.5rem 1.5rem; }
.section__inner{ max-width:36rem; margin:0 auto; text-align:center; }

.eyebrow{
  font-family:var(--sans); font-weight:400; font-size:.7rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--gold); margin:0 0 1.2rem;
}
.eyebrow--dark{ color:var(--gold-3); }
.h2{
  font-weight:300; font-size:clamp(2rem, 8vw, 2.9rem); line-height:1.1; margin:0 0 1.2rem;
  letter-spacing:.01em;
}

.orn{
  display:flex; align-items:center; justify-content:center; gap:.9rem;
  color:var(--gold); margin:0 auto 3.2rem; max-width:20rem;
}
.orn span{ flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--line)); }
.orn span:last-child{ background:linear-gradient(90deg, var(--line), transparent); }
.orn svg{ width:16px; height:16px; flex:none; animation:spin 40s linear infinite; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--sans); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  padding:.85rem 1.35rem; border:1px solid var(--gold); color:var(--gold); border-radius:999px;
  transition:background .25s, color .25s, transform .15s, box-shadow .25s;
  min-height:44px; position:relative; overflow:hidden;
}
.btn:active{ transform:scale(.97); }
.btn--ghost{ border-color:var(--line); color:inherit; }
.btn--solid{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.btn--solid::after{ /* passing glint */
  content:""; position:absolute; top:-20%; bottom:-20%; width:30%; left:-40%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg); animation:glint 5s ease-in-out infinite;
}
@keyframes glint{ 0%,70%{ left:-40%; } 100%{ left:140%; } }
.btn--solid:hover{ background:var(--gold-2); border-color:var(--gold-2); }
.btn--wide{ width:100%; padding:1rem 1.35rem; }
.btn--small{ font-size:.64rem; padding:.65rem 1rem; min-height:38px; }

/* =====================================================================
   COVER
   ===================================================================== */
.cover{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  background:radial-gradient(120% 90% at 50% 35%, var(--ink-3) 0%, var(--ink) 65%);
  touch-action:none; overflow:hidden;
  clip-path:circle(100% at 50% 50%);
}
.cover__pattern{ position:absolute; inset:-12%; width:124%; height:124%; max-width:none; opacity:.14; animation:breathe 26s ease-in-out infinite alternate;
  transform:translate3d(calc(var(--tx) * 22px), calc(var(--ty) * 22px), 0); }
.cover__inner{ position:relative; z-index:2; display:grid; justify-items:center; gap:2.4rem; padding:2rem; }
.cover__eyebrow{
  margin:0; font-family:var(--sans); font-size:.68rem; letter-spacing:.38em; text-transform:uppercase;
  color:var(--muted); animation:fadeUp 1.4s .3s both;
}
.cover__hint{ margin:0; display:grid; gap:.45rem; text-align:center; animation:fadeUp 1.4s .9s both; }
.cover__hint-en{ font-family:var(--sans); font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); animation:pulse 3s ease-in-out infinite; }
.cover__hint-ar{ font-size:1.05rem; color:var(--gold); opacity:.75; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes pulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

/* the seal */
.seal{
  position:relative; width:196px; height:196px; border-radius:50%;
  display:grid; place-items:center; animation:fadeUp 1.6s .5s both;
  -webkit-touch-callout:none; user-select:none;
  transition:transform .18s ease;
}
.seal:active{ transform:scale(.96); }
.seal__glow{
  position:absolute; inset:-34%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(201,169,97,.26), rgba(201,169,97,0) 62%);
  filter:blur(6px); animation:glowBreathe 6s ease-in-out infinite;
}
@keyframes glowBreathe{ 0%,100%{ opacity:.6; transform:scale(.96); } 50%{ opacity:.9; transform:scale(1.04); } }
.seal__ring{ position:absolute; inset:0; border-radius:50%; pointer-events:none; }
.seal__ring--outer{ border:1px solid var(--line); animation:ripple 4s ease-out infinite; }
.seal__ring--dash{
  inset:10px; border:1px dashed rgba(201,169,97,.45);
  animation:spin 90s linear infinite;
}
@keyframes ripple{ 0%{ transform:scale(1); opacity:.9; } 100%{ transform:scale(1.28); opacity:0; } }
@keyframes spin{ to{ transform:rotate(360deg); } }
.seal__disc{
  position:relative; width:150px; height:150px; border-radius:50%; display:grid; place-items:center; overflow:hidden;
  background:
    radial-gradient(circle at 38% 30%, rgba(232,214,164,.22), transparent 55%),
    radial-gradient(circle at 50% 50%, var(--ink-3), var(--ink-2) 75%);
  border:1px solid rgba(201,169,97,.7);
  box-shadow:
    0 24px 60px -18px rgba(0,0,0,.9),
    inset 0 1px 0 rgba(232,214,164,.35),
    inset 0 -14px 30px rgba(0,0,0,.35),
    0 0 0 6px var(--ink), 0 0 0 7px rgba(201,169,97,.35);
}
.seal__disc::after{ /* light sweeping across the disc */
  content:""; position:absolute; inset:-30%;
  background:linear-gradient(120deg, transparent 40%, rgba(232,214,164,.16) 50%, transparent 60%);
  animation:discSweep 6s ease-in-out infinite;
}
@keyframes discSweep{ 0%,55%{ transform:translateX(-45%); } 100%{ transform:translateX(45%); } }
.seal__mono{
  position:relative; display:flex; align-items:center; gap:.4rem;
  font-family:var(--serif); font-weight:300; font-size:3rem; line-height:1; color:var(--gold-2);
  text-shadow:0 1px 0 rgba(0,0,0,.6);
}
.seal__star{ width:16px; height:16px; color:var(--gold); animation:spin 30s linear infinite; }

/* bismillah reveal */
.bismillah{
  position:absolute; inset:0; z-index:3; display:grid; align-content:center; justify-items:center;
  gap:1.1rem; padding:2rem; text-align:center; pointer-events:none; opacity:0;
}
.bismillah__ar{
  --gx:100%;
  position:relative; margin:0; font-family:var(--ar); font-size:clamp(2.3rem, 10vw, 4.4rem); line-height:1.7;
  color:var(--gold-2); clip-path:inset(-20% 0 -20% 100%);
  text-shadow:0 0 40px rgba(201,169,97,.25);
}
.bismillah__ar::after{ /* glowing pen-tip travelling with the reveal edge */
  content:""; position:absolute; top:-10%; bottom:-10%; width:34%; left:var(--gx); transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(232,214,164,.45), transparent); filter:blur(8px);
}
.bismillah__en{ margin:0; font-style:italic; font-weight:300; font-size:1.05rem; color:var(--muted); opacity:0; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  /* a little shorter than the screen so the next section's divider peeks in below the fold */
  min-height:calc(100svh - 72px); display:grid; place-items:center; text-align:center;
  padding:3.5rem 1.25rem 4.5rem; overflow:hidden;
}
.mandala-wrap{ position:absolute; left:50%; top:50%; width:150vmin; height:150vmin; margin:-75vmin 0 0 -75vmin; pointer-events:none; will-change:transform; } /* explicit centring: auto margins can't centre a box wider than its container */
.mandala{ width:100%; height:100%; max-width:none; opacity:.13; fill:none; stroke:var(--gold); stroke-width:.7; }
.mandala g{ transform-box:fill-box; transform-origin:center; }
.mandala__a{ animation:spin 160s linear infinite; }
.mandala__b{ animation:spin 110s linear infinite reverse; }
.mandala__c{ animation:spin 70s linear infinite; }

.hero__inner{ position:relative; max-width:40rem; display:grid; justify-items:center; gap:1.2rem; will-change:transform,opacity; }
.hero .eyebrow{ margin:0; }
.host{ margin:0; max-width:24rem; font-style:italic; font-weight:300; font-size:1.15rem; line-height:1.5; color:var(--muted); }
.names{
  margin:.4rem 0 0; display:grid; justify-items:center; gap:.1em;
  font-weight:300; font-size:clamp(3.4rem, 17vw, 6.6rem); line-height:1; letter-spacing:.01em;
}
.name{ display:block; white-space:nowrap; padding:0 .06em; }
.name .ch{ display:inline-block; will-change:transform,opacity,filter; }
.name.is-foil{ /* gold-foil glint that follows the tilt */
  background:linear-gradient(100deg, var(--text) 0%, var(--text) 40%, #fff3d2 47%, var(--gold-2) 50%, #fff3d2 53%, var(--text) 60%, var(--text) 100%);
  background-size:300% 100%; background-position:var(--sheen) 0;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.amp{
  font-style:italic; font-weight:300; color:var(--gold); font-size:.62em; line-height:1;
  margin:.05em 0; animation:ampBreathe 5s ease-in-out infinite;
}
@keyframes ampBreathe{ 0%,100%{ text-shadow:0 0 0 rgba(201,169,97,0); } 50%{ text-shadow:0 0 22px rgba(201,169,97,.45); } }
.amp--word{ font-size:.34em; letter-spacing:.06em; margin:.1em 0; }
.names-ar{
  margin:0; font-family:var(--ar-display); font-size:clamp(1.6rem, 7vw, 2.4rem); color:var(--gold-2);
  line-height:1.6;
}
.names-ar__and{ color:var(--gold); opacity:.8; margin:0 .25em; font-size:.85em; }
.lede{ margin:.3rem 0 0; font-style:italic; font-weight:300; font-size:1.2rem; color:var(--muted); line-height:1.5; }

.date{ display:flex; align-items:center; justify-content:center; gap:1.1rem; margin-top:.6rem; }
.date__dow,.date__mon{
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.28em; font-size:.68rem;
  color:var(--muted); line-height:1.8;
}
.date__dow{ text-align:right; border-right:1px solid var(--line); padding-right:1.1rem; }
.date__mon{ text-align:left; border-left:1px solid var(--line); padding-left:1.1rem; }
.date__num{ font-weight:300; font-size:4.4rem; line-height:1; color:var(--gold-2); }

.hijri{ margin:0; display:grid; gap:.2rem; font-style:italic; font-weight:300; font-size:1rem; color:var(--muted); }
.hijri__isa{ font-family:var(--ar); font-style:normal; font-size:1.15rem; color:var(--gold); opacity:.85; }
.place{ margin:0; font-family:var(--sans); font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); }

/* scroll cue: label + a chevron that drifts down and softens, slow and even (no bounce, no blink) */
.scroll-cue{
  position:absolute; bottom:1.1rem; left:50%; transform:translateX(-50%);
  display:grid; justify-items:center; gap:.3rem; pointer-events:none;
}
.scroll-cue__label{ font-family:var(--sans); font-size:.68rem; letter-spacing:.34em; text-transform:uppercase; color:var(--muted); padding-left:.34em; }
.scroll-cue__chev{
  width:18px; height:18px; fill:none; stroke:var(--gold); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
  animation:cueDrift 2.4s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes cueDrift{ 0%{ transform:translateY(-4px); opacity:.4; } 45%{ opacity:1; } 100%{ transform:translateY(6px); opacity:.4; } }

/* =====================================================================
   VERSE
   ===================================================================== */
.verse{ padding-top:2rem; }
.frame{
  position:relative; max-width:38rem; margin:0 auto; padding:2.6rem 1.6rem; text-align:center;
  border:1px solid var(--line);
}
.frame::before,.frame::after{
  content:""; position:absolute; inset:6px; border:1px solid rgba(201,169,97,.18); pointer-events:none;
}
.frame::after{ inset:-5px; border:0;
  background:
    radial-gradient(circle at 0 0, var(--gold) 0 3px, transparent 4px),
    radial-gradient(circle at 100% 0, var(--gold) 0 3px, transparent 4px),
    radial-gradient(circle at 0 100%, var(--gold) 0 3px, transparent 4px),
    radial-gradient(circle at 100% 100%, var(--gold) 0 3px, transparent 4px);
}
.verse__ar{
  margin:0 0 1.4rem; font-family:var(--ar); font-size:clamp(1.55rem, 6.4vw, 2.3rem); line-height:2.05;
  color:var(--gold-2);
}
.verse__ar .w{ display:inline-block; will-change:opacity,filter; }
.verse__en{ margin:0 0 1rem; font-style:italic; font-weight:300; font-size:1.12rem; line-height:1.65; color:var(--text); }
.verse__ref{ margin:0; font-family:var(--sans); font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); }

/* =====================================================================
   DETAILS (dark panel)
   ===================================================================== */
.panel{ background:linear-gradient(180deg, rgba(20,59,49,.55), rgba(12,38,32,.35) 40%, rgba(7,26,21,0)); overflow:hidden; }
.panel::before{ /* gold rule that draws itself in when the section arrives */
  content:""; position:absolute; top:0; left:0; right:0; height:1px; z-index:1;
  background:linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
  transform:scaleX(0); transition:transform 1.8s cubic-bezier(.2,.7,.2,1);
}
.panel.is-in::before{ transform:scaleX(1); }
.panel__pattern{ position:absolute; inset:0; width:100%; height:100%; max-width:none; opacity:.08; pointer-events:none; }
.panel .section__inner{ position:relative; }

.cards{ display:grid; gap:1.2rem; margin:2rem 0 3rem; perspective:1100px; }
.card-wrap{ transform-style:preserve-3d; }
.card{
  position:relative;
  transform:rotateY(calc(var(--tx) * 5deg)) rotateX(calc(var(--ty) * -5deg));
  transform-style:preserve-3d; will-change:transform; transition:transform .2s ease-out;
}
.card__face{
  position:relative; text-align:center; padding:2.2rem 1.4rem 2rem;
  background:linear-gradient(160deg, #143b31, #0b231d);
  border:1px solid rgba(201,169,97,.55);
  box-shadow:0 36px 70px -34px rgba(0,0,0,.9), inset 0 1px 0 rgba(232,214,164,.18);
}
.card__face::before{ content:""; position:absolute; inset:7px; border:1px solid rgba(201,169,97,.22); pointer-events:none; }
.card__face::after{ /* gold gloss that slides with tilt */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(232,214,164,.16) 50%, transparent 70%);
  background-size:220% 100%;
  background-position:calc(50% + var(--tx) * 60%) 0;
}
.card__ar{ display:block; font-family:var(--ar-display); font-size:1.5rem; color:var(--gold); line-height:1.4; }
.card__title{ margin:.2rem 0 .8rem; font-weight:300; font-size:2.2rem; line-height:1; letter-spacing:.02em; color:var(--gold-2); }
.card__when{ margin:0 0 1.1rem; font-family:var(--sans); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.card__venue{ margin:0; font-size:1.35rem; font-weight:500; line-height:1.3; color:var(--text); }
.card__addr{ margin:.15rem 0 1.4rem; font-style:italic; color:var(--muted); }
.card__actions{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; position:relative; z-index:1; }

.countdown{ display:flex; justify-content:center; gap:0; margin:0 auto; max-width:24rem; }
.countdown__item{ flex:1; display:grid; justify-items:center; gap:.15rem; padding:.2rem 0; border-left:1px solid var(--line); }
.countdown__item:first-child{ border-left:0; }
.countdown__item b{ display:block; font-weight:300; font-size:2.3rem; line-height:1; font-variant-numeric:tabular-nums; color:var(--gold-2); }
.countdown__item span{ font-family:var(--sans); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }

/* =====================================================================
   GETTING THERE (compass)
   ===================================================================== */
.where__addr{ margin:0 0 1.8rem; font-style:italic; color:var(--muted); line-height:1.65; }
.mobile-only{ display:none; }                 /* sensor features only make sense on a phone */
html.is-mobile .mobile-only{ display:block; }
.compass{ width:min(66vw, 250px); margin:0 auto 1.6rem; cursor:pointer; -webkit-tap-highlight-color:transparent; user-select:none; }
.compass:focus-visible{ outline:2px solid var(--gold); outline-offset:6px; border-radius:50%; }
.compass__dial{ width:100%; height:auto; overflow:visible; }
.compass__ring{ fill:none; stroke:var(--line); stroke-width:1; }
.compass__pulse{ fill:none; stroke:var(--gold); stroke-width:1; opacity:0; transform-box:view-box; transform-origin:100px 100px; }
.compass.needs-tap .compass__pulse{ animation:compassPulse 3.6s ease-out infinite; } /* the seal's "touch me" ring, reused */
@keyframes compassPulse{ 0%{ transform:scale(.98); opacity:.9; } 100%{ transform:scale(1.26); opacity:0; } }
.compass.needs-tap .compass__label{ font-family:var(--sans); font-style:normal; font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); line-height:1.8; }
.compass__ring--ticks{ stroke:rgba(201,169,97,.6); stroke-dasharray:1.2 6.13; } /* 72 ticks around r=84 */
.compass__n{ font-family:var(--sans); font-size:10.5px; letter-spacing:.2em; fill:var(--gold); }
.compass__star{ color:var(--gold); opacity:.75; }
.compass__needle, #compass-rose{ transform-box:view-box; transform-origin:100px 100px; }
.compass:not(.is-live) .compass__needle{ animation:needleIdle 9s ease-in-out infinite; } /* slow sway until it has a target */
@keyframes needleIdle{ 0%,100%{ transform:rotate(-16deg); } 50%{ transform:rotate(16deg); } }
.compass__tip{ fill:var(--gold-2); }
.compass__tail{ fill:rgba(201,169,97,.38); }
.compass__needle circle{ fill:var(--ink); stroke:var(--gold); stroke-width:1.5; }
.compass.is-live .compass__tip{ filter:drop-shadow(0 0 6px rgba(232,214,164,.45)); }
.compass__label{ margin:.9rem 0 0; font-style:italic; color:var(--muted); font-size:.98rem; min-height:1.6em; }
.where__actions{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.1rem; }
.where__note{ margin:0 auto; max-width:30rem; font-family:var(--sans); font-size:.68rem; letter-spacing:.05em; line-height:1.6; color:var(--muted); opacity:.85; }

/* =====================================================================
   CLOSING
   ===================================================================== */
.closing{ text-align:center; padding-bottom:6rem; }
.monogram{
  position:relative; width:104px; height:104px; margin:0 auto; border-radius:50%;
  display:grid; place-items:center; -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; touch-action:none;
}
.monogram__ring{ position:absolute; inset:0; transform:rotate(-90deg); }
.monogram__track{ fill:none; stroke:var(--line); stroke-width:1; }
.monogram__fill{
  fill:none; stroke:var(--gold); stroke-width:1.5; stroke-linecap:round;
  stroke-dasharray:295.3; stroke-dashoffset:295.3; transition:stroke-dashoffset .25s ease-out;
}
.monogram.is-pressing .monogram__fill{ stroke-dashoffset:0; transition:stroke-dashoffset .8s linear; }
.monogram.is-done .monogram__fill{ stroke-dashoffset:0; }
.monogram__txt{ font-size:2rem; font-weight:300; color:var(--gold-2); letter-spacing:.06em; }
.monogram__txt i{ font-style:normal; color:var(--gold); margin:0 .05em; }
.closing__hint{ margin:.9rem 0 0; font-family:var(--sans); font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); opacity:.7; animation:pulse 3.5s ease-in-out infinite; }

.dua{ max-width:34rem; margin:2.2rem auto 0; padding:1.8rem 1.2rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.dua__ar{ margin:0 0 1rem; font-family:var(--ar); font-size:clamp(1.45rem, 6vw, 2rem); line-height:1.95; color:var(--gold-2); }
.dua__en{ margin:0 0 .6rem; font-style:italic; font-weight:300; font-size:1.08rem; }
.dua__ref{ margin:0; font-family:var(--sans); font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); }

.closing__text{ margin:3rem 0 .6rem; font-style:italic; font-weight:300; font-size:1.35rem; }
.closing__fam{ margin:0 0 2.4rem; color:var(--muted); line-height:1.7; }

/* ---------- desktop refinements ---------- */
@media (min-width:700px){
  .hero{ min-height:calc(100svh - 120px); } /* deeper peek of the verse divider on desktop */
  section,footer{ padding:7rem 2rem; }
  .cards{ grid-template-columns:1fr 1fr; gap:1.6rem; max-width:44rem; margin-inline:auto; }
  .section__inner{ max-width:44rem; }
  .names{ gap:0; }
  .mandala-wrap{ width:110vmin; height:110vmin; margin:-55vmin 0 0 -55vmin; }
  .hero{ padding:3rem 2rem 4.5rem; }
  .hero__inner{ gap:1rem; }
}

.cards--single{ grid-template-columns:1fr; max-width:26rem; margin-inline:auto; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .bg__tilt,.cover__pattern,.card,.ayat__inner{ transform:none !important; }
  .compass:not(.is-live) .compass__needle{ animation:none; }
  .ayah{ opacity:.14 !important; animation:none !important; }
}