/* ============================================================
   MuslimahWorship — Animated Hero + Motion Layer (Stage 1)
   Cinematic feel, near-zero weight. CSS-only, GPU-friendly.
   Matches prod palette (blush/gold/cream). Mobile-first.
   ============================================================ */

/* ---- animated hero canvas ---- */
.sf-hero{position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 50% -10%, #fdf5f6 0%, #fdf8f2 55%, #f5e8e0 100%);}
.sf-hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
/* soft drifting light blooms */
.sf-bloom{position:absolute;border-radius:50%;filter:blur(55px);opacity:.72;will-change:transform}
.sf-bloom.b1{width:50vw;height:50vw;left:-12vw;top:-10vw;background:radial-gradient(circle,#f0dde3,transparent 68%);animation:sfDrift1 18s ease-in-out infinite}
.sf-bloom.b2{width:44vw;height:44vw;right:-10vw;top:6vh;background:radial-gradient(circle,#f5e8d8,transparent 68%);animation:sfDrift2 22s ease-in-out infinite}
.sf-bloom.b3{width:36vw;height:36vw;left:28vw;bottom:-12vw;background:radial-gradient(circle,#fdeef1,transparent 68%);animation:sfDrift1 16s ease-in-out infinite reverse}
@keyframes sfDrift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(7vw,5vh) scale(1.22)}}
@keyframes sfDrift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7vw,4vh) scale(1.16)}}

/* floating geometric pattern (Islamic 8-point stars, pure CSS) */
.sf-stars{position:absolute;inset:0;z-index:-1;opacity:.11;
  background-image:
    radial-gradient(circle at 20% 30%, #b5697a 1.5px, transparent 2px),
    radial-gradient(circle at 70% 60%, #c4985a 1.5px, transparent 2px),
    radial-gradient(circle at 45% 85%, #b5697a 1.5px, transparent 2px),
    radial-gradient(circle at 88% 20%, #c4985a 1.5px, transparent 2px);
  background-size:180px 180px,220px 220px,160px 160px,240px 240px;
  animation:sfStars 40s linear infinite}
@keyframes sfStars{from{background-position:0 0,0 0,0 0,0 0}to{background-position:180px 180px,-220px 220px,160px -160px,-240px 240px}}

/* calligraphy fade + rise on load */
.sf-hero .sf-calli{font-family:'Amiri',Georgia,serif;color:var(--sf-gold,#c4985a);opacity:0;
  animation:sfCalli 1.4s ease .2s forwards}
@keyframes sfCalli{from{opacity:0;transform:translateY(14px)}to{opacity:.92;transform:none}}

/* staggered entrance for hero children */
.sf-rise{opacity:0;animation:sfRiseIn .8s cubic-bezier(.2,.75,.2,1) forwards}
.sf-rise.d1{animation-delay:.15s}.sf-rise.d2{animation-delay:.3s}.sf-rise.d3{animation-delay:.45s}.sf-rise.d4{animation-delay:.6s}
@keyframes sfRiseIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* gentle gold shimmer on accents/CTAs */
.sf-shimmer{position:relative;overflow:hidden}
.sf-shimmer::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);
  transform:translateX(-120%);animation:sfShimmer 5.5s ease-in-out infinite}
@keyframes sfShimmer{0%,72%{transform:translateX(-120%)}86%,100%{transform:translateX(120%)}}

/* count-up streak flourish */
@keyframes sfCount{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}

/* scroll-reveal (JS adds .sf-in) */
.sf-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.75,.2,1)}
.sf-reveal.sf-in{opacity:1;transform:none}
.sf-reveal.d1{transition-delay:.08s}.sf-reveal.d2{transition-delay:.16s}.sf-reveal.d3{transition-delay:.24s}

/* soft breathing on the dock chat dot to invite discovery */
.sf-dock [data-p="chat"]{animation:sfBreathe 3.5s ease-in-out infinite}
@keyframes sfBreathe{0%,100%{transform:none}50%{transform:translateY(-3px)}}

@media(prefers-reduced-motion:reduce){
  .sf-bloom,.sf-stars,.sf-calli,.sf-rise,.sf-shimmer::after,.sf-reveal,.sf-dock [data-p="chat"]{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
}