/**
 * docs/design/12_Animation_Guidelines.md — restrained motion, everything
 * respects prefers-reduced-motion via reset.css's global override.
 */

/* ---------- Hero fade-in-up on load ---------- */
@keyframes hero-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero__inner > * {
    animation: hero-fade-up var(--duration-slow) var(--ease-out) both;
}

.hero__inner > *:nth-child(2) { animation-delay: 60ms; }
.hero__inner > *:nth-child(3) { animation-delay: 120ms; }
.hero__inner > *:nth-child(4) { animation-delay: 180ms; }

/* ---------- Hero floating decorative shapes ---------- */
@keyframes hero-float {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-14px, 18px); }
}

/* ---------- Floating contact gentle pulse — desktop WhatsApp button only,
   one subtle ambient cue (mirrors the CTA-band pulse restraint). ---------- */
@keyframes contact-pulse {
    0%, 100% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(0, 122, 122, 0.35); }
    50% { box-shadow: var(--shadow-lg), 0 0 0 10px rgba(0, 122, 122, 0); }
}

@media (min-width: 768px) {
    .sticky-contact-widget__button--whatsapp { animation: contact-pulse 3s ease-in-out infinite; }
}

/* ---------- FAQ answer reveal ---------- */
@keyframes faq-reveal {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Trusted-by marquee scroll ---------- */
@keyframes trusted-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ---------- Card image zoom on hover ---------- */
.blog-card__image {
    overflow: hidden;
}

.blog-card__image img {
    transition: transform var(--duration-base) var(--ease-out);
}

@media (hover: hover) {
    .card:hover .blog-card__image img {
        transform: scale(1.05);
    }
}

/* ---------- CTA pulse — final conversion band only, one subtle cue ---------- */
@keyframes cta-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.35); }
    50% { box-shadow: 0 0 0 8px rgba(255, 215, 0, 0); }
}

.cta-band .btn--accent {
    animation: cta-pulse 2.4s ease-in-out infinite;
}

[data-scroll-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}

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

.mega-menu {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
    pointer-events: none;
}

.mega-menu.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.mobile-nav {
    transform: translateX(100%);
    transition: transform var(--duration-base) var(--ease-out);
}

.mobile-nav.is-open {
    transform: translateX(0);
}

.search-overlay {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
    pointer-events: none;
}

.search-overlay.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

@keyframes skeleton-shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

.skeleton {
    background: linear-gradient(90deg, var(--color-neutral-100) 25%, var(--color-neutral-200) 37%, var(--color-neutral-100) 63%);
    background-size: 400px 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

.progress-bar {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    background: var(--color-primary-600);
    z-index: var(--z-toast);
    width: 0;
    transition: width var(--duration-base) var(--ease-out);
}