/* =========================================================
   ONE STEP PROGRESS — Typography
   Font: Bebas Neue, Bungee, Permanent Marker, JetBrains Mono,
         Space Grotesk, Anton — caricati da Google Fonts.
   ========================================================= */

/* Loaded via <link rel="preconnect"> in HTML head, single @import here.
   Subset latin only. Display=swap to avoid FOIT. */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Bungee&family=Bungee+Shade&family=JetBrains+Mono:wght@400;700&family=Permanent+Marker&family=Space+Grotesk:wght@400;500;700&display=swap');

/* ---- Base ---- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
}

/* ---- Headings ---- */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-body-lg);
  line-height: 1.2;
}

/* ---- Display (hero) ---- */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 0.86;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

/* ---- Street accent ---- */
.street { font-family: var(--font-street); text-transform: uppercase; letter-spacing: 0.03em; }
.shade  { font-family: var(--font-shade);  text-transform: uppercase; letter-spacing: 0.02em; }

/* ---- Tag (graffiti scrawl) ---- */
.tag {
  font-family: var(--font-tag);
  font-size: var(--fs-h3);
  color: var(--acid-yellow);
  display: inline-block;
}
.tag.rotate-l { transform: rotate(-5deg); }
.tag.rotate-r { transform: rotate(4deg); }
.tag.rotate-xl { transform: rotate(-9deg); }

/* ---- Mono / Industrial ---- */
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

/* ---- Numeric stencil big ---- */
.numbers {
  font-family: var(--font-anton);
  font-size: var(--fs-h1);
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
}

/* ---- Body ---- */
.body-sm  { font-size: var(--fs-body-sm); }
.body-lg  { font-size: var(--fs-body-lg); }

p { max-width: 65ch; }

/* ---- Links ---- */
a {
  color: var(--link);
  transition: color var(--dur-fast) var(--ease-street);
}
a:hover { color: var(--link-hover); }

/* ---- Inline strong ---- */
strong, b { font-weight: 700; }

/* ---- Marker (highlight) ---- */
.marker {
  background: linear-gradient(180deg, transparent 60%, var(--acid-yellow) 60%);
  padding: 0 0.1em;
}

/* ---- Slash separator (nav) ---- */
.slash::after {
  content: '/';
  display: inline-block;
  margin: 0 var(--s-2);
  color: var(--red-brand);
  font-family: var(--font-display);
  opacity: 0.7;
}
.slash:last-child::after { content: ''; }

/* ---- Stamp (sticker text) ---- */
.stamp {
  font-family: var(--font-street);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--red-brand);
  color: var(--paper);
  padding: var(--s-1) var(--s-3);
  display: inline-block;
  transform: rotate(-2deg);
  box-shadow: var(--shadow-stamp-sm);
}

/* ---- Outline text (footer watermark) ---- */
.outline-text {
  font-family: var(--font-display);
  -webkit-text-stroke: 2px var(--paper);
  color: transparent;
  text-transform: uppercase;
  line-height: 0.86;
}

/* ---- Glitch text effect (hover) ---- */
@keyframes glitchSplit {
  0%, 100% { text-shadow: 0 0 transparent; }
  20% { text-shadow: -2px 0 var(--red-brand), 2px 0 #00e0ff; }
  40% { text-shadow:  2px 0 var(--red-brand),-2px 0 #00e0ff; }
  60% { text-shadow: -1px 0 var(--red-brand), 1px 0 #00e0ff; }
}
.glitch-on-hover:hover {
  animation: glitchSplit 280ms steps(2, end);
}

@media (prefers-reduced-motion: reduce) {
  .glitch-on-hover:hover { animation: none; }
}