/* =========================================================
   MotoThrottle ? custom.css
   RACE DIVISION ? Aggressive superbike / motorsport agency
   Obsidian ? Racing Orange ? Sharp Angles ? High Contrast
   No glassmorphism. No soft curves. No editorial luxury look.
   ========================================================= */

:root {
  --obsidian: #0B0B0D;
  --obsidian-soft: #141416;
  --obsidian-grid: #1B1B1E;
  --orange: #FF4D00;
  --orange-bright: #FF6A26;
  --signal: #FFE000;
  --graphite: #8A9099;
  --graphite-mid: #C2C6CC;
  --graphite-light: #E8EAED;
  --ease-race: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-slam: cubic-bezier(0.34, 1.56, 0.64, 1);
  --cut-sm: 10px;
  --cut-md: 18px;
  --cut-lg: 32px;
}

* { min-width: 0; }

html, body { max-width: 100%; overflow-x: hidden; }

html.lenis,
html.lenis body {
  height: auto;
}

html.lenis {
  scroll-behavior: auto !important;
}

body.mt {
  background-color: var(--obsidian);
  color: var(--graphite-mid);
  overflow-x: clip;
  cursor: none;
}

body.mt::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

body.mt.is-touch,
body.mt.no-custom-cursor {
  cursor: auto;
}

::selection {
  background: var(--orange-bright);
  color: var(--obsidian);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 0.75rem 1.25rem;
  background: var(--orange-bright);
  color: var(--obsidian);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  cursor: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ???????????????????????????????????????????
   RACE HUD ? scroll progress + cursor
   ??????????????????????????????????????????? */
.mt-race-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 60;
  pointer-events: none;
  background: rgba(138, 144, 153, 0.12);
}

.mt-race-progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--orange), var(--orange-bright), var(--signal));
  box-shadow: 0 0 16px rgba(255, 106, 38, 0.55);
}

.mt-hud {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mt-hud.is-on { opacity: 1; }

.mt-hud__ring {
  position: absolute;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(194, 198, 204, 0.5);
  transform: rotate(45deg);
  transition: transform 0.18s ease, border-color 0.2s ease, width 0.2s ease, height 0.2s ease, margin 0.2s ease;
}

.mt-hud.is-hover .mt-hud__ring {
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-color: var(--orange-bright);
}

.mt-hud__tick {
  position: absolute;
  background: rgba(255, 106, 38, 0.7);
}

.mt-hud__tick--h { width: 10px; height: 1px; margin: -0.5px 0 0 -5px; }
.mt-hud__tick--v { width: 1px; height: 10px; margin: -5px 0 0 -0.5px; }

.mt-hud__dot {
  position: absolute;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  background: var(--orange-bright);
  box-shadow: 0 0 10px var(--orange-bright);
}

/* ???????????????????????????????????????????
   RACE NAVIGATION
   ??????????????????????????????????????????? */
.mt-race-nav {
  transition: background 0.4s var(--ease-race);
}

.mt-race-nav__strip {
  height: 30px;
  display: none;
  align-items: center;
  background: var(--obsidian);
  border-bottom: 1px solid rgba(255, 106, 38, 0.18);
  overflow: hidden;
  position: relative;
}

@media (min-width: 768px) {
  .mt-race-nav__strip { display: flex; }
}

.mt-race-nav__strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 77, 0, 0.06) 0 10px,
    transparent 10px 22px
  );
}

