/* ============================================
   Professional Animation System v3
   - Scroll reveal, micro-interactions, 3D transforms
   - Page transitions, loading states
   ============================================ */

/* Smooth scroll + base */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ===== Loading state ===== */
.page-loading {
  position: fixed; inset: 0; background: var(--bg); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.page-loading.hidden { opacity: 0; visibility: hidden; }
.page-loading-spinner {
  width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Reveal animations ===== */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-fade { opacity: 0; transition: opacity 1s ease; }
.reveal-fade.visible { opacity: 1; }
.reveal-scale { opacity: 0; transform: scale(0.95); transition: opacity 0.6s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-scale.visible { opacity: 1; transform: scale(1); }
.reveal-left { opacity: 0; transform: translateX(-30px); transition: opacity 0.6s, transform 0.6s; }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(30px); transition: opacity 0.6s, transform 0.6s; }
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* Staggered children */
.stagger-children > * { opacity: 0; transform: translateY(20px); transition: opacity 0.5s, transform 0.5s; }
.stagger-children.visible > *:nth-child(1) { transition-delay: 0ms; }
.stagger-children.visible > *:nth-child(2) { transition-delay: 80ms; }
.stagger-children.visible > *:nth-child(3) { transition-delay: 160ms; }
.stagger-children.visible > *:nth-child(4) { transition-delay: 240ms; }
.stagger-children.visible > *:nth-child(5) { transition-delay: 320ms; }
.stagger-children.visible > *:nth-child(6) { transition-delay: 400ms; }
.stagger-children.visible > *:nth-child(7) { transition-delay: 480ms; }
.stagger-children.visible > *:nth-child(8) { transition-delay: 560ms; }
.stagger-children.visible > * { opacity: 1; transform: translateY(0); }

/* ===== 3D transforms ===== */
.perspective { perspective: 1200px; }
.preserve-3d { transform-style: preserve-3d; }

/* 3D card tilt on hover */
.tilt-3d { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); transform-style: preserve-3d; will-change: transform; }
.tilt-3d:hover { transform: perspective(1200px) rotateX(2deg) rotateY(-2deg) translateZ(20px); }
.tilt-3d-shine { position: relative; overflow: hidden; }
.tilt-3d-shine::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%); transform: translateX(-100%); transition: transform 0.6s; pointer-events: none; }
.tilt-3d-shine:hover::before { transform: translateX(100%); }

/* Card with depth shadow */
.card-3d { transition: transform 0.3s, box-shadow 0.3s; transform-style: preserve-3d; }
.card-3d:hover { transform: translateY(-4px) translateZ(10px); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05); }

/* Magnetic button */
.magnetic { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }

/* Gradient text animated */
.gradient-text { background: linear-gradient(135deg, var(--accent), #ec4899, var(--accent)); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradientShift 4s ease infinite; }
@keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Floating animation */
.float { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Glow pulse */
.glow-pulse { animation: glowPulse 3s ease-in-out infinite; }
@keyframes glowPulse { 0%, 100% { box-shadow: 0 0 20px rgba(94, 106, 210, 0.3); } 50% { box-shadow: 0 0 40px rgba(94, 106, 210, 0.5); } }

/* ===== Hero 3D scene container ===== */
.hero-3d-scene { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.hero-content { position: relative; z-index: 1; }

/* Floating 3D orbs */
.orb { position: absolute; border-radius: 50%; filter: blur(40px); opacity: 0.5; animation: orbFloat 20s ease-in-out infinite; }
.orb-1 { width: 400px; height: 400px; background: radial-gradient(circle, var(--accent), transparent); top: -100px; right: -100px; animation-delay: 0s; }
.orb-2 { width: 300px; height: 300px; background: radial-gradient(circle, #ec4899, transparent); bottom: -50px; left: -50px; animation-delay: -5s; }
.orb-3 { width: 250px; height: 250px; background: radial-gradient(circle, #10b981, transparent); top: 50%; left: 50%; animation-delay: -10s; }
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 30px) scale(0.9); }
}
[data-theme="dark"] .orb { opacity: 0.3; }

/* Grid pattern background */
.grid-bg { background-image: linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px); background-size: 40px 40px; }
[data-theme="dark"] .grid-bg { background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); }

/* Dot pattern */
.dot-bg { background-image: radial-gradient(rgba(0,0,0,0.08) 1px, transparent 1px); background-size: 24px 24px; }
[data-theme="dark"] .dot-bg { background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px); }

/* ===== Page transition ===== */
@keyframes pageEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
body { animation: pageEnter 0.4s ease; }

/* ===== Skeleton loading ===== */
.skeleton { background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--border) 50%, var(--bg-elevated) 75%); background-size: 200% 100%; animation: skeletonShine 1.5s ease-in-out infinite; border-radius: var(--radius-md); }
@keyframes skeletonShine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ===== Smooth image loading ===== */
img { transition: opacity 0.3s; }
img.lazy { opacity: 0; }
img.lazy.loaded { opacity: 1; }

/* ===== Hover lift ===== */
.hover-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -8px rgba(0,0,0,0.12); }

/* ===== Magnetic pull on buttons ===== */
.btn { transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.15s, box-shadow 0.2s; }
.btn:hover { transform: translateY(-2px); }
.btn-primary:hover { box-shadow: 0 8px 20px -4px rgba(0,0,0,0.2); }
.btn:active { transform: translateY(0) scale(0.98); }

