/* ============================================
   Animations - keyframes & AOS-friendly classes
   ============================================ */

@keyframes float-y{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-18px)}
}
@keyframes float-x{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(15px)}
}
@keyframes pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}
@keyframes breathe{
  0%,100%{box-shadow:0 8px 24px rgba(37,211,102,.4)}
  50%{box-shadow:0 8px 32px rgba(37,211,102,.85),0 0 0 12px rgba(37,211,102,.15)}
}
@keyframes spin{
  to{transform:rotate(360deg)}
}
@keyframes wiggle{
  0%,100%{transform:rotate(-3deg)}
  50%{transform:rotate(3deg)}
}
@keyframes pop-in{
  0%{opacity:0;transform:scale(.6)}
  60%{opacity:1;transform:scale(1.1)}
  100%{transform:scale(1)}
}
@keyframes slide-up{
  from{opacity:0;transform:translateY(40px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes slide-right{
  from{opacity:0;transform:translateX(-40px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes gradient-shift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes typewriter{
  from{width:0}
  to{width:100%}
}
@keyframes blink{
  50%{border-color:transparent}
}
@keyframes shimmer{
  0%{background-position:-468px 0}
  100%{background-position:468px 0}
}
@keyframes bounce-in{
  0%{opacity:0;transform:scale(.3) translateY(50px)}
  50%{opacity:1;transform:scale(1.05)}
  70%{transform:scale(.95)}
  100%{transform:scale(1) translateY(0)}
}
@keyframes star-twinkle{
  0%,100%{opacity:.4;transform:scale(.8) rotate(0)}
  50%{opacity:1;transform:scale(1.1) rotate(180deg)}
}
@keyframes wave-move{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* Apply classes */
.anim-float{animation:float-y 4s ease-in-out infinite}
.anim-float-slow{animation:float-y 6s ease-in-out infinite}
.anim-float-x{animation:float-x 5s ease-in-out infinite}
.anim-pulse{animation:pulse 2s ease-in-out infinite}
.anim-wiggle{animation:wiggle 2.5s ease-in-out infinite}
.anim-twinkle{animation:star-twinkle 3s ease-in-out infinite}
.anim-pop{animation:pop-in .8s cubic-bezier(.34,1.56,.64,1) both}
.anim-slide-up{animation:slide-up .8s ease-out both}
.anim-bounce-in{animation:bounce-in 1s cubic-bezier(.34,1.56,.64,1) both}

/* Gradient animated text */
.gradient-text{
  background:linear-gradient(120deg,var(--color-coral),var(--color-yellow-dark),var(--color-mint),var(--color-coral));
  background-size:300% 300%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gradient-shift 6s ease infinite;
}

/* Typewriter */
.typewriter{
  display:inline-block;overflow:hidden;white-space:nowrap;
  border-right:3px solid var(--color-coral);
  animation:typewriter 3s steps(30,end) forwards,blink .8s step-end infinite;
}

/* Hover effects */
.hover-lift{transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s}
.hover-lift:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(0,0,0,.12)}

.hover-tilt{transition:transform .4s ease}
.hover-tilt:hover{transform:perspective(800px) rotateY(-6deg) rotateX(4deg) scale(1.02)}

.hover-glow{transition:box-shadow .4s}
.hover-glow:hover{box-shadow:0 0 32px var(--color-shadow),0 0 48px rgba(255,155,133,.25)}

/* Reveal animation (used by IntersectionObserver in animations.js) */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s cubic-bezier(.34,1.56,.64,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .8s,transform .8s}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity .8s,transform .8s}
.reveal-right.visible{opacity:1;transform:translateX(0)}
.reveal-zoom{opacity:0;transform:scale(.85);transition:opacity .8s,transform .8s cubic-bezier(.34,1.56,.64,1)}
.reveal-zoom.visible{opacity:1;transform:scale(1)}

/* Stagger children */
.stagger > *{opacity:0;transform:translateY(30px);transition:opacity .6s,transform .6s}
.stagger.visible > *{opacity:1;transform:translateY(0)}
.stagger.visible > *:nth-child(1){transition-delay:.1s}
.stagger.visible > *:nth-child(2){transition-delay:.2s}
.stagger.visible > *:nth-child(3){transition-delay:.3s}
.stagger.visible > *:nth-child(4){transition-delay:.4s}
.stagger.visible > *:nth-child(5){transition-delay:.5s}
.stagger.visible > *:nth-child(6){transition-delay:.6s}

/* Background waves */
.bg-waves{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bg-waves svg{position:absolute;bottom:0;left:0;width:200%;height:120px;animation:wave-move 12s linear infinite}

/* Particles */
.particle{position:absolute;border-radius:50%;pointer-events:none;animation:float-y 5s ease-in-out infinite}

/* Skeleton shimmer */
.skeleton{background:linear-gradient(90deg,#eee 25%,#f5f5f5 50%,#eee 75%);background-size:1000px 100%;animation:shimmer 2s infinite linear}

/* Button ripple */
.btn{position:relative}
.btn .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.5);transform:scale(0);animation:ripple .6s linear;pointer-events:none}
@keyframes ripple{to{transform:scale(4);opacity:0}}

/* Page transitions */
.page-fade-in{animation:slide-up .6s ease-out}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}