::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);
    }
}

.promo-gallery {
    isolation: isolate;
}

.promo-orb {
    border-radius: 9999px;
    filter: blur(40px);
    pointer-events: none;
    position: absolute;
    z-index: 0;
}

.promo-orb-a {
    animation: promoOrbDrift 14s ease-in-out infinite;
    background: rgba(255, 140, 26, 0.22);
    height: 220px;
    left: -60px;
    top: 120px;
    width: 220px;
}

.promo-orb-b {
    animation: promoOrbDrift 18s ease-in-out infinite reverse;
    background: rgba(255, 244, 230, 0.12);
    bottom: 80px;
    height: 260px;
    right: -80px;
    width: 260px;
}

.promo-grid-lines {
    background-image:
        linear-gradient(rgba(255, 244, 230, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 244, 230, 0.05) 1px, transparent 1px);
    background-size: 56px 56px;
    inset: 0;
    mask-image: radial-gradient(circle at center, black, transparent 78%);
    opacity: 0.35;
    pointer-events: none;
    position: absolute;
}

.promo-card {
    animation: promoCardIn 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--promo-delay, 0ms);
    transform-style: preserve-3d;
    will-change: transform;
}

.promo-shape {
    inset: 0;
    overflow: hidden;
    position: absolute;
    transition: clip-path 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.promo-image {
    animation: promoKenBurns 18s ease-in-out infinite;
    transform: scale(1.08);
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), filter 700ms ease;
}

.promo-card:hover .promo-image {
    animation-play-state: paused;
    filter: saturate(1.08) contrast(1.04);
    transform: scale(1.14);
}

.shape-diamond {
    clip-path: polygon(50% 0%, 100% 8%, 100% 92%, 50% 100%, 0% 92%, 0% 8%);
}

.shape-hex {
    clip-path: polygon(8% 0%, 92% 0%, 100% 50%, 92% 100%, 8% 100%, 0% 50%);
}

.shape-slant {
    clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
}

.shape-circle {
    clip-path: circle(78% at 50% 42%);
}

.shape-notch {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
}

.shape-pentagon {
    clip-path: polygon(50% 0%, 100% 36%, 84% 100%, 16% 100%, 0% 36%);
}

.shape-arch {
    clip-path: ellipse(92% 96% at 50% 100%);
}

.shape-triangle {
    clip-path: polygon(50% 8%, 100% 100%, 0 100%);
}

.shape-wave {
    clip-path: polygon(0 0, 100% 0, 100% 84%, 75% 92%, 50% 84%, 25% 92%, 0 84%);
}

.shape-frame {
    clip-path: polygon(0 10%, 10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%);
}

.promo-card:hover .shape-diamond { clip-path: polygon(50% 2%, 98% 10%, 98% 90%, 50% 98%, 2% 90%, 2% 10%); }
.promo-card:hover .shape-hex { clip-path: polygon(6% 2%, 94% 2%, 100% 50%, 94% 98%, 6% 98%, 0% 50%); }
.promo-card:hover .shape-slant { clip-path: polygon(0 0, 100% 0, 100% 82%, 0 96%); }
.promo-card:hover .shape-circle { clip-path: circle(84% at 50% 40%); }
.promo-card:hover .shape-notch { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 36px), calc(100% - 36px) 100%, 0 100%); }
.promo-card:hover .shape-pentagon { clip-path: polygon(50% 2%, 98% 34%, 86% 98%, 14% 98%, 2% 34%); }
.promo-card:hover .shape-arch { clip-path: ellipse(96% 98% at 50% 100%); }
.promo-card:hover .shape-triangle { clip-path: polygon(50% 4%, 98% 98%, 2% 98%); }
.promo-card:hover .shape-wave { clip-path: polygon(0 0, 100% 0, 100% 80%, 74% 90%, 50% 80%, 26% 90%, 0 80%); }
.promo-card:hover .shape-frame { clip-path: polygon(0 8%, 8% 0, 92% 0, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0 92%); }

.promo-geo {
    pointer-events: none;
    position: absolute;
    z-index: 2;
}

.promo-geo-ring {
    animation: promoGeoSpin 16s linear infinite;
    border: 2px solid rgba(255, 140, 26, 0.45);
    border-radius: 9999px;
    height: 72px;
    opacity: 0;
    right: 18px;
    top: 18px;
    transition: opacity 400ms ease;
    width: 72px;
}

.promo-geo-triangle {
    animation: promoGeoFloat 7s ease-in-out infinite;
    border-bottom: 26px solid rgba(255, 244, 230, 0.18);
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    height: 0;
    left: 20px;
    opacity: 0;
    top: 22px;
    transition: opacity 400ms ease;
    width: 0;
}

.promo-geo-dots {
    background-image: radial-gradient(rgba(255, 140, 26, 0.85) 2px, transparent 2px);
    background-size: 14px 14px;
    bottom: 72px;
    height: 56px;
    mask-image: linear-gradient(to top, black, transparent);
    opacity: 0;
    right: 24px;
    transition: opacity 400ms ease;
    width: 72px;
}

.promo-card:hover .promo-geo-ring,
.promo-card:hover .promo-geo-triangle,
.promo-card:hover .promo-geo-dots {
    opacity: 1;
}

.promo-marquee-track {
    animation: promoMarquee 28s linear infinite;
}

@keyframes promoOrbDrift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(24px, -18px, 0) scale(1.08); }
}

@keyframes promoCardIn {
    from {
        opacity: 0;
        transform: translateY(36px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes promoKenBurns {
    0%, 100% { transform: scale(1.08) translate3d(0, 0, 0); }
    50% { transform: scale(1.12) translate3d(-1.5%, -1.5%, 0); }
}

@keyframes promoGeoSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes promoGeoFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(8deg); }
}

@keyframes promoMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .floating-ingredient,
    .hero-phone-float,
    .reveal,
    .liquid-button,
    .liquid-button::before,
    .promo-card,
    .promo-image,
    .promo-orb,
    .promo-geo-ring,
    .promo-geo-triangle,
    .promo-marquee-track {
        animation: none;
        transition: none;
    }

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