.mt-race-nav__strip-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.mt-race-nav__dot {
  width: 6px;
  height: 6px;
  background: var(--orange-bright);
  box-shadow: 0 0 8px var(--orange-bright);
  animation: mtPulseDot 1.6s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes mtPulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

.mt-race-nav__row {
  height: 4.75rem;
}

@media (min-width: 1024px) {
  .mt-race-nav__row { height: 5.25rem; }
}

.mt-race-nav.is-scrolled {
  background: rgba(11, 11, 13, 0.94);
  box-shadow: 0 1px 0 rgba(255, 106, 38, 0.18), 0 12px 32px rgba(0, 0, 0, 0.4);
}

.mt-race-nav.is-scrolled .mt-race-nav__strip {
  height: 0;
  border-bottom-color: transparent;
}

/* Angular logo mark ? diagonal cut, NOT circular */
.mt-mark-blade {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.85rem;
  height: 2.85rem;
  background: linear-gradient(135deg, var(--orange), var(--orange-bright));
  clip-path: polygon(18% 0%, 100% 0%, 82% 100%, 0% 100%);
  color: var(--obsidian);
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  transition: transform 0.4s var(--ease-race), clip-path 0.4s var(--ease-race);
}

.group:hover .mt-mark-blade {
  transform: translateX(2px) scale(1.04);
}

.mt-nav-link {
  position: relative;
  display: inline-block;
  transition: color 0.3s, transform 0.3s var(--ease-race);
}

.mt-nav-link::before {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -6px;
  height: 2px;
  background: var(--orange-bright);
  transform: scaleX(0) skewX(-18deg);
  transform-origin: left;
  transition: transform 0.35s var(--ease-race);
}

.mt-nav-link:hover,
.mt-nav-link.is-active {
  color: var(--graphite-light);
  transform: skewX(-4deg);
}

.mt-nav-link:hover::before,
.mt-nav-link.is-active::before {
  transform: scaleX(1) skewX(-18deg);
}

.mt-nav-link__idx {
  font-family: "Bebas Neue", sans-serif;
  font-size: 0.6rem;
  color: rgba(255, 106, 38, 0.55);
  vertical-align: super;
  margin-right: 2px;
}

/* Mobile toggle */
.mt-nav-toggle span {
  transition: transform 0.35s var(--ease-race), opacity 0.3s, background 0.3s;
}

.mt-nav-toggle.is-open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
  background: var(--orange-bright);
}

.mt-nav-toggle.is-open span:nth-child(2) { opacity: 0; }

.mt-nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
  background: var(--orange-bright);
}

/* Full-screen mobile menu ? racing grid */
.mt-nav-mobile {
  background:
    repeating-linear-gradient(0deg, rgba(255, 106, 38, 0.05) 0, transparent 1px, transparent 42px),
    repeating-linear-gradient(90deg, rgba(255, 106, 38, 0.05) 0, transparent 1px, transparent 42px),
    var(--obsidian);
}

#mobileMenu.is-open {
  transform: translateX(0);
}

.mt-nav-mobile__link {
  position: relative;
  transition: transform 0.3s var(--ease-race), color 0.3s;
}

.mt-nav-mobile__link:hover,
.mt-nav-mobile__link:active {
  transform: translateX(10px);
}

.mt-nav-mobile__num {
  font-family: "Bebas Neue", sans-serif;
  color: rgba(255, 106, 38, 0.55);
}

/* ???????????????????????????????????????????
   BUTTONS ? clip-path blades, no rounded pills
   ??????????????????????????????????????????? */
.mt-cta-blade {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2.1rem 1rem 1.7rem;
  font-family: "Bebas Neue", sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--obsidian);
  background: linear-gradient(115deg, var(--orange) 0%, var(--orange-bright) 100%);
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0% 100%);
  transition: transform 0.3s var(--ease-race), box-shadow 0.3s, clip-path 0.3s;
  box-shadow: 0 6px 26px rgba(255, 77, 0, 0.32);
}

.mt-cta-blade:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(255, 106, 38, 0.45);
}

.mt-cta-blade i { font-size: 0.75em; }

.mt-cta-ghost {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2.1rem 1rem 1.7rem;
  font-family: "Bebas Neue", sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite-mid);
  background: rgba(20, 20, 22, 0.5);
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0% 100%);
  box-shadow: inset 0 0 0 1px rgba(138, 144, 153, 0.28);
  transition: color 0.3s, box-shadow 0.3s, transform 0.3s var(--ease-race);
}

.mt-cta-ghost:hover {
  color: var(--graphite-light);
  box-shadow: inset 0 0 0 1px rgba(255, 106, 38, 0.55);
  transform: translateY(-2px);
}

.mt-magnetic {
  will-change: transform;
}

