/**
 * ==============================================================================
 * MEDINEXT GLOBAL LLC — 2025 MICRO-INTERACTION & ANIMATION STACK
 * ==============================================================================
 * Architecture: Hardware Accelerated GPU Animations, 3D Card Tilt,
 * Magnetic Button Attraction, Radial Click Ripples, Glow Pulses,
 * and Full WCAG 2.1 AAA Prefers-Reduced-Motion Compliance.
 * Version: 3.0.0 (Production 2025)
 * ==============================================================================
 */

/* ==========================================================================
   1. HARDWARE-ACCELERATED KEYFRAME DEFINITIONS
   ========================================================================== */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -32px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-32px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(32px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale3d(0.92, 0.92, 1);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes growIn {
  0% {
    opacity: 0;
    transform: scale3d(0.85, 0.85, 1);
  }
  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes shimmerAccent {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

@keyframes slideInStagger {
  from {
    opacity: 0;
    transform: translate3d(0, 48px, 0) scale3d(0.95, 0.95, 1);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}

@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(1.5deg);
  }
}

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

@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.45;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.08);
  }
}

@keyframes rippleEffect {
  0% {
    transform: scale(0);
    opacity: 0.65;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

@keyframes skeletonShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

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

@keyframes marqueeScroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

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

/* ==========================================================================
   2. INTERSECTION OBSERVER SCROLL REVEALS
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

[data-reveal="fade"],
[data-reveal="fade-in"] {
  transform: none;
}

[data-reveal="slide-up"],
[data-reveal="fade-in-up"] {
  transform: translate3d(0, 40px, 0);
}

[data-reveal="slide-down"],
[data-reveal="fade-in-down"] {
  transform: translate3d(0, -40px, 0);
}

[data-reveal="slide-left"],
[data-reveal="fade-in-left"] {
  transform: translate3d(-40px, 0, 0);
}

[data-reveal="slide-right"],
[data-reveal="fade-in-right"] {
  transform: translate3d(40px, 0, 0);
}

[data-reveal="scale"] {
  transform: scale3d(0.9, 0.9, 1);
}

[data-reveal="grow-in"] {
  opacity: 0;
  transform: scale3d(0.85, 0.85, 1);
}
[data-reveal="grow-in"].revealed {
  animation: growIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

[data-reveal].revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}

/* Stagger Delay Utilities */
[data-delay="50"],  [data-reveal-delay="50"]  { transition-delay: 0.05s; }
[data-delay="100"], [data-reveal-delay="100"] { transition-delay: 0.1s; }
[data-delay="150"], [data-reveal-delay="150"] { transition-delay: 0.15s; }
[data-delay="200"], [data-reveal-delay="200"] { transition-delay: 0.2s; }
[data-delay="250"], [data-reveal-delay="250"] { transition-delay: 0.25s; }
[data-delay="300"], [data-reveal-delay="300"] { transition-delay: 0.3s; }
[data-delay="350"], [data-reveal-delay="350"] { transition-delay: 0.35s; }
[data-delay="400"], [data-reveal-delay="400"] { transition-delay: 0.4s; }
[data-delay="500"], [data-reveal-delay="500"] { transition-delay: 0.5s; }
[data-delay="600"], [data-reveal-delay="600"] { transition-delay: 0.6s; }

.stagger-parent > *:nth-child(1) { transition-delay: 0.08s; }
.stagger-parent > *:nth-child(2) { transition-delay: 0.16s; }
.stagger-parent > *:nth-child(3) { transition-delay: 0.24s; }
.stagger-parent > *:nth-child(4) { transition-delay: 0.32s; }
.stagger-parent > *:nth-child(5) { transition-delay: 0.40s; }
.stagger-parent > *:nth-child(6) { transition-delay: 0.48s; }

/* ==========================================================================
   3. 3D CARD PERSPECTIVE TILT & GLARE EFFECT
   ========================================================================== */
[data-tilt] {
  transform-style: preserve-3d;
  perspective: 1000px;
  will-change: transform;
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tilt-glare-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;
}

.tilt-glare {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250%;
  height: 250%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 65%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: opacity, transform;
}

/* ==========================================================================
   4. MAGNETIC BUTTONS & RADIAL RIPPLE CLICKS
   ========================================================================== */
.btn-magnetic {
  display: inline-flex;
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.btn-ripple {
  position: relative;
  overflow: hidden;
}

.ripple-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transform: scale(0);
  animation: rippleEffect 0.6s cubic-bezier(0, 0, 0.2, 1);
  pointer-events: none;
}

.btn-outline .ripple-circle,
.btn-white .ripple-circle {
  background: rgba(37, 99, 235, 0.25);
}

/* ==========================================================================
   5. PRECISION CUSTOM CURSOR (DESKTOP)
   ========================================================================== */
.custom-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background-color: var(--color-primary-500, #2563eb);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor, 9999);
  transform: translate3d(-100px, -100px, 0);
  margin-top: -3px;
  margin-left: -3px;
  transition: opacity 0.2s ease, transform 0.05s ease-out;
  box-shadow: 0 0 8px var(--color-accent-400, #38bdf8);
}

.custom-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  border: 1.5px solid rgba(37, 99, 235, 0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: calc(var(--z-cursor, 9999) - 1);
  transform: translate3d(-100px, -100px, 0);
  margin-top: -17px;
  margin-left: -17px;
  transition: width 0.25s ease, height 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, margin 0.25s ease;
}

.custom-cursor-ring.cursor-hover {
  width: 54px;
  height: 54px;
  margin-top: -27px;
  margin-left: -27px;
  background-color: rgba(37, 99, 235, 0.12);
  border-color: var(--color-accent-500, #0ea5e9);
}

.custom-cursor-ring.cursor-click {
  transform: scale(0.85);
  border-color: var(--color-emerald-500, #10b981);
}

/* Hide native cursor when custom cursor is active on pointer devices */
@media (hover: hover) and (pointer: fine) {
  body.has-custom-cursor {
    cursor: default;
  }
  body.has-custom-cursor a,
  body.has-custom-cursor button,
  body.has-custom-cursor [role="button"],
  body.has-custom-cursor .btn {
    cursor: pointer;
  }
}

/* ==========================================================================
   6. SKELETON PLACEHOLDER LOADERS
   ========================================================================== */
.skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.6s infinite ease-in-out;
  border-radius: var(--radius-sm, 8px);
  color: transparent !important;
  user-select: none;
  pointer-events: none;
}

.skeleton-text {
  height: 14px;
  margin-bottom: var(--space-2, 8px);
  width: 100%;
  border-radius: var(--radius-xs, 4px);
}

.skeleton-text.skeleton-sm { width: 60%; }
.skeleton-text.skeleton-md { width: 80%; }

.skeleton-title {
  height: 28px;
  margin-bottom: var(--space-4, 16px);
  width: 70%;
  border-radius: var(--radius-sm, 8px);
}

.skeleton-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
}

.skeleton-card {
  min-height: 220px;
  border-radius: var(--radius-2xl, 24px);
}

.skeleton-btn {
  height: 44px;
  width: 140px;
  border-radius: var(--radius-md, 12px);
}

/* ==========================================================================
   7. ATMOSPHERIC GLOW ORBS & BACKGROUND PARTICLES
   ========================================================================== */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: var(--z-negative, -1);
  opacity: 0.5;
  animation: pulseGlow 8s infinite alternate ease-in-out;
}

.glow-orb-blue {
  background: radial-gradient(circle, rgba(37, 99, 235, 0.45) 0%, rgba(37, 99, 235, 0) 70%);
}

.glow-orb-cyan {
  background: radial-gradient(circle, rgba(14, 165, 233, 0.45) 0%, rgba(14, 165, 233, 0) 70%);
}

.glow-orb-emerald {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.4) 0%, rgba(16, 185, 129, 0) 70%);
}

