/* ═══════════════════════════════════════════════════════════
   AstroKamya™ · MOBILE PERFORMANCE OVERRIDE v1.0
   ───────────────────────────────────────────────────────────
   PURPOSE:  Eliminate GPU-intensive operations on mobile.
             This file MUST load LAST to override all others.
   
   STRATEGY:
   ─ Kill all continuous CSS animations (562 @keyframes → 0)
   ─ Replace costly backdrop-filter with solid fallbacks
   ─ Disable box-shadow animations & multi-layer shadows
   ─ Force will-change:auto to stop GPU layer promotion
   ─ Preserve essential visual quality with static states
   ─ Keep tasteful entrance transitions (one-shot, not loops)
   ═══════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════
   §1  GLOBAL MOBILE PERFORMANCE OVERRIDES  (≤ 768px)
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── §1.1  Kill ALL looping keyframe animations ─────── */
  *:not(.h9-mobile-anim):not(.h9-mobile-anim *):not(.ma-ring):not(.ma-moon):not(.ma-center-star),
  *:not(.h9-mobile-anim):not(.h9-mobile-anim *):not(.ma-ring):not(.ma-moon):not(.ma-center-star)::before,
  *:not(.h9-mobile-anim):not(.h9-mobile-anim *):not(.ma-ring):not(.ma-moon):not(.ma-center-star)::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.2s !important;
    will-change: auto !important;
  }

  /* ── §1.2  Preserve entrance animations (one-shot) ──── */
  /* Scroll-reveal elements get a clean 0.4s ease-out */
  .r, .reveal-fade, .reveal-scale, .reveal-blur-up,
  .ss-reveal, .ig-step, .ss-bento-card {
    transition: opacity 0.4s ease-out, transform 0.4s ease-out !important;
    animation: none !important;
  }
  .r.v, .reveal-fade.v, .reveal-scale.v, .reveal-blur-up.v,
  .ss-reveal.v {
    opacity: 1 !important;
    transform: none !important;
  }

  /* ── §1.3  Kill GPU-heavy visual effects ─────────────── */
  /* Backdrop-filter is extremely expensive on mobile GPUs */
  .splash-screen,
  .mobile-nav-drawer,
  .profile-menu,
  .input-card,
  .ss-card-glass,
  .ss-wizard-modal,
  .ss-bento-card,
  .ss-ai-card,
  .ss-plan-card,
  [class*="glass"],
  [class*="blur"],
  .ak-nav {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(10, 6, 24, 0.95) !important;
  }

  /* ── §1.4  Simplify box-shadows ─────────────────────── */
  .ss-profile-card,
  .ss-bento-card,
  .ss-plan-card,
  .ss-story-card,
  .input-card,
  .t-card,
  .pc,
  .intent-card,
  [class*="card"] {
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
  }

  /* ── §1.5  Kill canvas + heavy DOM particle systems ─── */
  #stars-canvas,
  .mobile-cosmos canvas,
  #ss-particles,
  #demo-particles,
  .mco,
  .mco-inner,
  #mobile-astrolabe,
  .mesh-orb,
  #mesh-bg,
  .scanner-stream-container {
    display: none !important;
  }

  /* ── §1.6  Kill orbit/spin/pulse animations ─────────── */
  .astro-ring, .astro-spin-slow, .astro-spin-rev, .astro-spin-fast,
  .astro-geom, .astro-geom-rev, .astro-pulse,
  .ss-spin-slow, .ss-spin-reverse,
  .moon-orbit, .moon-dot,
  .ring-wrap svg,
  .ig-connector-pulse,
  .ig-scanner-fill,
  .ig-conf-fill,
  .ss-orbit-ring,
  .ss-orbit-dot,
  .ss-synergy-pulse,
  .ss-match-particles,
  .ss-match-threads,
  .ss-demo-pulse-ring,
  .ss-beam-dot,
  .ss-card-ring,
  .ss-demo-avatar-ring,
  .ss-demo-ring-svg,
  .ss-btn-shimmer,
  .mco-cloud-1, .mco-cloud-2, .mco-cloud-3,
  .mco-rays, .mco-flare, .mco-corona, .mco-scanline,
  .mco-stars, .mco-grid,
  .mco-glyph,
  .splash-ring-1, .splash-ring-2,
  .pill-dot,
  .ig-stat-dot,
  .scroll-progress,
  .ss-svg-float,
  .diamond-gem {
    animation: none !important;
    transition: none !important;
  }

  /* ── §1.7  Kill SVG SMIL animations ─────────────────── */
  animate, animateTransform, animateMotion {
    display: none !important;
  }

  /* ── §1.8  Simplify gradients & filters ─────────────── */
  .ss-hero-left h1,
  .ss-h1-gradient,
  .ss-gradient-text,
  .hh-accent {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
  }
  .ss-h1-gradient,
  .ss-gradient-text {
    color: #D4A574 !important;
  }
  .hh-accent {
    color: #FFB800 !important;
  }

  /* ── §1.9  Static splash — instant show, then hide ──── */
  .splash-screen {
    animation: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    display: none !important;
  }

  /* ── §1.10  Force GPU layer cleanup ─────────────────── */
  .hero-wrap,
  #hero,
  .trust-section,
  #birth-input,
  .ig-timeline,
  footer {
    transform: none !important;
    will-change: auto !important;
    contain: layout style !important;
  }
}

