/* The first visit is a small painted run through the woods. The artwork and
   the frame sequence are separate, registered image layers. */
html.is-intro-loading { background: #0756a6; }
html.is-intro-loading body { overflow: hidden; }
html.is-intro-loading main { visibility: hidden; }
html.is-intro-loading, html.is-intro-loading * { cursor: default !important; }
html.is-intro-loading .veluwe-cursor,
html.is-intro-loading .veluwe-cursor-burst { visibility: hidden !important; }
html.is-intro-loading:not(.intro-mounted)::before {
  content: ''; position: fixed; inset: 0; z-index: 2147483630;
  background: #0756a6; pointer-events: all;
}
.veluwe-intro {
  contain: layout paint;
  position: fixed; inset: 0; z-index: 2147483630; isolation: isolate;
  overflow: hidden; width: 100%; height: 100%; min-height: 320px;
  background: #0756a6; color: #f3e6c8; touch-action: none;
  user-select: none; -webkit-user-select: none; outline: none;
}
.veluwe-intro[hidden] { display: none !important; }
.veluwe-intro__art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.veluwe-intro__layer {
  position: absolute; top: -5%; left: -6%; width: 114%; height: 110%;
  object-fit: cover; object-position: center; pointer-events: none;
}
.veluwe-intro__track {
  position: absolute; top: -5%; left: 0; width: 400%; height: 110%;
  display: flex; pointer-events: none; will-change: transform;
  animation: veluwe-intro-travel var(--intro-travel-duration) linear infinite;
  animation-play-state: paused;
}
.veluwe-intro__tile { display: block; flex: 0 0 25%; width: 25%; height: 100%; object-fit: cover; }
/* Mirrored neighbours share the same painted edge, so the scenery can pass
   continuously without an empty gap or a reset across the viewport. */
.veluwe-intro__tile:nth-child(even) { transform: scaleX(-1); }
.veluwe-intro__track--background { z-index: 0; --intro-travel-duration: 40s; }
.veluwe-intro__track--midground { z-index: 1; --intro-travel-duration: 23s; }
.veluwe-intro__layer--foreground { z-index: 6; }
.veluwe-intro[data-phase='loading'] .veluwe-intro__track,
.veluwe-intro[data-phase='finishing'] .veluwe-intro__track,
.veluwe-intro[data-phase='covering'] .veluwe-intro__track { animation-play-state: running; }
.veluwe-intro[data-paused='true'] .veluwe-intro__track { animation-play-state: paused; }
.veluwe-intro__brand {
  position: absolute; z-index: 3; top: clamp(28px, 4.5svh, 58px);
  left: 50%; transform: translateX(-50%); margin: 0;
  font: 400 clamp(39px, 5.1vw, 79px)/1 'Veluwe Display Clean', sans-serif;
  letter-spacing: .025em; color: #f3e6c8;
}
.veluwe-intro__percentage {
  position: absolute; z-index: 2; left: 50%; top: 19%;
  transform: translateX(-50%); width: min(67vw, 1110px);
  height: 47%; display: flex; justify-content: center; align-items: center;
}
.veluwe-intro__percentage--front { z-index: 5; pointer-events: none; }
.veluwe-intro__digits {
  display: block; width: 100%; height: 100%; overflow: visible; fill: #f3e6c8;
  -webkit-mask-size: 520px 520px; mask-size: 520px 520px;
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
  -webkit-mask-position: center; mask-position: center;
}
.veluwe-intro__runner {
  position: absolute; z-index: 4; left: 50%; bottom: -8%;
  width: min(86vw, 1320px); aspect-ratio: 3 / 2;
  transform: translateX(-50%); pointer-events: none;
}
.veluwe-intro__run-image {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; pointer-events: none;
}
.veluwe-intro__run-image[hidden] { display: none !important; }
.veluwe-intro__caption {
  position: absolute; z-index: 6; left: 50%; bottom: clamp(20px, 4svh, 45px);
  transform: translateX(-50%); margin: 0; white-space: nowrap;
  font: 400 clamp(13px, 1.12vw, 17px)/1.3 Georgia, serif;
  color: #f3e6c8; text-shadow: 0 1px 6px #0756a6;
}
.veluwe-intro__skip {
  position: absolute; z-index: 7; right: clamp(20px, 2.6vw, 44px);
  top: clamp(24px, 4svh, 48px); border: 0; padding: 9px 0 9px 12px;
  color: #f3e6c8; background: transparent; font: 400 12px/1.4 system-ui, sans-serif;
  opacity: .72; text-decoration: none; cursor: pointer;
}
.veluwe-intro__skip:hover { opacity: 1; }
.veluwe-intro__skip:focus-visible { opacity: 1; outline: 1px solid #f3e6c8; outline-offset: 6px; }
@keyframes veluwe-intro-travel { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (max-aspect-ratio: 4/5) {
  .veluwe-intro__brand { top: 8%; font-size: clamp(40px, 12vw, 70px); }
  .veluwe-intro__percentage { top: 25%; width: 85vw; height: 31%; }
  .veluwe-intro__runner { bottom: 34%; width: 98vw; }
  .veluwe-intro__layer { left: -15%; width: 140%; object-position: 50% 50%; }
  .veluwe-intro__layer--foreground { object-fit: cover; object-position: 50% 50%; }
  .veluwe-intro__caption { bottom: 10%; font-size: 14px; }
  .veluwe-intro__skip { top: 21px; right: 22px; font-size: 11px; }
}
@media (max-height: 500px) and (min-aspect-ratio: 4/5) {
  .veluwe-intro__brand { top: 21px; font-size: 37px; }
  .veluwe-intro__percentage { top: 19%; height: 51%; width: 57vw; }
  .veluwe-intro__runner { width: min(73vw, 820px); bottom: -4%; }
  .veluwe-intro__caption { bottom: 15px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .veluwe-intro__track { animation: none; will-change: auto; }
}

html.is-intro-welcome .veluwe-welcome,html.is-intro-welcome .veluwe-welcome *{cursor:auto!important}
html.is-intro-welcome .veluwe-welcome button,html.is-intro-welcome .veluwe-welcome button *{cursor:pointer!important}