/* ==========================================================================
   Prophetic Footsteps — seerah homepage (home.css)
   Loads AFTER pf.css on / only. Owns sr- classes; reads --pf-* tokens and
   never redefines them, never styles htm-/wtn-/cta-/footer- or pf- classes
   (it only scopes pf- components inside its own sr- wrappers).

     1  Shared defs + helpers
     2  Hero: night over the Hijaz (scene, moon, labels, footprint trail)
     3  Eight stages: parchment route map (desktop) / vertical trail (mobile)
     4  Guide cards
     5  Family & companions panel
     6  How this is built
     7  The footsteps continue (dusk caravan band)
     8  Responsive
     9  Motion + reduced motion
   ========================================================================== */


/* ==========================================================================
   1. Shared
   ========================================================================== */
.sr-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.sr-ico{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.sr-center-actions{ justify-content:center; }


/* ==========================================================================
   2. Hero
   ========================================================================== */
.sr-hero{
  --sr-scene-h:min(41.667vw, 640px);
  padding:clamp(52px, 6.4vw, 92px) 0 calc(var(--sr-scene-h) * .5 + 24px);
  text-align:center;
}
.pf-night.sr-hero{
  background-image:
    radial-gradient(34% 42% at 84% 12%, rgba(160,170,230,.20) 0%, rgba(160,170,230,0) 70%),
    radial-gradient(44% 38% at 84% 82%, rgba(229,138,63,.30) 0%, rgba(229,138,63,0) 72%),
    radial-gradient(40% 34% at 14% 84%, rgba(255,211,110,.12) 0%, rgba(255,211,110,0) 70%),
    linear-gradient(180deg, #0A0F27 0%, #121A3C 36%, #1C244F 64%, #2A3062 100%);
}
.sr-hero-inner{ position:relative; z-index:1; }
.sr-hero .pf-lockup{ margin-bottom:14px; }
.sr-hero .pf-lockup-ar{ font-size:1.7rem; margin-left:.3em; }
.sr-hero .pf-lockup-sub{ justify-content:center; margin:0 0 30px; }
.sr-hero .pf-lockup-sub::after{ content:""; width:22px; height:2px; background:currentColor; border-radius:2px; }

.sr-hero-title{ margin:0 auto .55em; color:var(--pf-star); font-family:var(--pf-font-head); text-wrap:balance; }
.sr-hero-l1{
  display:block; font-weight:700; font-size:clamp(2.3rem, 5.4vw, 4.3rem);
  line-height:1.05; letter-spacing:-0.025em;
}
.sr-hero-l2{
  display:block; margin-top:.14em;
  font-family:var(--pf-font-serif); font-style:italic; font-weight:400;
  font-size:clamp(1.8rem, 4.2vw, 3.35rem); line-height:1.1; letter-spacing:-0.01em;
  color:var(--pf-gold-glow);
}
.sr-hero-l2 .sr-dots{ /* a little dotted road between the two cities */
  display:inline-block; width:1.4em; height:.3em; vertical-align:middle; margin:0 .18em;
  background:radial-gradient(circle, currentColor 1.6px, transparent 2.1px) 0 50% / 9px 100% repeat-x;
  opacity:.75;
}
.sr-hero .pf-lead{ margin:0 auto; max-width:50ch; color:var(--pf-night-text); }
.sr-hero .pf-actions{ justify-content:center; margin-top:32px; }

/* The moon, hung top-right of the sky */
.sr-moon{
  position:absolute; z-index:0; pointer-events:none;
  top:clamp(18px, 3.4vw, 46px); right:max(3vw, calc((100vw - 1340px) / 2));
  width:clamp(104px, 11vw, 168px); height:auto; overflow:visible;
}

/* The landscape: absolutely placed along the bottom of the hero. */
.sr-scene{
  position:absolute; left:0; right:0; bottom:-1px; z-index:0; pointer-events:none;
  height:var(--sr-scene-h);
}
.sr-scene svg{ position:absolute; inset:0; display:block; width:100%; height:100%; }
.sr-scene .sr-scene-tall{ display:none; }

/* Place labels */
.sr-lbl rect{ fill:rgba(10,15,39,.66); stroke:rgba(255,211,110,.6); stroke-width:1.2; }
.sr-lbl-en{
  font-family:var(--pf-font-head); font-weight:700; font-size:11.5px; letter-spacing:.22em;
  fill:var(--pf-gold-glow);
}
.sr-lbl-ar{ font-family:var(--pf-font-arabic); font-size:20px; fill:var(--pf-star); }
.sr-lbl-lead{ fill:none; stroke:var(--pf-gold-glow); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:.1 5; opacity:.75; }

/* Footprints */
.sr-step{ fill:var(--pf-gold-glow); }
.sr-route{ fill:none; stroke:var(--pf-gold-glow); stroke-width:2.2; stroke-linecap:round; stroke-dasharray:.1 9; opacity:.32; }


/* ==========================================================================
   3. Eight stages
   ========================================================================== */
.sr-stages-sec{ padding-top:clamp(40px, 6vw, 80px); padding-bottom:clamp(36px, 5vw, 64px); }
.sr-mapcard{ padding:clamp(22px, 4vw, 48px) clamp(18px, 4vw, 48px); }
.sr-map{ position:relative; }
.sr-map-art{ position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible; }
.sr-mprint{ fill:#A2742F; }
.sr-map-route{ fill:none; stroke:#C99A5E; stroke-width:2; stroke-linecap:round; stroke-dasharray:.1 8; opacity:.55; }
.sr-map-divide{ fill:none; stroke:#C99A5E; stroke-width:1.6; stroke-linecap:round; stroke-dasharray:.1 7; }
.sr-map-yr{ font-family:var(--pf-font-head); font-weight:700; font-size:11.5px; letter-spacing:.16em; fill:var(--pf-gold-deep); opacity:.85; }
.sr-map-n{ font-family:var(--pf-font-serif); font-weight:600; font-size:13px; fill:var(--pf-gold-deep); }

.sr-stages{ list-style:none; margin:0; padding:0; }
.sr-stage-link{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:0; text-decoration:none; color:inherit; border-radius:18px; }
.sr-medal{
  position:relative; flex:none; display:grid; place-items:center;
  width:68px; height:68px; border-radius:50%;
  background:#FFFBF1; border:1.5px dashed var(--pf-accent);
  box-shadow:0 0 0 6px rgba(252,246,234,.92), 0 12px 22px -12px rgba(92,62,24,.55);
  transition:border-color .2s ease, box-shadow .25s ease, transform .25s var(--pf-ease);
}
.sr-medal .pf-star8{ --pf-s:52px; font-size:1.3rem; }
.sr-medal .pf-star8::before, .sr-medal .pf-star8::after{ transition:rotate .6s var(--pf-ease); }
.sr-stage-text{ display:flex; flex-direction:column; align-items:center; gap:7px; margin-top:14px; }
.sr-stage-title{
  font-family:var(--pf-font-head); font-weight:700; font-size:clamp(.96rem, 1.2vw, 1.06rem); line-height:1.25;
  color:var(--pf-ink); margin:0; text-wrap:balance;
  text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:2px; text-underline-offset:4px;
  transition:text-decoration-color .2s ease, color .2s ease;
}
.sr-stage .pf-date{ font-size:.7rem; }
.sr-stage-link:hover .sr-medal{ border-style:solid; border-color:var(--pf-gold); transform:translateY(-3px);
  box-shadow:0 0 0 6px rgba(252,246,234,.92), 0 0 0 9px rgba(245,184,65,.28), 0 16px 26px -12px rgba(92,62,24,.6); }
.sr-stage-link:hover .pf-star8::before, .sr-stage-link:hover .pf-star8::after{ rotate:45deg; }
.sr-stage-link:hover .sr-stage-title{ text-decoration-color:var(--pf-gold); }
.pf-main .sr-stage-link:focus-visible{ outline-offset:6px; border-radius:18px; }

.sr-stages-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 28px; margin-top:clamp(28px, 4vw, 44px); }

@media (min-width:861px){
  .sr-map{ aspect-ratio:1000 / 540; }
  .sr-stage{ position:absolute; left:calc(var(--x) * 1%); top:calc(var(--y) * 1%); width:23%; margin-top:-34px; transform:translateX(-50%); }
}


/* ==========================================================================
   4. Guide cards
   ========================================================================== */
.sr-guide-sec{ padding-top:clamp(24px, 3vw, 40px); }
.sr-edge{ height:clamp(36px, 5vw, 64px); background:var(--pf-sand); }
.sr-guide-card{ gap:10px; padding:26px 24px 22px; }
.sr-guide-card .pf-icon-disc{ --pf-s:60px; margin-bottom:10px; }
.sr-guide-card .pf-card-kicker{ color:var(--pf-gold-deep); }
.sr-guide-card .pf-card-title{ font-size:1.14rem; }
.sr-guide-card .pf-card-go{ margin-top:auto; padding-top:8px; }


/* ==========================================================================
   5. Family & companions
   ========================================================================== */
.sr-family-sec{ padding-top:clamp(8px, 2vw, 24px); }
.sr-family{
  border-radius:30px; overflow:hidden;
  padding:clamp(34px, 5vw, 60px) clamp(20px, 5vw, 60px) clamp(30px, 4.4vw, 52px);
  box-shadow:0 34px 60px -34px rgba(16,22,47,.7);
}
.sr-family .pf-title{ max-width:620px; }
.sr-emblems{
  list-style:none; margin:clamp(30px, 4vw, 46px) 0 0; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(8, minmax(0, 1fr)); gap:18px 10px;
}
.sr-emblems::before{
  content:""; position:absolute; left:6%; right:6%; top:38px; height:6px;
  background:radial-gradient(circle, var(--pf-gold-glow) 1.4px, transparent 1.9px) 0 50% / 11px 6px repeat-x;
  opacity:.4;
}
.sr-emblem{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px; min-width:0; }
.sr-emblem .pf-star8{ --pf-s:60px; margin:8px; font-size:1.45rem; color:#FFF7E2; }
.sr-emblem .pf-star8--ring{ outline-color:rgba(255,211,110,.55); }
.sr-emblem-name{ margin-top:10px; font-family:var(--pf-font-head); font-weight:700; font-size:.95rem; line-height:1.25; color:var(--pf-star); }
.sr-emblem-ar{ font-family:var(--pf-font-arabic); font-size:1.12rem; line-height:1.35; color:var(--pf-gold-glow); unicode-bidi:isolate; }
.sr-emblem-role{ font-size:.74rem; line-height:1.35; color:var(--pf-night-soft); }
.sr-fam{ --pf-accent:#2F8A62; }
.sr-mob{ --pf-accent:#B1566B; }
.sr-com{ --pf-accent:#3E5FB2; }
.sr-legend{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; margin:clamp(26px, 3.5vw, 38px) 0 0;
  padding-top:22px; border-top:1px dashed rgba(255,244,210,.18);
  font-size:.82rem; color:var(--pf-night-soft); list-style:none;
}
.sr-legend li{ display:inline-flex; align-items:center; gap:8px; }
.sr-legend li::before{ content:""; width:10px; height:10px; border-radius:2px; transform:rotate(45deg); background:var(--pf-accent); box-shadow:0 0 0 2px rgba(255,255,255,.12); }


/* ==========================================================================
   6. How this is built
   ========================================================================== */
.sr-built-sec{ padding-top:clamp(28px, 4vw, 48px); }
.sr-points{ list-style:none; margin:28px 0 0; padding:0; display:grid; gap:20px; }
.sr-point{ display:grid; grid-template-columns:52px 1fr; gap:16px; align-items:start; }
.sr-point .pf-icon-disc{ --pf-s:52px; }
.sr-point-title{ font-family:var(--pf-font-head); font-weight:700; font-size:1.04rem; color:var(--pf-ink); margin:4px 0 4px; }
.sr-point p{ margin:0; font-size:.96rem; line-height:1.55; color:var(--pf-ink-soft); }
.sr-built{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:30px; }
.sr-built-label{
  font-family:var(--pf-font-head); font-weight:700; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--pf-gold-deep); margin-right:4px;
}
.sr-built .pf-chip svg{ width:16px; height:16px; color:var(--pf-gold-deep); }
.sr-built-art{ max-width:520px; width:100%; justify-self:center; }
.sr-built-art svg{ display:block; width:100%; height:auto; overflow:visible; }


/* ==========================================================================
   7. The footsteps continue — dusk caravan band
   ========================================================================== */
.sr-caravan{
  --sr-cv-h:max(230px, min(26vw, 380px));
  position:relative; overflow:hidden; text-align:center;
  padding:0 0 calc(var(--sr-cv-h) * .6);
}
.pf-dusk.sr-caravan{
  background-image:
    radial-gradient(34% 30% at 69% 84%, rgba(255,214,140,.55) 0%, rgba(255,214,140,0) 72%),
    linear-gradient(180deg, #0F1438 0%, #1D2252 30%, #3A2E62 52%, #774367 68%, #BE5E5A 80%, #EC9853 90%, #F7C46E 100%);
}
.sr-caravan .pf-dunes--top{ height:clamp(44px, 6vw, 90px); }
.sr-caravan-inner{ position:relative; z-index:1; padding-top:clamp(28px, 4vw, 52px); }
.sr-caravan .pf-lockup{ margin-bottom:18px; text-align:left; }
.sr-caravan .pf-h2{ margin-bottom:.3em; }
.sr-caravan .pf-lead{ margin:0 auto; max-width:54ch; color:#D9DCEE; }
.sr-caravan .pf-cluster{ justify-content:center; margin-top:22px; }
.sr-caravan .pf-actions{ justify-content:center; margin-top:26px; }
.sr-caravan-scene{ position:absolute; left:0; right:0; bottom:-1px; height:var(--sr-cv-h); z-index:0; pointer-events:none; }
.sr-caravan-scene svg{ display:block; width:100%; height:100%; }
.sr-walk{ animation:sr-walk 1.5s ease-in-out infinite alternate; animation-delay:calc(var(--w, 0) * -.37s); }


/* ==========================================================================
   8. Responsive
   ========================================================================== */
@media (max-width:1100px){
  .sr-map-yr{ display:none; }
  .sr-emblems{ grid-template-columns:repeat(4, minmax(0, 1fr)); gap:26px 12px; }
  .sr-emblems::before{ display:none; }
}

@media (max-width:860px){
  /* Stages become a vertical trail: medallion left, footprints between */
  .sr-map{ aspect-ratio:auto; }
  .sr-map-art{ display:none; }
  .sr-stages{ display:grid; gap:40px; position:relative; }
  /* one continuous trail of prints walking down behind the seals */
  .sr-stages::before{
    content:""; position:absolute; left:19px; top:40px; bottom:40px; width:30px;
    background:#A2742F; opacity:.62; transform:scaleY(-1);
    -webkit-mask:var(--pf-prints-v) 0 0 / 30px 72px repeat-y;
            mask:var(--pf-prints-v) 0 0 / 30px 72px repeat-y;
  }
  .sr-stage{ position:relative; z-index:1; }
  .sr-stage-link{ display:grid; grid-template-columns:68px minmax(0, 1fr); column-gap:18px; align-items:center; text-align:left; }
  .sr-stage-text{ align-items:flex-start; margin-top:0; }
  .sr-stages-foot{ justify-content:flex-start; }
}

@media (max-width:720px){
  .sr-hero{ text-align:left; padding-bottom:0; }
  .sr-hero .pf-lockup-sub{ justify-content:flex-start; }
  .sr-hero .pf-lockup-sub::after{ display:none; }
  .sr-hero .pf-lead{ margin:0; }
  .sr-hero .pf-actions{ justify-content:flex-start; }
  .sr-moon{ display:none; }
  .sr-scene{ position:relative; height:auto; bottom:auto; margin-top:6px; }
  .sr-scene .sr-scene-wide{ display:none; }
  .sr-scene .sr-scene-tall{ display:block; position:relative; inset:auto; height:auto; margin-bottom:-1px; }

  .sr-caravan{ text-align:left; }
  .sr-caravan .pf-lead{ margin:0; }
  .sr-caravan .pf-cluster, .sr-caravan .pf-actions{ justify-content:flex-start; }
}

@media (max-width:640px){
  .sr-guide-card{ display:grid; grid-template-columns:52px minmax(0, 1fr); column-gap:16px; row-gap:6px; align-items:start; padding:20px 18px 18px; }
  .sr-guide-card > *{ grid-column:2; }
  .sr-guide-card .pf-icon-disc{ grid-column:1; grid-row:1 / span 4; --pf-s:52px; margin:0; }
  .sr-guide-card .pf-card-go{ padding-top:4px; }
}

@media (max-width:560px){
  .sr-hero-l2 .sr-dots{ display:none; }
  .sr-emblems{ gap:22px 6px; }
  .sr-emblem .pf-star8{ --pf-s:46px; margin:6px; font-size:1.15rem; }
  .sr-emblem-name{ font-size:.8rem; margin-top:6px; }
  .sr-emblem-ar{ font-size:.98rem; }
  .sr-emblem-role{ display:none; }
}

@media (max-width:480px){
  .sr-hero .pf-actions .pf-btn, .sr-caravan .pf-actions .pf-btn{ width:100%; }
  .sr-hero .pf-lockup-ar{ font-size:1.35rem; }
}


/* ==========================================================================
   9. Motion
   CSS animations only. Each one starts from a visible base style, so with
   animation:none (reduced motion, pf.css section 16) everything still shows.
   ========================================================================== */
.sr-step{ animation:sr-step .9s ease-out both, sr-glint 9s ease-in-out infinite; animation-delay:calc(1.1s + var(--i) * .17s), calc(7s + var(--i) * .09s); }
@keyframes sr-step{ 0%{ opacity:0; } 45%{ opacity:1; fill:#FFF8E4; } 100%{ opacity:1; } }
@keyframes sr-glint{ 0%, 12%, 100%{ fill:var(--pf-gold-glow); } 5%{ fill:#FFF8E4; } }

/* Map prints walk in once the map scrolls into view (pf.js adds .pf-in). */
.pf-js .sr-map.pf-reveal:not(.pf-in) .sr-mprint{ opacity:0; }
.pf-js .sr-map.pf-in .sr-mprint{ animation:sr-fadein .5s ease-out both; animation-delay:calc(.25s + var(--i) * 45ms); }
@keyframes sr-fadein{ from{ opacity:0; } to{ opacity:1; } }

@keyframes sr-walk{ from{ translate:0 0; } to{ translate:0 -1.6px; } }

/* home.js pauses looping decoration while it is off screen */
.sr-paused, .sr-paused *, .sr-paused *::before, .sr-paused *::after{ animation-play-state:paused !important; }

@media (prefers-reduced-motion: reduce){
  .sr-step, .sr-mprint, .sr-walk{ animation:none !important; opacity:1 !important; }
  .sr-stage-link:hover .sr-medal{ transform:none; }
  .sr-stage-link:hover .pf-star8::before, .sr-stage-link:hover .pf-star8::after{ rotate:none; }
}

/* Polish: keep the stage-4 label clear of the trail where the road turns */
@media (min-width:861px){
  .sr-stage.pf-ch-4 .sr-stage-title{ max-width:9.5em; }
}