/* ═══════════════════════════════════════════════════════════
   GrowthLab Studio — animations.css  v2.0
   Cinematic Premium Animation System
   GPU-first, Apple/Tesla quality, 60 fps
═══════════════════════════════════════════════════════════ */

/* ── Ease library ─────────────────────────────────────────── */
:root {
  --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-back:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-circ:   cubic-bezier(0, 0.55, 0.45, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ══════════════════════════════════════════════════════════
   CINEMATIC PAGE LOADER
══════════════════════════════════════════════════════════ */
#page-loader {
  background: #070712;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
#page-loader.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .7s ease .05s, visibility .7s ease .05s;
}

.loader-logo {
  position: relative;
  animation: loaderLogoPulse 1.4s ease-in-out infinite;
}
.loader-logo::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 24px;
  background: transparent;
  border: 1px solid rgba(124,58,237,.3);
  animation: loaderRingExpand 1.4s ease-in-out infinite;
}
@keyframes loaderLogoPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 40px rgba(124,58,237,.5); }
  50%       { transform: scale(1.07); box-shadow: 0 0 70px rgba(124,58,237,.9), 0 0 120px rgba(124,58,237,.35); }
}
@keyframes loaderRingExpand {
  0%   { transform: scale(1); opacity: .8; }
  100% { transform: scale(1.7); opacity: 0; }
}

.loader-bar-track {
  width: 160px;
  height: 2px;
  border-radius: 99px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.loader-bar {
  height: 100%;
  background: linear-gradient(90deg, #7c3aed, #a855f7, #6366f1, #a855f7);
  background-size: 200% 100%;
  animation: loaderBar 1.1s var(--ease-expo) forwards,
             loaderBarShimmer 1.5s linear .3s infinite;
  border-radius: 99px;
}
@keyframes loaderBar { from { width: 0; } to { width: 100%; } }
@keyframes loaderBarShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.loader-text {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: rgba(240,240,248,.2);
  text-transform: uppercase;
  animation: loaderTextFade 1s ease .2s both;
}
@keyframes loaderTextFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════
   HERO SECTION — CINEMATIC ENTRANCE
══════════════════════════════════════════════════════════ */

/* Override inline animation so JS controls the stagger */
.hero-badge,
.hero-title,
.hero-sub,
.hero-ctas,
.hero-icons,
.hero-stats {
  animation: none !important;
  will-change: transform, opacity, filter;
}

/* ── Animated gradient title ── */
.hero-title .gradient-text {
  background: linear-gradient(110deg, #c4b5fd 0%, #a855f7 20%, #6366f1 40%, #38bdf8 60%, #a855f7 80%, #c4b5fd 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: heroGradientFlow 5s linear infinite !important;
  filter: none !important;
}
@keyframes heroGradientFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ── Hero orbs — cinematic drift ── */
.hero-orb-1 {
  animation: orbDrift1 14s ease-in-out infinite !important;
  filter: blur(2px);
}
.hero-orb-2 {
  animation: orbDrift2 17s ease-in-out infinite 2s !important;
  filter: blur(2px);
}
.hero-orb-3 {
  animation: orbDrift3 11s ease-in-out infinite 5s !important;
  filter: blur(2px);
}
@keyframes orbDrift1 {
  0%,100% { transform: translate(0, 0) scale(1); }
  25%     { transform: translate(50px, -50px) scale(1.06); }
  50%     { transform: translate(-25px, -80px) scale(0.94); }
  75%     { transform: translate(60px, -20px) scale(1.03); }
}
@keyframes orbDrift2 {
  0%,100% { transform: translate(0, 0) scale(1); }
  33%     { transform: translate(-60px, 40px) scale(1.1); }
  66%     { transform: translate(30px, -50px) scale(0.9); }
}
@keyframes orbDrift3 {
  0%,100% { transform: translate(0, 0); }
  40%     { transform: translate(70px, -35px); }
  80%     { transform: translate(-40px, 25px); }
}

/* ── Hero grid parallax ── */
.hero-grid {
  animation: gridDrift 25s linear infinite !important;
  will-change: transform, background-position;
}
@keyframes gridDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 60px 60px; }
}

/* ── Hero CTA buttons entrance ── */
.btn-hero-primary {
  animation: heroCTAPulse 3s ease-in-out infinite !important;
}
@keyframes heroCTAPulse {
  0%,100% { box-shadow: 0 0 20px rgba(124,58,237,.4), 0 0 40px rgba(124,58,237,.2); }
  50%     { box-shadow: 0 0 35px rgba(124,58,237,.7), 0 0 70px rgba(124,58,237,.35), 0 0 100px rgba(124,58,237,.12); }
}

/* ── Hero icon floating ── */
.hero-icon-item:nth-child(1) .hero-icon-box { animation: iconBob 3.2s ease-in-out infinite; }
.hero-icon-item:nth-child(2) .hero-icon-box { animation: iconBob 3.2s ease-in-out infinite .7s; }
.hero-icon-item:nth-child(3) .hero-icon-box { animation: iconBob 3.2s ease-in-out infinite 1.4s; }
@keyframes iconBob {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-10px) rotate(3deg); }
}
.hero-icon-box {
  transition: transform .3s var(--ease-back), box-shadow .3s ease !important;
}
.hero-icon-box:hover {
  transform: translateY(-14px) scale(1.14) rotate(-4deg) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,.5), 0 0 30px rgba(124,58,237,.45) !important;
}

