/* animations.css - All animation keyframes & utility classes extracted from style.css */
/* Core Easing & Durations use CSS variables declared in :root within style.css */

/* Hero specific animations */
@keyframes heroFadeIn { from { opacity:0; transform:scale(1.05);} to {opacity:1; transform:scale(1);} }
@keyframes heroParallax { 0%,100% { transform: translateX(0) rotate(0deg);} 25% {transform:translateX(-10px) rotate(0.5deg);} 50% {transform:translateX(0) rotate(0deg);} 75% {transform:translateX(10px) rotate(-0.5deg);} }
@keyframes heroContentSlide { from {opacity:0; transform:translateY(80px) scale(0.9);} to {opacity:1; transform:translateY(0) scale(1);} }
@keyframes heroTitleReveal { from {opacity:0; transform:translateX(-60px) rotateY(-15deg); filter:blur(10px);} to {opacity:1; transform:translateX(0) rotateY(0); filter:blur(0);} }
@keyframes heroSubtitleReveal { from {opacity:0; transform:translateX(60px) rotateY(15deg); filter:blur(8px);} to {opacity:1; transform:translateX(0) rotateY(0); filter:blur(0);} }
@keyframes heroButtonsReveal { from {opacity:0; transform:translateY(40px) scale(0.8);} 50% {transform:translateY(-10px) scale(1.05);} to {opacity:1; transform:translateY(0) scale(1);} }
@keyframes heroImageReveal { from {opacity:0; transform:scale(0.3) rotate(-10deg); filter:blur(20px);} 60% {transform:scale(1.1) rotate(2deg);} to {opacity:1; transform:scale(1) rotate(0); filter:blur(0);} }

.hero-section { animation: heroFadeIn 2s var(--ease-out-expo); }
.hero-section::before { animation: heroParallax 20s ease-in-out infinite; }
.hero-content { animation: heroContentSlide 1.5s var(--ease-out-expo) 0.3s both; }
.hero-title { animation: heroTitleReveal 1.8s var(--ease-out-back) 0.6s both; }
.hero-subtitle { animation: heroSubtitleReveal 1.8s var(--ease-out-back) 1s both; }
.hero-cta { animation: heroButtonsReveal 1.5s var(--ease-out-back) 1.4s both; }
.hero-image-animate { animation: heroImageReveal 2s var(--ease-out-expo) 1.8s both; }

/* Generic Animations */
@keyframes fadeInUp { from {opacity:0; transform:translateY(30px);} to {opacity:1; transform:translateY(0);} }
@keyframes pulse { 0% {box-shadow:0 8px 25px var(--shadow-primary);} 50% {box-shadow:0 8px 25px var(--shadow-primary-hover);} 100% {box-shadow:0 8px 25px var(--shadow-primary);} }
@keyframes shimmer { 0% { left:-100%; } 100% { left:100%; } }
@keyframes spin { 0% { transform:rotate(0deg) scale(1);} 50% { transform:rotate(180deg) scale(0.8);} 100% { transform:rotate(360deg) scale(1);} }
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
@keyframes slideInLeft { from {opacity:0; transform:translateX(-50px);} to {opacity:1; transform:translateX(0);} }
@keyframes slideInRight { from {opacity:0; transform:translateX(50px);} to {opacity:1; transform:translateX(0);} }
@keyframes slideInDown { from {opacity:0; transform:translateY(-50px);} to {opacity:1; transform:translateY(0);} }
@keyframes zoomIn { from {opacity:0; transform:scale(0.8);} to {opacity:1; transform:scale(1);} }
@keyframes bounceIn { 0% {opacity:0; transform:scale(0.3);} 50% {opacity:1; transform:scale(1.05);} 70% {transform:scale(0.9);} 100% {opacity:1; transform:scale(1);} }
@keyframes typewriter { from {width:0;} to {width:100%;} }
@keyframes float { 0%,100% {transform:translateY(0);} 50% {transform:translateY(-10px);} }
@keyframes float-horiz { 0%,100% {transform:translateX(0);} 50% {transform:translateX(10px);} }
@keyframes glow { 0%,100% {box-shadow:0 0 5px var(--primary-color);} 50% {box-shadow:0 0 20px var(--primary-color),0 0 30px var(--primary-color);} }
@keyframes shake { 0%,100% {transform:translateX(0);} 10%,30%,50%,70%,90% {transform:translateX(-5px);} 20%,40%,60%,80% {transform:translateX(5px);} }
@keyframes dots { 0%,20% {content:'.';} 40% {content:'..';} 60% {content:'...';} 80%,100% {content:'';} }

