/* Cumbé — motion layer. Loaded after experience.css; colours and easing come from the theme.
 * Entrance animations use fill-mode "backwards": once finished, elements return to their
 * normal styles (no lingering clip-path or transform). Independent `translate`, `rotate`
 * and `scale` properties are animated wherever an element already uses `transform`.
 * Reduced motion: experience.css disables every animation and transition. */

@keyframes rise-in { from { opacity: 0; translate: 0 32px; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes mask-up { from { clip-path: inset(0 -10% 100% -10%); translate: 0 .4em; } to { clip-path: inset(-15% -10% -30% -10%); translate: 0 0; } }
@keyframes line-draw { from { scale: 0 1; } }
@keyframes bottle-rise { from { opacity: 0; translate: 0 80px; scale: .94; } }
@keyframes bottle-float { from { translate: 0 0; } to { translate: 0 -12px; } }
@keyframes aura-bloom { from { opacity: 0; transform: translate(-50%, -49%) scale(.55); } to { opacity: 1; transform: translate(-50%, -49%) scale(1); } }
@keyframes aura-breathe { from { transform: translate(-50%, -49%) scale(1); } to { transform: translate(-50%, -49%) scale(1.05); } }
@keyframes orbit-turn { from { transform: translateY(-48%) rotate(0turn); } to { transform: translateY(-48%) rotate(1turn); } }
@keyframes spin { to { rotate: 1turn; } }
@keyframes spin-back { to { rotate: -1turn; } }
@keyframes ring-breathe { to { scale: 1.045; } }
@keyframes grain-shift { 0% { background-position: 0 0, 0 0; } 100% { background-position: 48px 32px, 5px 5px; } }
@keyframes ribbon { to { translate: -50% 0; } }
@keyframes ken-burns { from { scale: 1.12; } to { scale: 1; } }
@keyframes curtain { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes photo-settle { from { scale: 1.12; } }
@keyframes text-swap { from { opacity: 0; translate: 0 14px; } }

/* 1. Home — first viewport: a choreographed arrival, held behind the age gate. */
.hero--home .eyebrow { animation: rise-in .9s .15s var(--premium-ease) backwards; }
.hero--home .eyebrow::before { transform-origin: left; animation: line-draw 1s .3s var(--premium-ease) backwards; }
.hero-title-line { display: block; }
.hero-copy h1 .hero-title-line { animation: mask-up 1.15s .3s var(--premium-ease) backwards; }
.hero-copy h1 em.hero-title-line { animation-delay: .48s; }
.hero--home .hero-lede { animation: rise-in .95s .68s var(--premium-ease) backwards; }
.hero--home .hero-actions { animation: rise-in .95s .82s var(--premium-ease) backwards; }
.hero--home .hero-note { animation: rise-in .9s .96s var(--premium-ease) backwards; }
.hero--home .hero-note:nth-child(2) { animation-delay: 1.06s; }
.hero--home .hero-note:nth-child(3) { animation-delay: 1.16s; }
.hero--home .hero-notes { position: relative; border-top-color: transparent; }
.hero--home .hero-notes::before { content: ''; position: absolute; inset: -1px 0 auto; height: 1px; background: var(--premium-line); transform-origin: left; animation: line-draw 1.2s .9s var(--premium-ease) backwards; }
.hero--home .hero-aura { animation: aura-bloom 1.5s .2s var(--premium-ease) backwards, aura-breathe 7s 1.7s ease-in-out infinite alternate; }
.hero--home .hero-bottle { animation: bottle-rise 1.3s .35s var(--premium-ease) backwards, bottle-float 6s 1.65s ease-in-out infinite alternate; }
.hero--home .hero-watermark { animation: fade-in 2.4s .4s ease backwards; }
.hero--home .hero-seal { animation: rise-in 1s 1.1s var(--premium-ease) backwards; }
.hero--home .hero-seal::before { animation: spin 26s linear infinite; }
.hero--home .bottle-discover, .hero--home .hero-scroll { animation: fade-in 1s 1.4s ease backwards; }
.hero--home .hero-grain { animation: grain-shift 9s steps(9) infinite; }
.hero--home .hero-orbit {
    background: radial-gradient(circle at 50% 5px, var(--premium-coral) 0 4px, transparent 5px);
    animation: fade-in 2s .2s ease backwards, orbit-turn 90s linear infinite;
}
.hero--home .hero-orbit::after {
    background: radial-gradient(circle at 50% calc(100% - 4px), var(--premium-sky) 0 3px, transparent 4px);
    animation: spin-back 45s linear infinite;
}
body.age-gate-active .hero--home,
body.age-gate-active .hero--home *,
body.age-gate-active .hero--home *::before,
body.age-gate-active .hero--home *::after { animation-play-state: paused; }

/* Bottle on the pointer: keep the existing tilt, add the float on its own property. */
.hero-bottle { will-change: translate; }

/* 2. Brand ribbon: a slow editorial band between the hero and the origin story. */
.brand-ribbon { overflow: hidden; padding-block: 24px; color: var(--premium-navy); background: var(--premium-coral); }
.brand-ribbon__track { display: flex; width: max-content; animation: ribbon 46s linear infinite; }
.brand-ribbon:hover .brand-ribbon__track { animation-play-state: paused; }
.brand-ribbon__list { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.brand-ribbon__list li { display: flex; align-items: center; gap: 38px; padding-right: 38px; white-space: nowrap; font: 400 clamp(1.6rem, 2.7vw, 2.6rem)/1.1 'Ogg', Georgia, serif; letter-spacing: -.025em; }
.brand-ribbon__list li:nth-child(even) { font-style: italic; }
.brand-ribbon__list li::after { content: ''; flex: 0 0 8px; height: 8px; border: 1px solid var(--premium-white); transform: rotate(45deg); }

/* 3. Scroll reveals (motion.js adds .has-motion, then .is-revealed per element). */
.has-motion [data-reveal] {
    transition: opacity .95s var(--premium-ease), translate .95s var(--premium-ease), clip-path 1.15s var(--premium-ease);
    transition-delay: calc(var(--reveal-order, 0) * 90ms);
}
.has-motion [data-reveal]:not(.is-revealed) { opacity: 0; translate: 0 30px; }
.has-motion [data-reveal="mask"]:not(.is-revealed) { opacity: 1; clip-path: inset(0 -10% 100% -10%); translate: 0 .35em; }
.has-motion [data-reveal="mask"].is-revealed { clip-path: inset(-15% -10% -30% -10%); }
.has-motion [data-reveal="image"]:not(.is-revealed) { opacity: 1; translate: none; clip-path: inset(100% 0 0 0); }
.has-motion [data-reveal="image"] { transition: clip-path 1.35s var(--premium-ease); }
.has-motion [data-reveal="image"] img { transition: scale 1.8s var(--premium-ease); }
.has-motion [data-reveal="image"]:not(.is-revealed) img { scale: 1.16; }

/* 4. Depth: parallax layers get room to travel without exposing their edges. */
.origin-photo > img[data-parallax] { inset: -9% 0; height: 118%; }
.hero-watermark[data-parallax], .origin-word[data-parallax], .collection-invitation > img[data-parallax] { will-change: translate; }

/* 5. Magnetic calls to action: the existing transitions plus `translate`. */
.hero-cta[data-magnetic] { transition: color 300ms ease, background 300ms ease, border-color 300ms ease, transform 300ms var(--premium-ease), translate 450ms var(--premium-ease); }
.story-enter[data-magnetic], .editorial-link[data-magnetic] { transition: translate 450ms var(--premium-ease); }

/* 6. Pointer spotlight on dark sections. */
[data-spotlight] { isolation: isolate; }
[data-spotlight]::after {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(560px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(255, 141, 109, .16), transparent 62%);
    opacity: 0; transition: opacity .6s ease;
}
[data-spotlight].is-lit::after { opacity: 1; }

/* 7. Cocktail selectors: curtain on the photograph, soft rise on the words. */
.ritual-visual.is-swapping, .recipe-image.is-swapping { animation: curtain .9s var(--premium-ease); }
.ritual-visual.is-swapping > img, .recipe-image.is-swapping img { animation: photo-settle 1.4s var(--premium-ease); }
.ritual-info.is-swapping > #ritual-profile,
.ritual-info.is-swapping > #ritual-name,
.ritual-info.is-swapping > #ritual-description { animation: text-swap .7s var(--premium-ease) backwards; }
.ritual-info.is-swapping > #ritual-name { animation-delay: .06s; }
.ritual-info.is-swapping > #ritual-description { animation-delay: .12s; }

/* 8. Interior pages: headers arrive like the home hero. */
.page-header h1 { animation: mask-up 1.15s .15s var(--premium-ease) backwards; }
.page-header p { animation: rise-in .95s .45s var(--premium-ease) backwards; }
.page-header::before { animation: fade-in 1.2s .1s ease backwards; }
.page-header::after { animation: ring-breathe 9s ease-in-out infinite alternate; }
.product-gallery img { animation: bottle-rise 1.3s .15s var(--premium-ease) backwards; }
.product-info > * { animation: rise-in .9s var(--premium-ease) backwards; }
.product-info > :nth-child(1) { animation-delay: .2s; }
.product-info > :nth-child(2) { animation-delay: .28s; }
.product-info > :nth-child(3) { animation-delay: .36s; }
.product-info > :nth-child(n + 4) { animation-delay: .44s; }

/* 9. Story voyage: the opening title and each chapter card. */
.story-intro .story-eyebrow { animation: rise-in .9s .15s var(--premium-ease) backwards; }
.page-culture .story-intro h1 { animation: mask-up 1.2s .3s var(--premium-ease) backwards; }
.story-intro-copy, .story-intro .story-enter { animation: rise-in .95s .65s var(--premium-ease) backwards; }

/* 10. Menu: the landscape slowly settles while the menu is open. */
.main-menu.open .menu-editorial img { animation: ken-burns 14s ease-out both; }
.menu-editorial { overflow: hidden; }

/* 11. Forms: feedback that matches the palette, and the invisible honeypot. */
.form-feedback { margin-top: 15px; padding: 12px 16px; color: var(--premium-navy); font-size: .9375rem; animation: rise-in .5s var(--premium-ease) backwards; }
.form-feedback--success { background: var(--premium-sky); }
.form-feedback--error { background: var(--premium-coral); }
.contact-form .form-feedback { margin: 0 0 20px; }
.form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* 12. Between pages: a short cross-fade where the browser supports it; the header stays put. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    body > header { view-transition-name: site-header; }
    ::view-transition-old(root) { animation: .32s var(--premium-ease) both vt-leave; }
    ::view-transition-new(root) { animation: .6s .08s var(--premium-ease) both vt-enter; }
}
@keyframes vt-leave { to { opacity: 0; translate: 0 -14px; } }
@keyframes vt-enter { from { opacity: 0; translate: 0 18px; } }

@media (max-width: 760px) {
    .brand-ribbon { padding-block: 18px; }
    .brand-ribbon__list li { gap: 26px; padding-right: 26px; }
    .origin-photo > img[data-parallax] { inset: -6% 0; height: 112%; }
}