/* ============================================================================
   Japan Bike Hub — base.css  (reset + base + typography + utilities)
   ============================================================================ */
*,*::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.75;
  letter-spacing: .01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,svg,video { display:block; max-width:100%; height:auto; }
img { background: var(--ink-3); }
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(--blue); outline-offset: 3px; }

h1,h2,h3,h4 { font-weight: 900; line-height: 1.08; letter-spacing: -.01em; }
.en { font-family: var(--font-en); }

/* Selection */
::selection { background: var(--blue); color: #04122b; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: #23282f; border-radius: 20px; }
::-webkit-scrollbar-track { background: var(--ink); }

/* Layout helpers */
.container { width: min(100% - 2.4rem, var(--container)); margin-inline: auto; }
.container--wide { width: min(100% - 2.4rem, 1560px); margin-inline: auto; }
.section { padding-block: var(--sp-8); position: relative; }
.section--tight { padding-block: var(--sp-6); }

.eyebrow {
  font-family: var(--font-en);
  font-size: .78rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--blue); display: inline-flex; align-items: center; gap: .7rem;
}
.eyebrow::before { content:""; width: 34px; height: 1px; background: var(--blue); display:inline-block; }

.title {
  font-size: clamp(2rem, 5.5vw, 4.4rem);
  line-height: 1.05; margin-top: 1rem;
}
.title .grad { background: var(--grad-blue); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { color: var(--silver); font-size: clamp(1rem, 1.6vw, 1.18rem); max-width: 58ch; }
.muted { color: var(--muted); }

/* Reveal (JS toggles .in) */
[data-reveal]{ opacity:0; transform: translateY(38px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal-delay="1"]{ transition-delay:.08s; }
[data-reveal-delay="2"]{ transition-delay:.16s; }
[data-reveal-delay="3"]{ transition-delay:.24s; }
[data-reveal-delay="4"]{ transition-delay:.32s; }

.skip-link{ position:fixed; left:1rem; top:-4rem; z-index:1000; background:var(--blue); color:#04122b; padding:.6rem 1rem; border-radius:8px; transition:top .3s; }
.skip-link:focus{ top:1rem; }

/* Custom cursor */
.cursor,.cursor-dot{ position:fixed; top:0; left:0; z-index:9998; pointer-events:none; border-radius:50%; mix-blend-mode:screen; }
.cursor{ width:34px; height:34px; border:1px solid var(--blue); transform:translate(-50%,-50%); transition:width .3s,height .3s,background .3s,opacity .3s; }
.cursor.is-hover{ width:64px; height:64px; background:rgba(61,169,255,.14); }
.cursor-dot{ width:6px; height:6px; background:var(--blue); transform:translate(-50%,-50%); }
@media (hover:none){ .cursor,.cursor-dot{ display:none; } }

/* Scroll progress */
.scroll-progress{ position:fixed; top:0; left:0; height:2px; width:0; background:var(--grad-blue); z-index:9997; box-shadow:0 0 12px var(--glow); }