/* CONSTANT — restrained, distinct motion for each content type. */
:root{--cm-gold:#d9bb88;--cm-ease:cubic-bezier(.22,.61,.36,1)}
html{scroll-behavior:smooth}

/* The opening photograph settles gently; copy stays readable throughout. */
.motion-hero{position:relative;isolation:isolate}
.motion-hero .hero-photo{transform:scale(1.04);transition:transform 750ms var(--cm-ease)}
.motion-hero.motion-hero-active .hero-photo{transform:scale(1)}
.motion-hero .hero-copy>.eyebrow{opacity:.72;transition:opacity 350ms ease}
.motion-hero .hero-copy>h1{opacity:.25;transform:translateY(18px);transition:opacity 550ms ease,transform 700ms var(--cm-ease)}
.motion-hero .hero-sub,.motion-hero .hero-text,.motion-hero .outline-btn{opacity:.8;transition:opacity 450ms ease 80ms}
.motion-hero.motion-hero-active .hero-copy>.eyebrow,.motion-hero.motion-hero-active .hero-copy>h1,
.motion-hero.motion-hero-active .hero-sub,.motion-hero.motion-hero-active .hero-text,.motion-hero.motion-hero-active .outline-btn{opacity:1;transform:none}

/* Headings use a short rule, without sliding or clipping their letters. */
.motion-section-title>div{position:relative}
.motion-section-title>div:after{content:'';display:block;width:64px;height:1px;margin-top:13px;background:var(--cm-gold);opacity:.35;transform:scaleX(.55);transform-origin:left;transition:transform 450ms var(--cm-ease),opacity 350ms ease}
.motion-section-title.motion-visible>div:after{opacity:.7;transform:scaleX(1)}
.motion-section-title h1,.motion-section-title h2{opacity:.25;transform:translateY(12px);transition:opacity 500ms ease,transform 600ms var(--cm-ease)}
.motion-section-title.motion-visible h1,.motion-section-title.motion-visible h2{opacity:1;transform:none}

/* Country tiles stay in place; only the photograph breathes into focus. */
.motion-country img{opacity:.3;transform:scale(1.07);transition:opacity 600ms ease,transform 1000ms var(--cm-ease);transition-delay:var(--cm-delay,0ms)}
.motion-country.motion-visible img{opacity:1;transform:scale(1)}

/* Logos fade in as a single mark, with no blur, stamp or metallic sweep. */
.motion-brand img,.motion-brand .brand-monogram{opacity:.12;transform:scale(.93);transition:opacity 550ms ease,transform 700ms var(--cm-ease);transition-delay:var(--cm-delay,0ms)}
.motion-brand.motion-visible img,.motion-brand.motion-visible .brand-monogram{opacity:1;transform:none}

/* The collection gets one small vertical entrance per product. */
.motion-product{opacity:.12;transform:translateY(22px);transition:opacity 500ms ease,transform 650ms var(--cm-ease),border-color 180ms ease,background 180ms ease;transition-delay:var(--cm-delay,0ms)}
.motion-product.motion-visible{opacity:1;transform:none}

/* Country captions follow the photograph with a quieter upward reveal. */
.motion-country>span,.motion-country>.country-place{opacity:.2;transform:translateY(12px);transition:opacity 550ms ease,transform 700ms var(--cm-ease);transition-delay:calc(var(--cm-delay,0ms) + 80ms)}
.motion-country.motion-visible>span,.motion-country.motion-visible>.country-place{opacity:1;transform:none}

/* Inner pages: a stable photograph and a small accent beside the copy. */
.motion-brand-hero-image{transform:scale(1.04);transition:transform 650ms var(--cm-ease)}
.motion-brand-hero-image.motion-visible{transform:scale(1)}
.motion-brand-hero-copy{position:relative;padding-inline-start:clamp(16px,2vw,28px);box-sizing:border-box}
.motion-brand-hero-copy:before{content:'';position:absolute;left:0;top:0;width:1px;height:100%;background:var(--cm-gold);opacity:.35;pointer-events:none;transition:opacity 350ms ease}
.motion-brand-hero-copy.motion-visible:before{opacity:.7}
.motion-brand-hero-copy>h1{opacity:.3;transform:translateX(12px);transition:opacity 500ms ease,transform 650ms var(--cm-ease)}
.motion-brand-hero-copy.motion-visible>h1{opacity:1;transform:none}
.motion-brand-logo{opacity:.65;transition:opacity 380ms ease}
.motion-brand-logo.motion-visible{opacity:.9}

/* Prices and specifications remain static and immediately readable. */
.motion-detail-photo{opacity:.25;transition:opacity 650ms ease}
.motion-detail-photo.motion-visible{opacity:1}
.motion-detail-section>.taste-notes{opacity:.85;transition:opacity 350ms ease}
.motion-detail-section.motion-visible>.taste-notes{opacity:1}

@keyframes cmViewEnter{from{opacity:.92}to{opacity:1}}
main.motion-view-entering{animation:cmViewEnter 180ms ease-out both}

@media(hover:hover) and (pointer:fine){
 .motion-country.motion-visible:hover img{transform:scale(1.025)}
}
@media(max-width:700px){
 .motion-product{transform:translateY(16px);transition-duration:450ms,580ms,180ms,180ms}
 .motion-product.motion-visible{transform:none}
 .motion-country img{transform:scale(1.05);transition-duration:550ms,850ms}
 .motion-country.motion-visible img{transform:scale(1)}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 .motion-hero .hero-photo,.motion-hero .hero-copy>*,.motion-section-title h1,.motion-section-title h2,
 .motion-section-title>div:after,.motion-country img,.motion-brand img,.motion-brand .brand-monogram,
 .motion-country>span,.motion-country>.country-place,.motion-product,.motion-brand-hero-image,.motion-brand-hero-copy:before,.motion-brand-hero-copy>h1,
 .motion-brand-logo,.motion-detail-photo,.motion-detail-section>.taste-notes,main.motion-view-entering{
  animation:none!important;transition:none!important;transform:none!important;opacity:1!important;
 }
}