/* ============================================================
   DENTAVERSE — PREMIUM ANIMATION SYSTEM v1.0
   GPU-accelerated · Mobile-first · Reduced-motion safe
   ============================================================ */

/* ── Animation Tokens ──────────────────────────────────── */
:root {
  --spring:   cubic-bezier(0.22, 1, 0.36, 1);
  --snappy:   cubic-bezier(0.16, 1, 0.3, 1);
  --smooth:   cubic-bezier(0.4, 0, 0.2, 1);
  --bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --tilt-max: 12deg;
  --tilt-perspective: 900px;
}

/* ── 1. Staggered Reveal System ─────────────────────────── */
/* Usage: add data-stagger to a grid container.
   Each direct child gets an auto-calculated delay.        */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s var(--snappy), transform 0.65s var(--snappy);
  will-change: transform, opacity;
}
[data-stagger].is-visible > *,
[data-stagger].active > * {
  opacity: 1;
  transform: none;
}
/* nth-child delays (up to 12 children) */
[data-stagger].is-visible > *:nth-child(1)  { transition-delay: 0.04s; }
[data-stagger].is-visible > *:nth-child(2)  { transition-delay: 0.10s; }
[data-stagger].is-visible > *:nth-child(3)  { transition-delay: 0.16s; }
[data-stagger].is-visible > *:nth-child(4)  { transition-delay: 0.22s; }
[data-stagger].is-visible > *:nth-child(5)  { transition-delay: 0.28s; }
[data-stagger].is-visible > *:nth-child(6)  { transition-delay: 0.34s; }
[data-stagger].is-visible > *:nth-child(7)  { transition-delay: 0.40s; }
[data-stagger].is-visible > *:nth-child(8)  { transition-delay: 0.46s; }
[data-stagger].is-visible > *:nth-child(9)  { transition-delay: 0.52s; }
[data-stagger].is-visible > *:nth-child(10) { transition-delay: 0.58s; }
[data-stagger].is-visible > *:nth-child(11) { transition-delay: 0.64s; }
[data-stagger].is-visible > *:nth-child(12) { transition-delay: 0.70s; }

/* Directional stagger variants */
[data-stagger-left] > * {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.65s var(--snappy), transform 0.65s var(--snappy);
  will-change: transform, opacity;
}
[data-stagger-left].is-visible > * {
  opacity: 1;
  transform: none;
}
[data-stagger-left].is-visible > *:nth-child(1) { transition-delay: 0.04s; }
[data-stagger-left].is-visible > *:nth-child(2) { transition-delay: 0.12s; }
[data-stagger-left].is-visible > *:nth-child(3) { transition-delay: 0.20s; }
[data-stagger-left].is-visible > *:nth-child(4) { transition-delay: 0.28s; }
[data-stagger-left].is-visible > *:nth-child(5) { transition-delay: 0.36s; }
[data-stagger-left].is-visible > *:nth-child(6) { transition-delay: 0.44s; }

/* Scale-in stagger for icon/badge items */
[data-stagger-scale] > * {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.55s var(--bounce), transform 0.55s var(--bounce);
  will-change: transform, opacity;
}
[data-stagger-scale].is-visible > * {
  opacity: 1;
  transform: none;
}
[data-stagger-scale].is-visible > *:nth-child(1) { transition-delay: 0.00s; }
[data-stagger-scale].is-visible > *:nth-child(2) { transition-delay: 0.08s; }
[data-stagger-scale].is-visible > *:nth-child(3) { transition-delay: 0.16s; }
[data-stagger-scale].is-visible > *:nth-child(4) { transition-delay: 0.24s; }
[data-stagger-scale].is-visible > *:nth-child(5) { transition-delay: 0.32s; }
[data-stagger-scale].is-visible > *:nth-child(6) { transition-delay: 0.40s; }


/* ── 2. 3D Card Tilt System ─────────────────────────────── */
/* Works on desktop with fine pointer (mouse). JS drives the tilt. */
.card-3d {
  perspective: var(--tilt-perspective);
  transform-style: preserve-3d;
}
.card-3d-inner {
  transition: transform 0.12s linear, box-shadow 0.25s var(--snappy);
  transform-style: preserve-3d;
  will-change: transform;
  backface-visibility: hidden;
}
/* Tilt active — JS adds .is-tilting on mousemove */
.card-3d.is-tilting .card-3d-inner {
  transition: transform 0.08s linear;
}
/* Subtle lift for tiltable cards */
.card-3d:hover .card-3d-inner {
  box-shadow: 0 28px 60px rgba(10, 37, 88, 0.18), 0 8px 20px rgba(0, 102, 204, 0.12);
}
/* Shimmer surface on tiltable cards */
.card-3d-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 40%,
    rgba(255,255,255,0.14) 50%,
    transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.55s var(--snappy);
  pointer-events: none;
  z-index: 10;
  border-radius: inherit;
}
.card-3d:hover .card-3d-inner::before { transform: translateX(120%); }


