/* Header */

.site-header {
    transition: box-shadow .25s;
}

.site-header.is-scrolled {
    box-shadow: 0 8px 24px rgba(28, 11, 46, .08);
}

/* Scroll reveal (classes set by motion.js) */

.motion-ready .reveal {
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
    transition-delay: var(--reveal-delay, 0s);
}

.motion-ready .reveal:not(.is-revealed) {
    opacity: 0;
    transform: translateY(20px);
}

.motion-ready .meter.is-waiting .meter__fill {
    animation-play-state: paused;
}

.is-counting {
    font-variant-numeric: tabular-nums;
}

/* FAQ open and close */

.faq-item {
    transition: border-color .3s;
}

.faq-item[open] .faq-item__answer {
    animation: faqIn .35s var(--ease-out);
}

@keyframes faqIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@supports (interpolate-size: allow-keywords) {
    :root {
        interpolate-size: allow-keywords;
    }

    .faq-item::details-content {
        block-size: 0;
        overflow-y: clip;
        transition: block-size .35s var(--ease-out), content-visibility .35s allow-discrete;
    }

    .faq-item[open]::details-content {
        block-size: auto;
    }
}

/* Recommended pricing plan */

.price-card--featured {
    animation: featuredGlow 5s ease-in-out infinite;
}

@keyframes featuredGlow {
    0%,
    100% {
        box-shadow: 0 12px 32px rgba(194, 24, 91, .10);
    }

    50% {
        box-shadow: 0 18px 48px rgba(194, 24, 91, .24);
    }
}

/* Hover: only on devices with a precise pointer */

.icon-tile {
    --tile-fill: var(--c-primary);
    transition: background-color .3s, color .3s, transform .3s var(--ease-out);
}

.icon-tile--violet {
    --tile-fill: var(--c-dna);
}

.icon-tile--orchid {
    --tile-fill: var(--c-primary-dark);
}

.icon-tile--plum {
    --tile-fill: var(--c-plum);
}

.icon-tile--glass {
    --tile-fill: rgba(255, 255, 255, .24);
}

[class*="accent-"] .icon-tile {
    --tile-fill: var(--accent);
}

.btn .icon,
.link-arrow .icon,
.mega__all .icon,
.feature-card__link .icon,
.pill .icon {
    transition: transform .25s var(--ease-out);
}

.grid > .card:not(a):not(form),
.grid > li.card {
    transition: border-color .3s, box-shadow .3s;
}

.article-card__media img,
.article-card__media .deco {
    transition: transform .6s var(--ease-out);
}

.article-card__title {
    transition: color .25s;
}

.product-card__logo {
    transition: border-color .3s;
}

@media (hover: hover) and (pointer: fine) {
    .grid > .card:not(a):not(form):hover,
    .grid > li.card:hover {
        border-color: var(--c-border-hover);
        box-shadow: 0 14px 32px rgba(28, 11, 46, .08);
    }

    .card.card--accent-top:hover,
    .grid > .card.card--accent-top:hover {
        border-top-color: var(--accent, var(--c-primary));
    }

    .grid > .card:hover .icon-tile,
    .grid > li.card:hover .icon-tile,
    a.card:hover .icon-tile {
        background: var(--tile-fill);
        color: var(--c-white);
        transform: scale(1.06);
    }

    .btn:hover .icon:has(use[href="#i-arrow-right"]),
    .link-arrow:hover .icon:has(use[href="#i-arrow-right"]),
    .mega__all:hover .icon,
    .pill:hover .icon,
    a.card:hover .feature-card__link .icon {
        transform: translateX(3px);
    }

    .article-card:hover .article-card__media img {
        transform: scale(1.05);
    }

    .article-card:hover .article-card__media .deco {
        transform: translateX(-14px);
    }

    .article-card:hover .article-card__title {
        color: var(--c-primary);
    }

    .product-card:hover .product-card__logo {
        border-color: var(--c-border-hover);
    }

    .faq-item:hover {
        border-color: var(--c-border-hover);
    }
}