/* ===== Animated underlines ===== */
.link-underline { position: relative; text-decoration: none; }
.link-underline::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* ===== Tool card 3D effect ===== */
.tool-card { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s, border-color 0.2s; transform-style: preserve-3d; }
.tool-card:hover { transform: translateY(-6px) translateZ(10px); box-shadow: 0 16px 32px -8px rgba(0,0,0,0.12), 0 0 0 1px var(--border); }
.tool-card .tool-card-logo { transition: transform 0.3s; }
.tool-card:hover .tool-card-logo { transform: scale(1.1) rotate(-3deg); }

/* ===== Stat counter animation ===== */
.stat-value { display: inline-block; transition: transform 0.3s; }
.stat-value:hover { transform: scale(1.1); }

/* ===== Animated nav indicator ===== */
.nav-link { position: relative; }
.nav-link::before { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: center; transition: transform 0.3s; }
.nav-link:hover::before, .nav-link.active::before { transform: scaleX(0.6); }

/* ===== Theme toggle smooth ===== */
.theme-toggle { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s; }
.theme-toggle:hover { transform: rotate(20deg) scale(1.1); }

/* ===== Back to top animation ===== */
.back-to-top { transition: transform 0.2s, opacity 0.3s, background 0.2s, border-color 0.2s; }
.back-to-top:hover { transform: translateY(-4px) scale(1.05); }

/* ===== Product mockup 3D ===== */
.product-mockup { transform: perspective(1200px) rotateX(2deg); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.product-mockup:hover { transform: perspective(1200px) rotateX(0deg) translateY(-4px); }

/* ===== Smooth progress bar ===== */
.reading-progress { transition: width 0.1s linear; background: linear-gradient(90deg, var(--accent), #ec4899); }

/* ===== Section eyebrow animation ===== */
.section-eyebrow { display: inline-block; position: relative; }
.section-eyebrow::before { content: ''; display: inline-block; width: 24px; height: 1px; background: var(--accent); vertical-align: middle; margin-right: 8px; transition: width 0.4s; }
.reveal.visible .section-eyebrow::before { width: 40px; }

/* ===== Hero title word-by-word reveal ===== */
.hero-title-word { display: inline-block; opacity: 0; transform: translateY(20px); animation: wordIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.hero-title-word:nth-child(1) { animation-delay: 0.1s; }
.hero-title-word:nth-child(2) { animation-delay: 0.2s; }
.hero-title-word:nth-child(3) { animation-delay: 0.3s; }
.hero-title-word:nth-child(4) { animation-delay: 0.4s; }
.hero-title-word:nth-child(5) { animation-delay: 0.5s; }
.hero-title-word:nth-child(6) { animation-delay: 0.6s; }
.hero-title-word:nth-child(7) { animation-delay: 0.7s; }
@keyframes wordIn { to { opacity: 1; transform: translateY(0); } }

/* ===== Loading dots ===== */
.loading-dots::after { content: ''; animation: dots 1.5s steps(4, end) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

/* ===== Focus visible accessibility ===== */
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ===== Selection ===== */
::selection { background: var(--accent); color: white; }

/* ===== Custom scrollbar ===== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-elevated); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-quaternary); }

/* ===== Tool card grid stagger ===== */
.tools-grid > * { transition: transform 0.3s; }

/* ===== Category card 3D ===== */
.category-card { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s, background 0.2s; transform-style: preserve-3d; }
.category-card:hover { transform: translateY(-4px) rotateX(2deg); border-color: var(--category-color); }

/* ===== Footer link animation ===== */
.footer-link { position: relative; display: inline-block; transition: transform 0.2s, color 0.2s; }
.footer-link:hover { transform: translateX(3px); color: var(--text-primary); }

/* ===== Number/price pulse ===== */
.tool-card-price { transition: color 0.2s; }
.tool-card:hover .tool-card-price { color: var(--accent); }

/* ===== Animated gradient border (for featured) ===== */
.gradient-border { position: relative; background: var(--bg-card); border-radius: var(--radius-lg); }
.gradient-border::before { content: ''; position: absolute; inset: -2px; background: linear-gradient(135deg, var(--accent), #ec4899, #10b981); border-radius: var(--radius-lg); z-index: -1; opacity: 0; transition: opacity 0.3s; }
.gradient-border:hover::before { opacity: 1; }

/* ===== Cursor highlight on tool grid hover ===== */
.tool-card { position: relative; }
.tool-card::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-lg); box-shadow: 0 0 0 2px var(--accent); opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.tool-card:hover::after { opacity: 0.4; }

/* ===== Subtle grain texture ===== */
.grain { position: relative; }
.grain::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' /%3E%3C/svg%3E"); }

/* ===== 3D card flip ===== */
.card-flip { perspective: 1000px; }
.card-flip-inner { position: relative; transform-style: preserve-3d; transition: transform 0.6s; }
.card-flip:hover .card-flip-inner { transform: rotateY(180deg); }
.card-flip-front, .card-flip-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.card-flip-back { position: absolute; inset: 0; transform: rotateY(180deg); }

/* ===== Print styles ===== */
@media print {
  .nav, .footer, .back-to-top, .cookie-banner, .newsletter-form, .cta-banner { display: none !important; }
  .hero-3d-scene, .orb { display: none !important; }
  body { animation: none; }
}