:root {
  --sea-deep: #075d77;
  --sun-gold: #ffd151;
  --coral: #f2644f;
  --paper: #fff2ce;
  --ride-duration: 15s;
  --rider-width: clamp(17rem, 29vw, 34rem);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--sea-deep);
}

body {
  min-height: 100svh;
}

.scene {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  overflow: hidden;
  background: var(--sea-deep);
}

.coast {
  position: absolute;
  z-index: -4;
  inset: -3%;
  background-image: url("assets/coastal-road.png");
  background-position: center;
  background-size: cover;
  animation: coast-breathe 18s ease-in-out infinite alternate;
}

.atmosphere {
  position: absolute;
  z-index: -3;
  inset: 0;
  background:
    radial-gradient(circle at 72% 16%, rgb(255 219 96 / 22%), transparent 27%),
    linear-gradient(180deg, rgb(2 48 69 / 4%) 35%, rgb(4 39 46 / 18%) 100%);
  mix-blend-mode: soft-light;
  animation: light-shift 12s ease-in-out infinite alternate;
}

.rider-track {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: clamp(-3rem, 1vh, 1rem);
  width: var(--rider-width);
  will-change: transform;
  animation: ride-across var(--ride-duration) linear infinite;
}

.rider-bob {
  position: relative;
  animation: road-bob 620ms ease-in-out infinite alternate;
  filter: drop-shadow(0 1.2rem 0.8rem rgb(12 35 34 / 24%));
}

.rider {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
  transform: rotate(-0.8deg);
  transform-origin: 50% 75%;
}

.print-grain {
  position: absolute;
  z-index: 4;
  inset: 0;
  opacity: 0.18;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.vignette {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 8rem rgb(2 44 53 / 22%),
    inset 0 -3rem 6rem rgb(23 36 29 / 16%);
}

@keyframes ride-across {
  0% {
    transform: translate3d(calc(-1 * var(--rider-width) - 4vw), 0, 0);
  }
  18% {
    transform: translate3d(8vw, -0.35rem, 0);
  }
  46% {
    transform: translate3d(47vw, 0.15rem, 0);
  }
  72% {
    transform: translate3d(77vw, -0.2rem, 0);
  }
  100% {
    transform: translate3d(112vw, 0, 0);
  }
}

@keyframes road-bob {
  from {
    transform: translateY(0) rotate(-0.45deg);
  }
  to {
    transform: translateY(-0.55rem) rotate(0.6deg);
  }
}

@keyframes coast-breathe {
  from {
    transform: scale(1.025) translate3d(-0.5%, 0, 0);
  }
  to {
    transform: scale(1.055) translate3d(0.75%, -0.35%, 0);
  }
}

@keyframes light-shift {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 0.9;
  }
}

@media (max-width: 720px) {
  :root {
    --ride-duration: 12s;
    --rider-width: clamp(18rem, 72vw, 28rem);
  }

  .coast {
    inset: -2%;
    background-position: 58% center;
  }

  .rider-track {
    bottom: max(-2.5rem, env(safe-area-inset-bottom));
  }

  .vignette {
    box-shadow: inset 0 0 4rem rgb(2 44 53 / 20%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .coast,
  .atmosphere,
  .rider-track,
  .rider-bob {
    animation: none;
  }

  .coast {
    transform: scale(1.03);
  }

  .rider-track {
    left: 50%;
    transform: translateX(-50%);
  }
}