::selection {
    background: #FF8C1A;
    color: #121722;
}

body {
    background: #121722;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.reveal {
    opacity: 0;
    transform: translateY(42px);
    transition: opacity 700ms ease, transform 700ms ease;
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.liquid-button {
    isolation: isolate;
    overflow: hidden;
    position: relative;
    transition: color 300ms ease, transform 300ms ease, box-shadow 300ms ease;
}

.liquid-button::before {
    background: #FFF4E6;
    border-radius: 9999px;
    content: "";
    inset: auto 0 -130% 0;
    height: 140%;
    position: absolute;
    transform: skewY(-8deg);
    transition: inset 420ms cubic-bezier(0.19, 1, 0.22, 1);
    z-index: -1;
}

.liquid-button:hover {
    box-shadow: 0 0 44px rgba(255, 140, 26, 0.52);
    color: #121722;
    transform: translateY(-2px);
}

.liquid-button:hover::before {
    inset: -20% 0 0 0;
}

.floating-ingredient {
    animation: floatIngredient 7s ease-in-out infinite;
    animation-delay: var(--delay);
    filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.35));
    perspective: 800px;
    position: absolute;
    transform-style: preserve-3d;
    z-index: 5;
}

.hero-phone-float {
    animation: heroPhoneFloat 5.5s ease-in-out infinite;
    will-change: transform;
}

@keyframes floatIngredient {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }

    35% {
        transform: translate3d(18px, -24px, 40px) rotateX(26deg) rotateY(160deg) rotateZ(8deg);
    }

    70% {
        transform: translate3d(-14px, 16px, -20px) rotateX(-16deg) rotateY(300deg) rotateZ(-10deg);
    }
}

@keyframes heroPhoneFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-22px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .floating-ingredient,
    .hero-phone-float,
    .reveal,
    .liquid-button,
    .liquid-button::before {
        animation: none;
        transition: none;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}