:root {
  color-scheme: light;
  background: #fff;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  background: #fff;
}

body {
  display: grid;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  place-items: center;
}

main {
  width: min(780px, 72vw, max(15rem, calc(160svh - 21rem)));
}

.bike-scene {
  position: relative;
}

bike-morph {
  position: relative;
  z-index: 1;
}

.road {
  position: absolute;
  z-index: 0;
  top: 95.1%;
  left: 50%;
  width: 100vw;
  height: clamp(7.5rem, 12vw, 10rem);
  background: #000;
  color: #fff;
  overflow: hidden;
  transform: translateX(-50%);
}

.road::before {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.2) 0.7px, transparent 0.8px);
  background-size: 9px 9px;
  content: "";
  opacity: 0.14;
  pointer-events: none;
}

.road::after {
  position: absolute;
  z-index: 3;
  inset: 0.45rem 0;
  border-top: 2px solid #f1efe5;
  border-bottom: 2px solid #f1efe5;
  content: "";
  opacity: 0.78;
  pointer-events: none;
}

.road__track {
  display: flex;
  width: max(200vw, 124rem);
  height: 100%;
  animation: road-marquee 18s linear infinite;
  will-change: transform;
}

.road__copy {
  position: relative;
  display: flex;
  width: max(100vw, 62rem);
  height: 100%;
  flex: 0 0 max(100vw, 62rem);
  align-items: stretch;
  justify-content: center;
  gap: clamp(0.25rem, 0.5vw, 0.65rem);
  white-space: nowrap;
}

.road__copy::after {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    #f1efe5 0 1.25rem,
    transparent 1.25rem 2rem
  );
  content: "";
  opacity: 0.62;
  pointer-events: none;
  transform: translateY(-50%);
}

.road__copy span {
  position: relative;
  display: block;
  height: 100%;
  margin-left: var(--space-before, 0);
  flex: 0 0 var(--paint-slot, clamp(1.55rem, 2.4vw, 2.15rem));
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(0.58rem, 1vw, 0.8rem);
  font-stretch: condensed;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 0.9;
  text-transform: uppercase;
  transform: translate(var(--jitter-x, 0), var(--jitter-y, 0));
}

.road__copy b {
  position: absolute;
  top: var(--paint-top, 50%);
  left: 50%;
  display: inline-block;
  color: #f1efe5;
  font: inherit;
  opacity: 0.92;
  text-align: center;
  text-shadow: -0.7px -0.3px 0 rgba(241, 239, 229, 0.4), 0.8px 0.4px 0 rgba(241, 239, 229, 0.28);
  -webkit-text-stroke: 0.25px rgba(241, 239, 229, 0.5);
  transform: translate(-50%, -50%) rotate(90deg) skewX(-4deg) scaleX(0.88);
  transform-origin: center;
}

.road__copy b i {
  display: block;
  font: inherit;
}

.road__copy b::before {
  position: absolute;
  inset: 0;
  color: rgba(241, 239, 229, 0.3);
  content: attr(data-text);
  pointer-events: none;
  text-align: center;
  transform: translate(var(--paint-x, 0.7px), var(--paint-y, -0.5px));
  white-space: pre-line;
  -webkit-text-fill-color: currentColor;
}

.road__copy b::after {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, rgba(0, 0, 0, 0.94) 0 0.8px, transparent 1px) 0 0 / 5px 4px,
    radial-gradient(circle, rgba(0, 0, 0, 0.76) 0 0.6px, transparent 0.9px) 2px 3px / 8px 7px,
    repeating-linear-gradient(177deg, transparent 0 5px, rgba(0, 0, 0, 0.3) 5px 5.7px, transparent 5.7px 9px);
  background-clip: text;
  color: transparent;
  content: attr(data-text);
  opacity: 0.82;
  pointer-events: none;
  text-align: center;
  white-space: pre-line;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Dense paint slots keep neighboring markings close without collisions. */
