/* ========================================================================== 
   Diki Lux motion system
   One restrained, editorial rhythm for every public page.
   ========================================================================== */

:root {
    --motion-fast: 180ms;
    --motion-medium: 420ms;
    --motion-slow: 760ms;
    --motion-cinematic: 1050ms;
    --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
}

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

/* Elements receive this class only when JavaScript is active. Content stays
   visible when scripting is unavailable. */
.motion-system .motion-reveal {
    --motion-delay: 0ms;
    opacity: 0.001;
    filter: blur(4px);
    transform: translate3d(0, 24px, 0);
    transition:
        opacity var(--motion-slow) var(--motion-ease-out) var(--motion-delay),
        transform var(--motion-cinematic) var(--motion-ease-out) var(--motion-delay),
        filter var(--motion-slow) var(--motion-ease-out) var(--motion-delay);
    will-change: opacity, transform, filter;
}

.motion-system .motion-reveal[data-motion-direction="left"] {
    transform: translate3d(-28px, 0, 0);
}

.motion-system .motion-reveal[data-motion-direction="right"] {
    transform: translate3d(28px, 0, 0);
}

.motion-system .motion-reveal[data-motion-direction="scale"] {
    transform: scale(0.975);
}

.motion-system .motion-reveal.is-inview,
.motion-system .motion-reveal.visible {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
    will-change: auto;
}

/* Disable the previous word-by-word domino. The whole phrase now moves as a
   considered editorial block. */
.motion-system .word-reveal .wr-word,
.motion-system .word-reveal .wr-word > span {
    overflow: visible !important;
    transform: none !important;
    transition: none !important;
}

/* Navigation */
.navbar {
    transition:
        background-color var(--motion-medium) var(--motion-ease-out),
        box-shadow var(--motion-medium) var(--motion-ease-out),
        color var(--motion-medium) var(--motion-ease-out),
        padding var(--motion-medium) var(--motion-ease-out) !important;
}

.nav-left a,
.nav-right a,
.nav-search-btn,
.nav-burger {
    transition:
        color var(--motion-medium) var(--motion-ease-out),
        opacity var(--motion-fast) ease,
        transform var(--motion-medium) var(--motion-ease-out) !important;
}

.nav-left a,
.footer-col-list a,
.footer-col a {
    position: relative;
}

.nav-left a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform var(--motion-medium) var(--motion-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .nav-left a:hover::after {
        transform: scaleX(1);
        transform-origin: left center;
    }
}

/* Buttons: consistent lift, shadow and press response. */
.btn-cream,
.btn-dark,
.btn-main,
.btn-cart,
.dl-lines-btn,
.btn-brand-st,
.catalog-hero-cta,
.pdp-buy,
.pdp-oneclick,
button[type="submit"] {
    transition:
        transform var(--motion-medium) var(--motion-ease-out),
        box-shadow var(--motion-medium) var(--motion-ease-out),
        background-color var(--motion-medium) var(--motion-ease-out),
        color var(--motion-medium) var(--motion-ease-out),
        opacity var(--motion-fast) ease !important;
    transform: translate3d(0, 0, 0);
}

@media (hover: hover) and (pointer: fine) {
    .btn-cream:hover,
    .btn-dark:hover,
    .btn-main:hover,
    .btn-cart:hover,
    .dl-lines-btn:hover,
    .btn-brand-st:hover,
    .catalog-hero-cta:hover,
    .pdp-buy:hover,
    .pdp-oneclick:hover,
    button[type="submit"]:hover {
        opacity: 1 !important;
        transform: translate3d(0, -3px, 0) !important;
        box-shadow: 0 14px 36px rgba(11, 11, 14, 0.16) !important;
    }
}

.btn-cream:active,
.btn-dark:active,
.btn-main:active,
.btn-cart:active,
.dl-lines-btn:active,
.btn-brand-st:active,
.catalog-hero-cta:active,
.pdp-buy:active,
.pdp-oneclick:active,
button[type="submit"]:active {
    transform: translate3d(0, 0, 0) scale(0.985) !important;
    transition-duration: 90ms !important;
}

/* Cards and images: no looping float or cursor-chasing 3D. */
.p-card,
.cat-tile,
.blog-card,
.article-card,
.dl-lines-card,
.right-card,
.zones-card {
    transition:
        transform var(--motion-slow) var(--motion-ease-out),
        box-shadow var(--motion-slow) var(--motion-ease-out),
        border-color var(--motion-medium) ease !important;
    transform: translate3d(0, 0, 0);
}

.p-card .p-img-wrap img,
.cat-tile img,
.blog-card img,
.article-card img {
    animation: none !important;
    scale: 1;
    transition: scale var(--motion-slow) var(--motion-ease-out) !important;
}

@media (hover: hover) and (pointer: fine) {
    .p-card:hover,
    .cat-tile:hover,
    .blog-card:hover,
    .article-card:hover {
        transform: translate3d(0, -6px, 0) !important;
        box-shadow: 0 22px 54px rgba(11, 11, 14, 0.10);
    }

    .p-card:hover .p-img-wrap img,
    .cat-tile:hover img,
    .blog-card:hover img,
    .article-card:hover img {
        animation: none !important;
        scale: 1.025;
    }
}

/* Home hero and editorial image drift are driven by one damped RAF loop. */
.motion-system .hero {
    isolation: isolate;
}

