/* Domenic Edições — "IGNIÇÃO" · base, loader, nav, HUD */
:root{
  --void:#050607; --asphalt:#0b0d10; --panel:#0f1215; --line:rgba(243,240,236,.1); --line2:rgba(243,240,236,.18);
  --steel:#8a9196; --warm:#f3f0ec; --white:#fff; --red:#de002c; --red-hot:#ff2a45; --ember:#ff7a2e;
  --disp:'Montserrat', 'Arial Black', sans-serif; --body:'Inter', system-ui, sans-serif; --mono:'JetBrains Mono', ui-monospace, monospace;
  --m:5vw; --cine:cubic-bezier(.83,0,.17,1); --out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--void);color:var(--warm);overflow-x:clip;-webkit-text-size-adjust:100%}
body{font-family:var(--body);font-size:18px;line-height:1.6;background:var(--void);overflow-x:clip}
body.is-loading{overflow:hidden;height:100vh}
a{color:inherit;text-decoration:none}
img,video,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red-hot);outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.wrap{padding-left:var(--m);padding-right:var(--m);max-width:1680px;margin:0 auto}
.label{color:var(--steel);display:flex;align-items:center;gap:12px;margin-bottom:34px}
.label b{color:var(--red);font-weight:600}
.label::after{content:"";height:1px;width:72px;background:linear-gradient(90deg,var(--red),transparent)}
.wd-mask,.ch-mask,.ln-mask{padding-top:.3em;margin-top:-.3em;padding-bottom:.14em;margin-bottom:-.14em}

/* botões */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 28px;border-radius:999px;font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;overflow:hidden;isolation:isolate;transition:transform .5s var(--out)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.btn--red{background:var(--red);color:#fff;box-shadow:0 0 0 1px rgba(255,42,69,.5),0 10px 40px -10px rgba(222,0,44,.8),inset 0 1px 0 rgba(255,255,255,.25)}
.btn--red::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--out)}
.btn--red:hover::before{transform:translateX(120%)}
.btn--ghost{border:1px solid var(--line2);color:var(--warm);background:rgba(5,6,7,.35);backdrop-filter:blur(6px)}
.btn--ghost:hover{border-color:var(--red)}
.btn--sm{height:44px;padding:0 20px;font-size:11px}
.btn--xl{height:76px;padding:0 40px;font-size:clamp(16px,1.6vw,22px);letter-spacing:.06em;gap:16px}
.btn--xl .wa{width:28px;height:28px;fill:#fff;stroke:none}
.btn:hover{transform:translateY(-2px)}

/* grão de filme */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}

/* retícula (cursor) */
.reticle{position:fixed;left:0;top:0;z-index:200;pointer-events:none;width:42px;height:42px;margin:-21px 0 0 -21px;transition:width .35s var(--out),height .35s var(--out),margin .35s var(--out)}
.reticle i{position:absolute;inset:0;border:1px solid rgba(243,240,236,.55);border-radius:50%;clip-path:polygon(0 0,35% 0,35% 100%,65% 100%,65% 0,100% 0,100% 35%,0 35%,0 65%,100% 65%,100% 100%,0 100%)}
.reticle b{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:var(--red-hot);box-shadow:0 0 10px var(--red)}
.reticle.is-link{width:78px;height:78px;margin:-39px 0 0 -39px}
.reticle.is-link i{border-color:var(--red-hot);animation:spin 3s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (min-width:901px) and (hover:hover){body{cursor:none}a,button{cursor:none}}
@media (max-width:900px),(hover:none){.reticle{display:none}}

/* ── IGNIÇÃO (loader) ── */
.boot{position:fixed;inset:0;z-index:300;color:var(--warm)}
.boot__door{position:absolute;left:0;right:0;height:50.5%;background:var(--void)}
.boot__door--t{top:0;border-bottom:1px solid rgba(222,0,44,.0)}
.boot__door--b{bottom:0}
.boot__in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:28px var(--m)}
.boot__top,.boot__bottom{display:flex;justify-content:space-between;color:var(--steel)}
.boot__center{align-self:center;display:grid;justify-items:center;position:relative}
.tach--boot{width:min(300px,62vw);height:auto;overflow:visible}
.boot__rpm{margin-top:-86px;font-family:var(--mono);font-weight:600;font-size:34px;letter-spacing:.04em;display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}
.boot__rpm small{font-size:11px;color:var(--steel);letter-spacing:.2em}
.boot__brand{margin-top:56px;font-family:var(--disp);font-weight:900;font-size:clamp(30px,4.2vw,52px);line-height:.95;letter-spacing:-.03em;text-align:center}
.boot__brand b{display:block;font-weight:900;color:var(--white)}
.boot__brand i{display:block;font-style:normal;color:var(--red);text-shadow:0 0 30px rgba(222,0,44,.55)}
.boot__log{margin-top:22px;color:var(--steel);font-size:11px;min-height:1.5em}

