/* Real Levi and Ylläs elevation lines, reflected into a quiet repeating texture.
   Background layers stay behind content and do not create new stacking contexts. */
:root {
  --terrain-levi: url('/assets/levi-contours-soft.svg');
  --terrain-yllas: url('/assets/yllas-contours-soft.svg');
}

body,
.season-bar,
#experiences,
#basecamp,
.pillars,
#guarantee,
#locations,
#inquiry,
#aurora,
#faq,
.site-footer,
#experience-grid > .vita-tour-cell,
#experience-grid > .vita-tour-cell:hover,
.collection-note,
.bento-grid--vehicle-photo > .photo-placeholder > figcaption,
.booking-summary,
.aurora-status-banner,
.aurora-metric,
.full-kp-panel,
.solar-wind-panel,
.aurora-calendar-panel,
.aurora-model-panel,
.windy-cloud-panel,
.content-modal,
.concierge-panel,
.mobile-booking,
.site-header.vita-header-scrolled,
.site-header nav.open,
.page-layout > aside {
  background-image: var(--terrain-map, var(--terrain-levi));
  background-repeat: repeat;
  background-size: var(--terrain-size, 1600px) var(--terrain-size, 1600px);
  background-position: var(--terrain-position, left top);
}

#experiences, #locations, #aurora, .site-footer,
.pillars, .collection-note, .page-layout > aside {
  --terrain-map: var(--terrain-yllas);
}
#basecamp { --terrain-position: -170px -180px; }
#guarantee { --terrain-position: -300px -160px; }
#locations { --terrain-position: -180px -210px; }
#inquiry { --terrain-position: -150px -120px; }
#faq { --terrain-position: -160px -220px; }
.site-footer { --terrain-position: -150px -180px; }
.pillars { --terrain-position: -100px -200px; }
.season-bar { --terrain-position: -140px -300px; }
.site-header.vita-header-scrolled, .site-header nav.open,
.mobile-booking { --terrain-position: -160px -320px; }

#experience-grid > .vita-tour-cell {
  --terrain-map: var(--terrain-levi);
  --terrain-size: 1400px;
  --terrain-position: -170px -160px;
}
#experience-grid > .vita-tour-cell:nth-child(even) {
  --terrain-map: var(--terrain-yllas);
  --terrain-position: -280px -190px;
}
.booking-summary, .page-layout > aside {
  --terrain-size: 1400px;
  --terrain-position: -200px -180px;
}
.bento-grid--vehicle-photo > .photo-placeholder > figcaption {
  --terrain-size: 1400px;
  --terrain-position: -180px -300px;
}
.aurora-status-banner, .aurora-metric, .full-kp-panel,
.solar-wind-panel, .aurora-calendar-panel, .aurora-model-panel, .windy-cloud-panel {
  --terrain-position: -180px -200px;
}
.windy-cloud-panel {
  background-image: var(--terrain-map, var(--terrain-levi)), linear-gradient(135deg, #17201f, #11151c 65%);
  background-size: var(--terrain-size, 1600px) var(--terrain-size, 1600px), 100% 100%;
  background-repeat: repeat, no-repeat;
}
.content-modal, .concierge-panel {
  --terrain-size: 1400px;
  --terrain-position: -220px -180px;
}

/* Data plots keep their own clear surface inside the patterned panel margins. */
.full-kp-scroll, .solar-wind-grid {
  background-color: #0b222a;
}

@media (max-width: 780px) {
  body, .season-bar, #experiences, #basecamp, .pillars, #guarantee,
  #locations, #inquiry, #aurora, #faq, .site-footer {
    --terrain-size: 1300px;
  }
  #experience-grid > .vita-tour-cell {
    --terrain-size: 1200px;
    --terrain-position: -160px -140px;
  }
  #experience-grid > .vita-tour-cell:nth-child(even) {
    --terrain-position: -200px -160px;
  }
}