/*
 * Motion layer
 * Subtle entrance, scroll-reveal and interaction animations.
 * Content remains accessible when JavaScript is unavailable.
 */

:root {
    --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --motion-duration: 720ms;
}

/* Header depth appears only after scrolling. */
.site-header {
    transition:
        box-shadow 260ms ease,
        background-color 260ms ease,
        border-color 260ms ease;
}

.site-header.is-scrolled {
    border-bottom-color: rgba(125, 30, 46, 0.12);
    background: rgba(250, 246, 240, 0.985);
    box-shadow: 0 10px 30px rgba(42, 31, 20, 0.09);
}

/* Hero entrance. The .js class is added in the document head. */
.js .hero__content > .eyebrow,
.js .hero__content > h1,
.js .hero__content > .hero__lead,
.js .hero__content > .hero__actions {
    opacity: 0;
    transform: translateY(24px);
}

.js .hero__visual {
    opacity: 0;
    transform: translateX(44px);
}

.js .hero__symbol {
    opacity: 0;
    scale: 0.9;
}

.js .hero__disc {
    opacity: 0;
    scale: 0.86;
}

.js body.is-page-ready .hero__content > .eyebrow,
.js body.is-page-ready .hero__content > h1,
.js body.is-page-ready .hero__content > .hero__lead,
.js body.is-page-ready .hero__content > .hero__actions,
.js body.is-page-ready .hero__visual,
.js body.is-page-ready .hero__symbol,
.js body.is-page-ready .hero__disc {
    opacity: 1;
    transform: translate(0, 0);
    scale: 1;
    transition:
        opacity var(--motion-duration) var(--motion-ease),
        transform var(--motion-duration) var(--motion-ease),
        scale 900ms var(--motion-ease);
}

.js body.is-page-ready .hero__content > .eyebrow {
    transition-delay: 80ms;
}
.js body.is-page-ready .hero__content > h1 {
    transition-delay: 160ms;
}
.js body.is-page-ready .hero__content > .hero__lead:nth-of-type(1) {
    transition-delay: 260ms;
}
.js body.is-page-ready .hero__content > .hero__lead:nth-of-type(2) {
    transition-delay: 340ms;
}
.js body.is-page-ready .hero__content > .hero__actions {
    transition-delay: 440ms;
}
.js body.is-page-ready .hero__disc {
    transition-delay: 100ms;
}
.js body.is-page-ready .hero__symbol {
    transition-delay: 180ms;
}
.js body.is-page-ready .hero__visual {
    transition-delay: 220ms;
}

/* Elements receive these classes from main.js. */
.js .motion-reveal {
    opacity: 0;
    transform: translateY(34px);
    transition:
        opacity var(--motion-duration) var(--motion-ease),
        transform var(--motion-duration) var(--motion-ease);
    transition-delay: 0ms;
    will-change: opacity, transform;
}

.js .motion-delay-1 {
    transition-delay: 110ms;
}

.js .motion-delay-2 {
    transition-delay: 220ms;
}

.js .motion-reveal--left {
    transform: translateX(-42px);
}
.js .motion-reveal--right {
    transform: translateX(42px);
}
.js .motion-reveal--scale {
    transform: translateY(18px) scale(0.965);
}

.js .motion-reveal.is-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    will-change: auto;
}

/* Card and image micro-interactions. */
.motion-card {
    transition:
        box-shadow 300ms ease,
        border-color 300ms ease,
        translate 300ms var(--motion-ease);
}

@media (hover: hover) and (pointer: fine) {
    .motion-card:hover {
        translate: 0 -6px;
        box-shadow: 0 16px 35px rgba(42, 31, 20, 0.14);
    }

    .service-card:hover {
        box-shadow: 0 18px 38px rgba(42, 31, 20, 0.12);
    }

    .blog-card > img,
    .contact-card > img {
        transition: scale 650ms var(--motion-ease);
    }

    .blog-card:hover > img,
    .contact-card:hover > img {
        scale: 1.035;
    }

    .primary-nav a:not(.button),
    .site-footer__nav a,
    .blog-card__body > a {
        position: relative;
    }

    .primary-nav a:not(.button)::after,
    .site-footer__nav a::after,
    .blog-card__body > a::after {
        position: absolute;
        right: 0;
        bottom: -0.18rem;
        left: 0;
        height: 1px;
        background: currentColor;
        content: '';
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 280ms var(--motion-ease);
    }

    .primary-nav a:not(.button):hover::after,
    .site-footer__nav a:hover::after,
    .blog-card__body > a:hover::after {
        transform: scaleX(1);
        transform-origin: left;
    }
}

/* More tactile buttons without making the page feel playful. */
.button {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 0 0 rgba(42, 31, 20, 0);
}

.button::after {
    position: absolute;
    z-index: -1;
    top: -60%;
    left: -35%;
    width: 28%;
    height: 220%;
    background: rgba(255, 255, 255, 0.18);
    content: '';
    transform: rotate(18deg) translateX(-220%);
    transition: transform 520ms var(--motion-ease-soft);
}

@media (hover: hover) and (pointer: fine) {
    .button:hover {
        box-shadow: 0 8px 20px rgba(42, 31, 20, 0.12);
        transform: translateY(-2px);
    }

    .button:hover::after {
        transform: rotate(18deg) translateX(650%);
    }
}

/* Smooth accordion opening. JavaScript removes the hidden attribute. */
.js .service-accordion__panel {
    display: grid;
    overflow: hidden;
    grid-template-rows: 0fr;
    border-top-color: transparent;
    opacity: 0;
    transition:
        grid-template-rows 380ms var(--motion-ease),
        opacity 240ms ease,
        border-color 240ms ease;
}

.js .service-accordion__panel-inner {
    min-height: 0;
    overflow: hidden;
    padding-block: 0;
    transition: padding 380ms var(--motion-ease);
}

.js .service-accordion__item.is-open .service-accordion__panel {
    grid-template-rows: 1fr;
    border-top-color: rgba(139, 24, 45, 0.14);
    opacity: 1;
}

.js .service-accordion__item.is-open .service-accordion__panel-inner {
    padding-block: 0.2rem 0.45rem;
}

.service-accordion__trigger {
    transition:
        background-color 220ms ease,
        padding 260ms var(--motion-ease);
}

.service-accordion__item.is-open .service-accordion__trigger {
    background: rgba(139, 24, 45, 0.045);
}

/* Small decorative movement, only on devices that support hover. */
@media (hover: hover) and (pointer: fine) {
    .feature-card img {
        transition: transform 450ms var(--motion-ease);
    }

    .feature-card:hover img {
        transform: translateY(-5px) scale(1.04);
    }
}

@media (max-width: 900px) {
    .js .hero__visual {
        transform: translateY(26px);
    }

    .js .motion-reveal--left,
    .js .motion-reveal--right {
        transform: translateY(30px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .js .hero__content > *,
    .js .hero__visual,
    .js .hero__symbol,
    .js .hero__disc,
    .js .motion-reveal {
        opacity: 1 !important;
        transform: none !important;
        scale: 1 !important;
    }

    .button::after {
        display: none;
    }
}