/* ── 3. Scroll-Reveal Variants ──────────────────────────── */
.reveal-blur {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(16px);
  transition: opacity 0.75s var(--snappy), filter 0.75s var(--snappy), transform 0.75s var(--snappy);
  will-change: transform, opacity, filter;
}
.reveal-blur.active { opacity: 1; filter: blur(0); transform: none; }

.reveal-slide-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s var(--snappy), transform 0.7s var(--snappy);
  will-change: transform, opacity;
}
.reveal-slide-up.active { opacity: 1; transform: none; }

.reveal-zoom {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.6s var(--spring), transform 0.6s var(--spring);
  will-change: transform, opacity;
}
.reveal-zoom.active { opacity: 1; transform: none; }

.reveal-flip {
  opacity: 0;
  transform: rotateX(12deg) translateY(20px);
  transform-origin: top center;
  transition: opacity 0.7s var(--snappy), transform 0.7s var(--snappy);
  will-change: transform, opacity;
  perspective: 1000px;
}
.reveal-flip.active { opacity: 1; transform: none; }


/* ── 4. Ambient Floating Orbs (CSS-only) ───────────────── */
.anim-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}
.anim-orb-1 {
  width: clamp(280px, 45vw, 600px);
  height: clamp(280px, 45vw, 600px);
  background: radial-gradient(circle at center,
    rgba(0, 204, 255, 0.10) 0%,
    rgba(0, 102, 204, 0.05) 50%,
    transparent 70%);
  animation: orbDrift1 18s ease-in-out infinite;
}
.anim-orb-2 {
  width: clamp(200px, 35vw, 450px);
  height: clamp(200px, 35vw, 450px);
  background: radial-gradient(circle at center,
    rgba(0, 102, 204, 0.08) 0%,
    transparent 70%);
  animation: orbDrift2 24s ease-in-out infinite;
}
.anim-orb-3 {
  width: clamp(150px, 25vw, 320px);
  height: clamp(150px, 25vw, 320px);
  background: radial-gradient(circle at center,
    rgba(0, 204, 255, 0.07) 0%,
    transparent 70%);
  animation: orbDrift3 30s ease-in-out infinite;
}

@keyframes orbDrift1 {
  0%,100% { transform: translate(0,0)    scale(1);    opacity: 0.7; }
  33%      { transform: translate(-30px,20px) scale(1.08); opacity: 0.9; }
  66%      { transform: translate(25px,-15px)  scale(0.95); opacity: 0.6; }
}
@keyframes orbDrift2 {
  0%,100% { transform: translate(0,0)    scale(1);    opacity: 0.8; }
  40%      { transform: translate(35px,25px)  scale(1.12); opacity: 0.5; }
  70%      { transform: translate(-20px,10px) scale(0.92); opacity: 1.0; }
}
@keyframes orbDrift3 {
  0%,100% { transform: translate(0,0)    scale(1);    opacity: 0.6; }
  50%      { transform: translate(-25px,-20px) scale(1.1); opacity: 0.9; }
}


/* ── 5. Pulsing Ring (Sonar) ────────────────────────────── */
/* Usage: wrap any element in .sonar-ring */
.sonar-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sonar-ring::before,
.sonar-ring::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 2px solid rgba(0, 204, 255, 0.3);
  animation: sonarPulse 3s ease-out infinite;
  pointer-events: none;
}
.sonar-ring::after {
  inset: -24px;
  border-color: rgba(0, 102, 204, 0.15);
  animation-delay: 1s;
}

@keyframes sonarPulse {
  0%   { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}


/* ── 6. Counter Number Animation ────────────────────────── */
/* JS targets [data-counter] and animates the number.
   This class just ensures smooth reflow.                  */
[data-counter] {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  will-change: contents;
}


/* ── 7. Magnetic Button Glow ────────────────────────────── */
/* JS class that tracks mouse → adds CSS custom props       */
.btn-magnetic {
  transition: transform 0.25s var(--spring), box-shadow 0.25s var(--spring);
  will-change: transform;
}
.btn-magnetic::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%),
    rgba(0,204,255,0.25) 0%,
    transparent 65%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: -1;
}
.btn-magnetic:hover::after { opacity: 1; }


