/* Intro animation (index.html only). Everything starts hidden; js/intro.js fades it in. */
.intro .board__map, .intro-welcome, .intro .satellite,
.intro .parchment, .intro .leather, .intro .buckle, .intro .logo, .intro .badge,
.intro .compass, .intro-cta, .intro-contact, .intro-quote { opacity: 0; }
/* the homepage lines and pictures are revealed one by one (desktop); on phones the whole block fades in */
.intro .home .fx { opacity: 0; }
.intro:not(.done) .home { pointer-events: none; }
.intro .compass a.intro-contact { opacity: 0; }
.intro .board__map { background: rgba(10, 30, 70, .25); }
/* the panel's outer shadow sits on .board__map here, so the panel (step 2) can fade in on its own */
.intro .board { box-shadow: none; }
.intro .board__map { box-shadow: rgba(0, 0, 0, .39) 10px 0 20px 15px; overflow: hidden; }   /* dark "empty board" behind the welcome text */
.intro.done .board__map { background: #e3c98f; }

.intro-welcome {
  position: absolute; z-index: 6; left: 0; right: 0; top: 40%;
  text-align: center; font-size: calc(2.6 * var(--u)); line-height: 1.2;
  color: #eaf2ff; text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.intro-cta {
  position: absolute; z-index: 4; right: 50%; top: 38%;
  text-align: right; font-size: calc(2.2 * var(--u)); line-height: 1.15;
}
/* big yellow button: final spot = the CONTACT US label on the compass */
.intro-contact {
  left: 0.7%; top: 76.6%; transform-origin: right center;
  background: #ffd000; border: 1px solid #000; color: #000;
  font-weight: 700; letter-spacing: .06em; font-size: max(.55em, 8px);
  padding: .1em .3em; white-space: nowrap; letter-spacing: .08em; border: 0; outline: 1px solid #000;
  transform: translate(-100%, -50%);
}
.skip-intro { z-index: 60; }
.intro.done .skip-intro { display: none; }

/* parchment slowly drifts once the intro is finished */
/* it drifts UP only as far as the picture reaches below the board (set in js/intro.js), so no edge ever shows */
.intro.done .parchment--wide { animation: drift 120s ease-in-out infinite alternate; }

@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .intro-cta, .intro-contact, .intro-quote { display: none; }
  .intro .home .fx { opacity: 1; }
  .intro .home { opacity: 0; }
  .intro-welcome { top: 30vh; font-size: 5cqw; }
  .intro .satellite { top: 0; height: 100%; object-fit: cover; }
  .skip-intro { display: none; }
  .intro.done .parchment--wide { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .intro.done .parchment--wide { animation: none; }
}

/* Once the intro has finished, the end state is always visible - even if the window was resized
   across the phone/desktop switch after the page loaded (the two use different animations). */
.intro.done .board__map, .intro.done .parchment, .intro.done .leather, .intro.done .buckle,
.intro.done .logo, .intro.done .badge, .intro.done .compass, .intro.done .home, .intro.done .home .fx { opacity: 1 !important; }
.intro.done .logo { transform: none !important; }
.intro.done .intro-cta, .intro.done .compass-ghost, .intro.done .intro-welcome, .intro.done .intro-quote { display: none; }

/* the blue "One thing to remember" box (6 Nov): appears before "Need a map ...?" (placed by js/intro.js) */
.intro-quote {
  position: absolute; z-index: 4; right: 45.7%; top: 43%; margin: 0;
  font-size: calc(1.4 * var(--u)); line-height: 1.4; font-style: italic; white-space: nowrap;
  color: #fff; background: rgb(41, 97, 207); padding: .6em 1.1em; border-radius: 2px;
}
.intro-quote__head { font-style: normal; }
.intro-quote__in { display: block; padding-left: .9em; }