/* ==========================================================================
   OMNIFLONEX AI — MASTER UNIFIED MOTION GRAPHICS SYSTEM
   Ultra-Luxury 3D WebGL Constellation, Interactive Kinetic Particle Trail,
   Floating Holographic HUD Rings, Radiant Neon Flow Borders,
   3D Card Levitation, Holographic Sheen & Dual-Ring Magnetic Cursor
   Active across all pages of OmniflonexAi.com
   ========================================================================== */

/* 1. Global 3D WebGL Motion Canvas */
#global-3d-canvas {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 0 !important; /* Kept behind content so cards and text are unobstructed */
  opacity: 0.85;
  display: block !important;
  transition: opacity 0.8s ease;
  will-change: transform;
}

[data-theme="light"] #global-3d-canvas {
  opacity: 0.16 !important;
}

@media (max-width: 768px) {
  #global-3d-canvas {
    opacity: 0.22 !important;
  }
  [data-theme="light"] #global-3d-canvas {
    opacity: 0.10 !important;
  }
}

/* Ensure page interactive elements sit above the 3D canvas */
header, nav, main, section, footer, .container, .hero-section,
.content-wrapper, .modal, .drawer, .page-wrapper, .hero-content,
.hero-rewards-grid, .package-card, .price-card, .btn,
.hero, .notice, .sec, #step1, #step2, .cat-grid, .cat-card, .pkg, .dur-table, .rec-t {
  position: relative;
  z-index: 2;
}

/* 2. Floating Luminous Ambient Glow Orbs */
.ambient-mesh-glow {
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  z-index: 0 !important;
  display: block !important;
}

.mesh-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
  animation: omniMeshFloat 18s ease-in-out infinite alternate;
}

.mesh-orb-emerald {
  width: 680px;
  height: 680px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.22), transparent 70%);
  top: -120px;
  left: -120px;
  animation-duration: 20s;
}

.mesh-orb-gold {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.18), transparent 70%);
  bottom: 5%;
  right: -80px;
  animation-duration: 24s;
  animation-direction: alternate-reverse;
}

.mesh-orb-cyan {
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.16), transparent 70%);
  top: 40%;
  left: 30%;
  animation-duration: 28s;
}

@keyframes omniMeshFloat {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(45px, 35px, 0) scale(1.12); }
  100% { transform: translate3d(-35px, 50px, 0) scale(0.92); }
}

/* 3. Floating Kinetic Motion Graphics Flank Widgets (Left & Right Screen Edges) */
.omni-motion-flank {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  pointer-events: none;
  z-index: 99;
  opacity: 0.75;
  transition: opacity 0.4s ease;
}

.omni-motion-flank-left {
  left: 18px;
}

.omni-motion-flank-right {
  right: 18px;
}

.omni-motion-hud-ring {
  width: 32px;
  height: 32px;
  border: 1.5px dashed rgba(16, 185, 129, 0.55);
  border-radius: 50%;
  animation: omniSpinClockwise 12s linear infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}

.omni-motion-hud-ring-inner {
  width: 16px;
  height: 16px;
  border: 1px solid rgba(212, 175, 55, 0.75);
  border-radius: 50%;
  animation: omniSpinCounter 6s linear infinite;
}

.omni-motion-hud-pill {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: 'Space Grotesk', monospace, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #059669;
  background: rgba(5, 150, 105, 0.08);
  border: 1px solid rgba(5, 150, 105, 0.25);
  padding: 0.8rem 0.35rem;
  border-radius: 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 15px rgba(5, 150, 105, 0.12);
  display: flex;
  align-items: center;
  gap: 6px;
}

[data-theme="dark"] .omni-motion-hud-pill {
  color: #34d399;
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(52, 211, 153, 0.35);
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);
}

.omni-hud-dot-pulse {
  width: 6px;
  height: 6px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 8px #10b981;
  animation: omniDotPulse 2s ease-in-out infinite;
}

@keyframes omniSpinClockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes omniSpinCounter {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes omniDotPulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.6); opacity: 0.3; }
}

@media (max-width: 1024px) {
  .omni-motion-flank {
    display: none !important;
  }
}

/* 4. Interactive Stardust Sparkle Trail on Mouse Move */
.omni-cursor-sparkle {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  z-index: 999990;
  transform: translate(-50%, -50%) scale(1);
  animation: omniSparkleFade 0.65s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  will-change: transform, opacity;
}

@keyframes omniSparkleFade {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.95;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.15) translateY(-14px);
    opacity: 0;
  }
}

/* 5. Animated Radiant Neon Flow on Cards */
.hero-reward-card,
.reward-glass-card,
.package-card,
.price-card,
.main-service-card,
.sp-benefit-card,
.step-card,
.b2b-card,
.about-card,
.about-pillar-card,
.faq-item {
  position: relative !important;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
}

