/* ============================================================
   cinematic-fx.css — Shared "Sentinelle technique" layer
   Loaded by every Mishmar page. Auto-adapts to page structure:
   - .hero → aurora drift + grain + vignette + kinetic H1
   - .cta-glow → breathing pulse
   - .tier / .feat-cell / .testimonial-card / .service-card / .ap-card / .auth-card → cursor spotlight
   - .cnt[data-target] → counter blur→sharp on reveal
   - .btn / .nav-cta / .nav-ghost / .tier-cta / button[type=submit] → press-elastic
   - body → scroll progress bar
   All effects respect prefers-reduced-motion and (hover:none).
   ============================================================ */

/* === Atmospherics: 4 orbital aurora layers + grain + vignette === */
.aurora-layer{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  pointer-events:none;
  z-index:0;
  will-change:transform,opacity;
  mix-blend-mode:screen;
}
.aurora-l1{
  width:60vmin;height:60vmin;
  top:8%;left:55%;
  background:radial-gradient(circle, rgba(0,113,227,.55) 0%, transparent 70%);
  animation:fx-orbit-1 28s var(--ease-in-out, cubic-bezier(.4,0,.2,1)) infinite;
}
.aurora-l2{
  width:50vmin;height:50vmin;
  top:48%;left:18%;
  background:radial-gradient(circle, rgba(77,163,255,.32) 0%, transparent 70%);
  animation:fx-orbit-2 36s var(--ease-in-out, cubic-bezier(.4,0,.2,1)) infinite;
}
.aurora-l3{
  width:38vmin;height:38vmin;
  top:62%;left:52%;
  background:radial-gradient(circle, rgba(94,234,212,.14) 0%, transparent 65%);
  animation:fx-orbit-3 22s var(--ease-in-out, cubic-bezier(.4,0,.2,1)) infinite;
}
.aurora-l4{
  width:26vmin;height:26vmin;
  top:24%;left:14%;
  background:radial-gradient(circle, rgba(167,139,250,.18) 0%, transparent 70%);
  animation:fx-orbit-4 32s var(--ease-in-out, cubic-bezier(.4,0,.2,1)) infinite;
}
@keyframes fx-orbit-1{
  0%,100% { transform:translate(0,0) scale(1) }
  25%  { transform:translate(-7%,5%) scale(1.06) }
  50%  { transform:translate(-11%,-4%) scale(.96) }
  75%  { transform:translate(-3%,-9%) scale(1.04) }
}
@keyframes fx-orbit-2{
  0%,100% { transform:translate(0,0) scale(1) }
  33% { transform:translate(9%,-7%) scale(1.08) }
  66% { transform:translate(5%,11%) scale(.94) }
}
@keyframes fx-orbit-3{
  0%,100% { transform:translate(0,0) scale(1) }
  50%     { transform:translate(-12%,-7%) scale(1.12) }
}
@keyframes fx-orbit-4{
  0%,100% { transform:translate(0,0) scale(1) }
  50%     { transform:translate(7%,9%) scale(1.18) }
}

/* SVG noise grain — gives the "real, not template" feel */
.hero-grain{
  position:absolute;inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.16;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;
  animation:fx-grain-jitter 7s steps(7) infinite;
}
@keyframes fx-grain-jitter{
  0%,100%{transform:translate(0,0)}
  10%{transform:translate(-3%,1%)}
  20%{transform:translate(2%,-2%)}
  30%{transform:translate(-1%,3%)}
  40%{transform:translate(3%,0)}
  50%{transform:translate(-2%,-3%)}
  60%{transform:translate(1%,2%)}
  70%{transform:translate(-3%,-1%)}
  80%{transform:translate(2%,3%)}
  90%{transform:translate(-1%,-2%)}
}

/* Vignette focuses gaze on hero-inner */
.hero-vignette{
  position:absolute;inset:0;
  pointer-events:none;
  z-index:1;
  background:radial-gradient(ellipse at center, transparent 32%, rgba(2,8,18,.32) 76%, rgba(2,8,18,.7) 100%);
}

