/* 01 — Shared timing. Content remains visible when JavaScript is unavailable. */
:root {
    --motion-fast: 220ms;
    --motion-base: 420ms;
    --motion-slow: 750ms;
    --motion-cinematic: 1200ms;
    --ease-luxury: cubic-bezier(.16, 1, .3, 1);
    --ease-soft: cubic-bezier(.22, .61, .36, 1);
}
@keyframes motion-rise { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes count-pop { 50% { scale: 1.25; } }
@keyframes heart-pop { 50% { scale: 1.15; } }
@keyframes image-settle { from { scale: 1.04; } to { scale: 1; } }
@keyframes editorial-settle { from { scale: 1.08; } to { scale: 1; } }
@keyframes announce-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 02 — Masked headline typography. The hero's own entrance choreography
   lives in atelier.css; only the line masks that js/hero-motion.js builds
   are owned here, because the splitter runs for every hero language. */
.hero-line { display: block; overflow: clip; padding-block: .09em; margin-block: -.09em; }
.hero-line-inner { display: block; }

/* 03–04 — One-time reveals. scale and translate do not replace hover transforms. */
.reveal.is-pending { opacity: 0; translate: 0 20px; }
.reveal-scale.is-pending { translate: none; scale: .97; }
.reveal-mask.is-pending { translate: none; }
.reveal-mask img { clip-path: inset(0); transition: clip-path 1000ms var(--ease-luxury) var(--reveal-delay, 0ms), transform 750ms var(--ease-luxury); }
.reveal-mask.is-pending img { clip-path: inset(100% 0 0 0); }
.reveal { transition: opacity var(--motion-slow) var(--ease-luxury), translate var(--motion-slow) var(--ease-luxury), scale var(--motion-slow) var(--ease-luxury), clip-path 1000ms var(--ease-luxury); transition-delay: var(--reveal-delay, 0ms); }
.reveal.is-visible { opacity: 1; translate: none; scale: 1; }
.reveal:focus-within { opacity: 1; translate: none; clip-path: inset(0); }
.product-card.reveal { transition: opacity 650ms var(--ease-luxury) var(--reveal-delay, 0ms), translate 650ms var(--ease-luxury) var(--reveal-delay, 0ms), transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease, background-color 350ms ease; }
.product-card.is-visible .product-img { animation: image-settle 750ms var(--ease-luxury) var(--reveal-delay, 0ms) both; }
.capsule-card.is-visible img, .collection-card.is-visible img, .about-visual.is-visible img { animation: editorial-settle 1400ms var(--ease-luxury) var(--reveal-delay, 0ms) both; }
.capsule-card, .collection-card { transition: clip-path 1000ms var(--ease-luxury) var(--reveal-delay, 0ms), opacity 750ms ease var(--reveal-delay, 0ms), transform 350ms ease, box-shadow 350ms ease; }
.capsule-content { transition: transform 500ms var(--ease-luxury); }
#homeGrid, #shopGrid { transition: opacity 150ms ease, translate 150ms ease; }
.grid-changing { opacity: .25; translate: 0 5px; pointer-events: none; }
.grid-swapping .product-card.reveal { transition-duration: 240ms; transition-delay: 0ms; }
.home-cat-tabs { position: relative; }
.home-tab-indicator { position: absolute; left: 0; top: 0; height: 2px; width: 1px; background: var(--gold); transform-origin: left; pointer-events: none; transition: transform 350ms var(--ease-luxury); }

/* 09 — Navigation / button motion, plus deliberately scoped theme transitions. */
body, .site-footer, .page-hero, .hero-banner-card, .contact-info-card, .contact-form, .cart-drawer {
    transition: background-color 350ms ease, color 350ms ease, border-color 350ms ease, box-shadow 350ms ease;
}
.site-header { transition: background-color 280ms ease, border-color 280ms ease, box-shadow 280ms ease, backdrop-filter 280ms ease; }
.site-header.scrolled { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.main-nav a::after { width: 100%; transform: scaleX(0); transform-origin: left; transition: transform 330ms var(--ease-luxury); }
.main-nav a:hover::after, .main-nav a.active::after, .main-nav a:focus-visible::after { transform: scaleX(1); }
.btn { transition: transform 280ms var(--ease-luxury), box-shadow 280ms ease, background-color 350ms ease, color 350ms ease, border-color 280ms ease; }
.announce-text.fade-in { animation: announce-in 350ms var(--ease-luxury); }
@media (hover: hover) and (pointer: fine) {
    .btn:hover { transform: translateY(-2px); }
    .btn-outline:hover { border-color: var(--gold); background-color: rgba(184, 144, 83, .08); color: var(--gold-dark); }
    .product-card:hover { transform: translateY(-4px); }
    .capsule-card:hover img, .collection-card:hover img { transform: scale(1.035); }
    .capsule-card:hover .capsule-content { transform: translateY(-3px); }
}

/* 10 — Shopping feedback. */
.cart-drawer { transition: transform var(--motion-base) var(--ease-luxury), background-color 350ms ease; }
.drawer-overlay { transition: opacity var(--motion-base) ease, visibility var(--motion-base) ease; }
.cart-drawer.open .drawer-item { animation: motion-rise 420ms var(--ease-luxury) both; }
.count-changing { animation: count-pop 250ms ease; }
.heart-changing { animation: heart-pop 320ms ease; }
.bag-added { animation: heart-pop 300ms ease; }
.toast { opacity: 0; visibility: hidden; transition: transform 400ms var(--ease-luxury), opacity 250ms ease, visibility 400ms; }
.toast.show { opacity: 1; visibility: visible; }
#mainProductImg { transition: opacity 180ms ease, transform 600ms var(--ease-luxury); }
[data-size] { transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; }

/* 11 — Native same-origin page transitions preserve links, forms and history. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-out 170ms ease both; }
::view-transition-new(root) { animation: motion-rise 250ms var(--ease-luxury) both; }
@keyframes page-out { to { opacity: .2; transform: translateY(-5px); } }

/* 12 — Touch, print and live reduced-motion preferences. */
@media (hover: none) {
    .product-card:hover, .btn:hover { transform: none; }
}
/* Keep all header controls reachable with the language and theme selectors. */
@media (min-width: 769px) and (max-width: 1280px) {
    .nav-toggle { display: flex; }
    .main-nav {
        position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 55;
        flex-direction: column; padding: 24px 30px; gap: 16px;
        background: var(--cream); border-bottom: 1px solid var(--sand); box-shadow: var(--shadow-lg);
        opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-12px);
        transition: opacity 300ms ease, transform 350ms var(--ease-luxury), visibility 350ms;
    }
    .main-nav.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
}
@media (max-width: 480px) {
    .header-inner { gap: 6px; }
    .header-inner .logo { gap: 5px; }
    .header-inner .logo-emblem { width: 28px; height: 28px; }
    .header-inner .logo-text { font-size: 1rem; letter-spacing: .06em; }
    .header-inner .logo-text em { display: none; }
    .header-inner .header-actions { gap: 2px; }
    .header-inner .header-actions .icon-btn { width: 30px; height: 36px; }
    .header-inner .language-switcher select { min-width: 42px; padding-left: 7px; }
}
@media (max-width: 360px) {
    .header-inner .logo-emblem { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
    .reveal.is-pending { opacity: 1; translate: none; scale: 1; clip-path: none; }
    .reveal-mask.is-pending img { clip-path: none; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}
@media print {
    .reveal.is-pending { opacity: 1; translate: none; scale: 1; clip-path: none; }
    .reveal-mask.is-pending img { clip-path: none; }
}