.glow-orb-navy {
  background: radial-gradient(circle, rgba(15, 23, 42, 0.6) 0%, rgba(15, 23, 42, 0) 70%);
}

/* Floating animation utilities */
.floating-slow {
  animation: floatSlow 6s infinite ease-in-out;
}

.floating-gentle {
  animation: floatGentle 4s infinite ease-in-out;
}

/* Marquee track */
.marquee-container {
  overflow: hidden;
  user-select: none;
  display: flex;
  position: relative;
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.marquee-track {
  display: flex;
  gap: var(--space-12, 48px);
  min-width: 200%;
  animation: marqueeScroll 28s linear infinite;
}

.marquee-container:hover .marquee-track {
  animation-play-state: paused;
}

/* ==========================================================================
   8. STRICT PREFERS-REDUCED-MOTION OVERRIDES (WCAG 2.1 AAA)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  [data-tilt] {
    transform: none !important;
  }

  .tilt-glare {
    display: none !important;
  }

  .btn-magnetic {
    transform: none !important;
  }

  .ripple-circle {
    display: none !important;
  }

  .custom-cursor-dot,
  .custom-cursor-ring {
    display: none !important;
  }

  .glow-orb,
  .floating-slow,
  .floating-gentle {
    animation: none !important;
    transform: none !important;
  }

  .marquee-track,
  .ticker-track {
    animation: none !important;
    transform: none !important;
    overflow-x: auto;
  }
}