/* ════════════════════════════════════════════════════════
   §2  TABLET PERFORMANCE OVERRIDES  (769px – 1024px)
   ════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {

  /* Reduce animation complexity (keep some, kill heavy ones) */
  .mobile-cosmos canvas,
  #stars-canvas,
  #demo-particles,
  .mesh-orb,
  #mesh-bg,
  .scanner-stream-container {
    display: none !important;
  }

  *::before,
  *::after {
    animation-iteration-count: 1 !important;
  }

  .astro-ring, .astro-spin-slow, .astro-spin-rev,
  .moon-orbit, .moon-dot,
  .ss-orbit-ring, .ss-orbit-dot,
  .ss-match-particles,
  .ss-synergy-pulse,
  .ss-demo-pulse-ring {
    animation: none !important;
  }

  /* Simplify backdrop-filter on tablet */
  .splash-screen,
  .mobile-nav-drawer,
  [class*="glass"] {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(10, 6, 24, 0.95) !important;
  }
}

/* ════════════════════════════════════════════════════════
   §3  REDUCED MOTION PREFERENCE (Accessibility)
   ════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.001ms !important;
  }
  .splash-screen {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════
   §4  LIGHTWEIGHT MOBILE HERO NEBULA (CSS-only replacement)
   ════════════════════════════════════════════════════════
   Replaces the 110-particle canvas engine with a pure CSS
   atmospheric background that costs ~0 GPU compute.        */

@media (max-width: 1024px) {
  #hero {
    position: relative;
    overflow: hidden;
  }

  /* Cosmic nebula — pure CSS, no animation, no GPU */
  #hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 60% 50% at 30% 20%, rgba(124, 58, 237, 0.12) 0%, transparent 70%),
      radial-gradient(ellipse 50% 40% at 70% 60%, rgba(255, 184, 0, 0.08) 0%, transparent 60%),
      radial-gradient(ellipse 40% 35% at 50% 80%, rgba(232, 54, 124, 0.06) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
  }

  /* Subtle star-field dots — CSS only, static */
  #hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(1px 1px at 15% 25%, rgba(255,255,255,0.4) 0%, transparent 100%),
      radial-gradient(1px 1px at 42% 68%, rgba(255,184,0,0.35) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 78% 12%, rgba(155,109,255,0.4) 0%, transparent 100%),
      radial-gradient(1px 1px at 58% 42%, rgba(255,255,255,0.3) 0%, transparent 100%),
      radial-gradient(1px 1px at 88% 78%, rgba(232,54,124,0.3) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 25% 85%, rgba(255,184,0,0.35) 0%, transparent 100%),
      radial-gradient(1px 1px at 65% 92%, rgba(155,109,255,0.3) 0%, transparent 100%),
      radial-gradient(1px 1px at 5% 55%, rgba(255,255,255,0.25) 0%, transparent 100%),
      radial-gradient(1px 1px at 92% 35%, rgba(255,210,80,0.3) 0%, transparent 100%),
      radial-gradient(1px 1px at 35% 15%, rgba(124,58,237,0.35) 0%, transparent 100%),
      radial-gradient(1px 1px at 72% 52%, rgba(255,255,255,0.2) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 48% 8%, rgba(255,184,0,0.4) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
  }

  /* Ensure hero content sits above the nebula */
  .hero-content,
  .hero-wrap {
    position: relative;
    z-index: 1;
  }

  /* SoulSync hero — same lightweight nebula treatment */
  #ss-hero {
    position: relative;
    overflow: hidden;
  }
  #ss-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 55% 45% at 25% 30%, rgba(212, 165, 116, 0.1) 0%, transparent 65%),
      radial-gradient(ellipse 50% 40% at 75% 50%, rgba(139, 108, 239, 0.08) 0%, transparent 60%),
      radial-gradient(ellipse 45% 35% at 50% 85%, rgba(201, 84, 109, 0.06) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
  }
  .ss-hero-grid,
  .ss-wrap {
    position: relative;
    z-index: 1;
  }
  #ss-particles,
  .ss-nebula,
  .ss-bg-grid {
    display: none !important;
  }
}
/* ════════════════════════════════════════════════════════
   §5  COSMIC MATCH REVEAL — EXCLUSIONS FROM PERF KILLS
   ════════════════════════════════════════════════════════
   The new .ss-mobile-match-reveal is intentionally lightweight.
   Re-enable its essential animations that were killed above.  */

@media (max-width: 768px) {

  /* ── Ensure old desktop card stack is definitively hidden ── */
  .ss-match-scene,
  .ss-card-him,
  .ss-card-her {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* ── Ensure the new mobile reveal IS visible ── */
  .ss-mobile-match-reveal {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Re-enable MMR ring spin animations (CSS keyframes, cheap) */
  .ss-mmr-synergy-pill::before,
  .ss-mmr-synergy-pill::after {
    animation-duration: 3s !important;
    animation-iteration-count: infinite !important;
    animation-name: mmrPillPulse !important;
  }

  /* Re-enable dot pulse */
  .ss-mmr-verified-dot {
    animation-duration: 2s !important;
    animation-iteration-count: infinite !important;
    animation-name: mmrDotPulse !important;
  }

  /* Allow MMR SVG rings to spin (they are cheap, GPU-accelerated transforms) */
  .ss-mmr-avatar-ring animateTransform,
  .ss-mmr-photo-ring animateTransform {
    display: inline !important;
  }

  /* Bar expand animation — one-shot, fine on mobile */
  .ss-mmr-bar-fill {
    animation-duration: 1.2s !important;
    animation-iteration-count: 1 !important;
    animation-name: mmrBarExpand !important;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  /* Allow MMR glassmorphism — cards are few and contained */
  .ss-mmr-card,
  .ss-mmr-synergy-pill,
  .ss-mmr-compat,
  .ss-mmr-dots {
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  }
}