/* ===================== V3.6 — abertura cinematográfica + showroom vivo =====================
   Este arquivo carrega DEPOIS de home-v35.css e sobrescreve/estende só o essencial:
   abertura (intro-gate/intro-drive), carro da abertura e efeitos de luz do showroom.
   Mantém os mesmos IDs/classes já lidos por app-v35.js e intro-v36.js. */

/* ---------- Botão "Rever abertura": max-width do rótulo era menor que o texto
   ("Rever abertura" precisa de ~109px), cortando a última letra ao passar o mouse. ---------- */
.sound-replay:hover span{max-width:140px}

/* ---------- V3.8.2: entrada mais clara, confiável e visualmente focada ---------- */
.intro-gate{
  background:
    radial-gradient(720px 440px at 50% 18%,rgba(239,116,39,.13),transparent 68%),
    radial-gradient(520px 360px at 15% 88%,rgba(245,173,120,.055),transparent 72%),
    #06070a
}
.intro-gate::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:72px 72px;mask-image:radial-gradient(circle at 50% 46%,#000,transparent 76%);opacity:.45
}
.intro-content{
  width:min(580px,calc(100% - 32px));max-height:calc(100dvh - 28px);overflow:auto;scrollbar-width:none;
  padding:clamp(30px,4vw,48px);border:1px solid rgba(255,255,255,.09);border-radius:32px;
  background:linear-gradient(145deg,rgba(18,20,26,.88),rgba(7,8,11,.78));backdrop-filter:blur(22px);
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 42px 110px -45px #000,0 0 90px -65px rgba(239,116,39,.72);
  animation:introPanelIn382 .7s cubic-bezier(.2,.8,.2,1) both;
  text-align:left
}
.intro-content::-webkit-scrollbar{display:none}
.intro-content>*{position:relative;z-index:1}
.intro-top{display:flex;align-items:center;gap:18px;margin-bottom:30px}
.intro-top__meta{display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-width:0}
.intro-status{display:inline-flex;align-items:center;gap:8px;margin:0;padding:8px 12px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(255,255,255,.025);color:#b7bdc6;font:700 11px 'Source Sans 3',system-ui,sans-serif}
.intro-status span{width:7px;height:7px;border-radius:50%;background:#4fd19b;box-shadow:0 0 0 4px rgba(79,209,155,.12);animation:introStatusPulse382 1.8s ease-in-out infinite}
.intro-content .intro-mark{width:80px;height:80px;margin:0;flex:none;background:linear-gradient(145deg,#242730,#0a0b0f 70%);border-color:rgba(245,173,120,.32);box-shadow:inset 0 1px rgba(255,255,255,.1),0 28px 64px -28px rgba(239,116,39,.85)}
.intro-content .intro-kicker{font-family:'Archivo',system-ui,sans-serif;font-size:10px;letter-spacing:3.2px;color:#9a7c68}
.intro-content h1{font-family:'Archivo',system-ui,sans-serif;letter-spacing:-.045em;margin:0 0 14px}
.intro-content>p{max-width:440px;margin:0 0 22px;color:#b5bbc4;font:400 15px/1.55 'Source Sans 3',system-ui,sans-serif}
.intro-trust{display:flex;align-items:center;justify-content:flex-start;gap:8px 18px;flex-wrap:wrap;margin:0 0 30px;color:#9da4ae;font:600 11px 'Source Sans 3',system-ui,sans-serif}
.intro-trust span{position:relative;padding-left:12px}
.intro-trust span::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:#f5ad78}
.intro-actions{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.intro-enter,.intro-wa{width:100%;min-height:58px!important}
.intro-enter,.intro-wa{display:flex!important;align-items:center;gap:15px;padding-inline:22px!important;text-align:left}
.intro-btn__icon{width:33px;height:33px;border-radius:10px;display:grid;place-items:center;background:rgba(0,0,0,.16);font-size:11px;flex:none}
.intro-btn__label{flex:1 1 auto;min-width:0;line-height:1.05;text-align:left}
.intro-btn__label small{display:block;margin-top:4px;font:600 10px/1 'Source Sans 3',system-ui,sans-serif;opacity:.68;letter-spacing:.02em}
.intro-btn__arrow{font:700 19px/1 'Archivo',system-ui,sans-serif;flex:none;margin-left:6px;transition:transform .2s ease}
.intro-enter:hover .intro-btn__arrow,.intro-wa:hover .intro-btn__arrow{transform:translateX(3px)}
.intro-silent{min-height:38px;padding:8px 22px;border:0;border-radius:10px;background:transparent;color:var(--v3-muted2);width:100%;display:inline-flex;align-items:center;justify-content:flex-start;gap:9px;cursor:pointer;text-decoration:none!important;font:700 11px 'Source Sans 3',system-ui,sans-serif;transition:color .2s ease,background .2s ease}
.intro-silent svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.intro-silent:hover{color:#e3e5e9;background:rgba(255,255,255,.035)}
.intro-wa{margin-top:1px}
.intro-note{display:block;margin-top:17px;color:#6f7680;font:600 10px 'Source Sans 3',system-ui,sans-serif}
@keyframes introPanelIn382{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes introStatusPulse382{50%{box-shadow:0 0 0 8px rgba(79,209,155,.025)}}

/* ---------- Anel de giro no selo da tela de abertura ---------- */
.intro-mark{position:relative}
.intro-mark::before{
  content:"";position:absolute;inset:-9px;border-radius:28px;padding:2px;
  background:conic-gradient(from 0deg,rgba(255,122,26,0) 0deg,rgba(255,122,26,.95) 90deg,rgba(255,178,122,.18) 180deg,rgba(255,122,26,.95) 270deg,rgba(255,122,26,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:revRing36 2.6s linear infinite;opacity:.85;pointer-events:none
}
.intro-mark::after{content:"";position:absolute;inset:-17px;border:1px solid rgba(245,173,120,.08);border-radius:34px;animation:introOuterRing382 3s ease-in-out infinite;pointer-events:none}
.intro-content:has(#enterSound:hover) .intro-mark::before{animation-duration:.5s}
.intro-content:has(#enterSound:hover) .intro-mark{animation-duration:1s}
.intro-gate::after{content:"";position:absolute;inset:0;background:radial-gradient(600px 340px at 50% 18%,rgba(255,154,77,.10),transparent 70%);pointer-events:none}
@keyframes revRing36{to{transform:rotate(360deg)}}
@keyframes introOuterRing382{50%{inset:-22px;opacity:.2}}

/* ---------- Carro maior + giro de marcha lenta antes da arrancada ---------- */
.drive-car{width:168px}
.intro-drive.is-playing .drive-car{animation:driveLaunch36 3.4s cubic-bezier(.22,.7,.25,1) forwards}
.intro-drive.is-playing .drive-car svg{animation:engineIdle36 .1s linear 10}
@keyframes engineIdle36{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  25%{transform:translate(.6px,-.4px) rotate(.3deg)}
  50%{transform:translate(-.5px,.5px) rotate(-.3deg)}
  75%{transform:translate(.4px,.3px) rotate(.2deg)}
}
@keyframes driveLaunch36{
  0%{transform:translate(-50%,-50%) scale(.07) rotate(0deg);opacity:0}
  7%{opacity:1}
  28%{transform:translate(-50%,-50%) scale(.6) rotate(0deg);opacity:1}
  40%{transform:translate(-46%,-49%) scale(.82) rotate(1deg);opacity:1}
  66%{transform:translate(28%,-53%) scale(1.8) rotate(3deg);opacity:1}
  84%{transform:translate(88%,-57%) scale(2.05) rotate(4deg);opacity:1}
  100%{transform:translate(230%,-62%) scale(2.3) rotate(5deg);opacity:0}
}

/* ---------- Rastro de luz (motion blur) na arrancada, saindo para a direita ---------- */
.drive-trail{position:absolute;left:50%;top:54%;width:1px;height:1px;pointer-events:none;z-index:2}
.drive-trail i{position:absolute;left:0;height:4px;width:70px;border-radius:99px;background:linear-gradient(90deg,transparent,rgba(255,178,122,.7),transparent);opacity:0;transform-origin:left center}
.drive-trail i:nth-child(1){top:-34px}.drive-trail i:nth-child(2){top:-10px}.drive-trail i:nth-child(3){top:16px}.drive-trail i:nth-child(4){top:38px}
.intro-drive.is-playing .drive-trail i{animation:trailStreak36 1.9s ease-out both}
.intro-drive.is-playing .drive-trail i:nth-child(1){animation-delay:1.55s}
.intro-drive.is-playing .drive-trail i:nth-child(2){animation-delay:1.68s}
.intro-drive.is-playing .drive-trail i:nth-child(3){animation-delay:1.6s}
.intro-drive.is-playing .drive-trail i:nth-child(4){animation-delay:1.74s}
@keyframes trailStreak36{0%{opacity:0;transform:scaleX(.2) translateX(0)}18%{opacity:.85}100%{opacity:0;transform:scaleX(2.6) translateX(340px)}}

/* ---------- Facho de luz cruzando a tela perto do clímax ---------- */
.drive-lightsweep{position:absolute;inset:-20% -60%;background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.5) 49%,rgba(255,178,122,.35) 52%,transparent 58%);opacity:0;transform:translateX(-40%);pointer-events:none;z-index:1}
.intro-drive.is-playing .drive-lightsweep{animation:lightSweep36 3.4s ease forwards}
@keyframes lightSweep36{0%,70%{opacity:0;transform:translateX(-40%)}78%{opacity:.8}92%{opacity:0;transform:translateX(45%)}100%{opacity:0}}

/* ---------- Flare/flash com tom mais quente + retimados para 3.4s ---------- */
.drive-flare{background:radial-gradient(circle,#fff4de,rgba(255,90,26,.4) 52%,transparent 74%)}
.intro-drive.is-playing .drive-flare{animation:flareRun36 3.4s ease-out forwards}
@keyframes flareRun36{15%{opacity:.9}60%{transform:translate(-40%,-50%) scale(9);opacity:.65}100%{transform:translate(120%,-50%) scale(12);opacity:0}}
.drive-flash{background:radial-gradient(circle at 50% 55%,#fff6ea,#ffb27a 55%,transparent 78%)}
.intro-drive.is-playing .drive-flash{animation:flashRun36 3.4s ease forwards}
@keyframes flashRun36{0%,74%{opacity:0}80%{opacity:.55}90%,100%{opacity:0}}

/* ---------- Linhas de velocidade reagindo ao ritmo da arrancada ---------- */
.speed-lines{animation:speedMove .4s linear infinite,speedIntensity36 3.4s ease-in-out}
@keyframes speedIntensity36{0%,26%{opacity:.12}55%{opacity:.3}78%{opacity:.55}100%{opacity:.1}}

/* ---------- Tremor de câmera no pico da arrancada ---------- */
.intro-drive.is-playing{animation:camShake36 3.4s ease-in-out}
@keyframes camShake36{0%,60%{transform:translate(0,0)}63%{transform:translate(-2px,1px)}66%{transform:translate(3px,-2px)}69%{transform:translate(-2px,2px)}72%,100%{transform:translate(0,0)}}

/* ---------- Showroom: reflexo de luz sobre a lataria + calor do asfalto ---------- */
.showroom-sheen{position:absolute;inset:-6% -12%;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.35) 49%,rgba(255,178,122,.22) 53%,transparent 62%);mix-blend-mode:overlay;opacity:0;transform:translateX(-70%);pointer-events:none;animation:sheenSweep36 6.5s ease-in-out infinite}
@keyframes sheenSweep36{0%,58%{transform:translateX(-70%);opacity:0}62%{opacity:.7}84%{transform:translateX(70%);opacity:.7}90%,100%{opacity:0;transform:translateX(70%)}}
.showroom-heat{position:absolute;left:50%;bottom:108px;width:300px;height:46px;transform:translateX(-50%);background:linear-gradient(180deg,rgba(255,150,90,.16),transparent 80%);filter:blur(6px);opacity:.55;animation:heatHaze36 2.6s ease-in-out infinite;pointer-events:none}
@keyframes heatHaze36{0%,100%{transform:translateX(-50%) scaleY(1) skewX(0deg)}50%{transform:translateX(-50%) scaleY(1.18) skewX(-2deg)}}

/* ---------- Roda/farol/lanterna do carro embutido (via <use>): estado passa por
   variáveis CSS herdadas — ver o <style> dentro do <symbol id="sportsCar"> no HTML.
   Seletor externo direto (ex. ".showroom-car .taillight{fill:...}") NÃO alcança o
   conteúdo clonado por <use> neste engine; só herança de custom properties alcança. ---------- */
.intro-drive .drive-car svg{--sc-wheel:wheelSpin .35s linear infinite}
.intro-drive.is-playing .drive-car svg{--sc-wheel:wheelSpin .14s linear infinite;--sc-wheel-glow:drop-shadow(0 0 1px rgba(255,178,122,.3))}
.showroom[data-story="released"] .showroom-car{--sc-wheel:wheelSlow .38s linear infinite}
.showroom[data-story="held"] .showroom-car{--sc-tail-anim:tailPulseHeld36 1.6s ease-in-out infinite}
.showroom[data-story="processing"] .showroom-car{--sc-tail-op:.55}
.showroom[data-story="released"] .showroom-car{--sc-tail-fill:#4fd19b;--sc-tail-filter:drop-shadow(0 0 6px rgba(79,209,155,.8))}
@keyframes tailPulseHeld36{0%,100%{filter:drop-shadow(0 0 2px rgba(255,122,26,.4))}50%{filter:drop-shadow(0 0 9px rgba(255,90,26,.9))}}

@media(max-width:820px){.showroom-heat{bottom:92px;width:210px}}
@media(max-width:560px){
  .showroom-heat{bottom:75px;width:170px}
  .intro-content{width:calc(100% - 22px);padding:28px 18px 24px;border-radius:25px}
  .intro-top{gap:12px;margin-bottom:24px}
  .intro-top__meta{gap:7px}
  .intro-status{font-size:9.5px;padding:7px 10px}
  .intro-content .intro-mark{width:56px;height:56px}
  .intro-content h1{font-size:clamp(30px,9.2vw,37px)}
  .intro-content>p{font-size:13px;max-width:330px}
  .intro-trust{gap:7px 12px;font-size:10px;margin-bottom:24px}
  .intro-enter,.intro-wa{min-height:54px!important}
  .intro-btn__icon{width:30px;height:30px}
  .intro-note{margin-top:13px}
}

@media(max-height:700px) and (min-width:561px){.intro-content{padding:25px 34px}.intro-top{margin-bottom:20px}.intro-content .intro-mark{width:68px;height:68px}.intro-content>p{margin-bottom:13px}.intro-trust{margin-bottom:16px}.intro-enter,.intro-wa{min-height:50px!important}.intro-note{margin-top:10px}}
@media(prefers-reduced-motion:reduce){.intro-mark::before,.intro-mark::after,.intro-status span,.intro-content{animation:none!important}.showroom-sheen,.showroom-heat{animation:none!important;opacity:0!important}}