/* Lift hero content above all atmospheric layers */
.hero-inner{ z-index:3 !important }

/* Tone down original radial accents on .hero (kept as soft anchor, no animation) */
.hero::before{ animation:none !important; opacity:.55 }
.hero::after { animation:none !important; opacity:.6 }

/* === CTA dark final — glow breathes === */
@keyframes fx-cta-glow-breathe{
  0%,100% { transform:translate(-50%,-50%) scale(1);    opacity:.78 }
  50%     { transform:translate(-50%,-50%) scale(1.18); opacity:1   }
}
.cta-glow{ animation:fx-cta-glow-breathe 9s var(--ease-in-out, cubic-bezier(.4,0,.2,1)) infinite }

/* === H1 kinetic: words/phrases crystallize from blur, stagger === */
.hero h1, .hero .hero-h1, .hero .h1{ position:relative }
.hero [data-kinetic] .kw{
  display:inline-block;
  opacity:0;
  transform:translateY(28px);
  filter:blur(10px);
  transition:
    opacity .8s var(--ease-out, cubic-bezier(.22,1,.36,1)),
    transform .9s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)),
    filter .8s var(--ease-out, cubic-bezier(.22,1,.36,1));
  will-change:opacity,transform,filter;
}
.hero [data-kinetic="play"] .kw{
  opacity:1;
  transform:none;
  filter:blur(0);
}
/* Chunks inside elements with background-clip:text (gradient text) need their
   own clip — JS marks them with data-gradient="1". */
.hero [data-kinetic] .kw[data-gradient="1"]{
  background:inherit;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
/* Shimmer sweep overlay — fires once after kinetic starts */
.hero [data-kinetic]::before{
  content:'';
  position:absolute;inset:-4px -8px;
  background:linear-gradient(110deg,
    transparent 38%,
    rgba(255,255,255,.20) 50%,
    transparent 62%);
  background-size:220% 100%;
  background-position:-50% 0;
  mix-blend-mode:overlay;
  pointer-events:none;
  opacity:0;
  border-radius:6px;
}
.hero [data-kinetic="play"]::before{
  animation:fx-shimmer-sweep 2.4s 1.4s var(--ease-in-out, cubic-bezier(.4,0,.2,1)) forwards;
}
@keyframes fx-shimmer-sweep{
  0%   { background-position:-50% 0; opacity:0 }
  10%  { opacity:1 }
  90%  { opacity:1 }
  100% { background-position:150% 0; opacity:0 }
}

/* === Press-elastic on every CTA-like control === */
.btn,.nav-cta,.nav-ghost,.tier-cta,
.hero-btns a,.cta-btns a,
button[type="submit"],
.coming-banner a,
[data-press-elastic]{
  transition:transform var(--dur-2, 200ms) var(--ease-spring, cubic-bezier(.34,1.56,.64,1)),
             box-shadow var(--dur-2, 200ms),
             background var(--dur-2, 200ms),
             border-color var(--dur-2, 200ms);
}
.btn:active,.nav-cta:active,.nav-ghost:active,
.tier-cta:active,.hero-btns a:active,
.cta-btns a:active,button[type="submit"]:active,
.coming-banner a:active,
[data-press-elastic]:active{ transform:scale(.96) }

/* === Magnetic primary CTA (JS adds .magnetic + sets --mx-off/--my-off) === */
.magnetic{
  transition:transform .28s var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
  will-change:transform;
}
.magnetic.is-active{
  transform:translate(var(--mx-off,0), var(--my-off,0));
}
.magnetic.is-active:active{
  transform:translate(var(--mx-off,0), var(--my-off,0)) scale(.96);
}

/* === Scroll progress bar === */
.scroll-progress{
  position:fixed;
  top:0;left:0;
  height:2px;width:0%;
  background:linear-gradient(90deg, #0071E3, #4DA3FF, #C5DEFF);
  z-index:9999;
  pointer-events:none;
  box-shadow:0 0 12px rgba(0,113,227,.45);
  transition:width .12s linear;
}
[dir="rtl"] .scroll-progress{
  left:auto;right:0;
  background:linear-gradient(270deg, #0071E3, #4DA3FF, #C5DEFF);
}

/* === Counter blur→sharp at reveal === */
.cnt.cnt-anim{
  filter:blur(6px);
  transition:filter .9s var(--ease-out, cubic-bezier(.22,1,.36,1));
  display:inline-block;
}
.cnt.cnt-anim.cnt-done{ filter:blur(0) }

/* === Cursor spotlight on cards ===
   isolation:isolate creates a stacking context on the card so .card-spot's
   negative z-index stays scoped (doesn't go below the card's own background).
   z-index:-1 on .card-spot puts it above the card's background but below all
   in-flow children — so we don't need to force position:relative on children
   (which used to break absolutely-positioned badges like .rec-badge). */
/* No overflow:hidden on .tier — would clip .rec-badge (top:-13px). The
   spotlight stays inside the card because .card-spot has border-radius:inherit
   which clips its own radial gradient. Other cards keep overflow:hidden. */
.tier{ position:relative; isolation:isolate }
.feat-cell,.testimonial-card,.service-card,
.ap-card,.auth-card{ position:relative; overflow:hidden; isolation:isolate }
.card-spot{
  position:absolute;inset:0;
  pointer-events:none;
  border-radius:inherit;
  opacity:0;
  transition:opacity var(--dur-3, 320ms) var(--ease-out, cubic-bezier(.22,1,.36,1));
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),
    rgba(0,113,227,.14), transparent 40%);
  z-index:-1;
}
.feat-cell .card-spot{
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),
    rgba(77,163,255,.12), transparent 42%);
}
.tier.rec .card-spot{
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),
    rgba(77,163,255,.18), transparent 42%);
}
.tier:hover .card-spot,
.feat-cell:hover .card-spot,
.testimonial-card:hover .card-spot,
.service-card:hover .card-spot,
.ap-card:hover .card-spot,
.auth-card:hover .card-spot{ opacity:1 }