/* Utility Animation Classes */
.fade-in-up { opacity:0; transform:translateY(30px); transition:opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo); will-change:opacity, transform; }
.fade-in-up.revealed { opacity:1; transform:translateY(0); }
.animate-fade-in { animation: fadeIn 1s ease-out; }
.animate-slide-in-left { animation: slideInLeft 0.8s ease-out; }
.animate-slide-in-right { animation: slideInRight 0.8s ease-out; }
.animate-slide-in-down { animation: slideInDown 0.8s ease-out; }
.animate-zoom-in { animation: zoomIn 0.6s ease-out; }
.animate-bounce-in { animation: bounceIn 0.8s ease-out; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-float-horiz { animation: float-horiz 3s ease-in-out infinite; }
.animate-glow { animation: glow 2s ease-in-out infinite alternate; }
.animate-shake { animation: shake 0.5s ease-in-out; }

/* Stagger */
.stagger-animation > * { opacity:0; transform:translateY(40px) rotateX(15deg); transition:opacity var(--duration-normal) var(--ease-out-back), transform var(--duration-normal) var(--ease-out-back); will-change:opacity, transform; animation: fadeIn 0.6s ease-out forwards; }
.stagger-animation > *:nth-child(1) { transition-delay:0.08s; }
.stagger-animation > *:nth-child(2) { transition-delay:0.16s; }
.stagger-animation > *:nth-child(3) { transition-delay:0.24s; }
.stagger-animation > *:nth-child(4) { transition-delay:0.32s; }
.stagger-animation > *:nth-child(5) { transition-delay:0.40s; }
.stagger-animation > *:nth-child(6) { transition-delay:0.48s; }

/* Hover / Interactive */
.hover-lift { transition-property:transform, box-shadow; transition-duration:var(--duration-normal); transition-timing-function:var(--ease-out-expo); will-change:transform, box-shadow; transform:translateZ(0); position:relative; overflow:hidden; }
.hover-lift::before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05)); opacity:0; transition:opacity var(--duration-normal) var(--ease-out-expo); pointer-events:none; }
.hover-lift:hover::before { opacity:1; }
.hover-lift:hover { transform:translateY(-15px) translateZ(0) rotateX(5deg); box-shadow:0 30px 60px rgba(0,0,0,0.2), 0 15px 30px rgba(0,0,0,0.1), 0 0 0 1px rgba(255,255,255,0.1); }
.btn-ripple { position:relative; overflow:hidden; transform:translateZ(0); transition:all var(--duration-fast) var(--ease-out-expo); }
.btn-ripple:hover { transform:translateY(-2px) scale(1.02) translateZ(0); }
.btn-ripple::before { content:''; position:absolute; top:50%; left:50%; width:0; height:0; border-radius:50%; background:rgba(255,255,255,0.3); transform:translate(-50%,-50%); transition:width 0.6s, height 0.6s; }
.btn-ripple:active::before { width:300px; height:300px; }
.hover-tilt { transition:all 0.3s ease; }
.hover-tilt:hover { transform:perspective(1000px) rotateX(10deg) rotateY(-5deg) scale(1.02); }
.hover-glow { transition:all 0.3s ease; position:relative; overflow:hidden; }
.hover-glow::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition:all 0.5s ease; }
.hover-glow:hover::before { left:100%; }

/* Loading */
.loading-spinner { animation: spin 1s linear infinite; }
.loading-dots::after { animation: dots 1.5s steps(4,end) infinite; }
.progress-bar-animated::before { animation: shimmer 2s infinite; }
.marketing-banner::before { animation: shimmer 3s infinite; }
.theme-toggle.rotating i { animation: spin 0.5s ease-in-out; }
.btn-floating { animation: pulse 2s infinite; }

/* Scroll Reveal (legacy + lightweight) */
.reveal { opacity:0; transform:translateY(60px) scale(0.95); transition:opacity var(--duration-slow) var(--ease-out-expo), transform var(--duration-slow) var(--ease-out-expo); will-change:opacity, transform; backface-visibility:hidden; perspective:1000px; }
.reveal.revealed { opacity:1 !important; transform:translateY(0) scale(1) !important; }
.sr-hidden { opacity:0; transform:translateY(32px); transition:opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo); will-change:opacity, transform; }
.sr-visible { opacity:1; transform:translateY(0); }
.stagger-animation { perspective:1000px; }
.stagger-animation.revealed > * { opacity:1; transform:translateY(0) rotateX(0deg); }

/* Card Flip */
.flip-card { perspective:1000px; height:300px; }
.flip-card-inner { position:relative; width:100%; height:100%; text-align:center; transition:transform 0.8s; transform-style:preserve-3d; }
.flip-card:hover .flip-card-inner { transform:rotateY(180deg); }
.flip-card-front, .flip-card-back { position:absolute; width:100%; height:100%; backface-visibility:hidden; border-radius:12px; padding:20px; display:flex; align-items:center; justify-content:center; }
.flip-card-back { transform:rotateY(180deg); background:var(--gradient-primary); color:white; }

/* Page Transition */
.page-transition { opacity:1; transition:opacity 0.3s ease-in-out; }
.page-transition.fade-out { opacity:0; }

/* Text gradient glow */
.text-gradient { background:var(--gradient-primary); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:glow 3s ease-in-out infinite alternate; }

/* Parallax placeholder */
.parallax { transform:translateZ(0); transition:transform 0.1s ease-out; }

/* Mobile optimized adjustments */
@media (max-width:768px) {
  .hover-lift:hover, .hover-tilt:hover { transform:none; }
  .animate-bounce-in, .animate-zoom-in { animation-duration:0.5s; }
  .stagger-animation > * { animation-duration:0.5s; }
  .stagger-animation > *:nth-child(n) { animation-delay:0.1s; }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  /* To force-disable, add a .force-animations class to html */
  html:not(.force-animations) *,
  html:not(.force-animations) *::before,
  html:not(.force-animations) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html:not(.force-animations) .animate-float,
  html:not(.force-animations) .animate-glow,
  html:not(.force-animations) .loading-spinner {
    animation: none !important;
  }
}