/* conta-giros */
.tach__track{fill:none;stroke:rgba(243,240,236,.12);stroke-width:3}
.tach__red{fill:none;stroke:var(--red);stroke-width:7;opacity:.85}
.tach__fill{fill:none;stroke:var(--warm);stroke-width:3;stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 6px rgba(255,255,255,.35))}
.tach__ticks line{stroke:rgba(243,240,236,.45);stroke-width:1.4}
.tach__ticks line.big{stroke:var(--warm);stroke-width:2.4}
.tach__ticks line.hot{stroke:var(--red-hot)}
.tach__ticks text{fill:var(--steel);font-family:var(--mono);font-size:10px;text-anchor:middle;dominant-baseline:middle}
.tach__needle{stroke:var(--red-hot);stroke-width:3;stroke-linecap:round;transform-origin:100px 100px;transform:rotate(-135deg);filter:drop-shadow(0 0 6px var(--red))}
.tach__hub{fill:var(--void);stroke:var(--red-hot);stroke-width:2}

/* ── NAV ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:120;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px var(--m);transition:transform .7s var(--out),background .4s}
.nav.is-hidden{transform:translateY(-110%)}
.nav.is-solid{background:linear-gradient(180deg,rgba(5,6,7,.85),rgba(5,6,7,0))}
.brand{display:flex;align-items:center;gap:12px}
.brand__mark{width:34px;height:34px;border-radius:7px;background:var(--warm);position:relative;flex:none;clip-path:path('M0 0H17C27 0 34 7 34 17S27 34 17 34H0Z')}
.brand__mark::after{content:"";position:absolute;left:9px;top:9px;width:12px;height:16px;background:var(--red);clip-path:path('M0 0H4C9 0 12 3.5 12 8S9 16 4 16H0Z')}
.brand__name{font-family:var(--disp);font-weight:900;font-size:15px;line-height:.92;letter-spacing:-.02em;display:grid}
.brand__name b{font-weight:900;color:var(--white)}
.brand__name i{font-style:normal;color:var(--red)}
.nav__links{display:flex;gap:30px;color:rgba(243,240,236,.75)}
.nav__links a{position:relative;padding:6px 0}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--out)}
.nav__links a:hover::after,.nav__links a.is-on::after{transform:scaleX(1);transform-origin:left}
.nav__links a.is-on{color:var(--white)}
@media (max-width:1000px){.nav__links{display:none}}
@media (max-width:560px){.nav .btn--sm span{display:none}.nav .btn--sm{width:44px;padding:0;justify-content:center}}

/* ── HUD (painel) ── */
.hud{position:fixed;left:22px;bottom:16px;z-index:110;display:flex;align-items:flex-end;gap:14px;pointer-events:none;opacity:0}
.hud__gauge{position:relative;width:84px;height:84px}
.hud::before{content:"";position:absolute;left:-40px;bottom:-40px;width:340px;height:170px;z-index:-1;background:radial-gradient(closest-side,rgba(5,6,7,.75),transparent);pointer-events:none}
.hud__gauge .tach{width:100%;height:100%;overflow:visible}
.hud__gauge .tach__ticks text{font-size:13px}
.hud__gear{position:absolute;left:0;right:0;bottom:-2px;display:grid;justify-items:center;line-height:1}
.hud__gear b{font-family:var(--disp);font-weight:900;font-size:20px;color:var(--white)}
.hud__gear small{font-family:var(--mono);font-size:7.5px;letter-spacing:.2em;color:var(--steel);margin-top:2px}
.hud__read{padding-bottom:10px;display:grid;gap:4px;color:var(--warm);font-size:11px}
.hud__read span{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.hud__read small{font-size:9px;color:var(--steel)}
.hud__scene{color:var(--steel);font-size:10px}
.tc{position:fixed;right:22px;bottom:22px;z-index:110;display:flex;align-items:center;gap:10px;color:var(--steel);font-size:11px;font-variant-numeric:tabular-nums;pointer-events:none;opacity:0}
.rec{width:8px;height:8px;border-radius:50%;background:var(--red-hot);box-shadow:0 0 10px var(--red);animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}
@media (max-width:700px){.hud{left:10px;bottom:10px;gap:6px}.hud::before{display:none}.hud__gauge{width:52px;height:52px}.hud__gauge .tach__ticks text{display:none}.hud__gear b{font-size:14px}.hud__gear small{display:none}.hud__read{display:none}.tc{display:none}}
