/* Explain: CSS for scroll reveal, motion effects, and popup animations. */
/* css/animations.css — scroll reveal + motion utilities */

@keyframes abFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

@keyframes abGlow {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

.float-slow { animation: abFloat 6s ease-in-out infinite; }
.glow-pulse { animation: abGlow 4s ease-in-out infinite; }

.hover-lift {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.45);
}

@keyframes abShimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.ab-shimmer {
    background-size: 200% auto;
    animation: abShimmer 8s linear infinite;
}

@keyframes abPopIn {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

#promoPopup .promo-anim { opacity: 0; }

#promoPopup.modal-open .promo-anim {
    animation: abPopIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .ab-shimmer,
    #promoPopup.modal-open .promo-anim { animation: none; }
    #promoPopup .promo-anim { opacity: 1; }
}

.media-frame {
    position: relative;
    overflow: hidden;
}

.media-frame img {
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.media-frame:hover img {
    transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .float-slow, .glow-pulse, .hover-lift { animation: none; transition: none; }
}