@import url("bike-hotspots-shared.css");

:root {
  --accent: var(--series-r);
  --ink: #111111;
  --paper: #f4f4f2;
  --footer-label-height: clamp(40px, 3vw, 48px);
  --footer-body-height: clamp(116px, 10vw, 146px);
  --selector-label-height: clamp(28px, 2.2vw, 34px);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #fff;
  color: var(--ink);
  font-family: "Barlow", "DIN", "DIN Pro", "DIN 1451", "DIN Alternate", sans-serif;
}

.bike-series-page {
  --bike-hotspot-cursor: default;
  min-height: 100vh;
  background: var(--paper);
}

.bike-series-hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  --bike-series-word-size: clamp(220px, 78vh, 720px);
  --bike-series-word-stroke: 2px;
  --bike-series-word-offset-y: 3.5%;
  background:
    radial-gradient(circle at 20% 22%, rgba(255, 255, 255, 0.92), rgba(244, 244, 242, 0.86) 44%, rgba(236, 236, 232, 0.94) 100%),
    var(--paper);
}

.bike-series-word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin: 0;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.bike-series-word-track {
  display: flex;
  align-items: center;
  width: max-content;
  min-width: max-content;
  height: 100%;
  animation: bike-series-word-marquee var(--bike-series-word-duration, 24s) linear infinite;
  will-change: transform;
}

.bike-series-word-copy {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 100%;
  padding-right: 0.14em;
  transform: translateY(var(--bike-series-word-offset-y));
  color: transparent;
  -webkit-text-stroke: var(--bike-series-word-stroke) rgba(17, 17, 17, 0.24);
  text-stroke: var(--bike-series-word-stroke) rgba(17, 17, 17, 0.24);
  font: 400 var(--bike-series-word-size) / 0.84 "Michroma", "Barlow", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

@keyframes bike-series-word-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bike-series-word-track {
    animation: none;
  }
}

.bike-series-ui {
  position: absolute;
  z-index: 6;
  left: clamp(28px, 4vw, 56px);
  top: clamp(28px, 4vw, 56px);
  display: grid;
  gap: 10px;
}

.series-tabs {
  display: inline-flex;
  gap: 0;
  align-items: end;
}

.series-tab {
  width: clamp(74px, 6vw, 96px);
  height: clamp(48px, 5vw, 64px);
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: grid;
  align-content: end;
  justify-items: center;
  gap: 1px;
}

.series-tab-media {
  width: 100%;
  padding-top: 4px;
  display: grid;
  justify-items: center;
  border-bottom: 6px solid var(--series-accent, #d0d0d0);
}

.series-tab.is-active .series-tab-media {
  background: rgba(255, 255, 255, 0.55);
}

.series-tab img {
  display: block;
  width: clamp(42px, 5vw, 66px);
  height: auto;
}

.series-tab small {
  display: block;
  transform: translateY(-2px);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

.selector-row {
  display: grid;
  grid-template-columns: clamp(320px, 24vw, 420px) clamp(360px, 34vw, 560px);
  column-gap: 0;
  row-gap: 10px;
  align-items: start;
}

.selector-box {
  position: relative;
  margin-top: var(--selector-label-height);
  display: block;
}

.selector-box.is-model {
  width: 100%;
}

.selector-label {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-100%);
  display: inline-flex;
  align-items: center;
  min-height: var(--selector-label-height);
  padding: 0 12px;
  background: #111;
  color: #fff;
  font-size: clamp(13px, 0.95vw, 18px);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: none;
}

.selector-main {
  position: relative;
  background: var(--series-active-accent, var(--accent));
  display: block;
  min-height: clamp(56px, 4.4vw, 68px);
  padding: 0;
  overflow: hidden;
}

.selector-main button {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 0;
  line-height: 1;
  padding: 0;
}

.selector-main button::before {
  content: "";
  display: block;
  width: clamp(11px, 0.9vw, 16px);
  height: clamp(11px, 0.9vw, 16px);
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  opacity: 0.96;
}

.selector-value {
  position: absolute;
  inset: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: 400 clamp(18px, 1.95vw, 32px) / 1 "Michroma", "Barlow", sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  padding: 0 clamp(86px, 8.5vw, 122px);
  pointer-events: none;
}

#series-prev,
#model-prev {
  left: 0;
  justify-content: flex-start;
  padding-left: clamp(16px, 1.8vw, 26px);
}