/* ── 8. Particle Dots (CSS-only Hero Decoration) ────────── */
/* 12 floating dots placed via nth-child */
.particle-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.particle-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-cyan);
  opacity: 0;
  animation: particleDrift 12s ease-in-out infinite;
  will-change: transform, opacity;
}
/* Individual placements + delays */
.particle-dot:nth-child(1)  { left:  8%; top: 20%; animation-delay: 0s;    animation-duration: 14s; width:4px; height:4px; }
.particle-dot:nth-child(2)  { left: 18%; top: 70%; animation-delay: 1.5s;  animation-duration: 11s; width:3px; height:3px; opacity:0; }
.particle-dot:nth-child(3)  { left: 30%; top: 15%; animation-delay: 3s;    animation-duration: 16s; background: var(--brand-mid); }
.particle-dot:nth-child(4)  { left: 55%; top: 80%; animation-delay: 0.8s;  animation-duration: 13s; width:6px; height:6px; }
.particle-dot:nth-child(5)  { left: 68%; top: 25%; animation-delay: 2.2s;  animation-duration: 10s; width:3px; height:3px; }
.particle-dot:nth-child(6)  { left: 80%; top: 60%; animation-delay: 4s;    animation-duration: 18s; background: var(--brand-mid); }
.particle-dot:nth-child(7)  { left: 90%; top: 10%; animation-delay: 1.1s;  animation-duration: 15s; width:4px; height:4px; }
.particle-dot:nth-child(8)  { left: 12%; top: 45%; animation-delay: 5s;    animation-duration: 12s; width:3px; height:3px; }
.particle-dot:nth-child(9)  { left: 44%; top: 55%; animation-delay: 2.7s;  animation-duration: 20s; width:5px; height:5px; opacity:0; }
.particle-dot:nth-child(10) { left: 75%; top: 88%; animation-delay: 0.4s;  animation-duration: 9s;  width:4px; height:4px; }
.particle-dot:nth-child(11) { left: 35%; top: 92%; animation-delay: 3.6s;  animation-duration: 17s; background: var(--brand-cyan); }
.particle-dot:nth-child(12) { left: 92%; top: 45%; animation-delay: 1.8s;  animation-duration: 11s; width:3px; height:3px; }

@keyframes particleDrift {
  0%   { opacity: 0;    transform: translateY(0)    scale(1); }
  15%  { opacity: 0.55; }
  50%  { opacity: 0.3;  transform: translateY(-40px) scale(1.2); }
  85%  { opacity: 0.55; }
  100% { opacity: 0;    transform: translateY(-80px) scale(0.8); }
}


/* ── 9. Hero Glow Ring (VR headset backdrop) ───────────── */
.hero-glow-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  border: 1.5px solid rgba(0, 204, 255, 0.18);
  animation: glowRingPulse 4s ease-in-out infinite;
  will-change: transform, opacity;
}
.hero-glow-ring:nth-child(1) {
  width: 340px; height: 340px;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  animation-delay: 0s;
}
.hero-glow-ring:nth-child(2) {
  width: 480px; height: 480px;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  animation-delay: 1.4s;
  border-color: rgba(0, 102, 204, 0.10);
}
.hero-glow-ring:nth-child(3) {
  width: 620px; height: 620px;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  animation-delay: 2.8s;
  border-color: rgba(0, 204, 255, 0.06);
}
@keyframes glowRingPulse {
  0%   { opacity: 0.3; transform: translate(-50%,-50%) scale(0.95); }
  50%  { opacity: 0.9; transform: translate(-50%,-50%) scale(1.02); }
  100% { opacity: 0.3; transform: translate(-50%,-50%) scale(0.95); }
}


/* ── 10. Stat Card Shimmer ──────────────────────────────── */
.stat-shimmer {
  position: relative;
  overflow: hidden;
}
.stat-shimmer::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 65%; height: 100%;
  background: linear-gradient(105deg,
    transparent,
    rgba(255,255,255,0.22),
    transparent);
  animation: statShimmer 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes statShimmer {
  0%   { left: -100%; }
  60%  { left: 150%; }
  100% { left: 150%; }
}


