/* =====================================================================
   LUMÉA Skin — Stylesheet
   Global type system, motion utilities and component styles that sit
   on top of Tailwind's utility classes (see lumea.html <script> config
   for the design tokens: color, font, shadow).
   ===================================================================== */

/* ---------- Base & Type Refinement ---------- */
body {
    background-color: #FBF9F6;
    color: #121316;
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    cursor: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiIgdmlld0JveD0iMCAwIDI2IDI2Ij4KICA8Y2lyY2xlIGN4PSIxMyIgY3k9IjEzIiByPSI2IiBmaWxsPSJub25lIiBzdHJva2U9IiMxMjEzMTYiIHN0cm9rZS13aWR0aD0iMS42Ii8+CiAgPGNpcmNsZSBjeD0iMTMiIGN5PSIxMyIgcj0iMS42IiBmaWxsPSIjM0U1NDQ2Ii8+Cjwvc3ZnPgo=') 13 13, auto;
}

/* Branded pointer cursor for links, buttons and anything clickable */
a, button, [role="button"], input[type="submit"], select, .pdp-thumb, .acc-trigger,
.filter-chip button, .view-toggle-btn, .qty-stepper button {
    cursor: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiIgdmlld0JveD0iMCAwIDI2IDI2Ij4KICA8Y2lyY2xlIGN4PSIxMyIgY3k9IjEzIiByPSI5IiBmaWxsPSJub25lIiBzdHJva2U9IiMzRTU0NDYiIHN0cm9rZS13aWR0aD0iMS42Ii8+CiAgPGNpcmNsZSBjeD0iMTMiIGN5PSIxMyIgcj0iMyIgZmlsbD0iI0Q5ODIyQiIvPgo8L3N2Zz4K') 13 13, pointer;
}

.font-serif {
    font-feature-settings: "liga" 1, "kern" 1;
    letter-spacing: -0.01em;
}

