/* ============================================
   OSVENA — Animations
   ============================================ */

/* --- Keyframes --- */
@keyframes marquee-vertical {
  from { transform: translateY(0); }
  to { transform: translateY(calc(-100% - 1.25rem)); }
}
@keyframes orbFloat {
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(30px,-20px) scale(1.05)}
  66%{transform:translate(-20px,15px) scale(.95)}
}
@keyframes scrollBounce {
  0%,100%{transform:translateX(-50%) translateY(0);opacity:1}
  50%{transform:translateX(-50%) translateY(12px);opacity:.3}
}
@keyframes pulse {
  0%,100%{opacity:1}
  50%{opacity:.4}
}
@keyframes msgAppear {
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes typingBounce {
  0%,60%,100%{transform:translateY(0)}
  30%{transform:translateY(-4px)}
}
@keyframes fadeInUp {
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeIn {
  from{opacity:0}
  to{opacity:1}
}
@keyframes scaleIn {
  from{opacity:0;transform:scale(.9)}
  to{opacity:1;transform:scale(1)}
}
@keyframes slideInLeft {
  from{opacity:0;transform:translateX(-30px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes slideInRight {
  from{opacity:0;transform:translateX(30px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes countUp {
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes successPop {
  0%{transform:scale(0);opacity:0}
  60%{transform:scale(1.15)}
  100%{transform:scale(1);opacity:1}
}
@keyframes shimmer {
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
@keyframes gradientShift {
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* --- Scroll-Triggered Animations --- */
[data-animate]{opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-animate].visible{opacity:1;transform:translateY(0)}

/* Staggered children */
[data-animate-stagger] > *{opacity:0;transform:translateY(20px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
[data-animate-stagger].visible > *{opacity:1;transform:translateY(0)}
[data-animate-stagger].visible > *:nth-child(1){transition-delay:.05s}
[data-animate-stagger].visible > *:nth-child(2){transition-delay:.12s}
[data-animate-stagger].visible > *:nth-child(3){transition-delay:.19s}
[data-animate-stagger].visible > *:nth-child(4){transition-delay:.26s}
[data-animate-stagger].visible > *:nth-child(5){transition-delay:.33s}
[data-animate-stagger].visible > *:nth-child(6){transition-delay:.40s}
[data-animate-stagger].visible > *:nth-child(7){transition-delay:.47s}
[data-animate-stagger].visible > *:nth-child(8){transition-delay:.54s}
[data-animate-stagger].visible > *:nth-child(9){transition-delay:.61s}

/* Slide variants */
[data-animate="slide-left"]{opacity:0;transform:translateX(-30px)}
[data-animate="slide-left"].visible{opacity:1;transform:translateX(0)}
[data-animate="slide-right"]{opacity:0;transform:translateX(30px)}
[data-animate="slide-right"].visible{opacity:1;transform:translateX(0)}
[data-animate="scale"]{opacity:0;transform:scale(.92)}
[data-animate="scale"].visible{opacity:1;transform:scale(1)}

/* Hero entrance */
.hero-content{animation:fadeInUp .9s var(--ease) .2s both}
.scroll-indicator{animation:fadeIn 1s var(--ease) 1.2s both}

/* Success animation */
.form-success.show svg{animation:successPop .5s var(--ease) .1s both}
.form-success.show h3{animation:fadeInUp .5s var(--ease) .3s both}
.form-success.show p{animation:fadeInUp .5s var(--ease) .45s both}

/* Button loading */
.btn.loading{pointer-events:none;position:relative;color:transparent}
.btn.loading::after{content:'';position:absolute;width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- Geometric Shapes Animation --- */
@keyframes elegantEnter {
  0% {
    opacity: 0;
    transform: translateY(-150px) rotate(var(--start-rotate));
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(var(--end-rotate));
  }
}

@keyframes elegantFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(15px); }
}