/* ── 11. Section Divider Wave ───────────────────────────── */
.section-wave {
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 80px;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.section-wave svg {
  width: 100%;
  height: 100%;
  display: block;
}


/* ── 12. Icon Bounce on Hover ───────────────────────────── */
.icon-bounce {
  display: inline-flex;
  transition: transform 0.35s var(--bounce);
}
.icon-bounce:hover,
*:hover > .icon-bounce {
  transform: translateY(-4px) scale(1.1);
}


/* ── 13. Progress Bar Animation ─────────────────────────── */
.progress-bar {
  height: 4px;
  background: var(--bg-deep);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-mid), var(--brand-cyan));
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s var(--spring);
  will-change: transform;
}
.progress-bar-fill.active { transform: scaleX(1); }


/* ── 14. Typing Cursor ──────────────────────────────────── */
.typing-cursor::after {
  content: '|';
  display: inline-block;
  color: var(--brand-cyan);
  font-weight: 300;
  animation: blink 1s step-start infinite;
  margin-left: 2px;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}


/* ── 15. Feature Card Hover (Enhanced) ──────────────────── */
.feature-card-anim {
  transition: transform 0.4s var(--snappy), box-shadow 0.4s var(--snappy), border-color 0.3s;
  will-change: transform;
}
.feature-card-anim:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 24px 56px rgba(10, 37, 88, 0.15), 0 0 0 2px rgba(0,204,255,0.15);
}
/* Icon color shift on card hover */
.feature-card-anim:hover .wc-icon,
.feature-card-anim:hover .fc-icon {
  background: linear-gradient(135deg, rgba(0,102,204,0.12), rgba(0,204,255,0.12));
  border-color: rgba(0,204,255,0.3);
}


/* ── 16. Smooth Underline Draw (Links) ──────────────────── */
.underline-draw {
  position: relative;
  display: inline-block;
}
.underline-draw::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: linear-gradient(90deg, var(--brand-mid), var(--brand-cyan));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--snappy);
}
.underline-draw:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}


/* ── 17. Touch Ripple (Mobile CTAs) ─────────────────────── */
@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  width: 50px;
  height: 50px;
  margin-top: -25px;
  margin-left: -25px;
  animation: ripple 0.6s linear;
  pointer-events: none;
}


/* ── 18. Gradient Text Animation ────────────────────────── */
.text-gradient-anim {
  background: linear-gradient(270deg,
    var(--brand-cyan),
    var(--brand-mid),
    var(--brand-cyan));
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 6s ease infinite;
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/* ── 19. Floating CTA Badge ─────────────────────────────── */
.float-badge {
  animation: floatBadge 4s ease-in-out infinite;
  will-change: transform;
}
@keyframes floatBadge {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}


/* ── 20. Scroll Progress Bar (top of page) ──────────────── */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-mid), var(--brand-cyan));
  width: 0%;
  z-index: 99999;
  transition: width 0.1s linear;
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════
   MOBILE FIRST — disable heavy 3D/blur on small screens
   ═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Disable 3D tilt on touch */
  .card-3d, .card-3d-inner {
    perspective: none;
    transform-style: flat;
    transform: none !important;
  }
  /* Soften blur reveals */
  .reveal-blur {
    filter: none;
    transform: translateY(12px);
  }
  /* Reduce orb sizes */
  .anim-orb-1 { width: 200px; height: 200px; }
  .anim-orb-2 { width: 150px; height: 150px; }
  .anim-orb-3 { display: none; }
  /* Smaller glow rings */
  .hero-glow-ring:nth-child(1) { width: 220px; height: 220px; }
  .hero-glow-ring:nth-child(2) { width: 300px; height: 300px; }
  .hero-glow-ring:nth-child(3) { display: none; }
  /* Reduce particle count visibility */
  .particle-dot:nth-child(even) { display: none; }
  /* Shorten stagger delays on mobile for snappier feel */
  [data-stagger].is-visible > *:nth-child(n) { transition-delay: 0.06s !important; }
}

/* ── Tablet tweaks ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-glow-ring:nth-child(3) { width: 420px; height: 420px; }
}


/* ═══════════════════════════════════════════════════════
   REDUCED MOTION — respect system accessibility settings
   ═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-stagger] > *,
  [data-stagger-left] > *,
  [data-stagger-scale] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .anim-orb, .particle-dot, .hero-glow-ring, .sonar-ring::before, .sonar-ring::after {
    animation: none !important;
  }
  .reveal-blur, .reveal-slide-up, .reveal-zoom, .reveal-flip {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .card-3d-inner { transition: none !important; }
  .text-gradient-anim { animation: none !important; }
  .float-badge { animation: none !important; }
  #scroll-progress { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════
   PERFORMANCE — content-visibility for off-screen sections
   ═══════════════════════════════════════════════════════ */
section:not(.hero):not(#home) {
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}