/* Flowing border accent on hover & focus */
.hero-reward-card::after,
.reward-glass-card::after,
.package-card::after,
.price-card::after,
.main-service-card::after,
.b2b-card::after {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.55), rgba(212, 175, 55, 0.45), rgba(6, 182, 212, 0.55), rgba(16, 185, 129, 0.55));
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.35;
  animation: omniNeonFlow 8s linear infinite;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.hero-reward-card:hover::after,
.reward-glass-card:hover::after,
.package-card:hover::after,
.price-card:hover::after,
.main-service-card:hover::after,
.b2b-card:hover::after {
  opacity: 1;
  animation-duration: 4s;
}

@keyframes omniNeonFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 6. Subtle Continuous Floating Levitation on Cards */
.hero-reward-card:nth-child(1) {
  animation: omniCardLevitate 7s ease-in-out infinite;
}
.hero-reward-card:nth-child(2) {
  animation: omniCardLevitate 7s ease-in-out infinite 1.2s;
}
.hero-reward-card:nth-child(3) {
  animation: omniCardLevitate 7s ease-in-out infinite 2.4s;
}

@keyframes omniCardLevitate {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

.hero-reward-card:hover {
  animation-play-state: paused !important;
  transform: translateY(-8px) scale(1.015) !important;
  box-shadow: 0 16px 36px rgba(5, 150, 105, 0.22), 0 0 25px rgba(212, 175, 55, 0.18) !important;
}

/* 7. Kinetic Iridescent Text Shimmer */
.text-gradient-emerald,
.text-gradient-gold,
.hero-main-heading span {
  background-size: 250% 250% !important;
  animation: omniTextShimmer 6s ease-in-out infinite alternate !important;
}

@keyframes omniTextShimmer {
  0% { filter: hue-rotate(0deg) brightness(1); }
  50% { filter: hue-rotate(12deg) brightness(1.12); }
  100% { filter: hue-rotate(-12deg) brightness(1.05); }
}

/* 8. Holographic Specular Sheen Layer */
.holographic-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle 320px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(212, 175, 55, 0.22), rgba(16, 185, 129, 0.15) 35%, transparent 75%);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 2;
  mix-blend-mode: screen;
}

[data-omni-tilt]:hover .holographic-shine {
  opacity: 1;
}

/* 9. Magnetic Dual-Ring Motion Cursor */
.cursor-dot {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 7px !important;
  height: 7px !important;
  background: linear-gradient(135deg, #10b981, #d4af37) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 999999 !important;
  transform: translate3d(-50%, -50%, 0) !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 1), 0 0 24px rgba(212, 175, 55, 0.85) !important;
  will-change: transform;
  opacity: 0;
  transition: opacity 0.3s ease, width 0.2s ease, height 0.2s ease;
}

.cursor-ring {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 42px !important;
  height: 42px !important;
  border: 1.8px solid rgba(16, 185, 129, 0.7) !important;
  background: rgba(5, 150, 105, 0.05) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 999998 !important;
  transform: translate3d(-50%, -50%, 0) !important;
  will-change: transform;
  opacity: 0;
  transition: opacity 0.35s ease, width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 0 24px rgba(5, 150, 105, 0.35), inset 0 0 14px rgba(212, 175, 55, 0.15) !important;
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
}

body.cursor-active .cursor-dot,
body.cursor-active .cursor-ring {
  opacity: 1;
}

body.cursor-hover .cursor-dot {
  width: 10px !important;
  height: 10px !important;
  background: #d4af37 !important;
  box-shadow: 0 0 18px #d4af37, 0 0 35px rgba(212, 175, 55, 0.95) !important;
}

body.cursor-hover .cursor-ring {
  width: 58px !important;
  height: 58px !important;
  border-color: rgba(212, 175, 55, 0.95) !important;
  background: rgba(212, 175, 55, 0.1) !important;
  box-shadow: 0 0 40px rgba(212, 175, 55, 0.45), 0 0 65px rgba(5, 150, 105, 0.35) !important;
}

@media (pointer: coarse), (max-width: 768px) {
  .cursor-dot,
  .cursor-ring,
  .omni-cursor-sparkle {
    display: none !important;
  }
}

/* 10. Scroll-Driven Motion Entrance Reveals */
.omni-motion-reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.omni-motion-reveal.omni-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 11. Accessibility: Respect User Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
  .mesh-orb,
  .omni-motion-hud-ring,
  .omni-motion-hud-ring-inner,
  .omni-hud-dot-pulse,
  .hero-reward-card {
    animation: none !important;
  }
  .cursor-dot,
  .cursor-ring,
  .omni-cursor-sparkle {
    display: none !important;
  }
  .omni-motion-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}