/* === Recommended tier spin-on-hover (one-shot) ===
   Keeps existing translateY(-12px) lift, adds a Y-axis rotation. Triggered
   via .is-spinning class added by JS on mouseenter, removed on animationend
   so the rotation always completes in full even if cursor leaves. */
.tiers-grid{ perspective:1200px }
@keyframes fx-tier-spin{
  0%   { transform:translateY(0) rotateY(0deg) }
  100% { transform:translateY(0) rotateY(360deg) }
}
.tier.rec.is-spinning{
  animation:fx-tier-spin 1.6s var(--ease-in-out, cubic-bezier(.4,0,.2,1)) 1;
  transform-style:preserve-3d;
}
/* On mobile, .tier.rec already has transform:none — don't apply spin at all */
@media (max-width:880px){
  .tier.rec.is-spinning{ animation:none }
}

/* === RTL adjustments === */
[dir="rtl"] .aurora-l1{ left:auto; right:55% }
[dir="rtl"] .aurora-l2{ left:auto; right:18% }
[dir="rtl"] .aurora-l3{ left:auto; right:52% }
[dir="rtl"] .aurora-l4{ left:auto; right:14% }

/* === Reduced motion / no-hover guards === */
@media (prefers-reduced-motion: reduce){
  .aurora-layer,.hero-grain,.cta-glow{ animation:none !important }
  .aurora-layer{ opacity:.5 }
  .hero [data-kinetic] .kw{ opacity:1; transform:none; filter:none; transition:none }
  .hero [data-kinetic="play"]::before{ animation:none !important; opacity:0 }
  .scroll-progress{ display:none }
  .cnt.cnt-anim{ filter:none }
  .magnetic.is-active{ transform:none }
  .card-spot{ display:none }
}
@media (hover:none){
  .card-spot{ display:none }
  .magnetic.is-active{ transform:none }
}