/* ── Scroll down indicator ── */
.scroll-indicator {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  pointer-events: none;
  z-index: 3;
  transition: opacity .5s ease;
}
.scroll-indicator-mouse {
  width: 22px;
  height: 34px;
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 99px;
  display: flex;
  justify-content: center;
  padding-top: 5px;
}
.scroll-indicator-wheel {
  width: 3px;
  height: 7px;
  background: rgba(255,255,255,.55);
  border-radius: 99px;
  animation: scrollWheelDrop 1.9s ease-in-out infinite;
}
@keyframes scrollWheelDrop {
  0%,100% { transform: translateY(0); opacity: 1; }
  80%      { transform: translateY(9px); opacity: 0; }
}
.scroll-indicator-text {
  font-size: .58rem;
  color: rgba(255,255,255,.3);
  letter-spacing: .12em;
  text-transform: uppercase;
  animation: scrollIndicatorBlink 2.5s ease-in-out infinite;
}
@keyframes scrollIndicatorBlink {
  0%,100% { opacity: .3; }
  50%      { opacity: .65; }
}

/* ══════════════════════════════════════════════════════════
   CINEMATIC REVEAL SYSTEM
══════════════════════════════════════════════════════════ */
.reveal-js {
  opacity: 0 !important;
  transform: translateY(40px) scale(0.975) !important;
  filter: blur(5px);
}
.reveal.visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  filter: blur(0) !important;
  transition:
    opacity   .7s var(--ease-expo),
    transform .7s var(--ease-expo),
    filter    .55s ease !important;
}
/* delay classes already set in style.css, keep them */
.reveal-delay-1 { transition-delay: .07s !important; }
.reveal-delay-2 { transition-delay: .14s !important; }
.reveal-delay-3 { transition-delay: .21s !important; }
.reveal-delay-4 { transition-delay: .28s !important; }

/* ── Stagger children ── */
.stagger-children > * {
  opacity: 0;
  transform: translateY(30px) scale(0.97);
  filter: blur(3px);
  transition:
    opacity   .55s var(--ease-expo),
    transform .55s var(--ease-expo),
    filter    .4s ease;
}
.stagger-children.visible > * { opacity: 1; transform: none; filter: blur(0); }
.stagger-children.visible > *:nth-child(1)  { transition-delay: 0s; }
.stagger-children.visible > *:nth-child(2)  { transition-delay: .07s; }
.stagger-children.visible > *:nth-child(3)  { transition-delay: .14s; }
.stagger-children.visible > *:nth-child(4)  { transition-delay: .21s; }
.stagger-children.visible > *:nth-child(5)  { transition-delay: .28s; }
.stagger-children.visible > *:nth-child(n+6){ transition-delay: .35s; }

/* ══════════════════════════════════════════════════════════
   PARTICLE CANVAS
══════════════════════════════════════════════════════════ */
#particle-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
}

