/* =========================================================
   CU_RIOUS TECH — CINEMATIC INTRO
========================================================= */

.intro-scene {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: #050505;
  color: #fff;
  isolation: isolate;
  transition:
    opacity 1.2s ease,
    transform 1.4s cubic-bezier(.16,1,.3,1);
}

.intro-scene.hide {
  opacity: 0;
  transform: scale(1.08);
  pointer-events: none;
}

/* HORIZON */

.intro-horizon {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 1px;
  height: 1px;
  background: #fff;
  box-shadow:
    0 0 35px 12px rgba(255,255,255,.12),
    0 0 90px 35px rgba(255,255,255,.035);
}

/* ROAD */

.intro-road {
  position: absolute;
  left: 50%;
  bottom: -12%;
  width: 130%;
  height: 75%;
  transform: translateX(-50%);
  background:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(255,255,255,.025) 18%,
      #0a0a0a 48%,
      #050505 100%
    );
  clip-path: polygon(
    48% 0,
    52% 0,
    100% 100%,
    0 100%
  );
}

.intro-road::before,
.intro-road::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255,255,255,.12),
    transparent
  );
}

.intro-road::before {
  left: 18%;
}

.intro-road::after {
  right: 18%;
}

/* MOVING ROAD MARKINGS */

.road-line {
  position: absolute;
  left: 50%;
  width: 5px;
  height: 55px;
  background: rgba(255,255,255,.65);
  transform: translateX(-50%);
  opacity: 0;
  animation: roadMove 2.8s linear infinite;
}

.road-line-1 { animation-delay: 0s; }
.road-line-2 { animation-delay: .55s; }
.road-line-3 { animation-delay: 1.1s; }
.road-line-4 { animation-delay: 1.65s; }
.road-line-5 { animation-delay: 2.2s; }

@keyframes roadMove {
  0% {
    top: 35%;
    height: 8px;
    opacity: 0;
  }

  15% {
    opacity: .35;
  }

  100% {
    top: 105%;
    height: 150px;
    opacity: 0;
  }
}

/* RIDER */

.intro-rider {
  position: absolute;
  left: 50%;
  top: 39%;
  width: 150px;
  height: 190px;
  transform: translate(-50%, -50%);
  animation: riderFloat 1.2s ease-in-out infinite alternate;
  filter: drop-shadow(0 15px 20px rgba(0,0,0,.8));
}

@keyframes riderFloat {
  from {
    transform: translate(-50%, -50%) translateY(0);
  }

  to {
    transform: translate(-50%, -50%) translateY(-3px);
  }
}

/* BICYCLE */

.bike {
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 130px;
  height: 72px;
  transform: translateX(-50%);
}

.wheel {
  position: absolute;
  bottom: 0;
  width: 52px;
  height: 52px;
  border: 2px solid rgba(255,255,255,.7);
  border-radius: 50%;
  box-shadow: inset 0 0 8px rgba(255,255,255,.05);
}

.wheel-left {
  left: 2px;
}

.wheel-right {
  right: 2px;
}

.bike-frame {
  position: absolute;
  left: 32px;
  top: 18px;
  width: 62px;
  height: 2px;
  background: rgba(255,255,255,.75);
  transform: rotate(28deg);
  transform-origin: left center;
}

.bike-frame-2 {
  left: 62px;
  top: 47px;
  width: 50px;
  transform: rotate(-58deg);
}

.bike-handle {
  position: absolute;
  right: 15px;
  top: 9px;
  width: 18px;
  height: 12px;
  border-top: 2px solid rgba(255,255,255,.75);
  border-right: 2px solid rgba(255,255,255,.75);
}

/* RIDER BODY */

.rider-head {
  position: absolute;
  left: 70px;
  top: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e9e9e9;
}

.rider-body {
  position: absolute;
  left: 64px;
  top: 31px;
  width: 30px;
  height: 65px;
  border-radius: 16px 16px 8px 8px;
  background: #d8d8d8;
  transform: rotate(-18deg);
}

.rider-arm {
  position: absolute;
  left: 77px;
  top: 48px;
  width: 48px;
  height: 7px;
  border-radius: 5px;
  background: #ccc;
  transform: rotate(22deg);
  transform-origin: left center;
}

/* BRAND */

.intro-content {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 100%;
  text-align: center;
  transform: translateX(-50%);
  animation: introText 2s ease forwards;
}

.intro-content span {
  display: block;
  font-family: monospace;
  font-size: clamp(18px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: .18em;
}

.intro-content strong {
  display: block;
  margin-top: 10px;
  color: #999;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .12em;
}

@keyframes introText {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(18px);
  }

  45% {
    opacity: 0;
  }

  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* SKIP */

.intro-skip {
  position: absolute;
  right: 28px;
  bottom: 24px;
  color: #777;
  font: 11px monospace;
  cursor: pointer;
  transition: color .2s ease;
}

.intro-skip:hover {
  color: #fff;
}

/* MOBILE */

@media (max-width: 600px) {

  .intro-rider {
    transform: translate(-50%, -50%) scale(.82);
  }

  .intro-content {
    top: 57%;
  }

  .intro-content span {
    font-size: 17px;
  }

  .intro-road {
    width: 180%;
  }

  .intro-skip {
    right: 18px;
    bottom: 18px;
  }
}