#series-prev::before,
#model-prev::before {
  transform: rotate(-135deg);
}

#series-next,
#model-next {
  right: 0;
  justify-content: flex-end;
  padding-right: clamp(16px, 1.8vw, 26px);
}

#series-next::before,
#model-next::before {
  transform: rotate(45deg);
}

.color-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 2px;
}

.color-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.color-swatches {
  display: flex;
  gap: 8px;
  align-items: center;
}

.color-swatch {
  width: 16px;
  height: 16px;
  border: 1px solid #111;
  background: var(--swatch, #111);
  padding: 0;
  cursor: pointer;
}

.color-swatch.is-active {
  outline: 2px solid #111;
  outline-offset: 2px;
}

.bike-series-stage {
  position: relative;
  min-height: min(100vh, 980px);
  padding: clamp(86px, 10vw, 138px) clamp(28px, 6vw, 92px) clamp(108px, 13vw, 168px);
}

.bike-series-canvas {
  position: relative;
  width: min(100%, 1240px);
  margin: 0 auto;
  aspect-ratio: 2200 / 1466;
  transform: translateY(clamp(-12px, -1.4vw, -28px));
  container-type: inline-size;
}

.bike-slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: translateX(var(--slide-shift, 0));
  transition: transform 320ms ease;
}

.bike-slide.current {
  --slide-shift: 0%;
  z-index: 2;
}

.bike-slide.incoming {
  z-index: 3;
}

.bike-slide.enter-from-right {
  --slide-shift: 16%;
}

.bike-slide.enter-from-left {
  --slide-shift: -16%;
}

.bike-slide.exit-to-left {
  --slide-shift: -16%;
}

.bike-slide.exit-to-right {
  --slide-shift: 16%;
}

.bike-main-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.bike-main-image.is-product-photo {
  object-fit: cover;
}

.bike-series-footer {
  position: absolute;
  right: 0;
  bottom: clamp(54px, 6vw, 92px);
  z-index: 7;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
  gap: 0;
  width: min(52vw, 590px);
}

.footer-panel-title {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: calc(100% - 12px);
  min-height: var(--footer-label-height);
  padding: 0 14px;
  background: #111;
  color: #fff;
  font-size: clamp(14px, 1.05vw, 20px);
  line-height: 1;
  transform: translateY(-100%);
}

.stats-shell,
.price-shell {
  position: relative;
  display: block;
}

.stats-shell {
  min-width: 0;
  margin-top: var(--footer-label-height);
}

.stats-body {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  align-content: stretch;
  background: #d9d9d6;
  height: var(--footer-body-height);
  padding: 0;
  gap: 1px;
}

.stat-card {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  height: 100%;
  min-height: 0;
  padding: 14px 8px 12px;
  text-align: center;
  background: #d9d9d6;
  overflow: hidden;
  isolation: isolate;
}

.stat-icon {
  position: relative;
  z-index: 1;
  width: clamp(40px, 3.4vw, 50px);
  height: clamp(40px, 3.4vw, 50px);
  display: block;
  color: #111;
}

.stat-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.stat-meter {
  position: relative;
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  background: #d9d9d6;
  overflow: hidden;
  z-index: 0;
}

.stat-meter span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: block;
  background: var(--series-active-accent, var(--accent));
  transform-origin: center bottom;
  transform: scaleY(0);
  transition: transform 300ms ease;
  will-change: transform;
}

.stat-label {
  position: relative;
  z-index: 1;
  font-size: 12px;
  line-height: 1.05;
}

.price-group {
  position: relative;
  display: grid;
  grid-template-columns: max-content auto;
  align-items: stretch;
  height: var(--footer-body-height);
  gap: 0;
  margin-top: var(--footer-label-height);
}

.price-shell {
  width: auto;
  height: 100%;
}

.price-body {
  display: grid;
  align-content: center;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  padding: 12px 12px 12px 16px;
  background: #d9d9d6;
}

.price-model {
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.price-value {
  display: inline-flex;
  align-items: flex-start;
  gap: 0;
  font: 400 clamp(18px, 2.2vw, 30px) / 0.95 "Michroma", "Barlow", sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  overflow: visible;
}

.price-digit {
  position: relative;
  display: inline-block;
  width: 0.9em;
  height: 1em;
  overflow: hidden;
}

.price-digit-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 340ms ease;
  will-change: transform;
}

.price-digit-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 1em;
  line-height: 1;
  padding: 0 0.02em;
}

