/* Zikr Reminder — Premium landing motion layer (paired with js/landing-fx.js)
   Everything is scoped to html.lfx-on, which JS adds only after it runs — so if
   JS ever fails to load, NO content is hidden and the landing renders normally. */

/* Scroll-progress bar */
.lfx-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--grad-primary); box-shadow: 0 0 12px var(--c-primary-glow);
  pointer-events: none;
}
[dir="rtl"] .lfx-progress { transform-origin: 100% 50%; }

/* Mouse-follow glow */
.lfx-cursor-glow {
  position: fixed; top: 0; left: 0; width: 540px; height: 540px; margin: -270px 0 0 -270px;
  border-radius: 50%; pointer-events: none; z-index: 0; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(45,212,191,0.20), rgba(16,185,129,0.06) 42%, transparent 70%);
  opacity: 0; transition: opacity .5s ease; will-change: transform;
}
html.lfx-on #landing:hover .lfx-cursor-glow { opacity: 1; }

/* Hero headline — staggered word reveal */
html.lfx-on .hero-title .lfx-word { display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.1; }
html.lfx-on .hero-title .lfx-word-in {
  display: inline-block; transform: translateY(115%) rotate(5deg); opacity: 0;
  animation: lfx-word .9s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: calc(var(--wi, 0) * 0.045s); will-change: transform, opacity;
}
@keyframes lfx-word { to { transform: translateY(0) rotate(0); opacity: 1; } }

/* Scroll-triggered section reveals */
html.lfx-on [data-lfx] {
  opacity: 0; will-change: transform, opacity;
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--ri, 0) * 0.06s);
}
html.lfx-on [data-lfx="up"]    { transform: translateY(42px); }
html.lfx-on [data-lfx="scale"] { transform: scale(.92); }
html.lfx-on [data-lfx="left"]  { transform: translateX(-42px); }
html.lfx-on [data-lfx="right"] { transform: translateX(42px); }
html.lfx-on [data-lfx].lfx-in  { opacity: 1; transform: none; }

/* Floating depth shapes (parallax) */
.lfx-float { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(8px); opacity: .5; will-change: transform; }
.lfx-f1 { width: 120px; height: 120px; top: 16%; left: 7%;  background: radial-gradient(circle at 30% 30%, rgba(45,212,191,.55), transparent 70%); animation: lfx-bob 9s ease-in-out infinite; }
.lfx-f2 { width: 210px; height: 210px; top: 54%; right: 5%; background: radial-gradient(circle at 30% 30%, rgba(56,189,248,.42), transparent 70%); animation: lfx-bob 13s ease-in-out infinite reverse; }
.lfx-f3 { width: 84px;  height: 84px;  top: 80%; left: 16%; background: radial-gradient(circle at 30% 30%, rgba(245,158,11,.42), transparent 70%); animation: lfx-bob 11s ease-in-out infinite; }
@keyframes lfx-bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -24px; } }

/* Scroll cue (animated mouse) */
.lfx-scroll-cue { position: relative; height: 44px; margin: 0 auto 1.6rem; opacity: .85; transition: opacity .4s ease; }
.lfx-scroll-cue.lfx-cue-hide { opacity: 0; }
.lfx-scroll-cue::before {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  width: 26px; height: 42px; border: 2px solid var(--c-border-strong); border-radius: 14px;
}
.lfx-cue-dot {
  position: absolute; left: 50%; top: 7px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--c-primary); transform: translate(-50%, 0);
  animation: lfx-cue 1.7s ease-in-out infinite;
}
@keyframes lfx-cue {
  0%   { transform: translate(-50%, 0);    opacity: 0; }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(-50%, 15px); opacity: 0; }
}

/* Magnetic buttons — smooth return after pointer leaves */
html.lfx-on #landing-install, html.lfx-on #landing-start {
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, background .3s ease;
}

