:root {
    color-scheme: light;
    --ink: #0a2b33;
    --brand: #10c4a2;
    --brand-deep: #0a8f84;
    --border: #dde6e3;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-bricolage), var(--font-inter), ui-sans-serif, sans-serif;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.bg-grid {
    background-image:
        linear-gradient(to right, rgb(10 43 51 / 6%) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(10 43 51 / 6%) 1px, transparent 1px);
    background-size: 44px 44px;
}

.text-brand-gradient {
    background-image: linear-gradient(120deg, var(--brand) 0%, var(--brand-deep) 100%);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.animate-in {
    animation: enter 150ms ease-out both;
}

.animate-in.duration-700 {
    animation-duration: 700ms;
}

.animate-in.duration-1000 {
    animation-duration: 1000ms;
}

.fade-in {
    --tw-enter-opacity: 0;
}

.slide-in-from-bottom-3 {
    --tw-enter-translate-y: 0.75rem;
}

.slide-in-from-bottom-4 {
    --tw-enter-translate-y: 1rem;
}

.slide-in-from-bottom-6 {
    --tw-enter-translate-y: 1.5rem;
}

@keyframes enter {
    from {
        opacity: var(--tw-enter-opacity, 1);
        transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0)
            scale(1);
    }
}

.extension-feature__panel {
    opacity: 1;
    transform: translateY(0);
    transition:
        transform 300ms ease,
        box-shadow 300ms ease,
        border-color 300ms ease;
}

.extension-feature[data-visible="true"] .extension-feature__panel {
    animation: extension-enter 700ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

@keyframes extension-enter {
    from {
        opacity: 0;
        transform: translateY(1.25rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.extension-feature__visual::before {
    position: absolute;
    inset: 8%;
    border-radius: 9999px;
    background: linear-gradient(135deg, rgb(16 196 162 / 20%), rgb(224 242 254 / 70%), rgb(37 99 235 / 20%));
    content: "";
    filter: blur(34px);
    animation: extension-glow 10s ease-in-out infinite alternate;
}

.extension-feature__browser {
    transition:
        transform 300ms ease,
        box-shadow 300ms ease;
}

.extension-feature__panel:hover .extension-feature__browser {
    transform: translateY(-4px);
}

.extension-feature__chrome {
    animation: extension-icon-float 5s ease-in-out infinite;
}

.extension-feature__spark {
    animation: extension-spark 4s ease-in-out infinite;
}

@keyframes extension-icon-float {
    0%,
    100% {
        transform: translateY(0) rotate(0);
    }
    50% {
        transform: translateY(-9px) rotate(3deg);
    }
}

@keyframes extension-spark {
    0%,
    100% {
        opacity: 0.45;
        transform: scale(0.85);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

@keyframes extension-glow {
    from {
        transform: scale(0.94) rotate(-5deg);
        opacity: 0.7;
    }
    to {
        transform: scale(1.06) rotate(5deg);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .animate-in,
    .animate-float,
    .animate-gradient,
    .animate-blob,
    .animate-marquee,
    .animate-promo-glow,
    .animate-copy-pop,
    .animate-dash-flow,
    .animate-pulse-ring {
        animation: none !important;
    }

    .extension-feature[data-visible="true"] .extension-feature__panel {
        opacity: 1;
        transform: none;
        animation: none;
        transition: none;
    }

    .extension-feature__visual::before,
    .extension-feature__browser,
    .extension-feature__chrome,
    .extension-feature__spark {
        animation: none;
        transition: none;
    }

    .extension-feature__panel:hover .extension-feature__browser {
        transform: none;
    }
}