/* Fluid display heading — scales smoothly between mobile and desktop */
.h-display {
    font-size: clamp(2.75rem, 2rem + 3.2vw, 5.25rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
}
.h-section {
    font-size: clamp(1.9rem, 1.6rem + 1.2vw, 2.75rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
}

.eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* Italic serif accent word, e.g. <span class="accent-italic">skin</span> */
.accent-italic {
    font-style: italic;
    color: #3E5446;
}

/* ---------- Glass / Surfaces ---------- */
.glass-panel {
    background: rgba(251, 249, 246, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(234, 227, 217, 0.6);
}

/* ---------- Ticker ----------
   Layout is declared here explicitly (not left to Tailwind's .flex /
   .whitespace-nowrap utilities) so the marquee lays out and animates
   correctly even if the Tailwind CDN script loads late or is blocked. */
.ticker-wrap {
    display: flex !important;
    flex-wrap: nowrap;
    white-space: nowrap;
    width: max-content;
    animation: ticker 25s linear infinite;
    will-change: transform;
}
.ticker-wrap > div {
    display: flex;
    flex-shrink: 0;
    white-space: nowrap;
}
@keyframes ticker {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

/* ---------- Hero Media Slow Zoom ---------- */
.ken-burns { animation: kenBurns 14s ease-in-out infinite alternate; }
@keyframes kenBurns {
    from { transform: scale(1); }
    to { transform: scale(1.06); }
}

/* ---------- Custom Scrollbars ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #F4F0EA; }
::-webkit-scrollbar-thumb { background: #D8CEBE; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #2A2D34; }

/* ---------- Before/After Split Slider ---------- */
.before-after-container { position: relative; overflow: hidden; user-select: none; }
.before-img { position: absolute; top: 0; left: 0; height: 100%; width: 50%; overflow: hidden; }

/* ---------- Skeleton Shimmer ---------- */
.shimmer {
    background: linear-gradient(90deg, #F4F0EA 25%, #EAE3D9 50%, #F4F0EA 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* =====================================================================
   MOTION SYSTEM
   ===================================================================== */

[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal="scale"] { transform: scale(0.96); }
[data-reveal="scale"].is-visible { transform: scale(1); }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="left"].is-visible { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="right"].is-visible { transform: translateX(0); }

.hero-enter { animation: heroEnter 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero-enter-1 { animation-delay: 0.05s; }
.hero-enter-2 { animation-delay: 0.16s; }
.hero-enter-3 { animation-delay: 0.27s; }
.hero-enter-4 { animation-delay: 0.38s; }
.hero-enter-5 { animation-delay: 0.5s; }
@keyframes heroEnter {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-bounce-subtle { animation: bounceSubtle 4.5s ease-in-out infinite; }
@keyframes bounceSubtle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.view-section { animation: viewFade 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes viewFade {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.btn-press { transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease; }
.btn-press:active { transform: scale(0.97); }

/* Every animated/transitioned element gets frozen for users who request
   reduced motion — EXCEPT the header/press marquees. A scrolling ticker
   is core brand content (not a gratuitous flourish) and the previous
   universal selector here was silently freezing it any time the OS/
   browser had "reduce motion" on, which read as "the ticker is broken". */
@media (prefers-reduced-motion: reduce) {
    *:not(.ticker-wrap):not(.ticker-wrap *):not(.press-ticker-wrap):not(.press-ticker-wrap *),
    *:not(.ticker-wrap):not(.ticker-wrap *):not(.press-ticker-wrap):not(.press-ticker-wrap *)::before,
    *:not(.ticker-wrap):not(.ticker-wrap *):not(.press-ticker-wrap):not(.press-ticker-wrap *)::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid #3E5446;
    outline-offset: 2px;
    border-radius: 4px;
}

/* =====================================================================
   PDP — Gallery, Accordion, Reviews, Sticky Bar
   ===================================================================== */

.pdp-thumb {
    position: relative;
    border-radius: 0.85rem;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.25s ease, transform 0.25s ease;
}
.pdp-thumb:hover { transform: translateY(-2px); }
.pdp-thumb.active { border-color: #121316; }

.pdp-main-frame { position: relative; overflow: hidden; }
.pdp-main-frame img {
    transition: opacity 0.35s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.pdp-main-frame:hover img { transform: scale(1.045); }

.pdp-mode-option { transition: border-color 0.2s ease, background-color 0.2s ease; }
.pdp-mode-option.selected { border-color: #121316; background-color: #FBF9F6; }

.qty-stepper button { transition: background-color 0.15s ease, color 0.15s ease; }

.acc-item { border-top: 1px solid #EAE3D9; }
.acc-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    text-align: left;
    font-weight: 700;
    color: #121316;
    cursor: pointer;
    background: none;
    border: none;
}
.acc-icon { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); font-size: 1.1rem; color: #525763; }
.acc-item.open .acc-icon { transform: rotate(45deg); }
.acc-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.acc-item.open .acc-panel { grid-template-rows: 1fr; }
.acc-panel-inner { overflow: hidden; }
.acc-panel-content { padding-bottom: 1rem; }

.star-row { color: #D9822B; letter-spacing: 1px; }
.rating-bar-track { background: #EAE3D9; border-radius: 9999px; overflow: hidden; height: 6px; }
.rating-bar-fill { background: #D9822B; height: 100%; border-radius: 9999px; }

#pdp-sticky-bar {
    transform: translateY(110%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
#pdp-sticky-bar.visible { transform: translateY(0); }

/* =====================================================================
   VIDEO BANNER
   ===================================================================== */
.video-banner { position: relative; overflow: hidden; isolation: isolate; }
.video-banner video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}
.video-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(18,19,22,0.35) 0%, rgba(18,19,22,0.55) 55%, rgba(18,19,22,0.82) 100%);
    z-index: -1;
}
.video-mute-btn { transition: background-color 0.2s ease, transform 0.2s ease; }
.video-mute-btn:hover { transform: scale(1.08); }

/* Ingredient spotlight cards */
.ingredient-card {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.ingredient-card:hover { transform: translateY(-6px); border-color: #3E5446; }

/* Press/as-seen-in ticker (slower, subtler than promo ticker) */
.press-ticker-wrap {
    display: flex !important;
    flex-wrap: nowrap;
    white-space: nowrap;
    width: max-content;
    animation: ticker 40s linear infinite;
}
.press-ticker-wrap > div {
    display: flex;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Related product row snap-scroll */
.snap-row { scroll-snap-type: x mandatory; }
.snap-row > * { scroll-snap-align: start; }

/* =====================================================================
   SHOP — Toolbar, View Toggle, Filter Chips, Mobile Filter Drawer
   ===================================================================== */

/* Grid/List view toggle buttons */
.view-toggle-btn {
    color: #525763;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.view-toggle-btn.active {
    background-color: #121316;
    color: #FBF9F6;
}

/* Active filter chips */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    background-color: #EBF1ED;
    color: #223228;
    font-size: 0.7rem;
    font-family: 'JetBrains Mono', monospace;
    text-transform: capitalize;
}
.filter-chip button {
    color: #3E5446;
    font-size: 0.65rem;
    line-height: 1;
    cursor: pointer;
    background: none;
    border: none;
}
.filter-chip button:hover { color: #121316; }

/* Product grid re-render fade, used whenever filters/sort/view change */
.shop-grid-swap { animation: shopGridFade 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes shopGridFade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Mobile filter drawer — closed off-screen by default, slides in via .open */
#shop-filter-drawer {
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 16px 48px rgba(18, 19, 22, 0.12);
}
#shop-filter-drawer.open { transform: translateX(0); }


.discount-popup-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.6);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
}
.discount-popup-overlay.hidden { display: none; }
.discount-popup-box {
    background: #fff; border-radius: 16px; padding: 32px;
    max-width: 380px; width: 90%; text-align: center; position: relative;
}
.discount-popup-close {
    position: absolute; top: 12px; right: 16px; border: none; background: none;
    font-size: 24px; cursor: pointer; color: #888;
}
.discount-popup-box input {
    width: 100%; padding: 12px; margin: 16px 0; border: 1px solid #ddd; border-radius: 8px;
}
.discount-popup-box button[type="submit"] {
    width: 100%; padding: 12px; background: var(--green, #2f6b3a); color: #fff;
    border: none; border-radius: 8px; cursor: pointer; font-weight: 600;
}
.discount-code-box {
    font-size: 28px; font-weight: 700; letter-spacing: 3px;
    background: #f4f0ea; border: 2px dashed #2f6b3a; border-radius: 10px;
    padding: 14px; margin: 16px 0; cursor: pointer;
}
.hidden { display: none; }