/* ===== Animações extras — Fast Car ===== */
:root{--ease:cubic-bezier(.2,.7,.2,1)}

/* Entrada ao rolar (a regra antiga no index.html deixava tudo visível sem animar) */
.js-anim .reveal{opacity:0;transform:translateY(36px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js-anim .about-visual.reveal{transform:translateX(-50px)}
.js-anim .about-copy.reveal{transform:translateX(50px)}
.js-anim .reveal.visible{opacity:1;transform:none}

/* Itens de dentro dos blocos entram um depois do outro */
.js-anim .stagger>*{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease) calc(var(--i,0)*90ms + 150ms),transform .6s var(--ease) calc(var(--i,0)*90ms + 150ms)}
.js-anim .contact-list.stagger>*{transform:translateX(26px)}
.js-anim .stagger.in>*{opacity:1;transform:none}

/* Rótulos de seção: traço vermelho que se desenha */
.section-label::after{content:'';display:inline-block;width:0;height:2px;background:var(--red);margin-left:12px;vertical-align:middle;transition:width .9s var(--ease) .4s}
.visible .section-label::after,.in .section-label::after,.section-label.visible::after{width:40px}

/* Hero: linhas de velocidade e brilho sob o carro */
.landing{position:relative;isolation:isolate}
.landing::before{content:'';position:absolute;inset:10% -8% 10% 35%;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(100deg,transparent 0 46px,color-mix(in srgb,var(--red) 16%,transparent) 46px 48px,transparent 48px 130px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 35%,#000 65%,transparent);mask-image:linear-gradient(90deg,transparent,#000 35%,#000 65%,transparent);
  animation:speedLines 2.6s linear infinite}
@keyframes speedLines{to{background-position:-260px 0}}
.landing-photo{animation:carIdle 5s ease-in-out infinite}
@keyframes carIdle{50%{translate:0 -7px}}
.landing-photo::before{content:'';position:absolute;left:8%;right:8%;bottom:6%;height:20%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--red) 60%,transparent),transparent 70%);filter:blur(20px);animation:underGlow 3.2s ease-in-out infinite}
@keyframes underGlow{0%,100%{opacity:.35;transform:scaleX(.9)}50%{opacity:.9;transform:scaleX(1.05)}}
.hero:after,.scroll-progress{will-change:transform}
.scroll-progress{box-shadow:0 0 10px var(--red)}

/* Menu: sublinhado que desliza */
header nav a::before{content:'';position:absolute;left:0;right:0;bottom:-16px;height:2px;background:#ffffffb0;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
header nav a:hover::before{transform:scaleX(1)}
header nav a.active::before{display:none}
nav a.active:after{transform-origin:center;animation:navIn .4s var(--ease)}
@keyframes navIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:650px){header nav a::before{bottom:-13px}}
header{animation:headerIn .6s var(--ease) backwards}
@keyframes headerIn{from{transform:translateY(-100%)}to{transform:none}}

/* Cards: brilho passando na foto e inclinação 3D */
.visual::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 40%,#ffffff1f 50%,transparent 60%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.card:hover .visual::after{transform:translateX(120%)}
.arrow[href]{cursor:pointer;padding:4px 6px;margin:-4px -6px}
.arrow[href]:hover{color:#fff}
.arrow:not([href]){pointer-events:none;opacity:.35}
@media(hover:hover) and (pointer:fine){
  .grid .card:hover{transform:perspective(900px) translateY(-8px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .12s ease-out,border-color .25s,box-shadow .28s}
}

/* Botões: ondinha, confirmação e ponto voando para o carrinho */
.primary,.chip,.subtle{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;background:#ffffff59;transform:scale(0);animation:ripple .6s ease-out;pointer-events:none}
@keyframes ripple{to{transform:scale(1);opacity:0}}
.add-cart.added{background:#15954c;border-color:#15954c}
.fly-dot{position:fixed;left:0;top:0;width:18px;height:18px;border-radius:50%;background:var(--red);box-shadow:0 0 14px var(--red);z-index:60;pointer-events:none}
.toast{animation:toastIn .35s var(--ease)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,18px)}to{opacity:1;transform:translate(-50%,0)}}

/* WhatsApp flutuante pulsando */
.whatsapp-direct{animation:waPulse 2.8s ease-out infinite}
@keyframes waPulse{0%{box-shadow:0 0 0 0 #15954c8c,0 6px 25px #0006}70%,100%{box-shadow:0 0 0 18px #15954c00,0 6px 25px #0006}}

/* Chegada numa seção pelo menu */
.arrive>.section-label,.arrive h2,.arrive .toolbar,.arrive .about-visual,.arrive .contact-list{animation:arrive .9s var(--ease)}
@keyframes arrive{0%{opacity:.3;transform:translateY(16px)}100%{opacity:1;transform:none}}

/* Links de contato sem destino não parecem clicáveis */
.contact-list a:not([href]){cursor:default}
.contact-list a:not([href]) i{display:none}
.contact-list a[href] i{transition:transform .25s}
.contact-list a[href]:hover i{transform:translate(4px,-4px)}

/* Detalhes do produto (visão do cliente) */
.quick-view{width:780px}
.qv-body{display:grid;grid-template-columns:1fr 1fr}
.qv-photo{aspect-ratio:1;background:#000;display:flex;align-items:center;justify-content:center}
.qv-photo img{width:100%;height:100%;object-fit:contain;display:block}
.qv-info{padding:24px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.qv-desc{margin:0;color:#aaa;font-size:14px;line-height:1.7;overflow-wrap:anywhere}
.qv-price{margin:0;font-size:26px;font-weight:bold}
.qv-wa{background:#15954c;border-color:#15954c;display:inline-block;text-align:center}
.qv-wa:hover{background:#11793d}
.qv-wa:not([href]){opacity:.4;pointer-events:none}
.quick-view[open] .qv-photo img{animation:fadeIn .5s ease-out}
@media(max-width:650px){.qv-body{grid-template-columns:1fr}.qv-info{padding:18px}}

html.no-motion .js-anim .reveal,html.no-motion .js-anim .stagger>*{opacity:1!important;transform:none!important;transition:none!important}html.no-motion .landing::before,html.no-motion .landing-photo,html.no-motion .landing-photo::before,html.no-motion .whatsapp-direct,html.no-motion header,html.no-motion .arrive>*{animation:none!important}html.no-motion .ripple,html.no-motion .fly-dot{display:none}


/* Corrige letras do título que ficavam brancas na linha vermelha */
.landing h1 .letter-title .glyph,.landing h1 .letter-title .letter-word{color:inherit}

.motion-row{padding:0 0 25px}

/* Fotos do catálogo: proporção fixa 2:3 (1024 × 1536) */
.visual{aspect-ratio:2/3!important}
.qv-photo{aspect-ratio:2/3}
@media(min-width:651px){.quick-view{width:720px}}