.road__copy span:nth-child(1) { --jitter-x: -2px; --jitter-y: 1px; --paint-top: 39%; font-size: clamp(0.85rem, 1.6vw, 1.3rem); }
.road__copy span:nth-child(1) b { --paint-x: 0.8px; --paint-y: -0.4px; opacity: 0.94; transform: translate(-50%, -50%) rotate(87deg) skewX(-3deg) scaleX(0.92); }
.road__copy span:nth-child(2) { --jitter-x: 1px; --jitter-y: -2px; --paint-top: 58%; font-size: clamp(0.78rem, 1.45vw, 1.15rem); }
.road__copy span:nth-child(2) b { --paint-x: -0.6px; --paint-y: 0.7px; opacity: 0.86; transform: translate(-50%, -50%) rotate(92deg) skewX(-2deg) scaleX(0.88); }
.road__copy span:nth-child(3) { --space-before: clamp(1.25rem, 7vw, 11rem); --jitter-x: -1px; --jitter-y: 2px; --paint-top: 58%; font-size: clamp(0.82rem, 1.5vw, 1.2rem); }
.road__copy span:nth-child(3) b { --paint-x: 0.5px; --paint-y: 0.8px; opacity: 0.9; transform: translate(-50%, -50%) rotate(86deg) skewX(-5deg) scaleX(0.94); }
.road__copy span:nth-child(4) { --jitter-x: 2px; --jitter-y: -1px; --paint-top: 68%; font-size: clamp(0.95rem, 1.8vw, 1.45rem); }
.road__copy span:nth-child(4) b { --paint-x: -0.8px; --paint-y: -0.4px; opacity: 0.94; transform: translate(-50%, -50%) rotate(93deg) skewX(1deg) scaleX(0.9); }
.road__copy span:nth-child(5) { --space-before: clamp(1rem, 3vw, 7rem); --jitter-x: -3px; --jitter-y: 1px; --paint-top: 44%; --paint-slot: clamp(6.5rem, 12vw, 11rem); font-size: clamp(2.2rem, 4.8vw, 3.8rem); }
.road__copy span:nth-child(5) b { --paint-x: 1px; --paint-y: 0.6px; opacity: 0.97; transform: translate(-50%, -50%) rotate(88deg) skewX(-2deg) scaleX(0.98); }
.road__copy span:nth-child(6) { --jitter-x: 1px; --jitter-y: 2px; --paint-top: 62%; --paint-slot: clamp(2.4rem, 3.5vw, 3rem); font-size: clamp(0.72rem, 1.3vw, 1.02rem); }
.road__copy span:nth-child(6) b { --paint-x: -0.5px; --paint-y: 0.8px; opacity: 0.88; transform: translate(-50%, -50%) rotate(86deg) skewX(-4deg) scaleX(0.9); }
.road__copy span:nth-child(7) { --space-before: clamp(1.5rem, 10vw, 14rem); --jitter-x: 2px; --jitter-y: -1px; --paint-top: 36%; --paint-slot: clamp(2.4rem, 3.5vw, 3rem); font-size: clamp(0.7rem, 1.25vw, 1rem); }
.road__copy span:nth-child(7) b { --paint-x: 0.7px; --paint-y: -0.7px; opacity: 0.93; transform: translate(-50%, -50%) rotate(94deg) skewX(2deg) scaleX(0.88); }
.road__copy span:nth-child(8) { --jitter-x: -2px; --jitter-y: -1px; --paint-top: 65%; font-size: clamp(0.9rem, 1.65vw, 1.3rem); }
.road__copy span:nth-child(8) b { --paint-x: -0.7px; --paint-y: 0.5px; opacity: 0.84; transform: translate(-50%, -50%) rotate(87deg) skewX(-2deg) scaleX(0.94); }
.road__copy span:nth-child(9) { --space-before: clamp(1rem, 6vw, 9rem); --jitter-x: 1px; --jitter-y: 2px; --paint-top: 42%; font-family: "Arial Black", Arial, sans-serif; font-size: clamp(0.82rem, 1.5vw, 1.2rem); }
.road__copy span:nth-child(9) b { --paint-x: 0.6px; --paint-y: 0.7px; opacity: 0.85; transform: translate(-50%, -50%) rotate(93deg) skewX(-3deg) scaleX(0.88); }
.road__copy span:nth-child(10) { --jitter-x: 3px; --jitter-y: -2px; --paint-top: 46%; font-family: "Courier New", Courier, monospace; font-size: clamp(1rem, 1.9vw, 1.5rem); }
.road__copy span:nth-child(10) b { --paint-x: -0.9px; --paint-y: 0.4px; opacity: 0.9; transform: translate(-50%, -50%) rotate(88deg) skewX(1deg) scaleX(0.95); }
.road__copy span:nth-child(11) { --space-before: clamp(1.5rem, 10vw, 14rem); --jitter-x: -1px; --jitter-y: 1px; --paint-top: 64%; font-family: "Marker Felt", "Comic Sans MS", cursive; font-size: clamp(0.82rem, 1.5vw, 1.2rem); }
.road__copy span:nth-child(11) b { --paint-x: 0.5px; --paint-y: -0.8px; opacity: 0.82; transform: translate(-50%, -50%) rotate(94deg) skewX(-5deg) scaleX(0.9); }
.road__copy span:nth-child(12) { --jitter-x: 2px; --jitter-y: 1px; --paint-top: 35%; font-family: Impact, Haettenschweiler, sans-serif; font-size: clamp(1rem, 1.9vw, 1.55rem); }
.road__copy span:nth-child(12) b { --paint-x: 0.9px; --paint-y: 0.5px; opacity: 0.96; transform: translate(-50%, -50%) rotate(92deg) skewX(-2deg) scaleX(0.96); }
.road__copy span:nth-child(13) { --space-before: clamp(1.25rem, 8vw, 11rem); --jitter-x: -2px; --jitter-y: -2px; --paint-top: 62%; font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif; font-size: clamp(0.8rem, 1.45vw, 1.15rem); }
.road__copy span:nth-child(13) b { --paint-x: -0.6px; --paint-y: -0.6px; opacity: 0.78; transform: translate(-50%, -50%) rotate(87deg) skewX(3deg) scaleX(0.86); }
.road__copy span:nth-child(14) { --jitter-x: 1px; --jitter-y: 2px; --paint-top: 37%; font-family: Georgia, "Times New Roman", serif; font-size: clamp(0.72rem, 1.3vw, 1.05rem); font-style: italic; }
.road__copy span:nth-child(14) b { --paint-x: 0.7px; --paint-y: -0.5px; opacity: 0.88; transform: translate(-50%, -50%) rotate(85deg) skewX(-4deg) scaleX(0.9); }
.road__copy span:nth-child(15) { --jitter-x: -1px; --jitter-y: 1px; --paint-top: 60%; font-family: "Marker Felt", "Comic Sans MS", cursive; font-size: clamp(0.76rem, 1.4vw, 1.1rem); }
.road__copy span:nth-child(15) b { --paint-x: -0.8px; --paint-y: 0.6px; opacity: 0.91; transform: translate(-50%, -50%) rotate(91deg) skewX(-3deg) scaleX(0.91); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

@keyframes road-marquee {
  to {
    transform: translateX(-50%);
  }
}

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