/* ===================================================================
   XRay Motion v2 — additive motion layer, loaded AFTER styles.css.
   Keyed off classes every page already uses, so all pages get it.
   Everything here degrades to "no motion" under prefers-reduced-motion
   (block at the bottom) and never blocks interaction.
   =================================================================== */

/* ---- 1. Smoother global reveal easing (enhances existing .reveal) ---- */
.reveal{
  transition: opacity .7s cubic-bezier(.16,.8,.24,1),
              transform .7s cubic-bezier(.16,.8,.24,1);
  will-change: opacity, transform;
}

/* ---- 2. Staggered grid reveals (motion.js adds .stg + per-child --d) ---- */
.stg.reveal{ opacity:1 !important; transform:none !important; }
.stg > *{
  opacity:0; transform:translateY(22px);
  transition: opacity .6s cubic-bezier(.16,.8,.24,1) var(--d,0ms),
              transform .6s cubic-bezier(.16,.8,.24,1) var(--d,0ms);
}
.stg.in > *{ opacity:1; transform:none; }

/* ---- 3. CTA micro-interactions — KEEP the styles.css pulse ring, ADD a hover sheen ----
   The sheen is a full-size ::before with an animated background-position, so it
   self-clips to the button's rounded shape. That avoids overflow:hidden — which
   would clip the existing ::after pulse ring's outward glow — so pulse + sheen
   coexist. At rest the highlight band is parked off-screen (fully transparent). */
.btn-green::before, .btn-primary::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
  background-image:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
  background-size:220% 100%; background-repeat:no-repeat; background-position:-100% 0;
}
.btn-green:hover::before, .btn-primary:hover::before{ animation:xr-sheen .8s ease-out; }
@keyframes xr-sheen{ 0%{ background-position:-100% 0; } 100%{ background-position:200% 0; } }

/* hover lift for every button flavour */
.btn-green, .btn-primary, .btn-ghost, .btn-outline{
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, border-color .25s, color .25s;
}
.btn-green:hover, .btn-primary:hover, .btn-ghost:hover, .btn-outline:hover{ transform:translateY(-2px); }

/* ghost / outline underline draw (they carry no existing ::after) */
.btn-ghost, .btn-outline{ position:relative; }
.btn-ghost::after, .btn-outline::after{
  content:''; position:absolute; left:20px; right:20px; bottom:10px; height:2px;
  background:currentColor; opacity:.55; border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.btn-ghost:hover::after, .btn-outline:hover::after{ transform:scaleX(1); }

/* ---- 4. Card hover lift + accent glow ---- */
.hw-preview, .price-card, .stat-card, .feature-card, .card, .pull-quote, .hw-card, .plan-card{
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
  will-change: transform;
}
.hw-preview:hover, .price-card:hover, .stat-card:hover, .feature-card:hover, .card:hover, .hw-card:hover, .plan-card:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 54px -14px rgba(4,25,50,.30);
}
/* industry cards already lift in styles.css — just add the green glow */
.industry-card:hover{ box-shadow:0 28px 54px -14px rgba(24,189,91,.30), var(--sh-4, 0 24px 48px rgba(0,0,0,.18)); }
.price-card.featured:hover, .plan-card.featured:hover{ box-shadow:0 30px 60px -14px rgba(24,189,91,.34); }

/* ---- 5. Section-head eye-grab: kicker slides in + accent underline draws ---- */
.reveal .kicker{ display:inline-block; position:relative; }
.reveal .kicker::after{
  content:''; position:absolute; left:0; right:0; bottom:-3px; height:2px; border-radius:2px;
  background:var(--grad-green, linear-gradient(90deg,#18bd5b,#4196fd));
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s cubic-bezier(.2,.8,.2,1) .18s;
}
.reveal.in .kicker::after{ transform:scaleX(1); }

/* ---- 6. Ambient aurora — subtle drifting glow reinforcing the hero ---- */
.hero-bg{ position:relative; }
.hero-bg::after{
  content:''; position:absolute; inset:-10%; pointer-events:none; z-index:0;
  background:
    radial-gradient(38% 44% at 22% 28%, rgba(24,189,91,.16), transparent 70%),
    radial-gradient(42% 48% at 80% 22%, rgba(65,150,253,.16), transparent 70%);
  animation:xr-aurora 22s ease-in-out infinite alternate;
  mix-blend-mode:screen;
}
@keyframes xr-aurora{
  0%{ transform:translate3d(-2%,0,0) scale(1); }
  100%{ transform:translate3d(3%,2%,0) scale(1.08); }
}

/* ---- 7. "How switching works" — line draws + nodes pop in sequence ---- */
.xr-steps{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:860px; margin:40px auto 0; }
.xr-steps .xr-line{ position:absolute; left:0; top:34px; width:100%; height:3px; pointer-events:none; overflow:visible; z-index:0; }
.xr-steps .xr-line path{ fill:none; stroke:url(#xrLg); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; }
.xr-steps.in .xr-line path{ animation:xr-line 1.5s ease-in-out .1s forwards; }
@keyframes xr-line{ to{ stroke-dashoffset:0; } }
.xr-step{ position:relative; z-index:1; text-align:center; }
.xr-step .xr-dot{
  width:68px; height:68px; border-radius:50%; margin:0 auto 16px; display:grid; place-items:center;
  font-weight:800; font-size:1.4rem; color:#fff; background:var(--grad-green, linear-gradient(135deg,#18bd5b,#0f8f47));
  box-shadow:var(--sh-glow-green, 0 14px 36px -8px rgba(24,189,91,.5));
  opacity:0; transform:scale(.7);
}
.xr-steps.in .xr-step .xr-dot{ animation:xr-pop .55s cubic-bezier(.2,1.5,.4,1) forwards; }
.xr-steps.in .xr-step:nth-child(2) .xr-dot{ animation-delay:.5s; }
.xr-steps.in .xr-step:nth-child(3) .xr-dot{ animation-delay:1s; }
@keyframes xr-pop{ 0%{opacity:0;transform:scale(.7)} 100%{opacity:1;transform:scale(1)} }
.xr-step h3{ margin:0 0 4px; font-size:1.14rem; }
.xr-step p{ margin:0; color:var(--muted, #5b6b80); font-size:.95rem; }
@media (max-width:720px){
  .xr-steps .xr-line{ display:none; }
  .xr-steps{ grid-template-columns:1fr; gap:26px; }
}

/* ---- 8. Hero float cards: gentle entrance handled by motion.js (opacity) ---- */
.hero-visual .floating-card{ transition:opacity .6s cubic-bezier(.2,.8,.2,1); }

/* ============ reduced motion: switch everything off ============ */
@media (prefers-reduced-motion: reduce){
  .reveal, .stg > *, .btn-green, .btn-primary, .btn-ghost, .btn-outline{ transition:none !important; }
  .stg > *, .stg.in > *{ opacity:1 !important; transform:none !important; }
  .reveal .kicker::after, .xr-steps .xr-line path{ transform:scaleX(1); stroke-dashoffset:0; }
  .xr-steps .xr-step .xr-dot{ opacity:1 !important; transform:none !important; animation:none !important; }
  .hero-bg::after{ animation:none !important; }
  .btn-green::before, .btn-primary::before{ display:none !important; }
  .hero-visual .floating-card{ opacity:1 !important; }
}
body.rm .reveal, body.rm .stg > *{ transition:none !important; }
body.rm .stg > *{ opacity:1 !important; transform:none !important; }
body.rm .hero-bg::after, body.rm .xr-steps .xr-step .xr-dot{ animation:none !important; }