/* ??? Lines / accents ??? */
.mt-line-accent {
  width: 3.5rem;
  height: 3px;
  background: var(--orange-bright);
  clip-path: polygon(0 0, 100% 0, 88% 100%, 0% 100%);
}

.mt-underline {
  position: relative;
  display: inline-block;
}

.mt-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--orange-bright);
  transition: width 0.35s var(--ease-race);
}

.mt-underline:hover::after {
  width: 100%;
}

.mt-draw-line__path {
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
}

.mt-draw-line.is-drawn .mt-draw-line__path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.2s var(--ease-race);
}

/* ???????????????????????????????????????????
   BLADE CARDS / SPEC PLATES ? sharp, no glass
   ??????????????????????????????????????????? */
.mt-blade-card {
  position: relative;
  background: var(--obsidian-soft);
  border: 1px solid rgba(138, 144, 153, 0.14);
  border-left: 3px solid var(--orange-bright);
  transition: border-color 0.35s, transform 0.35s var(--ease-race), background 0.35s;
}

.mt-blade-card:hover {
  border-color: rgba(255, 106, 38, 0.4);
  border-left-color: var(--orange-bright);
  background: #191a1d;
  transform: translateY(-4px);
}

.mt-blade-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 18px 18px 0;
  border-color: transparent rgba(255, 106, 38, 0.16) transparent transparent;
  transition: border-color 0.35s;
}

.mt-blade-card:hover::before {
  border-color: transparent rgba(255, 106, 38, 0.5) transparent transparent;
}

.mt-spec-plate {
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(138, 144, 153, 0.14);
}

.mt-spec-plate__num {
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 0.01em;
}

/* ??? Image frames ??? */
.mt-frame-cut {
  position: relative;
  border: 1px solid rgba(138, 144, 153, 0.12);
  clip-path: polygon(0 0, 100% 0, 100% 92%, 92% 100%, 0 100%);
}

.mt-img-grit {
  filter: saturate(0.82) contrast(1.15) brightness(0.9);
}

.mt-reveal__inner {
  overflow: hidden;
}

.mt-reveal__inner img {
  transform: scale(1.1);
  transition: transform 1.1s var(--ease-race);
}

.mt-reveal.is-revealed .mt-reveal__inner img {
  transform: scale(1);
}

/* ???????????????????????????????????????????
   HERO ? fullscreen creative swiper + diagonal clips
   ??????????????????????????????????????????? */
.mt-hero {
  position: relative;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
}

.mt-hero__swiper,
.mt-hero__swiper .swiper-wrapper,
.mt-hero__swiper .swiper-slide {
  height: 100%;
  width: 100%;
}

.mt-hero__slide {
  position: relative;
  display: flex;
  align-items: center;
}

.mt-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.mt-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8) contrast(1.18) brightness(0.82);
}

.mt-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 11, 13, 0.6) 0%, rgba(11, 11, 13, 0.2) 32%, rgba(11, 11, 13, 0.95) 100%),
    linear-gradient(100deg, rgba(11, 11, 13, 0.82) 0%, rgba(11, 11, 13, 0.1) 58%, rgba(11, 11, 13, 0.6) 100%);
}

/* Diagonal clip overlays ? racing livery stripes */
.mt-hero__clip {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.mt-hero__clip--a {
  top: 0;
  right: 8%;
  width: 26%;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 77, 0, 0.14), transparent 60%);
  clip-path: polygon(60% 0, 100% 0, 40% 100%, 0% 100%);
  display: none;
}

.mt-hero__clip--b {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5.5rem;
  background: var(--obsidian);
  clip-path: polygon(0 45%, 100% 0, 100% 100%, 0 100%);
}

@media (min-width: 1024px) {
  .mt-hero__clip--a { display: block; }
}

.mt-hero__content {
  position: relative;
  z-index: 3;
  padding-top: 6.5rem;
  width: 100%;
}

.mt-hero__title {
  text-shadow: 0 6px 40px rgba(0, 0, 0, 0.65);
  letter-spacing: 0.01em;
}

.mt-hero-anim {
  opacity: 0;
  transform: translateY(30px) skewY(2deg);
  transition: opacity 0.85s var(--ease-race), transform 0.85s var(--ease-race);
}

