@font-face {
  font-family: "Lexend";
  src: url("./assets/fonts/Lexend-VariableFont_wght.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  font-family: "Lexend", "Avenir Next", system-ui, sans-serif;
  font-synthesis: none;
  --ink: #113d32;
  --cream: #fff8e9;
  --coral: #ed6b5f;
  --gold: #f5b64a;
  --mint: #6eb79a;
  --blue: #4f8fbd;
  --violet: #8d78ab;
  --forest: #1f684f;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #153d32;
}

button {
  font: inherit;
}

button:focus-visible {
  outline: max(3px, .18cqw) solid #fff;
  outline-offset: max(4px, .22cqw);
}

.experience {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 10%, rgba(125, 184, 154, .24), transparent 30%),
    radial-gradient(circle at 87% 78%, rgba(240, 184, 82, .18), transparent 28%),
    #153d32;
}

.landscape {
  container-type: inline-size;
  position: relative;
  width: min(100vw, calc(100svh * 1826 / 3245));
  aspect-ratio: 1826 / 3245;
  overflow: hidden;
  background: #8dc5dd;
  box-shadow: 0 0 9cqw rgba(0, 0, 0, .36);
  isolation: isolate;
}

.landscape::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(12, 55, 45, .04), transparent 24%, transparent 82%, rgba(9, 39, 31, .2));
}

