/* Oleriano Essence — camada de movimento (somente animações, sem novas cores).
   Estados "escondidos" só existem com html.mo (classe posta pelo script do <head>, que
   nunca a põe com prefers-reduced-motion e a remove sozinho se o motion.js não iniciar). */

:root{--mo-out:cubic-bezier(.22,1,.36,1);--mo-soft:cubic-bezier(.33,1,.68,1)}

/* ---------- Estados iniciais (evita "piscar" antes da animação de entrada) ---------- */
html.mo .slide[data-slide="0"] img:not(.mo-done){opacity:0;transform:scale(1.05)}
html.mo .intro>.eyebrow:not(.mo-done),
html.mo .intro>h1:not(.mo-done),
html.mo .intro>.lead:not(.mo-done),
html.mo .intro>.button:not(.mo-done),
html.mo [data-reveal]{opacity:0;transform:translateY(18px)}

/* zoom-out do hero fica dentro do quadro */
.slides{overflow:hidden}

/* ---------- Brilho de prata no logo (uma única passada) ---------- */
.brand{position:relative}
.mo-shine{position:absolute;left:0;top:50%;width:54px;height:54px;margin-top:-27px;pointer-events:none;overflow:hidden;
 -webkit-mask:url(assets/logo.webp) center/contain no-repeat;mask:url(assets/logo.webp) center/contain no-repeat}
.mo-shine b{position:absolute;top:0;bottom:0;left:-20%;width:140%;opacity:0;
 background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%)}
@media(max-width:767px){.mo-shine{width:42px;height:42px;margin-top:-21px}}

/* ---------- Cabeçalho: ao rolar fica sólido, com linha fina e mais compacto ---------- */
/* O layout não muda (sem pulo de conteúdo): só a camada de fundo e o conteúdo se movem por transform. */
html.mo header{background:transparent;border-bottom-color:transparent}
html.mo header::before{content:"";position:absolute;left:0;right:0;top:0;bottom:-1px;z-index:-1;pointer-events:none;
 background:var(--paper);box-shadow:inset 0 -1px 0 var(--line);opacity:0;
 transition:opacity .5s var(--mo-soft),transform .5s var(--mo-soft)}
html.mo header .nav{transition:transform .5s var(--mo-soft)}
html.mo header .brand{transform-origin:left center;transition:transform .5s var(--mo-soft)}
html.mo header.mo-stuck::before{opacity:1;transform:translateY(-14px)}
html.mo header.mo-stuck .nav{transform:translateY(-7px)}
html.mo header.mo-stuck .brand{transform:scale(.92)}

/* ---------- FAQ: a resposta fica num contêiner cuja altura o JS anima ---------- */
.mo-collapse{display:block}

@media (prefers-reduced-motion:no-preference){

/* ---------- Links do menu: sublinhado prata que cresce da esquerda ---------- */
.nav nav a{position:relative}
.nav nav a::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1px;background:var(--gold);
 transform:scaleX(0);transform-origin:right center;transition:transform .4s var(--mo-out)}
.nav nav a:focus-visible::after{transform:scaleX(1);transform-origin:left center}
@media(hover:hover){.nav nav a:hover::after{transform:scaleX(1);transform-origin:left center}}
@media(max-width:767px){.nav nav a::after{bottom:3px}}

/* ---------- Botões: leve elevação e mudança de tom ---------- */
.button,.gift-btn,.cart-btn,.wa-float,.cep-row button,.kit-hint-btn{
 transition:transform .3s var(--mo-out),background-color .3s ease,border-color .3s ease,color .3s ease}
.button{position:relative}
.button::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:0 8px 18px rgba(38,40,44,.18);opacity:0;transition:opacity .3s ease}
@media(hover:hover){
 .button:not(:disabled):hover,.gift-btn:hover,.cart-btn:hover,.wa-float:hover{transform:translateY(-2px)}
 .button:not(:disabled):hover::after{opacity:1}
}
.button:not(:disabled):active,.gift-btn:active,.cart-btn:active,.wa-float:active{transform:none}

/* ---------- Cards: zoom muito leve, dentro do próprio quadro ---------- */
.product-card{transition:border-color .3s ease}
.product-open>img{transition:transform .4s var(--mo-out)}
.card-copy{position:relative;z-index:1;background:#fff}
@media(hover:hover) and (pointer:fine){
 .product-open:hover>img{transform:scale(1.04);will-change:transform}
}

/* ---------- Modais (produto, conjunto) e carrinho: fade + escala 0.97 -> 1 ---------- */
dialog{opacity:0;transform:scale(.97);
 transition-property:opacity,transform,overlay,display;transition-duration:.4s;
 transition-timing-function:var(--mo-soft);transition-behavior:allow-discrete}
dialog[open]{opacity:1;transform:none;transition-duration:.6s;transition-timing-function:var(--mo-out)}
@starting-style{dialog[open]{opacity:0;transform:scale(.97)}}
.cart-dialog{transform-origin:right center}
dialog::backdrop{opacity:0;
 transition-property:opacity,overlay,display;transition-duration:.4s;
 transition-timing-function:ease;transition-behavior:allow-discrete}
dialog[open]::backdrop{opacity:1;transition-duration:.6s}
@starting-style{dialog[open]::backdrop{opacity:0}}
}