/* Active slide + Swiper-fail fallback so hero copy is never blank */
.swiper-slide-active .mt-hero-anim,
.mt-hero__swiper:not(.swiper-initialized) .mt-hero__slide:first-child .mt-hero-anim {
  opacity: 1;
  transform: translateY(0) skewY(0deg);
}

.swiper-slide-active .mt-hero-anim:nth-child(1) { transition-delay: 0.1s; }
.swiper-slide-active .mt-hero-anim:nth-child(2) { transition-delay: 0.22s; }
.swiper-slide-active .mt-hero-anim:nth-child(3) { transition-delay: 0.34s; }
.swiper-slide-active .mt-hero-anim:nth-child(4) { transition-delay: 0.46s; }
.swiper-slide-active .mt-hero-anim:nth-child(5) { transition-delay: 0.58s; }

.mt-hero__pagination {
  position: absolute;
  z-index: 5;
  bottom: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.6rem;
}

.mt-hero__pagination .swiper-pagination-bullet {
  width: 2.25rem;
  height: 3px;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 82% 100%, 0% 100%);
  background: rgba(194, 198, 204, 0.25);
  opacity: 1;
  transition: background 0.3s, width 0.3s;
}

.mt-hero__pagination .swiper-pagination-bullet-active {
  background: var(--orange-bright);
  width: 3.25rem;
}

.mt-hero__stats {
  position: absolute;
  z-index: 4;
  bottom: 7.5rem;
  right: 1.25rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  max-width: 320px;
}

@media (min-width: 640px) {
  .mt-hero__stats {
    right: 2rem;
    bottom: 8rem;
    grid-template-columns: repeat(4, 1fr);
    max-width: none;
    gap: 0.85rem;
  }
}

.mt-hero__stat {
  padding: 0.75rem 0.9rem;
  min-width: 5.25rem;
}

.mt-hero__stat-num {
  font-family: "Bebas Neue", sans-serif;
  line-height: 0.9;
}

.mt-hero__scroll {
  position: absolute;
  z-index: 5;
  bottom: 2.25rem;
  left: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.mt-hero__scroll-line {
  display: block;
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, var(--orange-bright), transparent);
  animation: mtScrollPulse 1.8s ease-in-out infinite;
}

@media (max-width: 1023px) {
  .mt-hero__scroll { display: none; }
  .mt-hero__stats {
    bottom: 1.5rem;
    left: 1.25rem;
    right: 1.25rem;
    max-width: none;
    grid-template-columns: repeat(4, 1fr);
  }
  .mt-hero__pagination { bottom: 1rem; }
}

@media (max-width: 639px) {
  .mt-hero__stats {
    grid-template-columns: repeat(2, 1fr);
    bottom: auto;
    top: 6rem;
    right: 1.25rem;
    left: auto;
    max-width: 190px;
  }
}

@keyframes mtScrollPulse {
  0%, 100% { opacity: 0.35; transform: scaleY(0.6); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

/* ???????????????????????????????????????????
   FEATURED BIKES ? coverflow swiper
   ??????????????????????????????????????????? */
.mt-bikes {
  position: relative;
  overflow: hidden;
}

.mt-bikes__swiper {
  overflow: visible;
  padding: 1rem 0 3rem;
}

.mt-bikes__swiper .swiper-slide {
  width: min(320px, 82vw);
  height: auto;
}

@media (min-width: 768px) {
  .mt-bikes__swiper .swiper-slide { width: 360px; }
}

.mt-bike-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--obsidian-soft);
  border: 1px solid rgba(138, 144, 153, 0.14);
  clip-path: polygon(0 0, 100% 0, 100% 94%, 94% 100%, 0 100%);
  transition: border-color 0.35s;
}

.mt-bike-card:hover {
  border-color: rgba(255, 106, 38, 0.4);
}

.mt-bike-card__img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.mt-bike-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mt-bike-card__year {
  position: absolute;
  top: 0;
  right: 0;
  font-family: "Bebas Neue", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--obsidian);
  background: var(--orange-bright);
  padding: 0.3rem 0.7rem;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}