.landscape__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.landscape-loader {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4.5cqw;
  padding: 8cqw;
  color: #fff8e9;
  background:
    radial-gradient(circle at 50% 38%, rgba(110, 183, 154, .28), transparent 31%),
    linear-gradient(155deg, #1f684f, #113d32);
  text-align: center;
  transition: opacity .35s ease, visibility .35s ease;
}

.landscape:not(.is-loading) .landscape-loader {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.landscape-loader__mark {
  display: flex;
  align-items: flex-end;
  gap: 1.5cqw;
  height: 10cqw;
}

.landscape-loader__mark span {
  width: 2.2cqw;
  height: 6cqw;
  border-radius: 999px;
  background: #ffd56e;
  animation: loader-rise .9s ease-in-out infinite alternate;
}

.landscape-loader__mark span:nth-child(2) {
  height: 10cqw;
  animation-delay: .15s;
}

.landscape-loader__mark span:nth-child(3) {
  height: 7.5cqw;
  animation-delay: .3s;
}

.landscape-loader__copy {
  display: grid;
  gap: 1.4cqw;
  font-size: clamp(11px, 2.5cqw, 52px);
  line-height: 1.35;
}

.landscape-loader__copy strong {
  font-size: clamp(19px, 4.5cqw, 92px);
  line-height: 1.08;
}

.hero {
  position: absolute;
  z-index: 3;
  top: 3.3%;
  left: 6.3%;
  width: 70%;
  color: var(--ink);
  text-wrap: balance;
  filter: drop-shadow(0 .35cqw .55cqw rgba(255, 255, 255, .2));
}

.hero__eyebrow {
  margin: 0 0 1.4cqw;
  font-size: clamp(10px, 2.7cqw, 58px);
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0;
  font-size: clamp(34px, 9.2cqw, 199px);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.hero h1 span {
  color: #fff8e8;
  text-shadow: 0 .35cqw 1cqw rgba(20, 67, 55, .28);
}

.hero__intro {
  width: max-content;
  max-width: 100%;
  margin: 2.2cqw 0 0;
  padding: 1.2cqw 2cqw;
  border-radius: 999px;
  color: #fff;
  background: rgba(21, 80, 62, .9);
  box-shadow: 0 .8cqw 1.7cqw rgba(18, 61, 48, .2);
  font-size: clamp(10px, 2.7cqw, 58px);
  font-weight: 600;
}

.hotspots {
  position: absolute;
  inset: 0;
  z-index: 4;
}

.hotspot {
  --tone: var(--forest);
  position: absolute;
  top: var(--y);
  left: var(--x);
  display: grid;
  width: max(9.8cqw, 44px);
  height: max(9.8cqw, 44px);
  padding: 0;
  place-items: center;
  border: .45cqw solid #fff;
  border-radius: 50%;
  color: #fff;
  background: var(--tone);
  box-shadow: 0 1.1cqw 2.2cqw rgba(16, 50, 40, .3), inset 0 .2cqw rgba(255, 255, 255, .35);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.hotspot::before {
  content: "";
  position: absolute;
  inset: -.35cqw;
  border-radius: inherit;
  border: .18cqw solid rgba(255, 255, 255, .72);
  box-shadow: 0 0 .9cqw .35cqw var(--tone);
  opacity: .45;
  transform: scale(1);
  pointer-events: none;
  animation: hotspot-glow 3.2s ease-in-out infinite;
}

.hotspot:nth-child(2n)::before { animation-delay: -.8s; }
.hotspot:nth-child(3n)::before { animation-delay: -1.6s; }
.hotspot:nth-child(5n)::before { animation-delay: -2.4s; }

.hotspot:hover,
.hotspot:focus-visible {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 1.4cqw 3.2cqw rgba(16, 50, 40, .42), inset 0 .2cqw rgba(255, 255, 255, .35);
}

.hotspot:active {
  transform: translate(-50%, -50%) scale(.96);
}

.hotspot__pulse {
  position: absolute;
  inset: -1.6cqw;
  border: .42cqw solid color-mix(in srgb, var(--tone) 80%, white);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.hotspot__pulse.is-pulsing {
  animation: hotspot-pulse 1.4s ease-out;
}

.hotspot__icon {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  font-size: clamp(18px, 4cqw, 86px);
  font-weight: 800;
  line-height: 1;
}

.hotspot__icon--symbol {
  font-size: clamp(21px, 4.4cqw, 95px);
}

.hotspot__label {
  position: absolute;
  top: 50%;
  right: calc(100% + 1.3cqw);
  width: max-content;
  min-width: 15cqw;
  max-width: 24cqw;
  padding: 1.15cqw 1.6cqw;
  border: .26cqw solid rgba(255, 255, 255, .9);
  border-radius: 2.4cqw 2.4cqw .55cqw 2.4cqw;
  color: #fff;
  background: color-mix(in srgb, var(--tone) 92%, #173d32);
  box-shadow: 0 .75cqw 1.6cqw rgba(17, 55, 44, .27);
  font-size: clamp(10px, 2.6cqw, 56px);
  font-weight: 800;
  line-height: 1.05;
  text-align: left;
  transform: translateY(-50%);
  animation: hotspot-label-glow 3.2s ease-in-out infinite;
}

.hotspot:nth-child(2n) .hotspot__label { animation-delay: -.8s; }
.hotspot:nth-child(3n) .hotspot__label { animation-delay: -1.6s; }
.hotspot:nth-child(5n) .hotspot__label { animation-delay: -2.4s; }

.hotspot__label small {
  display: block;
  margin-bottom: .4cqw;
  font-size: clamp(7px, 1.55cqw, 34px);
  font-weight: 600;
  letter-spacing: .08em;
  opacity: .82;
  text-transform: uppercase;
}

.hotspot--label-right .hotspot__label,
.hotspot--overview .hotspot__label {
  right: auto;
  left: calc(100% + 1.3cqw);
  border-radius: 2.4cqw 2.4cqw 2.4cqw .55cqw;
}

.hotspot--overview { --tone: #174c3b; }
.hotspot--coral { --tone: var(--coral); }
.hotspot--gold { --tone: #d98b18; }
.hotspot--blue { --tone: var(--blue); }
.hotspot--mint { --tone: #377d65; }
.hotspot--violet { --tone: var(--violet); }
.hotspot--forest { --tone: var(--forest); }

.landscape__hint {
  position: absolute;
  z-index: 3;
  bottom: 2%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  width: max-content;
  margin: 0;
  padding: 1.25cqw 2.2cqw;
  border-radius: 999px;
  color: #fff;
  background: rgba(11, 49, 38, .78);
  backdrop-filter: blur(.45cqw);
  font-size: clamp(9px, 2cqw, 43px);
  font-weight: 600;
  transform: translateX(-50%);
}

.landscape__hint-dot {
  flex: 0 0 auto;
  width: 1.4cqw;
  height: 1.4cqw;
  border-radius: 50%;
  background: #ffd56e;
  box-shadow: 0 0 0 .6cqw rgba(255, 213, 110, .25);
}

.landscape__hint-copy {
  display: block;
  line-height: 1.2;
}

.landscape__hint-copy small {
  display: block;
  margin-top: .45cqw;
  font-size: .7em;
  font-weight: 500;
  opacity: .78;
}

.info-dialog {
  width: min(88vw, 1050px, calc(88svh * 1.05));
  max-height: 92svh;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: clamp(22px, 3vmin, 48px);
  color: var(--ink);
  background: transparent;
  box-shadow: 0 30px 90px rgba(5, 34, 25, .36);
}

.info-dialog[open] {
  animation: dialog-in .28s cubic-bezier(.2, .9, .3, 1.08);
}

.info-dialog::backdrop {
  background: rgba(7, 36, 28, .7);
  backdrop-filter: blur(8px) saturate(.7);
  animation: backdrop-in .25s ease-out;
}

.info-dialog__panel {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-columns: .78fr 1.22fr;
  height: min(var(--dialog-panel-height, auto), 92svh);
  overflow: hidden;
  border: clamp(3px, .35vw, 7px) solid rgba(255, 255, 255, .88);
  border-radius: inherit;
  background: var(--cream);
}

.info-dialog--measuring {
  position: fixed;
  top: 0;
  left: -200vw;
  display: block;
  max-height: none;
  margin: 0;
  visibility: hidden;
  pointer-events: none;
}

.info-dialog--measuring .info-dialog__panel {
  grid-template-rows: auto auto;
  height: auto;
}

.info-dialog__close {
  position: absolute;
  z-index: 3;
  top: clamp(12px, 1.7vmin, 24px);
  right: clamp(12px, 1.7vmin, 24px);
  display: grid;
  width: clamp(48px, 5.5vmin, 76px);
  height: clamp(48px, 5.5vmin, 76px);
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: var(--ink);
  box-shadow: 0 8px 20px rgba(17, 61, 50, .22);
  cursor: pointer;
}

.info-dialog__close-icon {
  display: block;
  width: 46%;
  height: 46%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2.4;
}

.info-dialog__visual {
  position: relative;
  min-height: clamp(300px, 43vmin, 520px);
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 18%, rgba(255, 248, 220, .9) 0 11%, transparent 11.5%),
    linear-gradient(155deg, #81c5dc 0 29%, #a9d6bd 29.5% 48%, #4b8260 48.5% 100%);
}

.info-dialog__visual::before,
.info-dialog__visual::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
}

.info-dialog__visual::before {
  top: -12%;
  left: -32%;
  width: 110%;
  height: 62%;
}

.info-dialog__visual::after {
  right: -35%;
  bottom: -24%;
  width: 120%;
  height: 66%;
  background: #2c6149;
}

.route-line {
  position: absolute;
  z-index: 1;
  top: 53%;
  left: 8%;
  width: 84%;
  height: 18%;
  border: clamp(10px, 1.4vmin, 18px) dotted rgba(30, 34, 32, .68);
  border-right: 0;
  border-bottom: 0;
  border-radius: 50% 0 0 0;
  transform: rotate(-12deg);
}

.route-dot {
  position: absolute;
  z-index: 2;
  display: block;
  width: clamp(38px, 4.2vmin, 56px);
  height: clamp(38px, 4.2vmin, 56px);
  border: clamp(6px, .7vmin, 9px) solid #fff;
  border-radius: 50%;
  background: var(--dialog-tone, var(--coral));
  box-shadow: 0 8px 18px rgba(20, 59, 47, .28);
}

.route-dot--one {
  top: 60%;
  left: 11%;
}

.route-dot--two {
  top: 41%;
  right: 13%;
  animation: dot-bounce 1.8s ease-in-out infinite;
}

.route-arrow {
  position: absolute;
  z-index: 2;
  top: 24%;
  right: 10%;
  color: #fff8de;
  font-size: clamp(58px, 7vmin, 92px);
  font-weight: 800;
  transform: rotate(-18deg);
}

.route-figure {
  position: absolute;
  z-index: 2;
  bottom: 9%;
  left: 28%;
  color: #ffd166;
  font-size: clamp(76px, 9vmin, 118px);
  filter: drop-shadow(0 10px 0 rgba(24, 59, 46, .25));
}

.info-dialog__copy {
  min-height: 0;
  overflow-y: auto;
  padding: clamp(28px, 3.5vmin, 64px) clamp(28px, 4vmin, 66px) clamp(24px, 3vmin, 48px);
}

.info-dialog__eyebrow {
  margin: 0 0 clamp(8px, 1vmin, 12px);
  color: var(--dialog-tone, var(--coral));
  font-size: clamp(14px, 1.45vmin, 21px);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.info-dialog h2 {
  max-width: 88%;
  margin: 0;
  font-size: clamp(30px, 3.6vmin, 62px);
  line-height: 1.02;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.info-dialog__lead {
  margin: clamp(16px, 2.1vmin, 30px) 0;
  font-size: clamp(17px, 1.75vmin, 27px);
  font-weight: 500;
  line-height: 1.45;
}

.info-dialog__facts {
  display: grid;
  gap: clamp(7px, .9vmin, 12px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.info-dialog__facts li {
  display: grid;
  grid-template-columns: clamp(34px, 3.4vmin, 42px) 1fr;
  align-items: center;
  min-height: clamp(42px, 4vmin, 52px);
  font-size: clamp(15px, 1.45vmin, 22px);
  font-weight: 650;
}

.info-dialog__facts li::before {
  content: "✓";
  display: grid;
  width: clamp(27px, 2.6vmin, 31px);
  height: clamp(27px, 2.6vmin, 31px);
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--dialog-tone, var(--coral));
  font-size: clamp(14px, 1.4vmin, 17px);
}

.info-dialog__quote {
  margin: clamp(16px, 2vmin, 26px) 0 0;
  padding: clamp(13px, 1.5vmin, 18px) clamp(15px, 1.8vmin, 22px);
  border-left: clamp(5px, .55vmin, 7px) solid var(--dialog-tone, var(--coral));
  border-radius: 0 16px 16px 0;
  color: #30584c;
  background: rgba(68, 122, 96, .08);
  font-size: clamp(15px, 1.45vmin, 22px);
  font-weight: 650;
  line-height: 1.4;
}

.info-dialog__actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: clamp(10px, 1.2vmin, 16px);
  padding: clamp(14px, 1.6vmin, 22px) clamp(22px, 3vmin, 48px) clamp(16px, 1.9vmin, 24px);
  border-top: 1px solid rgba(32, 88, 67, .13);
  background: #fffdf6;
}

.dialog-button {
  min-height: clamp(50px, 5vmin, 62px);
  padding: clamp(10px, 1.1vmin, 13px) clamp(18px, 2vmin, 26px);
  border: 0;
  border-radius: 999px;
  font-size: clamp(15px, 1.45vmin, 21px);
  font-weight: 750;
  cursor: pointer;
}

.dialog-button--back {
  color: var(--ink);
  background: #e7eee9;
}

.dialog-button--next {
  color: #fff;
  background: var(--dialog-tone, var(--coral));
}

@keyframes hotspot-pulse {
  0% { opacity: .9; transform: scale(.72); }
  100% { opacity: 0; transform: scale(1.4); }
}

@keyframes hotspot-glow {
  0%, 100% {
    box-shadow: 0 0 .9cqw .35cqw var(--tone);
    opacity: .42;
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 1.8cqw .65cqw var(--tone);
    opacity: .72;
    transform: scale(1.12);
  }
}

@keyframes hotspot-label-glow {
  0%, 100% {
    box-shadow: 0 .75cqw 1.6cqw rgba(17, 55, 44, .27), 0 0 .35cqw rgba(255, 255, 255, .18);
    text-shadow: 0 0 .2cqw rgba(255, 255, 255, .18);
  }
  50% {
    box-shadow: 0 .75cqw 1.6cqw rgba(17, 55, 44, .27), 0 0 1.25cqw .3cqw var(--tone);
    text-shadow: 0 0 .55cqw rgba(255, 255, 255, .62);
  }
}

@keyframes loader-rise {
  from { transform: translateY(1.5cqw); opacity: .45; }
  to { transform: translateY(-1.5cqw); opacity: 1; }
}

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(30px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dot-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@media (max-width: 720px) {
  .info-dialog {
    width: min(94vw, 540px);
    max-height: 88svh;
  }

  .info-dialog__panel {
    display: block;
    height: min(var(--dialog-panel-height, auto), 88svh);
    max-height: 88svh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .info-dialog--measuring .info-dialog__panel {
    height: auto;
    max-height: none;
    overflow: hidden;
  }

  .info-dialog__copy {
    overflow: visible;
  }

  .info-dialog__visual {
    min-height: clamp(105px, 17svh, 140px);
    max-height: 17svh;
  }

  .route-line {
    border-width: 10px;
  }

  .route-dot {
    width: 34px;
    height: 34px;
    border-width: 6px;
  }

  .route-arrow {
    font-size: 56px;
  }

  .route-figure {
    font-size: 72px;
  }

  .info-dialog__copy {
    padding: 22px 22px 16px;
  }

  .info-dialog__eyebrow {
    font-size: 12px;
  }

  .info-dialog h2 {
    max-width: calc(100% - 36px);
    font-size: clamp(25px, 7.4vw, 32px);
  }

  .info-dialog__lead {
    margin: 14px 0;
    font-size: 16px;
    line-height: 1.38;
  }

  .info-dialog__facts {
    gap: 4px;
  }

  .info-dialog__facts li {
    grid-template-columns: 32px 1fr;
    min-height: 38px;
    font-size: 14px;
  }

  .info-dialog__quote {
    margin-top: 12px;
    padding: 11px 13px;
    font-size: 14px;
  }

  .info-dialog__actions {
    position: sticky;
    bottom: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }

  .dialog-button {
    flex: 1;
    min-height: 50px;
    padding-inline: 12px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}