/* ══════════════════════════════════════════════════════════
   AMBIENT BACKGROUND ORBS
══════════════════════════════════════════════════════════ */
.ambient-orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
  opacity: 0;
  transition: opacity 1.5s ease;
}
.ambient-orb.ready { opacity: 1; }
.ambient-orb-1 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(124,58,237,.18) 0%, transparent 70%);
  top: -15%; left: -12%;
  animation: ambientDrift1 22s ease-in-out infinite;
}
.ambient-orb-2 {
  width: 550px; height: 550px;
  background: radial-gradient(circle, rgba(59,130,246,.14) 0%, transparent 70%);
  bottom: -8%; right: -8%;
  animation: ambientDrift2 19s ease-in-out infinite 4s;
}
.ambient-orb-3 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(168,85,247,.1) 0%, transparent 70%);
  top: 40%; left: 60%;
  animation: ambientDrift3 16s ease-in-out infinite 8s;
}
@keyframes ambientDrift1 {
  0%,100% { transform: translate(0, 0); }
  33%     { transform: translate(100px, 70px); }
  66%     { transform: translate(-50px, 120px); }
}
@keyframes ambientDrift2 {
  0%,100% { transform: translate(0, 0); }
  33%     { transform: translate(-80px, -50px); }
  66%     { transform: translate(50px, -100px); }
}
@keyframes ambientDrift3 {
  0%,100% { transform: translate(0, 0); }
  50%     { transform: translate(-120px, -60px); }
}

/* ══════════════════════════════════════════════════════════
   ENHANCED GRADIENT TEXT
══════════════════════════════════════════════════════════ */
.gradient-text {
  background: linear-gradient(135deg, #c4b5fd, #a855f7, #6366f1, #38bdf8, #a855f7, #c4b5fd);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientFlow 7s ease infinite;
}
@keyframes gradientFlow {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}

/* ══════════════════════════════════════════════════════════
   SECTION BADGE — PULSING DOT
══════════════════════════════════════════════════════════ */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .275rem .875rem .275rem .65rem;
  background: rgba(124,58,237,.1);
  border: 1px solid rgba(124,58,237,.22);
  border-radius: 9999px;
  letter-spacing: .08em;
}
.section-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a855f7;
  box-shadow: 0 0 8px rgba(168,85,247,.9), 0 0 16px rgba(168,85,247,.45);
  flex-shrink: 0;
  animation: badgeDot 2.2s ease-in-out infinite;
}
@keyframes badgeDot {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(.75); opacity: .5; }
}

/* ══════════════════════════════════════════════════════════
   CARD HOVER — CINEMATIC GLOW FOLLOW
══════════════════════════════════════════════════════════ */
.service-card,
.feature-card,
.testimonial-card,
.step-content,
.live-stat-card {
  position: relative;
  overflow: hidden;
  transition: transform .4s var(--ease-back),
              border-color .35s ease,
              box-shadow .35s ease !important;
}
.service-card::before,
.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--cx, 50%) var(--cy, 50%),
    rgba(124,58,237,.18) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}
.service-card:hover::before,
.feature-card:hover::before { opacity: 1; }
/* fix z-index so content is above pseudo-elements */
.service-card > *,
.feature-card > * { position: relative; z-index: 1; }

.service-card:hover {
  transform: translateY(-8px) scale(1.015) !important;
  border-color: rgba(124,58,237,.45) !important;
  box-shadow: 0 24px 56px rgba(0,0,0,.4), 0 0 40px rgba(124,58,237,.18) !important;
}
.feature-card:hover {
  transform: translateY(-6px) scale(1.01) !important;
  border-color: rgba(124,58,237,.35) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.35), 0 0 32px rgba(124,58,237,.14) !important;
}

/* ── Service icon on hover ── */
.service-card:hover .service-icon {
  transform: scale(1.12) rotate(-4deg);
  transition: transform .35s var(--ease-back);
}

/* ── 3D tilt cards ── */
.service-card,
.step-content,
.live-stat-card {
  transform-style: preserve-3d;
}

/* ══════════════════════════════════════════════════════════
   LIVE STAT CARD ENHANCEMENT
══════════════════════════════════════════════════════════ */
.live-stat-card {
  position: relative;
  overflow: hidden;
}
.live-stat-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,58,237,.6), transparent);
  animation: statCardScan 4s ease-in-out infinite;
  opacity: 0;
}
.live-stat-card:hover::after { opacity: 1; }
@keyframes statCardScan {
  0%   { transform: scaleX(0) translateX(-100%); }
  50%  { transform: scaleX(1) translateX(0%); }
  100% { transform: scaleX(0) translateX(100%); }
}
.live-stat-num {
  transition: transform .4s var(--ease-back);
}
.live-stat-card:hover .live-stat-num {
  transform: scale(1.1);
}

