.tilukset-intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 65% 35%, #2c5742 0%, #123b2d 45%, #082a22 100%);
  color: #f5f5e9;
  pointer-events: none;
  contain: layout paint;
  isolation: isolate;
  will-change: opacity;
  animation: tilukset-intro-timeout 5000ms step-end forwards;
}
.tilukset-intro.intro-running {
  animation: tilukset-intro-exit 2500ms ease forwards;
}
.intro-scene {
  width: min(100%, 560px);
  position: relative;
  transform: translateY(-4vh);
}
.intro-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  font:
    750 clamp(42px, 12vw, 60px)/1.1 system-ui,
    sans-serif;
  letter-spacing: -2.5px;
}
.intro-mark svg {
  display: block;
  width: 44px;
  height: 54px;
}
.intro-track {
  position: relative;
  height: 135px;
  margin-top: 26px;
}
.intro-trail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 23px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #a6c477 25%, #dce7a7 70%, transparent);
  opacity: 0.6;
}
.intro-tractor {
  position: absolute;
  inset: 0 0 auto;
  transform: translate3d(-170px, 0, 0);
  will-change: transform;
}
.intro-running .intro-tractor {
  animation: tilukset-intro-drive 2000ms linear both;
}
.intro-tractor svg {
  display: block;
}
.intro-caption {
  text-align: center;
  margin: 0;
  color: #c2d1b8;
  font:
    400 14px/1.5 system-ui,
    sans-serif;
  letter-spacing: 1px;
}
.intro-land {
  position: absolute;
  inset: 55% -40% -30%;
  transform: rotate(-16deg);
  opacity: 0.15;
}
.intro-land i {
  display: block;
  height: 16%;
  margin-top: 22px;
  border-top: 1px solid #bfce93;
  border-radius: 50%;
}
@keyframes tilukset-intro-exit {
  0%,
  88% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes tilukset-intro-drive {
  from {
    transform: translate3d(-170px, 0, 0);
  }
  to {
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes tilukset-intro-timeout {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tilukset-intro,
  .tilukset-intro.intro-running {
    display: none;
    animation: none;
  }
  .tilukset-intro * {
    animation: none;
  }
}