/* ============================================================================
   JDM Bike Garage — base.css
   ============================================================================ */
*,*::before,*::after{ box-sizing:border-box; } *{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ animation:none!important; transition:none!important; } }
body{ font-family:var(--font-jp); background:var(--bg); color:var(--fg); line-height:1.7; overflow-x:hidden; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(rgba(255,255,255,.02) 1px, transparent 1px); background-size:22px 22px; }
img,svg{ display:block; max-width:100%; height:auto; } img{ background:var(--gray); }
a{ color:inherit; text-decoration:none; } ul{ list-style:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:0; }
input,textarea,select{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--neon); outline-offset:2px; }
::selection{ background:var(--neon); color:#0a0a0a; }
::-webkit-scrollbar{ width:9px; } ::-webkit-scrollbar-thumb{ background:var(--gray-3); } ::-webkit-scrollbar-track{ background:var(--black); }
.mono{ font-family:var(--font-mono); }
.tech{ font-family:var(--font-tech); }

.container{ width:min(100% - 2.4rem, var(--container)); margin-inline:auto; }
.section{ padding-block:var(--sp-8); position:relative; background:var(--black); }
.section--tight{ padding-block:var(--sp-6); background:var(--black-2); }
.section + .section, .section--tight + .section, .section + .section--tight{
  border-top:1px solid rgba(255,0,51,.22);
}
.section:nth-of-type(even){ background:var(--black-2); }
.section--tight:nth-of-type(odd){ background:var(--black); }

.tag{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.22em; color:var(--neon); display:inline-flex; align-items:center; gap:.6rem; text-transform:uppercase; }
.tag::before{ content:"â–¶"; font-size:.6rem; }
.h-tech{ font-family:var(--font-tech); font-weight:700; text-transform:uppercase; letter-spacing:.02em; line-height:1; }
.jp-head{ font-family:var(--font-jp); font-weight:900; line-height:1.05; }
.neon{ color:var(--neon); text-shadow:0 0 18px var(--glow); }
.lede{ color:var(--muted); font-size:clamp(1rem,1.5vw,1.14rem); max-width:56ch; }
.muted{ color:var(--muted); }

[data-reveal]{ opacity:0; transform:translateY(34px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal-delay="1"]{ transition-delay:.07s; } [data-reveal-delay="2"]{ transition-delay:.14s; } [data-reveal-delay="3"]{ transition-delay:.21s; }

/* HUD corner brackets utility */
.hud{ position:relative; }
.hud::before,.hud::after{ content:""; position:absolute; width:14px; height:14px; border:1px solid var(--neon); pointer-events:none; }
.hud::before{ top:8px; left:8px; border-right:0; border-bottom:0; }
.hud::after{ bottom:8px; right:8px; border-left:0; border-top:0; }

.scanlines{ position:fixed; inset:0; z-index:9996; pointer-events:none; background:repeating-linear-gradient(180deg, rgba(255,255,255,.015) 0 1px, transparent 1px 4px); mix-blend-mode:overlay; opacity:.22; }
.skip-link{ position:fixed; left:1rem; top:-4rem; z-index:1000; background:var(--neon); color:#0a0a0a; padding:.6rem 1rem; transition:top .3s; }
.skip-link:focus{ top:1rem; }
.scroll-progress{ position:fixed; top:0; left:0; height:2px; width:0; background:var(--neon); box-shadow:0 0 12px var(--glow); z-index:9997; }