.mt-bike-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}

.mt-bike-card__specs {
  border-top: 1px solid rgba(138, 144, 153, 0.14);
  padding-top: 1rem;
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.mt-bikes__pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.mt-bikes__pagination .swiper-pagination-bullet {
  width: 1.75rem;
  height: 3px;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
  background: rgba(194, 198, 204, 0.2);
  opacity: 1;
}

.mt-bikes__pagination .swiper-pagination-bullet-active {
  background: var(--orange-bright);
  width: 2.25rem;
}

.mt-bikes__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(138, 144, 153, 0.25);
  color: var(--graphite-mid);
  clip-path: polygon(15% 0, 100% 0, 85% 100%, 0 100%);
  transition: border-color 0.3s, color 0.3s, background 0.3s;
  cursor: pointer;
}

.mt-bikes__nav:hover {
  border-color: var(--orange-bright);
  color: var(--orange-bright);
  background: rgba(255, 77, 0, 0.06);
}

/* ???????????????????????????????????????????
   TECHNOLOGY ? diagonal clipped bands
   ??????????????????????????????????????????? */
.mt-tech-band {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(138, 144, 153, 0.1);
}

.mt-tech-band__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 8% 100%);
}

@media (min-width: 1024px) {
  .mt-tech-band__media--r {
    clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
  }
}

.mt-tech-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mt-tech-band__num {
  font-family: "Bebas Neue", sans-serif;
  color: rgba(138, 144, 153, 0.18);
  line-height: 0.8;
}

/* ???????????????????????????????????????????
   HORIZONTAL RACING TIMELINE
   ??????????????????????????????????????????? */
.mt-timeline {
  position: relative;
}

.mt-timeline__track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  padding-bottom: 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--orange-bright) transparent;
}

.mt-timeline__track::-webkit-scrollbar { height: 5px; }
.mt-timeline__track::-webkit-scrollbar-track { background: rgba(138, 144, 153, 0.1); }
.mt-timeline__track::-webkit-scrollbar-thumb { background: var(--orange-bright); }

.mt-timeline__item {
  position: relative;
  flex: 0 0 auto;
  width: min(280px, 78vw);
  scroll-snap-align: start;
  padding: 2.5rem 1.75rem 0;
  border-left: 2px solid rgba(138, 144, 153, 0.16);
}

@media (min-width: 768px) {
  .mt-timeline__item { width: 320px; }
}

.mt-timeline__item::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -7px;
  width: 12px;
  height: 12px;
  background: var(--orange-bright);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  box-shadow: 0 0 12px rgba(255, 106, 38, 0.6);
}

.mt-timeline__year {
  font-family: "Bebas Neue", sans-serif;
  color: var(--orange-bright);
  line-height: 1;
}

.mt-timeline__scrolltip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.mt-timeline__scrolltip-line {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, var(--orange-bright), transparent);
}

/* ???????????????????????????????????????????
   CINEMATIC BANNER
   ??????????????????????????????????????????? */
.mt-cinematic {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mt-cinematic__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.mt-cinematic__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.75) contrast(1.2) brightness(0.6);
  transform: scale(1.12);
}

.mt-cinematic__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(11,11,13,0.55) 0%, rgba(11,11,13,0.35) 40%, rgba(11,11,13,0.85) 100%);
}

.mt-cinematic__grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px);
  pointer-events: none;
}

.mt-cinematic__content {
  position: relative;
  z-index: 4;
  text-align: center;
}

.mt-cinematic__play {
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
  color: var(--orange-bright);
  transition: border-color 0.35s, transform 0.35s var(--ease-race), background 0.35s;
  cursor: pointer;
}

.mt-cinematic__play:hover {
  border-color: var(--orange-bright);
  background: rgba(255, 77, 0, 0.1);
  transform: scale(1.08);
}

/* ???????????????????????????????????????????
   NEWS ? press blade cards
   ??????????????????????????????????????????? */
.mt-news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .mt-news-grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
}

@media (min-width: 1024px) {
  .mt-news-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}

.mt-news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--obsidian-soft);
  border: 1px solid rgba(138, 144, 153, 0.1);
  border-top: 3px solid var(--orange-bright);
}