.motion-system .hero-bg {
    transform: translate3d(0, var(--hero-bg-y, 0px), 0) scale(1.035) !important;
    transform-origin: center center;
    transition: none !important;
    will-change: transform;
}

.motion-system .left-content {
    transform: translate3d(0, var(--hero-copy-y, 0px), 0) !important;
    will-change: transform;
}

.motion-system .right-card {
    transform: translate3d(0, var(--hero-card-y, 0px), 0) !important;
    will-change: transform;
}

.motion-system .dl-lines-photo img {
    transform: translate3d(0, var(--editorial-y, 0%), 0) scale(1.055) !important;
    transition: none !important;
    will-change: transform;
}

/* Interactive zones */
.zones-card {
    opacity: 1;
    filter: blur(0);
    transition:
        opacity 260ms ease,
        transform var(--motion-medium) var(--motion-ease-out),
        filter 260ms ease !important;
}

.zones-card.is-switching {
    opacity: 0;
    filter: blur(4px);
    transform: translate3d(0, 12px, 0) !important;
}

.zones-dot {
    transition:
        transform var(--motion-medium) var(--motion-ease-out),
        background-color var(--motion-medium) var(--motion-ease-out),
        color var(--motion-medium) var(--motion-ease-out),
        box-shadow var(--motion-medium) var(--motion-ease-out) !important;
}

.zones-dot.is-active {
    box-shadow: 0 10px 30px rgba(11, 11, 14, 0.20);
}

/* FAQ */
.faq-item {
    transition:
        background-color var(--motion-medium) var(--motion-ease-out),
        border-color var(--motion-medium) var(--motion-ease-out) !important;
}

.faq-item[open] > p {
    animation: motion-details-in var(--motion-medium) var(--motion-ease-out) both;
}

@keyframes motion-details-in {
    from { opacity: 0; transform: translate3d(0, -8px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Search keeps rendering while hidden, allowing a real exit transition. */
.global-search-overlay {
    display: flex !important;
    visibility: hidden;
    pointer-events: none;
    opacity: 0 !important;
    transition:
        opacity var(--motion-medium) ease,
        visibility 0s linear var(--motion-medium) !important;
}

.global-search-panel {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.985);
    transition:
        opacity var(--motion-medium) ease,
        transform var(--motion-slow) var(--motion-ease-out);
}

.global-search-overlay.is-open {
    visibility: visible;
    pointer-events: auto;
    opacity: 1 !important;
    transition-delay: 0s !important;
}

.global-search-overlay.is-open .global-search-panel {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.global-search-result {
    transition:
        background-color var(--motion-fast) ease,
        transform var(--motion-medium) var(--motion-ease-out) !important;
}

.global-search-result:hover,
.global-search-result.is-focused {
    transform: translate3d(4px, 0, 0);
}

/* Footer reveal is scroll-linked but damped in motion.js. */
.footer-reveal-text {
    transform: translate3d(0, var(--footer-rise, 180px), 0) !important;
    will-change: transform;
}

/* Progressive same-origin page transition where the browser supports it. */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: 220ms ease both motion-page-out;
}

::view-transition-new(root) {
    animation: 520ms var(--motion-ease-out) both motion-page-in;
}

@keyframes motion-page-out {
    to { opacity: 0; transform: translate3d(0, -5px, 0); }
}

@keyframes motion-page-in {
    from { opacity: 0; transform: translate3d(0, 8px, 0); }
}

/* Mobile drawer: preserve it in the tree so opening and closing both animate. */
@media (max-width: 900px) {
    html { scroll-padding-top: 64px; }

    .motion-system .navbar .nav-left {
        display: flex !important;
        visibility: hidden;
        pointer-events: none;
        opacity: 0;
        clip-path: inset(0 0 100% 0);
        transform: translate3d(0, -12px, 0);
        transition:
            opacity 260ms ease,
            transform var(--motion-slow) var(--motion-ease-out),
            clip-path var(--motion-slow) var(--motion-ease-out),
            visibility 0s linear var(--motion-slow) !important;
    }

    .motion-system .navbar.nav-menu-open .nav-left {
        visibility: visible;
        pointer-events: auto;
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: translate3d(0, 0, 0);
        transition-delay: 0s !important;
    }

    .motion-system .navbar .nav-left > a,
    .motion-system .navbar .nav-subcats {
        opacity: 0;
        transform: translate3d(0, 12px, 0);
        transition:
            opacity var(--motion-medium) ease,
            transform var(--motion-slow) var(--motion-ease-out) !important;
        transition-delay: 0ms !important;
    }

    .motion-system .navbar.nav-menu-open .nav-left > a,
    .motion-system .navbar.nav-menu-open .nav-subcats {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition-delay: calc(90ms + var(--nav-order, 0) * 55ms) !important;
    }

    .motion-system .hero-bg,
    .motion-system .left-content,
    .motion-system .right-card,
    .motion-system .dl-lines-photo img,
    .footer-reveal-text {
        will-change: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }

    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
        transition-delay: 0ms !important;
    }

    .motion-system .motion-reveal,
    .motion-system .motion-reveal.is-inview,
    .motion-system .hero-bg,
    .motion-system .left-content,
    .motion-system .right-card,
    .motion-system .dl-lines-photo img,
    .footer-reveal-text {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }

    .zones-marquee-track { animation: none !important; }
}