[x-cloak] { display: none !important; }

:root {
    color-scheme: dark;
}

html { background: #080808; }
body { margin: 0; }

.hero-noise {
    background-image:
        radial-gradient(circle at 15% 25%, rgba(255,255,255,.055) 0 1px, transparent 1px),
        radial-gradient(circle at 75% 65%, rgba(255,255,255,.04) 0 1px, transparent 1px);
    background-size: 28px 28px, 34px 34px;
    mask-image: linear-gradient(to bottom, black, transparent 92%);
}

.liqueur-gradient {
    background:
        radial-gradient(circle at 75% 35%, rgba(237,28,36,.18), transparent 27%),
        radial-gradient(circle at 82% 60%, rgba(255,255,255,.055), transparent 24%),
        linear-gradient(130deg, #080808 30%, #111 100%);
}

.liqueur-product-glow {
    background:
        radial-gradient(circle at 72% 48%, rgba(0, 170, 88, .16), transparent 28%),
        radial-gradient(circle at 38% 65%, rgba(243, 112, 33, .08), transparent 26%),
        linear-gradient(125deg, #020a06 18%, #071c11 62%, #020a06 100%);
}

.hero-float { animation: bottle-float 5.8s ease-in-out infinite; }
.hero-float-delay { animation: bottle-float-secondary 6.8s ease-in-out infinite; }

@keyframes bottle-float {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-10px); }
}

@keyframes bottle-float-secondary {
    0%, 100% { transform: translateY(0) rotate(-8deg); }
    50% { transform: translateY(8px) rotate(-6deg); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}