/*
 * PivHub CSS Module: 06-responsive.css
 * Global animation and responsive rules.
 */

/* --------------------------------------------------------------------------
   15. AOS & Animations
   -------------------------------------------------------------------------- */

[data-aos] {
    pointer-events: none;
}

[data-aos].aos-animate {
    pointer-events: auto;
}

/* --------------------------------------------------------------------------
   16. Responsive — Tablet (768-1023px)
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
    :root {
        --space-15: 80px;
    }

    .primary-nav {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }

    .header-right .btn {
        display: none;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .footer-brand {
        max-width: 480px;
    }

    .footer-links-panel {
        justify-content: stretch;
        max-width: 720px;
    }

}

/* --------------------------------------------------------------------------
   17. Responsive — Mobile (≤767px)
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    :root {
        --space-15: 48px;
        --space-10: 56px;
        --space-8: 48px;
        --container-pad: 16px;
    }

    .header-inner {
        padding-inline: var(--container-pad);
    }

    .logo {
        gap: 12px;
    }

    .logo-mark {
        width: 32px;
        height: 32px;
    }

    .logo-wordmark {
        font-size: 25px;
    }

    .hero {
        min-height: 100svh;
        align-items: center;
        padding-bottom: 0;
    }

    .hero-bg {
        background-size: auto 100%;
        background-position: center top;
    }

    .hero-gradient {
        background: linear-gradient(180deg,
            rgba(var(--theme-bg-rgb), 0.12) 0%,
            rgba(var(--theme-bg-rgb), 0.18) 30%,
            rgba(var(--theme-bg-rgb), 0.62) 48%,
            rgba(var(--theme-bg-rgb), 0.56) 68%,
            rgba(var(--theme-bg-rgb), 0.34) 100%);
    }

    .hero-copy-scrim {
        background:
            radial-gradient(ellipse 82% 34% at 50% 44%,
                rgba(var(--theme-bg-rgb), 0.84) 0%,
                rgba(var(--theme-bg-rgb), 0.62) 45%,
                rgba(var(--theme-bg-rgb), 0.18) 76%,
                rgba(var(--theme-bg-rgb), 0) 100%),
            linear-gradient(180deg,
                rgba(var(--theme-bg-rgb), 0) 0%,
                rgba(var(--theme-bg-rgb), 0.12) 38%,
                rgba(var(--theme-bg-rgb), 0.22) 68%,
                rgba(var(--theme-bg-rgb), 0.08) 100%);
    }

    .hero .hero-content {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        padding-inline: 20px;
        margin-top: clamp(0px, 2svh, 22px);
        margin-bottom: 0;
        transform: translateY(clamp(-130px, -15svh, -86px));
    }

    .hero-title {
        font-size: clamp(27px, 7.2vw, 31px);
        margin-bottom: var(--space-2);
    }

    .hero-title br {
        display: initial;
    }

    .hero-glow-1 {
        width: 300px;
        height: 300px;
    }

    .hero-glow-2 {
        width: 250px;
        height: 250px;
    }

    .hero-actions {
        flex-direction: column;
        gap: 10px;
        max-width: 300px;
        margin-inline: auto;
        width: 100%;
    }

    .hero-actions .btn {
        width: 100%;
        min-height: 48px;
        padding: 12px 20px;
        font-size: 13px;
    }

    .hero-scroll-indicator {
        display: none;
    }

    .hero-subtitle {
        font-size: 14px;
        line-height: 1.55;
        margin-bottom: 18px;
        width: 100%;
        max-width: 290px;
    }

    .hero-subtitle br {
        display: none;
    }

    .final-cta-actions {
        flex-direction: column;
        width: 100%;
    }

    .final-cta-actions .btn {
        width: 100%;
    }

    .final-cta-contact {
        flex-direction: column;
        gap: var(--space-2);
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .footer-brand {
        max-width: 100%;
    }

    .footer-links-panel {
        grid-template-columns: minmax(120px, 0.7fr) minmax(220px, 1fr);
        gap: var(--space-4);
    }

    .footer-whatsapp-col {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .footer-whatsapp-qr {
        width: 136px;
    }

    .footer-bottom-inner {
        padding-right: 76px;
        text-align: left;
    }

    .section-header-center {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .footer-links-panel {
        grid-template-columns: 1fr;
    }

    .footer-whatsapp-col {
        grid-column: auto;
    }
}

/* --------------------------------------------------------------------------
   18. Reduced Motion
   -------------------------------------------------------------------------- */

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

    .hero-glow-1,
    .hero-glow-2 {
        animation: none;
    }

    .hero-badge-dot {
        animation: none;
    }

    .scroll-line::after {
        animation: none;
    }
}