/* Ló Automóveis / camada de "talento": motion, microinterações e refino.
   Progressiva e reversível: nada aqui é essencial para ler o conteúdo.
   O reveal só esconde algo quando o JS marca <html class="js-motion">.
   Entradas usam fill 'backwards' (e 'to' == estado base) para nunca
   sobrescrever hover/transições depois que terminam. */

/* ---------- Reveal com stagger (grids) e rise (blocos) ---------- */
.js-motion [data-stagger]:not(.is-in) > *{opacity:0;transform:translateY(34px) scale(.955)}
.js-motion [data-stagger] > *{transition:opacity .72s var(--ease),transform .72s var(--ease);transition-delay:calc(var(--i,0) * 75ms)}
.js-motion [data-rise]:not(.is-in){opacity:0;transform:translateY(44px)}
.js-motion [data-rise]{transition:opacity .8s var(--ease),transform .8s var(--ease)}

/* ---------- Hero: entrada coreografada (CSS puro) ---------- */
@keyframes heroRise{from{transform:translateY(28px)}to{transform:translateY(0)}}
@keyframes heroLineIn{from{opacity:0;transform:rotate(-40deg) scale(.5)}to{opacity:1;transform:rotate(-40deg) scale(1)}}
@keyframes floatIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes photoIn{from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes lineUp{from{transform:translateY(112%)}to{transform:translateY(0)}}

.hero-copy > *{animation:heroRise 1s var(--ease) backwards}
.hero-eyebrow{animation-delay:.05s}
.hero-copy h1{animation-delay:.16s}
.hero-description{animation-delay:.3s}
.hero-cta{animation-delay:.42s}
.hero-signature{animation-delay:.52s}
.hero-line{animation:heroLineIn 1.7s var(--ease) backwards}
.hero-bottom{animation:heroRise 1s var(--ease) .7s backwards}

/* foto do hero: a imagem é o LCP, então pinta já visível (sem opacity:0);
   só um leve movimento de escala. fill backwards para o hover/parallax
   voltarem a funcionar depois. */
.hero-photo{animation:photoIn 1.1s var(--ease) backwards}

/* título do hero revelado linha a linha (quando o JS fatia em .hl-mask) */
.hero-copy h1.hl-split{animation:none;opacity:1}
.hero-copy h1 .hero-accent{color:#62b9ff}
.hl-mask{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.hl-line{display:block;transform:translateY(112%);animation:lineUp .95s var(--ease) both;animation-delay:calc(.18s + var(--l,0) * .12s)}

/* page-hero das páginas internas */
.page-hero .shell > *{animation:heroRise .9s var(--ease) backwards}
.page-hero .shell > .eyebrow{animation-delay:.05s}
.page-hero .shell > h1{animation-delay:.15s}
.page-hero .shell > p:last-child{animation-delay:.28s}

/* ---------- Favoritar: "pop" ao marcar ---------- */
@keyframes favPop{0%{transform:scale(1)}30%{transform:scale(1.42)}60%{transform:scale(.88)}100%{transform:scale(1)}}
.favorite-button.is-pop{animation:favPop .46s var(--ease)}
.favorite-button.is-pop svg{filter:drop-shadow(0 0 8px #0a7be966)}

/* ---------- Microinterações nos cards ---------- */
.car-card{will-change:transform}
.car-card:hover{transform:translateY(-8px);box-shadow:0 26px 54px #19394f1f;border-color:#a3bccd}
.car-card:hover .car-image-link img{transform:scale(1.07)}
.car-details{transition:background .25s,color .25s,transform .35s var(--ease)}
.car-card:hover .car-details{transform:translateX(3px)}
.car-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,#0618268f 100%);opacity:0;transition:opacity .35s var(--ease);pointer-events:none;z-index:1}
.car-card:hover .car-media::after{opacity:.55}

/* ---------- Botões: feedback tátil ---------- */
.button:active{transform:scale(.97)}
.category-tab:active,.favorite-button:active,.car-details:active,.icon-button:active{transform:scale(.93)}

/* ---------- Nav: sublinhado que cresce ---------- */
.main-nav > a::after{content:"";position:absolute;left:0;right:100%;bottom:3px;height:2px;border-radius:2px;background:#5bb5fb;opacity:0;transition:right .34s var(--ease),opacity .34s var(--ease)}
.main-nav > a:hover::after{right:0;opacity:.85}
.main-nav > a.is-current::after{right:0;opacity:.6}

/* ---------- Setas/links que andam ---------- */
.text-link svg,.experience-bottom > a svg,.hero-vehicle-price > span svg,.car-details svg{transition:transform .3s var(--ease)}
.text-link:hover svg,.experience-bottom > a:hover svg{transform:translate(3px,-3px)}
.hero-vehicle-price:hover > span svg{transform:translateX(4px)}

/* ---------- Preços com números tabulares ---------- */
.car-price-row > strong,.hero-vehicle-price strong,.detail-price,.qv__price strong,.compare-table strong,.experience-years > strong{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- Botão flutuante ---------- */
.floating-contact{animation:floatIn .6s var(--ease) 1.1s backwards}

/* ---------- Detalhe: realces ---------- */
.detail-selo,.detail-opt{transition:transform .25s var(--ease),background .25s,border-color .25s,box-shadow .25s}
.detail-opt:hover{transform:translateY(-3px);box-shadow:0 10px 24px #19394f12}
.dgal-thumb{transition:opacity .25s,border-color .25s,transform .25s var(--ease)}
.dgal-thumb:hover{transform:translateY(-3px)}
.similar-card{transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.similar-card:hover{transform:translateY(-6px);box-shadow:0 22px 46px #19394f16}
.similar-card .similar-media img{transition:transform .8s var(--ease)}
.similar-card:hover .similar-media img{transform:scale(1.06)}

/* ---------- Timeline (sobre) ---------- */
.timeline li{transition:transform .3s var(--ease)}
.timeline li:hover{transform:translateX(5px)}

/* ---------- Galeria da loja: lupinha + lightbox ---------- */
.store-shot{cursor:zoom-in}
.store-shot img{cursor:zoom-in}
body.v2-lb-open{overflow:hidden}
.v2-lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:5vmin;background:#061626f2;backdrop-filter:blur(7px);opacity:0;transition:opacity .25s var(--ease)}
.v2-lb.is-open{opacity:1}
.v2-lb__img{max-width:100%;max-height:100%;border-radius:10px;box-shadow:0 30px 90px #00000066;transform:scale(.96);transition:transform .3s var(--ease)}
.v2-lb.is-open .v2-lb__img{transform:scale(1)}
.v2-lb__close,.v2-lb__nav{position:absolute;display:grid;place-items:center;color:#fff;background:#ffffff14;border:1px solid #ffffff33;border-radius:50%;transition:background .2s,transform .2s var(--ease)}
.v2-lb__close{top:18px;right:18px;width:46px;height:46px}
.v2-lb__nav{top:50%;transform:translateY(-50%);width:52px;height:52px}
.v2-lb__prev{left:18px}
.v2-lb__next{right:18px}
.v2-lb__next svg{transform:rotate(180deg)}
.v2-lb__close:hover{background:#ffffff28}
.v2-lb__nav:hover{background:#ffffff28}
.v2-lb__close:active,.v2-lb__nav:active{transform:scale(.92)}
.v2-lb__nav:active{transform:translateY(-50%) scale(.92)}
.v2-lb__count{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:#dfe9f0;font-size:12px;letter-spacing:1px;background:#0b253db3;border:1px solid #ffffff1f;padding:5px 14px;border-radius:20px}
@media(max-width:720px){.v2-lb__nav{width:44px;height:44px}.v2-lb__prev{left:8px}.v2-lb__next{right:8px}.v2-lb__close{top:10px;right:10px}}

/* ---------- Badges do card: destaque de capa (selo verde) ---------- */
.car-badges{position:absolute;left:15px;top:15px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:7px;max-width:calc(100% - 60px)}
.car-badges .car-badge{position:static;max-width:100%}
.car-badge--selo{background:#13a074ec;border-color:transparent;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.car-badge--novo{background:#0879ebf2;border-color:transparent;color:#fff;letter-spacing:.3px}
.car-badge--selo svg{flex:none}
@media(max-width:720px){.car-badges{left:10px;top:10px;gap:5px}}

/* ---------- Seção troca: foto real no lugar do abstrato ---------- */
.trade-art{position:relative;isolation:isolate;background:var(--navy)}
.trade-art::before,.trade-art::after{display:none!important}
.trade-art-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.trade-art-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,#061626e0 0%,#071c327a 55%,#0b3a63ad 100%)}
.trade-art .trade-arrow{position:relative;z-index:2;background:#fff;color:var(--blue);box-shadow:0 22px 55px #0000004d}
.trade-art .trade-art-caption{z-index:2;color:#eef3f7;text-shadow:0 1px 12px #00000055}

/* ---------- Respeito a reduced-motion e touch ---------- */
@media(prefers-reduced-motion:reduce){
  .js-motion [data-stagger]:not(.is-in) > *,
  .js-motion [data-rise]:not(.is-in){opacity:1!important;transform:none!important}
  .hero-copy > *,.hero-line,.hero-bottom,.hero-photo,.hl-line,
  .page-hero .shell > *,.floating-contact{animation:none!important}
  .hl-line{transform:none!important}
  .car-media::after{display:none}
}
@media(hover:none){
  .main-nav > a::after{display:none}
  .car-media::after{display:none}
  .car-card:hover{transform:none}
}

/* ---------- Rodapé: institucional, acessibilidade, crédito do dev ---------- */
.footer-legal{display:inline-flex;flex-wrap:wrap;gap:16px}
.footer-legal a{color:#5d7e95}
.footer-legal a:hover{color:var(--blue)}
.footer-sign{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 0 22px;border-top:1px solid #dbe3e9;color:#8a9aa7;font-size:11px}
.footer-sign a{color:#5d7e95;text-decoration:underline}
.footer-sign a:hover{color:var(--blue)}
.footer-a11y{display:inline-flex;align-items:center;gap:7px}
.footer-dev a{font-weight:650}
@media(max-width:720px){.footer-sign{flex-direction:column;align-items:flex-start;gap:8px}}

/* ---------- Banner de cookies (LGPD) ---------- */
.cookie-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:120;max-width:760px;margin-inline:auto;display:flex;align-items:center;gap:18px;background:var(--navy);color:#eaf1f6;border:1px solid #ffffff22;border-radius:12px;padding:14px 18px;box-shadow:0 16px 46px #0a253340;font-size:13px;animation:floatIn .5s var(--ease) both}
.cookie-bar p{margin:0;line-height:1.55}
.cookie-bar a{color:#7fc4ff;text-decoration:underline}
.cookie-bar .button{flex:none;min-height:40px;padding:10px 22px;font-size:13px}
.cookie-open .floating-contact{bottom:96px}
@media(max-width:560px){.cookie-bar{flex-direction:column;align-items:stretch;text-align:center;bottom:12px;left:10px;right:10px}.cookie-bar .button{width:100%}.cookie-open .floating-contact{display:none}}
@media(prefers-reduced-motion:reduce){.cookie-bar{animation:none}}
/* Acessibilidade (WCAG AA): rodape institucional com contraste suficiente em fundo claro. */
.footer-legal a,.footer-sign,.footer-sign a,.footer-a11y,.footer-dev{color:var(--muted)}
/* Performance mobile: no celular o titulo do hero pinta na hora (sem o recorte
   linha a linha, que o escondia e segurava o LCP/FCP). No desktop o efeito fica. */
@media(max-width:720px){.hl-mask{overflow:visible}.hl-line{transform:none;animation:none}}