/* ══════════════════════════════════════════════════════════
   BUTTON MICRO-INTERACTIONS
══════════════════════════════════════════════════════════ */
.btn-primary {
  position: relative;
  overflow: hidden;
  transition: all .4s var(--ease-expo) !important;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .3s ease;
  border-radius: inherit;
  pointer-events: none;
}
.btn-primary:hover::after { opacity: 1; }
.btn-primary:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 0 40px rgba(124,58,237,.6), 0 12px 32px rgba(0,0,0,.35) !important;
}
.btn-primary:active {
  transform: translateY(0) scale(0.97) !important;
  transition-duration: .1s !important;
}

/* ── Ripple ── */
@keyframes rippleOut {
  from { transform: scale(0); opacity: .55; }
  to   { transform: scale(3.5); opacity: 0; }
}
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  background: rgba(255,255,255,.25);
  animation: rippleOut .55s ease-out forwards;
  pointer-events: none;
  margin-top: -32px;
  margin-left: -32px;
}

/* ══════════════════════════════════════════════════════════
   NAVBAR — CINEMATIC SCROLL TRANSITION
══════════════════════════════════════════════════════════ */
#navbar {
  transition: all .4s var(--ease-expo) !important;
}
#navbar.scrolled {
  background: rgba(7,7,18,.9) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  box-shadow: 0 4px 40px rgba(0,0,0,.45), 0 1px 0 rgba(124,58,237,.2) !important;
}
.nav-links a {
  position: relative;
  transition: color .25s ease !important;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0; right: 100%;
  height: 1px;
  background: linear-gradient(90deg, #a855f7, #6366f1);
  transition: right .3s var(--ease-expo);
}
.nav-links a:hover::after { right: 0; }

/* ══════════════════════════════════════════════════════════
   TOAST ENHANCEMENT
══════════════════════════════════════════════════════════ */
.toast {
  animation: toastSlideIn .45s var(--ease-back) forwards !important;
}
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(110%) scale(.85); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
.toast.removing {
  animation: toastSlideOut .3s var(--ease-expo) forwards !important;
}
@keyframes toastSlideOut {
  to { opacity: 0; transform: translateX(110%) scale(.9); }
}

/* ══════════════════════════════════════════════════════════
   FAQ ACCORDION CINEMATIC
══════════════════════════════════════════════════════════ */
.faq-item {
  transition: all .3s var(--ease-expo) !important;
}
.faq-item.open {
  border-color: rgba(124,58,237,.35) !important;
  box-shadow: 0 0 32px rgba(124,58,237,.14) !important;
}

/* ══════════════════════════════════════════════════════════
   MODAL — PREMIUM ENTRANCE
══════════════════════════════════════════════════════════ */
.modal-box {
  animation: modalCinematic .45s var(--ease-back) both !important;
}
@keyframes modalCinematic {
  from { opacity: 0; transform: scale(.88) translateY(30px); filter: blur(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

/* ══════════════════════════════════════════════════════════
   ORDER FLOW STEP TRANSITIONS
══════════════════════════════════════════════════════════ */
.order-step.active {
  animation: stepSlideIn .45s var(--ease-expo) both !important;
}
@keyframes stepSlideIn {
  from { opacity: 0; transform: translateX(24px) scale(.98); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* ══════════════════════════════════════════════════════════
   INPUT FOCUS ANIMATIONS
══════════════════════════════════════════════════════════ */
.input-base {
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease, transform .2s ease !important;
}
.input-base:focus {
  border-color: rgba(124,58,237,.75) !important;
  box-shadow: 0 0 0 4px rgba(124,58,237,.16), 0 2px 12px rgba(0,0,0,.25) !important;
  background: rgba(255,255,255,.07) !important;
  transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════════
   OFFER SECTION — CINEMATIC
══════════════════════════════════════════════════════════ */
.offer-wrap {
  position: relative;
  overflow: hidden;
}
.offer-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(124,58,237,.04) 0%,
    rgba(99,102,241,.03) 50%,
    rgba(239,68,68,.04) 100%
  );
  animation: offerShimmer 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes offerShimmer {
  0%,100% { opacity: 1; }
  50%     { opacity: .4; }
}

.offer-pct {
  position: relative;
  display: inline-block;
}
.offer-pct::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #c4b5fd, #a855f7, #6366f1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: blur(16px);
  opacity: .5;
  animation: pctGlow 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pctGlow {
  0%,100% { opacity: .4; transform: scale(1); }
  50%     { opacity: .7; transform: scale(1.02); }
}

/* ══════════════════════════════════════════════════════════
   STEP DOTS — ENHANCED PULSE
══════════════════════════════════════════════════════════ */
.step-dot.active {
  animation: stepDotPulse 2.2s ease-in-out infinite !important;
}
@keyframes stepDotPulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(124,58,237,.18), 0 0 16px rgba(124,58,237,.4); }
  50%     { box-shadow: 0 0 0 8px rgba(124,58,237,.1), 0 0 28px rgba(124,58,237,.6); }
}

/* ══════════════════════════════════════════════════════════
   ADMIN — PREMIUM ANIMATIONS
══════════════════════════════════════════════════════════ */
.admin-panel.active {
  animation: adminPanelCinematic .4s var(--ease-expo) both !important;
}
@keyframes adminPanelCinematic {
  from { opacity: 0; transform: translateY(16px) scale(.99); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.admin-stat {
  transition: transform .35s var(--ease-back), box-shadow .35s ease !important;
}
.admin-stat:hover {
  transform: translateY(-4px) scale(1.015) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.35), 0 0 24px rgba(124,58,237,.12) !important;
}

.admin-nav-item {
  transition: all .25s var(--ease-expo) !important;
}
.admin-nav-item:hover {
  transform: translateX(4px) !important;
  background: rgba(124,58,237,.08) !important;
}

/* ══════════════════════════════════════════════════════════
   SCROLL PROGRESS BAR
══════════════════════════════════════════════════════════ */
#scroll-progress {
  background: linear-gradient(90deg, #7c3aed, #a855f7, #38bdf8, #a855f7);
  background-size: 200% 100%;
  animation: progressShimmer 3s linear infinite;
  box-shadow: 0 0 10px rgba(168,85,247,.65), 0 0 20px rgba(124,58,237,.35);
}
@keyframes progressShimmer {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* ══════════════════════════════════════════════════════════
   GLASS UPGRADE — ULTRA PREMIUM
══════════════════════════════════════════════════════════ */
.glass-card {
  background: rgba(12,10,32,.72);
  backdrop-filter: blur(28px) saturate(180%) brightness(1.05);
  -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(1.05);
  border: 1px solid rgba(139,92,246,.14);
  box-shadow: 0 4px 24px rgba(0,0,0,.25),
              inset 0 1px 0 rgba(255,255,255,.06),
              inset 0 -1px 0 rgba(0,0,0,.2);
  transition: border-color .35s ease,
              box-shadow .35s ease,
              transform .4s var(--ease-back) !important;
}
.glass-card:hover {
  border-color: rgba(139,92,246,.28);
  box-shadow: 0 8px 40px rgba(0,0,0,.35),
              inset 0 1px 0 rgba(255,255,255,.08);
}

/* ══════════════════════════════════════════════════════════
   ANNOUNCEMENT BAR — SLIDE DOWN
══════════════════════════════════════════════════════════ */
#announcement-bar {
  animation: annBarSlide .6s var(--ease-expo) both !important;
}
@keyframes annBarSlide {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ══════════════════════════════════════════════════════════
   CURSOR GLOW — ENHANCED
══════════════════════════════════════════════════════════ */
#cursor-glow {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(124,58,237,.08) 0%, rgba(99,102,241,.04) 40%, transparent 70%);
}

/* ══════════════════════════════════════════════════════════
   OFFER POPUP ENTRANCE
══════════════════════════════════════════════════════════ */
.offer-popup-box {
  animation: popupCinematic .55s var(--ease-back) both !important;
}
@keyframes popupCinematic {
  from { opacity: 0; transform: scale(.8) translateY(40px); filter: blur(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

/* ══════════════════════════════════════════════════════════
   REDUCED MOTION — RESPECT SYSTEM PREFS
══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  #particle-canvas,
  .ambient-orb,
  .scroll-indicator { display: none !important; }
  .reveal-js { opacity: 0 !important; filter: none !important; }
  .stagger-children > * { opacity: 0 !important; filter: none !important; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE PERFORMANCE — reduce blur / heavy effects
══════════════════════════════════════════════════════════ */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  .reveal-js { filter: none; }
  .reveal.visible { filter: none !important; }
  .stagger-children > * { filter: none; }
  .stagger-children.visible > * { filter: none !important; }
  .ambient-orb { opacity: 0 !important; }
  .scroll-indicator { display: none; }
  .service-card:hover,
  .feature-card:hover { transform: none !important; }
}