/* Front-end motion: short, quiet, and independent of the spacing system. */
:root { --motion-ease: cubic-bezier(.22, .61, .36, 1); }

.primary-nav > a,
.service-jump > a,
.footer-nav a,
.footer-contact a,
.social-links a,
.contact-email,
.contact-whatsapp,
.links-home,
.text-link {
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}
.button,
.link-list > a {
    transition: background-color 180ms ease, color 180ms ease,
        border-color 180ms ease, transform 220ms var(--motion-ease);
}
.arrow { transition: transform 220ms var(--motion-ease); }
.button:hover,
.link-list > a:hover { transform: none; }
/* Keep the button's divided arrow compartment aligned with its border. */
.button:hover .arrow,
.text-link:hover .arrow { transform: none; }
.inquiry-form :is(input, select, textarea) {
    transition: border-color 180ms ease, background-color 180ms ease;
}
.inquiry-form :is(input, select, textarea):focus { border-color: var(--petrol); }

@media (prefers-reduced-motion: no-preference) {
    .hero-photo {
        animation: pmo-hero-reveal 1100ms cubic-bezier(.2,.72,.2,1) both;
    }
    .hero-photo img {
        will-change:transform;
        animation: pmo-hero-pan 5.2s cubic-bezier(.45,0,.55,1) infinite alternate;
    }
    .hero-photo::before { animation: pmo-hero-grid 10s linear infinite; }
    .hero-photo::after { animation: pmo-hero-scan 5.8s cubic-bezier(.45,0,.55,1) infinite; }
    .hero-copy > * { animation: pmo-hero-copy 720ms var(--motion-ease) both; }
    .hero-copy > :nth-child(1) { animation-delay:180ms; }
    .hero-copy > :nth-child(2) { animation-delay:270ms; }
    .hero-copy > :nth-child(3) { animation-delay:380ms; }
    .hero-copy > :nth-child(4) { animation-delay:490ms; }
    @keyframes pmo-hero-reveal {
        from { clip-path:inset(0 0 0 100%); }
        to { clip-path:inset(0); }
    }
    @keyframes pmo-hero-pan {
        from { transform:translate3d(var(--hero-pan-start),0,0); }
        to { transform:translate3d(var(--hero-pan-end),0,0); }
    }
    @keyframes pmo-hero-grid {
        to { background-position:64px 32px,32px 64px; }
    }
    @keyframes pmo-hero-scan {
        0%,8% { top:20%; opacity:0; }
        15% { opacity:.9; }
        72% { opacity:.72; }
        84%,100% { top:80%; opacity:0; }
    }
    @keyframes pmo-hero-copy {
        from { opacity:0; transform:translateY(14px); }
        to { opacity:1; transform:translateY(0); }
    }
    /* Only JS-enabled blocks below the viewport wait for scroll. */
    .pmo-reveal { opacity: 0; }
    .pmo-scroll-enter {
        --reveal-distance: 6px;
        animation: pmo-scroll-enter 620ms var(--motion-ease);
    }
    figure.pmo-scroll-enter { --reveal-distance: 14px; }
    @keyframes pmo-scroll-enter {
        from { opacity: 0; transform: translateY(var(--reveal-distance)); }
        to { opacity: 1; transform: translateY(0); }
    }
    .pmo-enter { animation: pmo-enter 440ms var(--motion-ease); }
    @keyframes pmo-enter {
        from { opacity: .6; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @media (hover: hover) and (pointer: fine) {
        .button:hover { transform: translateY(-1px); }
        :is(.nav-cta, .text-link, .contact-email, .contact-whatsapp, .social-links a, .link-list > a):hover .arrow {
            transform: translate(2px, -2px);
        }
    }
    :is(.nav-cta, .text-link, .contact-email, .contact-whatsapp, .social-links a, .link-list > a):focus-visible .arrow {
        transform: translate(2px, -2px);
    }
    @media (max-width: 900px) {
        .hero-photo::after { animation-duration:7s; }
        figure.pmo-scroll-enter { --reveal-distance: 10px; }
        .primary-nav.is-open { animation: pmo-menu-enter 180ms var(--motion-ease); }
        @keyframes pmo-menu-enter {
            from { opacity: .6; transform: translateY(-4px); }
            to { opacity: 1; transform: translateY(0); }
        }
    }
}

@media print {
    .pmo-reveal, .pmo-scroll-enter, .pmo-enter, .hero-photo, .hero-photo img, .hero-copy > * {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        clip-path:none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-photo, .hero-photo img, .hero-photo::before, .hero-photo::after, .hero-copy > * {
        animation:none;
        transition:none;
    }
    .button:hover,
    .link-list > a:hover,
    a:hover .arrow,
    a:focus-visible .arrow { transform: none; }
}