.mt-news-card__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  width: 100%;
  flex-shrink: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%);
}

.mt-news-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.mt-news-card:hover .mt-news-card__media img {
  transform: scale(1.05);
}

.mt-news-card__body {
  padding: 1.35rem 1.4rem 1.6rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ???????????????????????????????????????????
   BIKE LINEUP PANELS (services.php)
   ??????????????????????????????????????????? */
.mt-lineup .mt-lineup__panel {
  display: grid;
  gap: 2rem;
  padding: 3rem 0;
  align-items: center;
  border-bottom: 1px solid rgba(138, 144, 153, 0.1);
}

@media (min-width: 1024px) {
  .mt-lineup .mt-lineup__panel {
    grid-template-columns: 4.5rem 1fr 280px;
    gap: 3rem;
  }
}

.mt-lineup__num {
  font-size: 3rem;
  line-height: 1;
  color: rgba(255, 106, 38, 0.18);
  font-family: "Bebas Neue", sans-serif;
}

.mt-lineup__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.mt-lineup__visual {
  overflow: hidden;
  border: 1px solid rgba(138, 144, 153, 0.1);
  clip-path: polygon(0 0, 100% 0, 100% 88%, 88% 100%, 0 100%);
}

@media (max-width: 1023px) {
  .mt-lineup__visual { order: -1; }
}

/* ???????????????????????????????????????????
   PAGE HERO ? angular diagonal wipe (inner pages)
   ??????????????????????????????????????????? */
.mt-page-hero {
  position: relative;
  min-height: 52vh;
  display: flex;
  align-items: flex-end;
  padding-bottom: 5rem;
  padding-top: 8.5rem;
  overflow: hidden;
}

.mt-page-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8) contrast(1.15) brightness(0.75);
}

.mt-page-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--obsidian) 0%, rgba(11, 11, 13, 0.7) 48%, rgba(11, 11, 13, 0.4) 100%);
}

.mt-page-hero__wipe {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: 42%;
  height: 100%;
  background: linear-gradient(160deg, var(--orange) 0%, var(--orange-bright) 100%);
  clip-path: polygon(62% 0, 100% 0, 100% 100%, 38% 100%);
  opacity: 0.14;
  display: none;
}

@media (min-width: 768px) {
  .mt-page-hero__wipe { display: block; }
}

.mt-page-hero__content {
  position: relative;
  z-index: 3;
  width: 100%;
}

.mt-page-hero__title {
  letter-spacing: 0.01em;
}

/* ???????????????????????????????????????????
   RACE STAT NUMBERS (oversized digits)
   ??????????????????????????????????????????? */
.mt-race-num {
  font-family: "Bebas Neue", sans-serif;
  line-height: 0.85;
}

.mt-race-num__unit {
  font-family: "Bebas Neue", sans-serif;
  color: var(--orange-bright);
}

/* ???????????????????????????????????????????
   SECTION / DIVIDERS
   ??????????????????????????????????????????? */
.mt-section {
  position: relative;
}

.mt-divider-diag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3rem;
  background: inherit;
  clip-path: polygon(0 100%, 100% 40%, 100% 100%, 0% 100%);
  pointer-events: none;
}

/* ??? Awards trust badges (homepage) ??? */
.mt-award-badge {
  flex: 1 1 10.5rem;
  max-width: 14rem;
  min-width: 9.5rem;
  padding: 1.15rem 1.1rem 1.25rem;
  background: var(--obsidian);
  border: 1px solid rgba(138, 144, 153, 0.14);
  border-left: 3px solid var(--orange);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  text-align: left;
  transition: border-color 0.35s ease, transform 0.35s ease;
}

.mt-award-badge:hover {
  border-color: rgba(255, 77, 0, 0.45);
  transform: translateY(-3px);
}