/* Premium hover lift on feature/seo cards */
html.lfx-on .seo-section .card, html.lfx-on .feature-list li {
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
html.lfx-on .seo-section .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* ===== Cinematic layer (v2.6.24) ===== */

/* 3D hover tilt on cards — preserves depth, lifts with light */
html.lfx-on .lfx-tilt {
  transform-style: preserve-3d;
  transition: box-shadow .35s ease, border-color .35s ease;
  will-change: transform;
}
html.lfx-on .lfx-tilt.lfx-tilting {
  box-shadow: 0 26px 60px rgba(15, 23, 42, 0.22), 0 0 0 1px var(--c-primary-glow);
  border-color: var(--c-primary);
  z-index: 2;
}

/* Hero accent — flowing gradient shimmer on the emphasised word.
   Higher specificity (two classes) than the .lfx-word-in reveal rule, and we
   run BOTH animations (one-shot reveal + infinite shimmer) so the word lifts
   in and then shimmers continuously. */
html.lfx-on .hero-title em,
html.lfx-on .hero-title .lfx-accent {
  background: linear-gradient(100deg, var(--c-primary) 0%, #2dd4bf 25%, var(--c-accent) 50%, #2dd4bf 75%, var(--c-primary) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-style: normal;
}
html.lfx-on .hero-title .lfx-word-in.lfx-accent {
  animation: lfx-word .9s cubic-bezier(.16,1,.3,1) calc(var(--wi,0) * 0.045s) forwards,
             lfx-shimmer 6s linear 1s infinite;
}
@keyframes lfx-shimmer { to { background-position: 250% 0; } }

/* Richer reveal — add a gentle blur lift to the base "up" reveal */
html.lfx-on [data-lfx] { filter: blur(6px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), filter .8s ease; }
html.lfx-on [data-lfx].lfx-in { filter: blur(0); }

/* A 4th, larger depth shape for a more layered hero */
.lfx-float.lfx-f1 { box-shadow: 0 0 80px 20px rgba(45,212,191,.18); }
.lfx-float.lfx-f2 { box-shadow: 0 0 120px 40px rgba(56,189,248,.12); }

/* Animated aurora behind the hero (additive, very soft) */
html.lfx-on #landing .landing-bg::after {
  content: ''; position: absolute; inset: -20% -10% auto -10%; height: 80vh; z-index: 0;
  background:
    radial-gradient(40% 50% at 20% 30%, rgba(45,212,191,0.18), transparent 70%),
    radial-gradient(45% 55% at 80% 20%, rgba(56,189,248,0.16), transparent 70%),
    radial-gradient(40% 50% at 60% 70%, rgba(245,158,11,0.12), transparent 70%);
  filter: blur(30px); pointer-events: none;
  animation: lfx-aurora 18s ease-in-out infinite alternate;
}
@keyframes lfx-aurora {
  0%   { transform: translate3d(0,0,0) scale(1); opacity: 0.9; }
  50%  { transform: translate3d(2%, 2%, 0) scale(1.08); opacity: 1; }
  100% { transform: translate3d(-2%, 1%, 0) scale(1.04); opacity: 0.85; }
}

/* Premium CTA sheen — applied to a clipped inner layer so it never hides the
   RECOMMENDED badge (which intentionally pokes above the button). */
html.lfx-on #landing-install { position: relative; }
html.lfx-on #landing-install .install-pulse::after {
  content: ''; position: absolute; inset: 3px; border-radius: var(--r-pill);
  overflow: hidden; pointer-events: none;
  background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,0.4) 50%, transparent 60%);
  background-size: 250% 100%; background-position: 150% 0;
}
html.lfx-on #landing-install:hover .install-pulse::after { animation: lfx-sheen 0.9s ease; }
@keyframes lfx-sheen { from { background-position: 150% 0; } to { background-position: -150% 0; } }

/* Respect reduced motion — reveal everything instantly, kill transforms/anim */
@media (prefers-reduced-motion: reduce) {
  html.lfx-on [data-lfx],
  html.lfx-on .hero-title .lfx-word-in { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; transition: none !important; }
  html.lfx-on [data-lfx] { filter: none !important; }
  .lfx-float, .lfx-cue-dot { animation: none !important; }
  html.lfx-on .hero-title em, html.lfx-on .hero-title .lfx-em { animation: none !important; }
  html.lfx-on #landing .landing-bg::after { animation: none !important; }
  .lfx-cursor-glow { display: none !important; }
  .lfx-progress { display: none !important; }
}