.price-action {
  display: grid;
  place-items: center;
  width: min(8vw, 76px);
  height: 100%;
  min-height: 0;
  background: #111;
  color: #fff;
  text-decoration: none;
}

.price-action svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
}

.bike-series-checker {
  position: relative;
  width: 100%;
  height: 10px;
  background-image:
    linear-gradient(45deg, #000 25%, transparent 25%),
    linear-gradient(-45deg, #000 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #000 75%),
    linear-gradient(-45deg, transparent 75%, #000 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0;
}

@media (max-width: 980px) {
  .bike-series-page {
    --footer-label-height: 34px;
    --footer-body-height: 96px;
  }

  .bike-series-page,
  .bike-series-hero {
    min-height: auto;
  }

  .bike-series-ui {
    position: relative;
    left: auto;
    top: auto;
    padding: 20px 18px 0;
  }

  .bike-series-stage {
    min-height: auto;
    padding: 18px 18px 0;
  }

  .bike-series-word {
    --bike-series-word-size: clamp(118px, 34vw, 260px);
    --bike-series-word-stroke: 1.2px;
    --bike-series-word-offset-y: 2%;
  }

  .bike-series-footer {
    position: relative;
    width: 100%;
    right: auto;
    bottom: auto;
    margin-top: 14px;
    grid-template-columns: minmax(0, 1fr) max-content;
  }

  .stats-body {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 8px 8px 10px;
    gap: 6px;
  }

  .price-group {
    height: var(--footer-body-height);
    padding: 0;
    background: transparent;
    align-items: stretch;
  }

  .price-shell {
    width: auto;
    height: 100%;
  }

  .price-body {
    height: 100%;
    padding: 10px 12px;
  }

  .price-model {
    font-size: 10px;
  }

  .price-value {
    font-size: clamp(19px, 4vw, 24px);
  }

  .stat-card {
    gap: 4px;
  }

  .stat-icon {
    width: clamp(28px, 5vw, 38px);
    height: clamp(28px, 5vw, 38px);
  }

  .stat-label {
    font-size: 11px;
  }

  .price-action {
    width: 58px;
    height: 100%;
  }

}

@media (max-width: 720px) {
  .bike-series-page {
    --footer-label-height: 30px;
    --footer-body-height: 82px;
    --selector-label-height: 24px;
  }

  .bike-series-hero {
    --bike-series-word-size: clamp(86px, 24vw, 150px);
    --bike-series-word-stroke: 1px;
    --bike-series-word-offset-y: 1%;
  }

  .selector-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .selector-box,
  .selector-box.is-model {
    min-width: 0;
    width: 100%;
  }

  .selector-value {
    font-size: clamp(15px, 4.2vw, 22px);
  }

  .selector-value {
    padding: 0 58px;
  }

  .series-tab {
    width: 78px;
  }

  .bike-series-stage {
    padding-bottom: 0;
  }

  .bike-series-footer {
    grid-template-columns: minmax(0, 1fr) max-content;
  }

  .footer-panel-title {
    padding: 0 10px;
    font-size: 12px;
  }

  .stats-body {
    padding: 8px 6px;
    gap: 4px;
  }

  .stat-label {
    font-size: 9px;
  }

  .price-body {
    height: 100%;
    padding: 8px 10px;
    gap: 3px;
  }

  .price-model {
    font-size: 9px;
  }

  .price-value {
    font-size: clamp(14px, 5vw, 17px);
  }

  .price-digit {
    width: 0.94em;
  }

  .price-action {
    width: 46px;
    height: 100%;
  }

  .price-action svg {
    width: 20px;
    height: 20px;
  }

}

@media (min-width: 981px) {
  html,
  body,
  .bike-series-page,
  .bike-series-hero {
    height: auto;
  }

  body {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .bike-series-page,
  .bike-series-hero,
  .bike-series-stage {
    min-height: auto;
  }

  .bike-series-hero {
    max-height: none;
    overflow-x: hidden;
    overflow-y: visible;
  }

  .bike-series-ui {
    top: clamp(18px, 2.4vw, 34px);
  }

  .bike-series-stage {
    padding: clamp(38px, 4.6vw, 64px) clamp(28px, 6vw, 92px) 0;
  }

  .bike-series-canvas {
    transform: translateY(clamp(-20px, -2.1vw, -40px));
  }

  .bike-series-footer {
    bottom: 0;
  }
}