/* ============================================================
   VidQuarry — Animations & Motion (Fluent 2)
   ============================================================ */

/* --- Scroll Reveal --- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity var(--duration-slow) var(--ease-fluent),transform var(--duration-slow) var(--ease-fluent)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:100ms}
.reveal-delay-2{transition-delay:200ms}
.reveal-delay-3{transition-delay:300ms}
.reveal-delay-4{transition-delay:400ms}

/* --- Fade variations --- */
.reveal-left{opacity:0;transform:translateX(-30px);transition:opacity var(--duration-slow) var(--ease-fluent),transform var(--duration-slow) var(--ease-fluent)}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(30px);transition:opacity var(--duration-slow) var(--ease-fluent),transform var(--duration-slow) var(--ease-fluent)}
.reveal-right.visible{opacity:1;transform:translateX(0)}
.reveal-scale{opacity:0;transform:scale(0.95);transition:opacity var(--duration-slow) var(--ease-fluent),transform var(--duration-slow) var(--ease-fluent)}
.reveal-scale.visible{opacity:1;transform:scale(1)}

/* --- Hero entrance animation --- */
@keyframes heroFadeIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes heroBgZoom{from{transform:scale(1.05)}to{transform:scale(1)}}
.hero-content{animation:heroFadeIn 0.8s var(--ease-fluent) both;animation-delay:0.2s}
.hero-bg img{animation:heroBgZoom 1.5s var(--ease-fluent) both}

/* --- Counter animation --- */
@keyframes countUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.counter-animate{animation:countUp 0.6s var(--ease-fluent) both}

/* --- Pulse for badges/offers --- */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.7}}
.pulse{animation:pulse 2s ease-in-out infinite}

/* --- Glow effect for featured pricing --- */
@keyframes subtleGlow{0%,100%{box-shadow:var(--shadow-28)}50%{box-shadow:var(--shadow-28),0 0 30px rgba(0,120,212,0.15)}}
.pricing-card.featured{animation:subtleGlow 3s ease-in-out infinite}

/* --- Float animation for decorative elements --- */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.float{animation:float 4s ease-in-out infinite}

/* --- Shimmer for loading/skeleton --- */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.shimmer{background:linear-gradient(90deg,var(--surface-secondary) 25%,var(--surface-tertiary) 50%,var(--surface-secondary) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite}

/* --- Mobile nav animation --- */
.navbar-nav{transition:opacity var(--duration-normal) var(--ease-fluent),transform var(--duration-normal) var(--ease-fluent)}
@media(max-width:768px){
  .navbar-nav{opacity:0;transform:translateY(-8px);pointer-events:none}
  .navbar-nav.open{opacity:1;transform:translateY(0);pointer-events:auto}
}

/* --- FAQ answer height transition override --- */
.faq-answer{transition:max-height var(--duration-slow) var(--ease-fluent),padding var(--duration-slow) var(--ease-fluent)}

/* --- Button ripple-like press effect --- */
.btn::after{content:'';position:absolute;inset:0;border-radius:inherit;opacity:0;background:rgba(0,0,0,0.08);transition:opacity var(--duration-fast)}
.btn{position:relative;overflow:hidden}
.btn:active::after{opacity:1}

/* --- Smooth scroll offset for anchor links --- */
html{scroll-padding-top:calc(var(--navbar-height) + var(--space-l))}