/* Interaction motion stays on children; scroll reveals animate their wrappers. */
:root {
    --motion-ease: cubic-bezier(.22, .45, .32, 1);
    --motion-fast: 320ms;
    --motion-product: 1050ms;
}

/* Cancel the legacy mouse effects before enabling them for suitable devices. */
.product-card-image img,
.product-image img {
    transition: none;
    transform-origin: 50% 70%;
}

.product-card-image:hover img {
    transform: none;
}

.button:active {
    transform: none;
}

:is(main, .product-card, .product-copy, .hero-copy) .button:is(:disabled, [aria-disabled="true"]) {
    background: var(--caramel);
    border-color: var(--caramel);
    color: var(--paper);
    box-shadow: 0 3px 0 var(--caramel-dark);
    transform: none;
    transition: none;
}

/* Keyboard focus is immediate and stationary. */
.product-card-image:focus-visible {
    outline: 2px solid var(--caramel);
    outline-offset: 4px;
}

:is(.card-heading, .home-taste-grid h3, .footer-bottom nav) a {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: .22em;
}

:is(.card-heading, .home-taste-grid h3, .footer-bottom nav) a:focus-visible {
    text-decoration-color: currentColor;
}

@media (prefers-reduced-motion: no-preference) {
    .button:not(:disabled):not([aria-disabled="true"]) {
        transition: background-color var(--motion-fast) ease,
            border-color var(--motion-fast) ease,
            box-shadow var(--motion-fast) ease,
            transform var(--motion-fast) var(--motion-ease);
    }

    .button:not(:disabled):not([aria-disabled="true"]):active {
        transform: translateY(1px);
        box-shadow: 0 1px 0 var(--caramel-dark);
    }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
    .product-card-image img,
    .product-image img {
        transition: transform var(--motion-product) var(--motion-ease);
    }

    .product-card-image:hover img {
        transform: translateY(-5px) rotate(-1deg) scale(1.025);
    }

    .product-card:nth-child(even) .product-card-image:hover img {
        transform: translateY(-5px) rotate(1deg) scale(1.025);
    }

    .product-image:hover img {
        transform: translateY(-4px) scale(1.018);
    }

    .button:not(:disabled):not([aria-disabled="true"]):hover:not(:active):not(:focus-visible) {
        transform: translateY(-2px);
        box-shadow: 0 5px 0 var(--caramel-dark), 0 9px 14px rgba(56, 37, 31, .10);
    }

    :is(.card-heading, .home-taste-grid h3, .footer-bottom nav) a {
        transition: text-decoration-color 240ms ease;
    }

    :is(.card-heading, .home-taste-grid h3, .footer-bottom nav) a:hover {
        text-decoration-color: currentColor;
    }

    .text-link,
    .back-link {
        transition: color var(--motion-fast) ease,
            text-underline-offset 240ms var(--motion-ease);
    }

    .text-link:hover {
        text-underline-offset: 10px;
    }
}

@media (max-width: 650px) {
    /* A stable hero height prevents the address bar from shifting the page. */
    .home-page .hero-launch {
        height: 100vh;
        height: 100svh;
    }

    .site-header,
    .home-page > .site-header.on-home {
        background: rgba(255, 249, 238, .84);
        -webkit-backdrop-filter: blur(10px) saturate(110%);
        backdrop-filter: blur(10px) saturate(110%);
    }

    /* Keep the panel rendered so opening and closing can both ease smoothly. */
    .site-header.navigation-ready nav {
        display: flex;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate3d(0, -8px, 0);
        transition: opacity .5s ease,
            transform .56s var(--motion-ease),
            visibility 0s linear .56s;
    }

    .site-header.navigation-ready.menu-open nav {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        transition-delay: 0s;
    }

    .site-header.navigation-ready:not(.navigation-motion-ready) nav {
        transition: none;
    }
}

@media (max-width: 650px) and (prefers-reduced-motion: reduce) {
    .site-header.navigation-ready nav {
        transition: none;
        transform: none;
    }
}

@media (max-width: 650px) and (prefers-reduced-transparency: reduce) {
    .site-header,
    .home-page > .site-header.on-home {
        background: var(--paper);
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-card-image img,
    .product-card-image:hover img,
    .product-image img,
    .button:active {
        transform: none;
    }

    .product-card-image img,
    .product-image img {
        filter: none;
    }
}