/* ??? Forms ??? */
.mt-field {
  display: block;
  width: 100%;
  padding: 0.95rem 1.05rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.9rem;
  color: var(--graphite-mid);
  background: rgba(20, 20, 22, 0.7);
  border: 1px solid rgba(138, 144, 153, 0.2);
  border-radius: 0;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.mt-field:focus {
  border-color: var(--orange-bright);
  box-shadow: 0 0 0 3px rgba(255, 77, 0, 0.12);
}

textarea.mt-field {
  min-height: 8rem;
  resize: vertical;
}

select.mt-field {
  cursor: pointer;
}

/* ??? FAQ ??? */
.mt-faq {
  border: 1px solid rgba(138, 144, 153, 0.14);
  border-left: 3px solid rgba(138, 144, 153, 0.14);
  background: var(--obsidian-soft);
  transition: border-color 0.3s;
}

.mt-faq summary {
  list-style: none;
}

.mt-faq summary::-webkit-details-marker {
  display: none;
}

.mt-faq.is-open,
.mt-faq[open] {
  border-left-color: var(--orange-bright) !important;
}

/* ??? Orb glow accents ??? */
.mt-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 77, 0, 0.18), transparent 70%);
}

/* ??? Footer ??? */
.mt-footer-race {
  position: relative;
  background: var(--obsidian);
}

.mt-footer-race__stripe {
  height: 10px;
  width: 100%;
  background: repeating-linear-gradient(
    -45deg,
    var(--orange-bright) 0 22px,
    var(--obsidian) 22px 44px
  );
}

.mt-footer-race__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .mt-footer-race__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .mt-footer-race__grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}

.mt-footer-race__col {
  border-top: 2px solid rgba(255, 106, 38, 0.3);
  padding-top: 1.5rem;
}

.mt-footer-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(138, 144, 153, 0.12);
  border-bottom: 1px solid rgba(138, 144, 153, 0.12);
}

.mt-footer-stat {
  padding: 1.5rem 0.5rem;
  text-align: center;
  border-left: 1px solid rgba(138, 144, 153, 0.12);
}

.mt-footer-stat:first-child { border-left: none; }

.mt-footer-stat__num {
  font-family: "Bebas Neue", sans-serif;
  line-height: 0.9;
}

.mt-footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(138, 144, 153, 0.2);
  color: var(--graphite);
  clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%);
  transition: border-color 0.35s, color 0.35s, background 0.35s;
}

.mt-footer-social:hover {
  border-color: var(--orange-bright);
  color: var(--orange-bright);
  background: rgba(255, 77, 0, 0.08);
}

/* ??? Fade up fallback ??? */
.mt-fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease-race), transform 0.8s var(--ease-race);
}

.mt-fade-up.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ??? Reduced motion ??? */
@media (prefers-reduced-motion: reduce) {
  body.mt { cursor: auto; }
  body.mt::before { display: none; }
  .mt-hud { display: none; }
  .mt-hero__scroll-line { animation: none; }
  .mt-hero-anim { opacity: 1; transform: none; transition: none; }
  .mt-reveal__inner img { transform: none !important; }
  .mt-fade-up { opacity: 1; transform: none; }
  .mt-draw-line__path { stroke-dashoffset: 0; }
  .mt-news-card:hover .mt-news-card__media img { transform: none; }
  .mt-race-nav__dot { animation: none; }
}

/* ??? Visibility safety (prevents blank sections if JS / AOS fails) ??? */
.mt-blade-card,
.mt-bike-card,
.mt-tech-band,
.mt-timeline__item,
.mt-news-card,
.mt-award-badge,
.mt-hero__stat {
  opacity: 1;
  visibility: visible;
}

/* Delayed net: fade-ups stay animatable via IO, but recover if never intersecting */
@keyframes mt-vis-safety {
  to { opacity: 1; transform: none; visibility: visible; }
}

.mt-fade-up:not(.is-in),
.fade-up:not(.is-in) {
  animation: mt-vis-safety 0.01s linear 2.5s forwards;
}

[data-aos] {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

.mt-reveal__inner {
  clip-path: none;
}

html,
body.mt {
  overflow-x: hidden;
}

/* ??? Overflow safety across breakpoints (320?3840) ??? */
@media (min-width: 1920px) {
  .mt-hero__title { letter-spacing: 0.005em; }
}

img, svg, video { max-width: 100%; }