/* ═══════════════════════════════════════════════════════════════
   MV AUTO MOTORES — fx-effects.css (tema claro / editorial)
   Efeitos imersivos (skill-imersivo) adaptados ao site claro:
   papel + navy + laranja. Brilhos viram sombras e linhas; decorativos
   com opacidade baixa. Estados no <html>:
   .fx-running | .fx-paused | .fx-has-intro | .fx-ready | .fx-soft (reduzir movimento)
═══════════════════════════════════════════════════════════════ */

:root {
  --fx-bg: var(--paper, #f5f3ef);
  --fx-ink: var(--navy, #182b49);
  --fx-muted: #c3c5c8;                 /* palavras ainda "apagadas" no WordReveal */
  --fx-line: rgba(24,43,73,.12);
  --fx-accent: #ef965d;                /* laranja claro: luz sobre o navy */
  --fx-accent-strong: var(--orange, #d76527);
  --fx-intro-bg: #101d33;              /* navy profundo da abertura */
  --fx-ease: cubic-bezier(.2,.7,.2,1);
}

.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ── Pausa global: abertura na tela / reduzir movimento ── */
.fx-paused #fx-stage *, .fx-paused #fx-stage *::before, .fx-paused #fx-stage *::after {
  animation-play-state: paused !important;
  transition-duration: 0s !important;
}
/* Modo suave ("reduzir movimento"): sem deslocamentos grandes; esmaecimentos, brilhos e a abertura continuam */
.fx-soft .fx-running.fx-ready .fx-reveal, .fx-soft.fx-running.fx-ready .fx-reveal { transform:none; }
.fx-soft .hero-float, .fx-soft .fx-dotted, .fx-soft .fx-radar, .fx-soft .fx-nudge { animation:none !important; }
.fx-soft .fx-marquee-track { animation-duration:90s !important; }
html.fx-has-intro, html.fx-has-intro body { overflow:hidden; }

/* ── Revelar ao entrar na tela (classe e atraso aplicados pelo JS) ──
   Só esconde quando o JS está pronto (.fx-ready): se o script falhar, nada some. */
.fx-running.fx-ready .fx-reveal {
  opacity:0; transform:translateY(40px);
  transition:opacity .8s cubic-bezier(.25,.46,.45,.94), transform .8s cubic-bezier(.25,.46,.45,.94);
  transition-delay:var(--fx-delay, 0ms);
}
.fx-running.fx-ready .fx-reveal.is-visible { opacity:1; transform:none; }

/* ── Título do hero se desenha de cima para baixo ──
   Durante a abertura ele já está pintado por baixo dela; a revelação começa
   no instante em que a abertura sai (.fx-revealing) e roda com .fx-running. */
.fx-running .fx-title-reveal, .fx-revealing .fx-title-reveal { animation:fx-title-reveal 1.4s var(--fx-ease) .15s both; }
@keyframes fx-title-reveal { from { clip-path:inset(0 0 100% 0); } to { clip-path:inset(-20% -10% -20% -10%); } }

/* ── Sinais de vida ── */
.fx-status-dot { display:inline-block; width:7px; height:7px; margin-right:10px; border-radius:50%; vertical-align:1px; background:var(--fx-accent-strong); box-shadow:0 0 0 0 rgba(215,101,39,.45); animation:fx-dot-pulse 2.6s ease-out infinite; }
@keyframes fx-dot-pulse { 0% { box-shadow:0 0 0 0 rgba(215,101,39,.45); } 70%,100% { box-shadow:0 0 0 9px rgba(215,101,39,0); } }
.region .fx-status-dot { background:var(--fx-accent); margin:0 0 0 8px; }
.fx-nudge { display:inline-block; animation:fx-nudge 3s ease-in-out infinite; }
@keyframes fx-nudge { 50% { transform:translateY(4px); } }

/* ── Hero: vídeo dentro da foto (pôster por baixo) + zoom no scroll ── */
.hero-frame > img, .hero-frame > video { will-change:transform; transform-origin:62% 50%; }
.hero-frame > video { pointer-events:none; }
.fx-js video[data-fx-video] { opacity:0; transition:opacity .35s ease; }
.fx-js video[data-fx-video].is-ready { opacity:1; }
@media (max-width:760px) { .hero-frame > img, .hero-frame > video { object-position:center; } }

/* ── Botões e links ── */
@media (hover:hover) {
  }
.fx-underline { position:relative; }
.fx-underline::after { content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:var(--fx-accent-strong); transform:scaleX(0); transform-origin:left; transition:transform .3s; }
.fx-underline:hover::after, .fx-underline:focus-visible::after { transform:scaleX(1); }
.text-link { background:linear-gradient(var(--fx-accent-strong),var(--fx-accent-strong)) left bottom / 0 1px no-repeat; transition:background-size .35s var(--fx-ease), color .2s; }
.text-link:hover { background-size:100% 2px; }

/* ── Como funciona: a linha do topo de cada passo se preenche com o scroll ── */
.steps article { position:relative; }
.steps article::before { content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--fx-accent-strong); transform:scaleX(var(--fx-fill,0)); transform-origin:left; }
html:not(.fx-js) .steps article::before { transform:scaleX(1); }

/* ── A MV: foto com parallax dentro de uma moldura que recorta ── */
.fx-clip { overflow:hidden; }
.fx-clip > img { will-change:transform; }

/* ── Parágrafo/título que acende palavra por palavra ── */
.fx-words > span[aria-hidden] { transition:color .15s linear; }

/* ── Atendimento (faixa navy): grade técnica + radar atrás dos estados ── */
.region { position:relative; overflow:hidden; isolation:isolate; }
.states { position:relative; }
.fx-region-deco { position:absolute; z-index:-1; pointer-events:none; top:50%; left:50%; width:min(460px, 130%); aspect-ratio:1; transform:translate(-50%,-50%); }
.fx-grid-bg { position:absolute; inset:-10%; background-image:linear-gradient(rgba(239,150,93,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(239,150,93,.09) 1px, transparent 1px); background-size:32px 32px; -webkit-mask-image:radial-gradient(circle, #000 20%, transparent 68%); mask-image:radial-gradient(circle, #000 20%, transparent 68%); }
.fx-radar { position:absolute; inset:6%; border:1px solid rgba(239,150,93,.18); border-radius:50%; background:conic-gradient(from 0deg, transparent 250deg, rgba(239,150,93,.16) 360deg); animation:fx-spin 18s linear infinite; }
.fx-radar::after { content:""; position:absolute; inset:22%; border:1px dashed rgba(239,150,93,.16); border-radius:50%; }
@keyframes fx-spin { to { transform:rotate(360deg); } }
@media (max-width:639px) { .fx-region-deco { display:none; } }

/* ── FAQ: acordeão com altura animada (substitui o display:none) ── */
.fq-ans { display:grid; grid-template-rows:0fr; opacity:0; visibility:hidden; padding:0 24px 0 51px; transition:grid-template-rows .4s var(--fx-ease), opacity .4s, visibility 0s .4s, padding .4s var(--fx-ease); }
.fq-ans > div { overflow:hidden; }
.fq.open .fq-ans { display:grid; grid-template-rows:1fr; opacity:1; visibility:visible; padding-bottom:22px; transition:grid-template-rows .4s var(--fx-ease), opacity .4s, visibility 0s, padding .4s var(--fx-ease); }
.fq-btn i::before { display:inline-block; transition:transform .3s var(--fx-ease); }
.fq.open .fq-btn i::before { transform:rotate(180deg); }
.fq-btn:hover .fq-q { color:var(--fx-accent-strong); }
.fq-q { transition:color .2s; }

/* ── Rodapé: linha de luz correndo no topo ── */
.fx-trace { position:relative; isolation:isolate; }
.fx-trace::before { content:""; position:absolute; left:0; right:0; top:0; height:1px; pointer-events:none; background:var(--line, #d9d9d4); }
.fx-trace::after { content:""; position:absolute; left:0; right:0; top:-1px; height:3px; pointer-events:none; background:linear-gradient(90deg, transparent 0%, transparent 44%, rgba(215,101,39,.85) 50%, transparent 56%, transparent 100%); background-size:300% 100%; animation:fx-trace 9s linear infinite; }
@keyframes fx-trace { from { background-position:150% 0; } to { background-position:-150% 0; } }

/* ── Reflexo passando dentro do texto (laranja, visível no fundo claro) ── */
.fx-sweep { position:relative; display:inline-block; }
.fx-sweep-light { position:absolute; inset:0; color:transparent; pointer-events:none; background-image:linear-gradient(110deg, transparent 40%, var(--fx-sweep, rgba(239,150,93,.95)) 50%, transparent 60%); background-size:300% 100%; background-repeat:no-repeat; -webkit-background-clip:text; background-clip:text; opacity:0; }
footer .fx-sweep-light { --fx-sweep:rgba(239,150,93,1); }
.fx-running .fx-sweep-light { animation:fx-sweep-right 10s linear infinite; }
.fx-sweep-light.dir-1, .fx-sweep-light.dir-3 { background-image:linear-gradient(0deg, transparent 40%, var(--fx-sweep, rgba(239,150,93,.95)) 50%, transparent 60%); background-size:100% 300%; }
.fx-running .fx-sweep-light.dir-1 { animation-name:fx-sweep-down; }
.fx-running .fx-sweep-light.dir-2 { animation-name:fx-sweep-left; }
.fx-running .fx-sweep-light.dir-3 { animation-name:fx-sweep-up; }
@keyframes fx-sweep-right { 0% { background-position:-100% 50%; opacity:1; } 30% { background-position:200% 50%; opacity:1; } 30.01%,100% { background-position:200% 50%; opacity:0; } }
@keyframes fx-sweep-left  { 0% { background-position:200% 50%; opacity:1; } 30% { background-position:-100% 50%; opacity:1; } 30.01%,100% { background-position:-100% 50%; opacity:0; } }
@keyframes fx-sweep-down  { 0% { background-position:50% -100%; opacity:1; } 30% { background-position:50% 200%; opacity:1; } 30.01%,100% { background-position:50% 200%; opacity:0; } }
@keyframes fx-sweep-up    { 0% { background-position:50% 200%; opacity:1; } 30% { background-position:50% -100%; opacity:1; } 30.01%,100% { background-position:50% -100%; opacity:0; } }

/* ═══════════════════════════════════════════════════════════════
   ABERTURA — quebra-cabeça de motor (fora de #fx-stage: não pausa)
═══════════════════════════════════════════════════════════════ */
.fx-intro { display:none; }
html.fx-has-intro .fx-intro {
  position:fixed; inset:0; z-index:10000; isolation:isolate; overflow:hidden;
  display:grid; place-items:center; padding:30px;
  background:var(--fx-intro-bg); color:#fff; font-family:'Inter', Arial, sans-serif;
  transition:opacity .85s ease, filter .85s ease;
}
.fx-intro.is-leaving { opacity:0; filter:blur(8px); pointer-events:none; }
.fx-intro-bg { position:absolute; inset:0; z-index:-3; background-size:cover; background-position:center 55%; filter:saturate(.45) brightness(.75); transition:opacity .45s ease; }
.fx-intro-shade { position:absolute; inset:0; z-index:-2; background:radial-gradient(ellipse at center, rgba(16,29,51,.80), rgba(16,29,51,.70)), linear-gradient(0deg, rgba(16,29,51,.95), transparent 70%); }
.fx-intro-trail { position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; }
.fx-intro-center { display:flex; flex-direction:column; align-items:center; text-align:center; width:min(640px,100%); transition:opacity .45s ease; }
.fx-engine { width:min(620px, 94vw, calc((100vh - 230px) * 1.42)); aspect-ratio:740/520; margin-bottom:4px; filter:drop-shadow(0 22px 40px rgba(0,0,0,.55)); }
.fx-engine svg { width:100%; height:100%; overflow:visible; }
.fx-engine.is-hit { animation:fx-hit .2s ease; }
@keyframes fx-hit { 30% { transform:translate(2px,-1px); } 65% { transform:translate(-2px,1px); } }
.fx-engine .ghost { fill:none; stroke:rgba(197,204,213,.38); stroke-width:1.3; stroke-dasharray:4 6; }
.fx-engine [data-part] { will-change:transform, opacity; }
.e-body   { fill:#1f3557; stroke:rgba(239,150,93,.75); stroke-width:2; }
.e-bore   { fill:#0b1526; stroke:rgba(239,150,93,.3); stroke-width:1; }
.e-rib    { stroke:rgba(255,255,255,.09); stroke-width:1.5; fill:none; }
.e-bolt   { fill:#a9b4c4; }
.e-steel  { fill:#a9b4c4; stroke:#e6eaf0; stroke-width:.8; }
.e-weight { fill:#2c4570; stroke:#a9b4c4; stroke-width:1.5; }
.e-rod    { stroke:#a9b4c4; stroke-width:7; stroke-linecap:round; }
.e-piston { fill:#2f4b7c; stroke:#ef965d; stroke-width:1.6; }
.e-ring   { stroke:rgba(239,150,93,.6); stroke-width:1.2; fill:none; }
.e-pan    { fill:#142742; stroke:rgba(239,150,93,.75); stroke-width:2; }
.e-head   { fill:#243d64; stroke:rgba(239,150,93,.85); stroke-width:2; }
.e-gasket { stroke:#d76527; stroke-width:2; }
.e-spring { stroke:#a9b4c4; stroke-width:3; stroke-dasharray:2 2.4; fill:none; }
.e-cover  { fill:#d76527; stroke:#f2b48b; stroke-width:2; }
.e-cap    { fill:#182b49; stroke:#f2b48b; stroke-width:1; }
.e-logo   { font:700 26px 'Barlow Condensed', Arial, sans-serif; fill:#f5f3ef; letter-spacing:.04em; }
.e-belt   { fill:none; stroke:#34507e; stroke-width:5; stroke-linejoin:round; }
.e-pulley { fill:#142742; stroke:#d76527; stroke-width:3; }
.e-spoke  { fill:#a9b4c4; stroke:#a9b4c4; stroke-width:3; stroke-linecap:round; }
.fx-engine.is-running .e-cover { filter:drop-shadow(0 0 14px rgba(215,101,39,.75)); }
.fx-engine.is-running .e-gasket { filter:drop-shadow(0 0 6px rgba(239,150,93,.9)); }
.fx-intro-tagline { font:700 1.3rem 'Barlow Condensed', Arial, sans-serif; text-transform:uppercase; letter-spacing:.04em; color:#c5ccd5; }
.fx-intro-progress { width:170px; height:2px; margin-top:26px; overflow:hidden; background:rgba(239,150,93,.2); }
.fx-intro-progress > span { display:block; width:100%; height:100%; transform-origin:left; transform:scaleX(0); background:#ef965d; }
.fx-intro-percent { font:500 28px ui-monospace, Consolas, monospace; letter-spacing:-.05em; color:#ef965d; margin-top:15px; }
.fx-intro-percent > span { font-size:12px; letter-spacing:0; margin-left:5px; }
.fx-intro-status { font:10px ui-monospace, Consolas, monospace; text-transform:uppercase; letter-spacing:.14em; color:#a9b4c4; margin-top:10px; min-height:20px; }
.fx-intro.is-preparing .fx-intro-bg, .fx-intro.is-preparing .fx-intro-center { visibility:hidden; opacity:0; }
@media (max-width:639px) { html.fx-has-intro .fx-intro { padding:16px; } .fx-intro-tagline { font-size:1.05rem; } }
@media (max-height:620px) { .fx-intro-progress { margin-top:14px; } .fx-intro-percent { font-size:22px; margin-top:8px; } }

.fx-noanim .fx-reveal { transition:none !important; }

/* ═══════════════════════════════════════════════════════════════
   EFEITOS EXTRAS
═══════════════════════════════════════════════════════════════ */

/* ── Cortina laranja revelando as fotos ao entrar na tela ── */
.fx-curtain-panel { position:absolute; inset:0; z-index:3; pointer-events:none; background:linear-gradient(100deg, var(--fx-accent-strong), #b9501a); transform:scaleX(1); transform-origin:right center; transition:transform 1.05s cubic-bezier(.77,0,.18,1) var(--fx-curtain-delay, 0ms); }
.fx-curtain.is-shown .fx-curtain-panel { transform:scaleX(0); }
.fx-curtain.service-img img { transition:transform 1.4s var(--fx-ease) var(--fx-curtain-delay, 0ms); }
.fx-curtain.service-img:not(.is-shown) img { transform:scale(1.18); }

/* ── Inclinação 3D + luz que segue o mouse (cartões) ── */
.fx-tilt-on { background-image:radial-gradient(circle at var(--fx-light-x,50%) var(--fx-light-y,50%), rgba(215,101,39,.12), transparent 42%); background-size:100% 100%; }
.fx-running .service.fx-tilt-on, .fx-running .steps article.fx-tilt-on { transform:perspective(1000px) rotateX(var(--fx-tilt-x,0deg)) rotateY(var(--fx-tilt-y,0deg)); }
.fx-running .service.fx-tilt-on:hover, .fx-running .steps article.fx-tilt-on:hover { transform:perspective(1000px) rotateX(var(--fx-tilt-x,0deg)) rotateY(var(--fx-tilt-y,0deg)) translateY(-6px); }

/* ── Botões magnéticos ── */
.fx-running .fx-magnetic { transform:translate(var(--fx-mx,0px), var(--fx-my,0px)); transition:transform .35s var(--fx-ease), translate .3s var(--fx-ease), box-shadow .3s, background .3s; }

/* ── Faixa de motores e serviços rolando ── */
.fx-marquee { overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.fx-marquee-track { display:flex; align-items:center; width:max-content; animation:fx-marquee 42s linear infinite; will-change:transform; }
.fx-marquee:hover .fx-marquee-track { animation-play-state:paused; }
@keyframes fx-marquee { to { transform:translateX(-50%); } }

/* ── Logo MV pontilhado flutuando no fundo do hero ── */
.fx-dotted { position:absolute; z-index:-1; left:-70px; bottom:-90px; width:min(440px, 46%); color:var(--fx-accent); opacity:.2; pointer-events:none; animation:fx-drift 26s linear infinite; }
.fx-dotted path { fill:none; stroke:currentColor; stroke-width:7; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:.3 26; animation:fx-dots 3s linear infinite; }
@keyframes fx-dots { to { stroke-dashoffset:-105.2; } }   /* 4 × (0,3 + 26): loop sem salto */
@keyframes fx-drift { 0%,100% { transform:translate3d(0,0,0) rotate(-5deg); } 25% { transform:translate3d(10px,-14px,0) rotate(0); } 50% { transform:translate3d(0,-26px,0) rotate(5deg); } 75% { transform:translate3d(-10px,-14px,0) rotate(0); } }
@media (max-width:760px) { .fx-dotted { width:300px; opacity:.14; left:auto; right:-80px; bottom:auto; top:-60px; } }

/* ── Profundidade no hero: camadas acompanham o mouse ── */
.fx-depth .hero-frame  { translate:calc(var(--fx-hx,0) * -12px) calc(var(--fx-hy,0) * -10px); transition:translate .6s var(--fx-ease); }
.fx-depth .hero-photo::before { translate:calc(var(--fx-hx,0) * 8px) calc(var(--fx-hy,0) * 6px); transition:translate .6s var(--fx-ease); }
.fx-depth .hero-badge  { translate:calc(var(--fx-hx,0) * 18px) calc(var(--fx-hy,0) * 12px); transition:translate .6s var(--fx-ease); }
.fx-depth .hero-float  { translate:calc(var(--fx-hx,0) * 22px) calc(var(--fx-hy,0) * 16px); transition:translate .6s var(--fx-ease); }
.fx-depth .hero-glow   { translate:calc(var(--fx-hx,0) * 40px) calc(-50% + var(--fx-hy,0) * 30px); transition:translate 1s var(--fx-ease); }

/* ── Cursor personalizado (só mouse) ── */
.fx-cursor-ring { position:fixed; left:0; top:0; z-index:9998; width:36px; height:36px; margin:-18px 0 0 -18px; pointer-events:none; opacity:0; transition:opacity .2s, width .25s var(--fx-ease), height .25s var(--fx-ease), margin .25s var(--fx-ease); will-change:transform; }
.fx-cursor-ring::before { content:""; position:absolute; inset:0; border-radius:50%; border:1.5px dashed rgba(215,101,39,.85); animation:fx-spin 4s linear infinite; }
.fx-cursor-ring.visible { opacity:1; }
.fx-cursor-ring.big { width:56px; height:56px; margin:-28px 0 0 -28px; }
.fx-cursor-ring.big::before { border-style:solid; border-color:var(--fx-accent-strong); background:rgba(215,101,39,.08); animation-duration:1s; }
.fx-cursor-ping { position:absolute; left:50%; top:50%; width:36px; height:36px; border-radius:50%; border:1.5px solid rgba(215,101,39,.7); animation:fx-cursor-ping .55s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes fx-cursor-ping { from { transform:translate(-50%,-50%) scale(.4); opacity:.8; } to { transform:translate(-50%,-50%) scale(2.2); opacity:0; } }