/* Plain CSS that Tailwind classes can't express easily. */

/* ---------- Lenis (smooth scroll) ---------- */
html,
html.lenis {
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(10, 44, 86, .45) transparent;
}

html::-webkit-scrollbar,
html.lenis::-webkit-scrollbar {
    width: 4px;
}

html::-webkit-scrollbar-track,
html.lenis::-webkit-scrollbar-track {
    background: transparent;
}

html::-webkit-scrollbar-thumb,
html.lenis::-webkit-scrollbar-thumb {
    background: rgba(10, 44, 86, .35);
    border-radius: 4px;
}

html::-webkit-scrollbar-thumb:hover,
html.lenis::-webkit-scrollbar-thumb:hover {
    background: rgba(10, 44, 86, .6);
}

html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: clip;
}

.lenis.lenis-smooth iframe {
    pointer-events: none;
}

/* ---------- Reveal on scroll ---------- */
/* Elements with data-reveal fade in when they enter the screen (see lib/reveal.js). */
[data-reveal] {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

[data-reveal="left"] { transform: translate3d(-36px, 0, 0); }
[data-reveal="right"] { transform: translate3d(36px, 0, 0); }
[data-reveal="scale"] { transform: scale(.92); }
[data-reveal="fade"] { transform: none; }

[data-reveal].is-visible {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* ---------- Header ---------- */
.site-header [data-announce] {
    height: 2.25rem;
    overflow: hidden;
    transition: height .35s ease;
}

.site-header [data-navrow] {
    height: 3rem;
    transition: height .35s ease, opacity .25s ease;
}

.site-header [data-logo] {
    transition: width .35s ease, height .35s ease;
}

.site-header.is-scrolled [data-announce] { height: 0; }
.site-header.is-scrolled [data-logo] { width: 2.9rem; height: 2.9rem; }
.site-header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(6, 28, 58, .45); }

.site-header.is-nav-hidden [data-navrow] {
    height: 0;
    opacity: 0;
    pointer-events: none;
}

/* ---------- Marquee ---------- */
.marquee:hover .marquee-track {
    animation-play-state: paused;
}

/* ---------- Misc ---------- */
.no-scrollbar {
    scrollbar-width: none;
}

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

dialog::backdrop {
    background: rgba(0, 0, 0, .55);
}

/* ---------- Home hero: the featured perfumes take turns in front ---------- */
.hero-card {
    transition: transform .8s cubic-bezier(.2, .7, .2, 1), opacity .8s ease, filter .8s ease;
    will-change: transform;
}

.hero-card[data-pos="0"] { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; z-index: 30; }
.hero-card[data-pos="1"] { transform: translate(8%, -50%) rotate(7deg) scale(.78); opacity: .95; z-index: 20; filter: brightness(.9); }
.hero-card[data-pos="2"] { transform: translate(-50%, -50%) rotate(0deg) scale(.5); opacity: 0; z-index: 10; pointer-events: none; }
.hero-card[data-pos="3"] { transform: translate(-108%, -50%) rotate(-7deg) scale(.78); opacity: .95; z-index: 20; filter: brightness(.9); }

/* The search boxes draw their own "clear" button. */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}