/*
Theme Name: The UneXpected Time Traveler
Description: Custom WordPress theme with scroll-driven animations and cinematic transitions between story sections. Features custom ACF integration for dynamic content management and automatic SVG generation for website image text.
Author: Quitzia Development
Author URI: https://quitziadevelopment.com
Version: 1.0
Requires at least: 5.0
Tested up to: 6.8
Requires PHP: 8.0
License: GPL v2 or later
*/

/* === Utility Classes === */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* === Project Classes === */

html,
body {
  margin: 0;
  padding: 0;
  overflow-y: scroll;
  /* scroll-snap-type: y mandatory; */
  scroll-behavior: smooth; /* no jumping between sections */
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgb(216, 185, 163);
  z-index: -9999;
  pointer-events: none;
}


/* Mobile/Portrait Static Background Override */
@media (orientation: portrait) {
  body {
    background-color: rgb(216, 185, 163);
  }
  
  /* Hide all animated elements for mobile static version */
  .canvas {
    display: none !important;
  }
}

body::before {
  display: none;
}

/* Mobile background container - Dedicated background element */
#mobile-background-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url('assets/home-mobile.png') no-repeat center center;
  background-size: contain;
  background-color: rgb(216, 185, 163);
  z-index: 1050; /* Behind mobile container (1100) but in front of everything else */
  display: none;
}

/* Mobile container - Proportional scaling container */
#mobile-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Design canvas: 1080x2400 - scale to fit width with max height constraint */
  width: min(100vw, 45vh); /* 1080/2400 = 0.45 aspect ratio */
  height: min(222.22vw, 100vh); /* 2400/1080 = 2.222 aspect ratio */
  z-index: 1100; /* Higher than footer (1000) and other elements */
  display: none;
}

/* Mobile slider - Positioned relative to mobile container */
/* Portrait design canvas: 1080×2400 pixels */
#home-mobile-slider {
  position: absolute;
  left: 17.6852%; /* 191/1080 * 100 - position within mobile container */
  top: 38.2917%; /* 919/2400 * 100 - position within mobile container */
  width: 70.5556%; /* 762/1080 * 100 - design dims: 762×854px */
  height: 35.5833%; /* 854/2400 * 100 - design dims: 762×854px */
  background: url('assets/home-mobile-slider.png') no-repeat center center;
  background-size: contain;
}

/* Mobile footer - Portrait-only footer bar */
#mobile-footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8.3333vw; /* ~34px at 1080px width */
  background: rgba(216, 185, 163, 0.3);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0 3.125vw; /* ~15px at 1080px width */
  box-sizing: border-box;
  z-index: 1200; /* Above mobile container (1100) */
  cursor: default; /* Remove pointer cursor on hover */
}

#mobile-social-icons {
  display: flex;
  gap: 1.0417vw; /* ~5px at 1080px width */
  align-items: center;
  transform: translateY(-0.5208vw); /* ~-2px at 1080px width */
}

#mobile-email-text {
  color: #1e100a;
  font-size: 2.5vw; /* ~12px at 1080px width */
  font-family: "Georgia", serif;
  text-shadow: none;
}

.mobile-social-icon {
  width: 5vw; /* ~24px at 1080px width */
  height: 5vw;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.mobile-social-icon:hover {
  opacity: 1;
}

#mobile-icon-email {
  background: var(--icon_email_svg_url) no-repeat center;
  background-size: contain;
}

#mobile-icon-facebook {
  background: var(--icon_facebook_svg_url) no-repeat center;
  background-size: contain;
  display: none; /* Keep hidden like desktop version */
}

#mobile-icon-instagram {
  background: var(--icon_instagram_svg_url) no-repeat center;
  background-size: contain;
  display: none; /* Keep hidden like desktop version */
}

#mobile-copyright {
  color: #1e100a;
  font-size: 2.5vw; /* ~12px at 1080px width */
  font-family: "Georgia", serif;
  text-shadow: none;
}

/* Options for slower/smoother scrolling */
html {
  scroll-behavior: smooth;
}

/* Images are absolutely positioned relative to the .canvas container using their "home" CSS positions */
/* Background and foreground (section) images are animated with transforms */
.canvas {
  width: auto;
  height: 1113.1481vh;
  aspect-ratio: 1920/12022;
  position: relative; /* required for absolute children */
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}
@media (orientation: portrait) {
  .canvas {
    width: 100vw;
    height: auto;
  }
}

/* Section images are absolutely positioned (in front of background images) relative to their section container*/
section {
  scroll-snap-align: start;
  width: auto;
  height: 100vh;
  aspect-ratio: 16/9;
  position: relative;
}
@media (orientation: portrait) {
  section {
    width: 100vw;
    height: auto;
    aspect-ratio: 16/9;
  }
}

/* Enable scroll snap by dynamically adding this class */
.scroll-snap-enabled {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

/* Lock scrolling by dynamically adding this class */
.scroll-locked {
  overflow: hidden !important;
  /* On mobile, also prevent touch scroll */
  touch-action: none;
}

/* Images are animated by JavaScript functions that apply transforms */
.animate {
  display: none;
  position: absolute;
  will-change: transform;
}

#home .animate {
  display: block;
}

/* Sliders slide in/out from one edge on top of the other layers */
.slider {
  display: none;
  pointer-events: none;
}

.slider-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Fullscreen overlay to block interaction while showing a slider */
/* Z-index 210: Above the slider card (200) and slider text (201) */
.click-blocker {
  width: 100vw;
  height: 100vh;
  position: fixed;
  background: transparent;
  display: none !important;
  inset: 0;
  z-index: 210;
  cursor: pointer;
}

/* background images are larger than a section and aren't clickable */
.background {
  display: block;
  pointer-events: none; /* ignore mouse events */
  cursor: default;
}

/* home is longer than other sections */
#home {
  width: auto;
  height: 213.1481vh;
  aspect-ratio: 1920/2302;
}
@media (orientation: portrait) {
  #home {
    width: 100vw;
    height: auto;
  }
}

#map {
  left: -127.1296vh;
  top: 220.3704vh;
  width: auto; /* 3780px */
  height: 465.6481vh; /* 5029px */
  aspect-ratio: 3780 / 5029;
  background: var(--map_png_url) no-repeat;
  background-size: contain;
  transform-origin: top left;
  z-index: -10;
}
@media (orientation: portrait) {
  #map {
    left: -71.5104vw;
    top: 123.9583vw;
    width: 196.875vw;
    height: auto;
  }
}

#title-map {
  left: 0vh;
  top: 0vh;
  width: auto; /* 1920px */
  height: 253.9815vh; /* 2743px */
  aspect-ratio: 1920 / 2743;
  background: var(--title_map_png_url) no-repeat;
  background-size: contain;
  z-index: -20;
}
@media (orientation: portrait) {
  #title-map {
    left: 0vw;
    top: 0vw;
    width: 100vw;
    height: auto;
  }
}

#home-title-text {
  left: 76.7593vh;
  top: 15.6481vh;
  width: auto; /* 465px */
  height: 34.8148vh; /* 376px */
  aspect-ratio: 465 / 376;
  background: var(--title_text_svg_url) no-repeat;
  background-size: contain;
  z-index: 48;
}
@media (orientation: portrait) {
  #home-title-text {
    left: 43.1771vw;
    top: 8.8021vw;
    width: 24.2188vw;
    height: auto;
  }
}

#home-title-image {
  left: 1.0185vh;
  top: 0vh;
  width: auto; /* 1676px */
  height: 170.463vh; /* 1841px */
  aspect-ratio: 1676 / 1841;
  background: url(assets/title-image.png) no-repeat;
  background-size: contain;
  z-index: 46;
}
@media (orientation: portrait) {
  #home-title-image {
    left: 0.5729vw;
    top: 0vw;
    width: 87.2917vw;
    height: auto;
  }
}

#home-x-marks {
  left: 7.3148vh;
  top: 88.1481vh;
  width: auto; /* 73px */
  height: 6.0185vh; /* 65px */
  aspect-ratio: 73 / 65;
  cursor: pointer;
  z-index: 49;
}
@media (orientation: portrait) {
  #home-x-marks {
    left: 4.1146vw;
    top: 49.5833vw;
    width: 3.8021vw;
    height: auto;
  }
}

#home-you-are-hare {
  left: 1.4352vh;
  top: 84.4907vh;
  width: auto; /* 62px */
  height: 5.7407vh; /* 62px */
  aspect-ratio: 1 / 1;
  cursor: pointer;
  z-index: 50;
}
@media (orientation: portrait) {
  #home-you-are-hare {
    left: 0.8073vw;
    top: 47.5260vw;
    width: 3.2292vw;
    height: auto;
  }
}

#rabbit-container {
  left: 61.6667vh;
  top: 80vh;
  width: auto; /* 341.5px */
  height: 56.2963vh; /* 607.11px */
  aspect-ratio: 341.5 / 607.11;
  cursor: pointer;
  z-index: 48;
}
@media (orientation: portrait) {
  #rabbit-container {
    left: 34.6875vw;
    top: 45vw;
    width: 17.7865vw;
    height: auto;
  }
}

/* #rabbit-thumb {
  width: 100%;
  height: 100%;
  background: url(assets/rabbit-thumb.png) no-repeat;
  background-size: contain;
} */

#rabbit-video {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

#signal-oil-bg {
  left: -9.2593vh;
  top: 115.463vh;
  width: auto; /* 2188px */
  height: 202.5926vh; /* 2188px */
  aspect-ratio: 2188 / 2188;
  background: var(--signal_oil_bg_png_url) no-repeat;
  background-size: contain;
  z-index: -1;
}
@media (orientation: portrait) {
  #signal-oil-bg {
    left: -5.2083vw;
    top: 64.9479vw;
    width: 113.9583vw;
    height: auto;
  }
}

#s2-woman {
  left: 21.7593vh;
  top: 43.4259vh;
  width: auto; /* 421px */
  height: 38.9815vh; /* 421px */
  aspect-ratio: 421 / 421;
  background: url(assets/woman.png) no-repeat;
  background-size: contain;
  z-index: 34;
}
@media (orientation: portrait) {
  #s2-woman {
    left: 12.2396vw;
    top: 24.4271vw;
    width: 21.9271vw;
    height: auto;
  }
}

#s2-man {
  left: 119.3519vh;
  top: 41.3889vh;
  width: auto; /* 443px */
  height: 41.0185vh; /* 443px */
  aspect-ratio: 443 / 443;
  background: url(assets/man.png) no-repeat;
  background-size: contain;
  z-index: 32;
}
@media (orientation: portrait) {
  #s2-man {
    left: 67.1354vw;
    top: 23.2812vw;
    width: 23.0729vw;
    height: auto;
  }
}

#s2-woman-slider {
  left: 16.1111vh;
  top: 16.1111vh;
  width: auto; /* 1058px */
  height: 67.7778vh; /* 732px */
  aspect-ratio: 1058 / 732;
  background: url(assets/woman-slider.png) no-repeat;
  background-size: contain;
  z-index: 200;
}
@media (orientation: portrait) {
  #s2-woman-slider {
    left: 9.0625vw;
    top: 9.0625vw;
    width: 55.1042vw;
    height: auto;
  }
}

#s2-man-slider {
  left: 63.7037vh;
  top: 16.1111vh;
  width: auto; /* 1058px */
  height: 67.7778vh; /* 732px */
  aspect-ratio: 1058 / 732;
  background: url(assets/man-slider.png) no-repeat;
  background-size: contain;
  z-index: 200;
}
@media (orientation: portrait) {
  #s2-man-slider {
    left: 35.8333vw;
    top: 9.0625vw;
    width: 55.1042vw;
    height: auto;
  }
}

#s2-bridge-car {
  left: 79.74vh;
  top: 47.31vh;
  width: auto; /* 129px */
  height: 6.0185vh; /* 65px */
  aspect-ratio: 129 / 65;
  /* background: url(assets/bridge-car.png) no-repeat; */
  background-size: contain;
  z-index: 30;
}
@media (orientation: portrait) {
  #s2-bridge-car {
    left: 44.78vw;
    top: 26.59vw;
    width: 6.7188vw;
    height: auto;
  }
}

#s2-woman-slider-text {
  position: absolute;
  left: 20.8333vh;
  top: 20.463vh;
  width: auto; /* 331px */
  height: 28.4722vh; /* 307.5px */
  aspect-ratio: 331 / 307.5;
  background: var(--woman_slider_text_svg_url) no-repeat;
  background-size: contain;
  z-index: 201;
}
@media (orientation: portrait) {
  #s2-woman-slider-text {
    left: 11.7188vw;
    top: 11.5104vw;
    width: 17.2396vw; /* 331px */
    height: auto;
  }
}

#s2-man-slider-text {
  position: absolute;
  left: 24.4444vh;
  top: 25.9259vh;
  width: auto; /* 534px */
  height: 23.0093vh; /* 248.5px */
  aspect-ratio: 534 / 248.5;
  background: var(--man_slider_text_svg_url) no-repeat;
  background-size: contain;
  z-index: 201;
}
@media (orientation: portrait) {
  #s2-man-slider-text {
    left: 13.75vw;
    top: 14.5833vw;
    width: 27.8125vw; /* 534px */
    height: auto;
  }
}

#s2-bridge-car-slider {
  left: 54.2593vh;
  top: 5.463vh;
  width: auto; /* 749px */
  height: 89.1667vh; /* 963px */
  aspect-ratio: 749 / 963;
  background: url(assets/bridge-car-slider.png) no-repeat;
  background-size: contain;
  z-index: 200;
}
@media (orientation: portrait) {
  #s2-bridge-car-slider {
    left: 30.5208vw;
    top: 3.0729vw;
    width: 39.0104vw;
    height: auto;
  }
}

#s3-woman-pink {
  left: 13.7963vh;
  top: 17.6852vh;
  width: auto; /* 325px */
  height: 42.4074vh; /* 458px */
  aspect-ratio: 325 / 458;
  background: url(assets/woman-pink.png) no-repeat;
  background-size: contain;
  z-index: 56;
}
@media (orientation: portrait) {
  #s3-woman-pink {
    left: 7.7604vw;
    top: 9.9479vw;
    width: 16.9271vw;
    height: auto;
  }
}

#s3-symphony {
  left: 73.4259vh;
  top: 47.037vh;
  width: auto; /* 558px */
  height: 48.3333vh; /* 522px */
  aspect-ratio: 558 / 522;
  background: url(assets/symphony.png) no-repeat;
  background-size: contain;
  z-index: 54;
}
@media (orientation: portrait) {
  #s3-symphony {
    left: 41.3021vw;
    top: 26.4583vw;
    width: 29.0625vw;
    height: auto;
  }
}

#s3-trolley {
  left: 124.4444vh;
  top: 9.1667vh;
  width: auto; /* 141px */
  height: 13.0556vh; /* 141px */
  aspect-ratio: 141 / 141;
  background: url(assets/trolley.png) no-repeat;
  background-size: contain;
  z-index: 58;
}
@media (orientation: portrait) {
  #s3-trolley {
    left: 70vw;
    top: 5.1562vw;
    width: 7.3438vw;
    height: auto;
  }
}

#s3-trolley-slider {
  left: 88.8889vh;
  top: 9.7222vh;
  width: auto; /* 853px */
  height: 60.6481vh; /* 655px */
  aspect-ratio: 853 / 655;
  background: url(assets/trolley-slider.png) no-repeat;
  background-size: contain;
  z-index: 200;
}
@media (orientation: portrait) {
  #s3-trolley-slider {
    left: 50vw;
    top: 5.4688vw;
    width: 44.4271vw;
    height: auto;
  }
}

#s3-symphony-slider {
  left: 55.1852vh;
  top: 22.6852vh;
  width: auto; /* 1058px */
  height: 67.7778vh; /* 732px */
  aspect-ratio: 1058 / 732;
  background: url(assets/symphony-slider.png) no-repeat;
  background-size: contain;
  z-index: 200;
}
@media (orientation: portrait) {
  #s3-symphony-slider {
    left: 31.0417vw;
    top: 12.7604vw;
    width: 55.1042vw;
    height: auto;
  }
}

#s3-symphony-slider-text {
  position: absolute;
  left: 23.9815vh;
  top: 18.9815vh;
  width: auto; /* 546px */
  height: 16.9444vh; /* 183px */
  aspect-ratio: 546 / 183;
  background: var(--symphony_slider_text_svg_url) no-repeat;
  background-size: contain;
  z-index: 201;
}
@media (orientation: portrait) {
  #s3-symphony-slider-text {
    left: 13.4896vw;
    top: 10.6771vw;
    width: 28.4375vw; /* 546px */
    height: auto;
  }
}

#s3-woman-pink-slider {
  left: 11.7593vh;
  top: 11.7593vh;
  width: auto; /* 1222px */
  height: 76.5741vh; /* 827px */
  aspect-ratio: 1222 / 827;
  background: url(assets/woman-pink-slider.png) no-repeat;
  background-size: contain;
  z-index: 200;
}
@media (orientation: portrait) {
  #s3-woman-pink-slider {
    left: 6.6146vw;
    top: 6.6146vw;
    width: 63.6458vw;
    height: auto;
  }
}

#s3-woman-pink-slider-text {
  position: absolute;
  left: 23.0556vh;
  top: 27.2222vh;
  width: auto; /* 332px */
  height: 30.5093vh; /* 329.5px */
  aspect-ratio: 332 / 329.5;
  background: var(--woman_pink_slider_text_svg_url) no-repeat;
  background-size: contain;
  z-index: 201;
}
@media (orientation: portrait) {
  #s3-woman-pink-slider-text {
    left: 12.9688vw;
    top: 15.3125vw;
    width: 17.2917vw; /* 332px */
    height: auto;
  }
}

#s4-woman-rose {
  left: 20.1852vh;
  top: 11.1111vh;
  width: auto; /* 411px */
  height: 77.6852vh; /* 839px */
  aspect-ratio: 411 / 839;
  background: url(assets/woman-rose.png) no-repeat;
  background-size: contain;
  z-index: 68;
}
@media (orientation: portrait) {
  #s4-woman-rose {
    left: 11.3542vw;
    top: 6.25vw;
    width: 21.4062vw;
    height: auto;
  }
}

#s4-teacup {
  left: 69.537vh;
  top: 50.3704vh;
  width: auto; /* 286px */
  height: 16.7593vh; /* 181px */
  aspect-ratio: 286 / 181;
  background: url(assets/teacup.png) no-repeat;
  background-size: contain;
  z-index: 66;
}
@media (orientation: portrait) {
  #s4-teacup {
    left: 39.1146vw;
    top: 28.3333vw;
    width: 14.8958vw;
    height: auto;
  }
}

#s4-chinatown {
  left: 109.537vh;
  top: 14.8148vh;
  width: auto; /* 331px */
  height: 50.1852vh; /* 542px */
  aspect-ratio: 331 / 542;
  background: url(assets/chinatown.png) no-repeat;
  background-size: contain;
  z-index: 64;
}
@media (orientation: portrait) {
  #s4-chinatown {
    left: 61.6146vw;
    top: 8.3333vw;
    width: 17.2396vw;
    height: auto;
  }
}

#s4-woman-rose-slider {
  left: 10.3704vh;
  top: 14.9074vh;
  width: auto; /* 1058px */
  height: 67.7778vh; /* 732px */
  aspect-ratio: 1058 / 732;
  background: url(assets/woman-rose-slider.png) no-repeat;
  background-size: contain;
  z-index: 200;
}
@media (orientation: portrait) {
  #s4-woman-rose-slider {
    left: 5.8333vw;
    top: 8.3854vw;
    width: 55.1042vw;
    height: auto;
  }
}

#s4-woman-rose-slider-text {
  position: absolute;
  left: 24.0741vh;
  top: 24.6296vh;
  width: auto; /* 543px */
  height: 18.7963vh; /* 203px */
  aspect-ratio: 543 / 203;
  background: var(--woman_rose_slider_text_svg_url) no-repeat;
  background-size: contain;
  z-index: 201;
}
@media (orientation: portrait) {
  #s4-woman-rose-slider-text {
    left: 13.5417vw;
    top: 13.8542vw;
    width: 28.2813vw; /* 543px */
    height: auto;
  }
}

#s4-teacup-slider {
  left: 45.0926vh;
  top: 36.0185vh;
  width: auto; /* 892px */
  height: 48.4259vh; /* 523px */
  aspect-ratio: 892 / 523;
  background: url(assets/teacup-slider.png) no-repeat;
  background-size: contain;
  z-index: 200;
}
@media (orientation: portrait) {
  #s4-teacup-slider {
    left: 25.3646vw;
    top: 20.2604vw;
    width: 46.4583vw;
    height: auto;
  }
}

#s4-teacup-slider-text {
  position: absolute;
  left: 22.4074vh;
  top: 18.7037vh;
  width: auto; /* 413px */
  height: 11.3889vh; /* 123px */
  aspect-ratio: 413 / 123;
  background: var(--teacup_slider_text_svg_url) no-repeat;
  background-size: contain;
  z-index: 201;
}
@media (orientation: portrait) {
  #s4-teacup-slider-text {
    left: 12.6042vw;
    top: 10.5208vw;
    width: 21.5104vw; /* 413px */
    height: auto;
  }
}

#s4-chinatown-slider {
  left: 54.537vh;
  top: 11.7593vh;
  width: auto; /* 1222px */
  height: 76.5741vh; /* 827px */
  aspect-ratio: 1222 / 827;
  background: url(assets/chinatown-slider.png) no-repeat;
  background-size: contain;
  z-index: 200;
}
@media (orientation: portrait) {
  #s4-chinatown-slider {
    left: 30.6771vw;
    top: 6.6146vw;
    width: 63.6458vw;
    height: auto;
  }
}

#s4-chinatown-slider-text {
  position: absolute;
  left: 18.9815vh;
  top: 18.8889vh;
  width: auto; /* 800px */
  height: 39.1667vh; /* 423px */
  aspect-ratio: 800 / 423;
  background: var(--chinatown_slider_text_svg_url) no-repeat;
  background-size: contain;
  z-index: 201;
}
@media (orientation: portrait) {
  #s4-chinatown-slider-text {
    left: 10.6771vw;
    top: 10.625vw;
    width: 41.6667vw; /* 800px */
    height: auto;
  }
}

#s5-seal {
  left: 131.7593vh;
  top: 16.9444vh;
  width: auto; /* 155px */
  height: 16.2963vh; /* 176px */
  aspect-ratio: 155 / 176;
  background: url(assets/seal.png) no-repeat;
  background-size: contain;
  z-index: 88;
}
@media (orientation: portrait) {
  #s5-seal {
    left: 74.1146vw;
    top: 9.5312vw;
    width: 8.0729vw;
    height: auto;
  }
}

#s5-thumb-container {
  /* keep s5-thumb-container within a non-fixed container */
  /* semi-transparent, light-colored overlay */
  /* background: rgba(216, 185, 163, 0.3); */
  mix-blend-mode: multiply; /* Blends the vid-thumb image with map background */
  /* display: block; */
  cursor: pointer;
  left: 103.6111vh;
  top: 21.6667vh;
  width: auto;
  height: 59.2593vh;
  aspect-ratio: 360 / 640;
  position: absolute;
}
@media (orientation: portrait) {
  #s5-thumb-container {
    left: 58.2812vw;
    top: 12.1875vw;
    width: 18.75vw;
    height: auto;
  }
}

#s5-vid-thumb {
  /* keep s5-vid-thumb within a non-fixed container (fixed breaks multiply with background) */
  /* mix-blend-mode: multiply is in parent (s5-thumb-container) - DO NOT REMOVE */
  display: block;
  left: 0;
  top: 0;
  width: 100%; /* dimensions and visibility are controlled by thumb-container */
  height: 100%;
  background-image: url(assets/vid-thumb.png);
  background-repeat: no-repeat;
  background-size: contain; /* object-fit: contain doesn't work for background image */
  position: absolute;
  z-index: 302;
}

#s5-vid-container {
  /* keep s5-vid-container within a non-fixed container */
  /* semi-transparent, light-colored overlay */
  background: rgba(216, 185, 163, 0.3); /* Color for multiply blend effect */
  mix-blend-mode: multiply; /* Blends the ladies video with map background */
  display: none; /* Hidden by default, shown after animation */
  left: 103.6111vh;
  top: 21.6667vh;
  width: auto;
  height: 59.2593vh;
  aspect-ratio: 360 / 640;
  position: absolute;
}
@media (orientation: portrait) {
  #s5-vid-container {
    top: 50vh;
    x: -50%;
    y: -50%;
    height: auto;
    width: 100vw;
  }
}

#s5-ladies {
  /* keep s5-ladies within a non-fixed container (fixed breaks multiply with background) */
  /* mix-blend-mode: multiply is in parent (s5-vid-container) - DO NOT REMOVE */
  cursor: pointer;
  display: none;
  left: 0;
  top: 0;
  width: 100%; /* dimensions and visibility are controlled by video-container */
  height: 100%;
  object-fit: contain;
  position: absolute;
  z-index: 305;
}

#s5-red-lady {
  left: 24.6296vh;
  top: 11.3889vh;
  width: auto; /* 159px */
  height: 48.9815vh; /* 529px */
  aspect-ratio: 159 / 529;
  background: url(assets/red-lady.png) no-repeat;
  background-size: contain;
  z-index: 84;
}
@media (orientation: portrait) {
  #s5-red-lady {
    left: 13.8542vw;
    top: 6.4062vw;
    width: 8.2812vw;
    height: auto;
  }
}

#s5-typewriter {
  left: 40.6481vh;
  top: 28.1481vh;
  width: auto; /* 126px */
  height: 8.0556vh; /* 87px */
  aspect-ratio: 126 / 87;
  background: url(assets/typewriter.png) no-repeat;
  background-size: contain;
  z-index: 82;
}
@media (orientation: portrait) {
  #s5-typewriter {
    left: 22.8646vw;
    top: 15.8333vw;
    width: 6.5625vw;
    height: auto;
  }
}

#s5-red-lady-slider {
  left: 37.8704vh;
  top: 40.3704vh;
  width: auto; /* 831px */
  height: 43.2407vh; /* 467px */
  aspect-ratio: 831 / 467;
  background: url(assets/red-lady-slider.png) no-repeat;
  background-size: contain;
  z-index: 200;
}
@media (orientation: portrait) {
  #s5-red-lady-slider {
    left: 21.3021vw;
    top: 22.7083vw;
    width: 43.2812vw;
    height: auto;
  }
}

#s5-red-lady-slider-text {
  position: absolute;
  left: 21.8519vh;
  top: 18.8889vh;
  width: auto; /* 363px */
  height: 5.8333vh; /* 63px */
  aspect-ratio: 363 / 63;
  background: var(--red_lady_slider_text_svg_url) no-repeat;
  background-size: contain;
  z-index: 201;
}
@media (orientation: portrait) {
  #s5-red-lady-slider-text {
    left: 12.2917vw;
    top: 10.625vw;
    width: 18.9062vw; /* 363px */
    height: auto;
  }
}

#s5-typewriter-slider {
  left: 6.7593vh;
  top: 21.3889vh;
  width: auto; /* 1058px */
  height: 67.7778vh; /* 732px */
  aspect-ratio: 1058 / 732;
  background: url(assets/typewriter-slider.png) no-repeat;
  background-size: contain;
  z-index: 200;
}
@media (orientation: portrait) {
  #s5-typewriter-slider {
    left: 3.8021vw;
    top: 12.0312vw;
    width: 55.1042vw;
    height: auto;
  }
}

#s6-balloon-c {
  left: 4.3519vh;
  top: 6.6667vh;
  width: auto; /* 206px */
  height: 28.3333vh; /* 306px */
  aspect-ratio: 206 / 306;
  background: url(assets/balloon-c.png) no-repeat;
  background-size: contain;
  z-index: 96;
}
@media (orientation: portrait) {
  #s6-balloon-c {
    left: 2.4479vw;
    top: 3.75vw;
    width: 10.7292vw;
    height: auto;
  }
}

#s6-grandfather {
  left: 32.5926vh;
  top: 38.2407vh;
  width: auto; /* 344px */
  height: 38.3333vh; /* 414px */
  aspect-ratio: 344 / 414;
  background: url(assets/grandfather.png) no-repeat;
  background-size: contain;
  z-index: 92;
}
@media (orientation: portrait) {
  #s6-grandfather {
    left: 18.3333vw;
    top: 21.5104vw;
    width: 17.9167vw;
    height: auto;
  }
}

#s6-carroll {
  left: 76.5741vh;
  top: 32.7778vh;
  width: auto; /* 361px */
  height: 51.7593vh; /* 559px */
  aspect-ratio: 361 / 559;
  background: url(assets/carroll.png) no-repeat;
  background-size: contain;
  z-index: 90;
}
@media (orientation: portrait) {
  #s6-carroll {
    left: 43.0729vw;
    top: 18.4375vw;
    width: 18.8021vw;
    height: auto;
  }
}

#s6-harey {
  left: 121.6667vh;
  top: 15.2778vh;
  width: auto; /* 368px */
  height: 44.7222vh; /* 483px */
  aspect-ratio: 368 / 483;
  background: url(assets/harey.png) no-repeat;
  background-size: contain;
  z-index: 94;
}
@media (orientation: portrait) {
  #s6-harey {
    left: 68.4375vw;
    top: 8.5938vw;
    width: 19.1667vw;
    height: auto;
  }
}

#s6-train {
  left: 128.4259vh;
  top: 59.2593vh;
  width: auto; /* 446px */
  height: 26.1111vh; /* 282px */
  aspect-ratio: 446 / 282;
  background: url(assets/train.png) no-repeat;
  background-size: contain;
  z-index: 98;
}
@media (orientation: portrait) {
  #s6-train {
    left: 72.2396vw;
    top: 33.3333vw;
    width: 23.2292vw;
    height: auto;
  }
}

#s6-grandfather-slider {
  left: 23.7037vh;
  top: 10.2778vh;
  width: auto; /* 1058px */
  height: 67.7778vh; /* 732px */
  aspect-ratio: 1058 / 732;
  background: url(assets/grandfather-slider.png) no-repeat;
  background-size: contain;
  z-index: 200;
}
@media (orientation: portrait) {
  #s6-grandfather-slider {
    left: 13.3333vw;
    top: 5.7812vw;
    width: 55.1042vw;
    height: auto;
  }
}

#s6-grandfather-slider-text {
  position: absolute;
  left: 23.5185vh;
  top: 23.7037vh;
  width: auto; /* 567px */
  height: 25.2315vh; /* 272.5px */
  aspect-ratio: 567 / 272.5;
  background: var(--grandfather_slider_text_svg_url) no-repeat;
  background-size: contain;
  z-index: 201;
}
@media (orientation: portrait) {
  #s6-grandfather-slider-text {
    left: 13.2292vw;
    top: 13.3333vw;
    width: 29.5312vw; /* 567px */
    height: auto;
  }
}

#s6-carroll-slider {
  left: 26.2037vh;
  top: 10.463vh;
  width: auto; /* 1470px */
  height: 79.1667vh; /* 855px */
  aspect-ratio: 1470 / 855;
  background: url(assets/carroll-slider.png) no-repeat;
  background-size: contain;
  z-index: 200;
}
@media (orientation: portrait) {
  #s6-carroll-slider {
    left: 14.7396vw;
    top: 5.8854vw;
    width: 76.5625vw;
    height: auto;
  }
}

#s6-carroll-slider-text {
  position: absolute;
  left: 18.9815vh;
  top: 18.9815vh;
  width: auto; /* 469px */
  height: 41.3426vh; /* 446.5px */
  aspect-ratio: 469 / 446.5;
  background: var(--carroll_slider_text_svg_url) no-repeat;
  background-size: contain;
  z-index: 201;
}
@media (orientation: portrait) {
  #s6-carroll-slider-text {
    left: 10.6771vw;
    top: 10.6771vw;
    width: 24.4271vw; /* 469px */
    height: auto;
  }
}

#s6-harey-slider {
  left: 75vh;
  top: 0vh;
  width: auto; /* 1058px */
  height: 67.7778vh; /* 732px */
  aspect-ratio: 1058 / 732;
  background: url(assets/harey-slider.png) no-repeat;
  background-size: contain;
  z-index: 200;
}
@media (orientation: portrait) {
  #s6-harey-slider {
    left: 42.1875vw;
    top: 0vw;
    width: 55.1042vw;
    height: auto;
  }
}

#s6-harey-slider-text {
  position: absolute;
  left: 20.6481vh;
  top: 21.2037vh;
  width: auto; /* 317px */
  height: 26.2037vh; /* 283px */
  aspect-ratio: 317 / 283;
  background: var(--harey_slider_text_svg_url) no-repeat;
  background-size: contain;
  z-index: 201;
}
@media (orientation: portrait) {
  #s6-harey-slider-text {
    left: 11.6146vw;
    top: 11.9271vw;
    width: 16.5104vw; /* 317px */
    height: auto;
  }
}

#s6-train-slider {
  left: 52.3148vh;
  top: 26.8519vh;
  width: auto; /* 1292px */
  height: 67.7778vh; /* 732px */
  aspect-ratio: 1292 / 732;
  background: url(assets/train-slider.png) no-repeat;
  background-size: contain;
  z-index: 200;
}
@media (orientation: portrait) {
  #s6-train-slider {
    left: 29.4271vw;
    top: 15.1042vw;
    width: 67.2917vw;
    height: auto;
  }
}

#s6-train-slider-text {
  position: absolute;
  left: 18.9815vh;
  top: 21.8519vh;
  width: auto; /* 237px */
  height: 24.3519vh; /* 263px */
  aspect-ratio: 237 / 263;
  background: var(--train_slider_text_svg_url) no-repeat;
  background-size: contain;
  z-index: 201;
}
@media (orientation: portrait) {
  #s6-train-slider-text {
    left: 10.6771vw;
    top: 12.2917vw;
    width: 12.3438vw; /* 237px */
    height: auto;
  }
}

#s7-woman-typing {
  left: 49.9074vh;
  top: 25.8333vh;
  width: auto; /* 240px */
  height: 42.3148vh; /* 457px */
  aspect-ratio: 240 / 457;
  background: url(assets/woman-typing.png) no-repeat;
  background-size: contain;
  z-index: 96;
}
@media (orientation: portrait) {
  #s7-woman-typing {
    left: 28.0729vw;
    top: 14.5313vw;
    width: 12.5vw;
    height: auto;
  }
}

#s7-normandie {
  left: 105.5556vh;
  top: 6.6667vh;
  width: auto; /* 713px */
  height: 42.5vh; /* 459px */
  aspect-ratio: 713 / 459;
  background: url(assets/normandie.png) no-repeat;
  background-size: contain;
  z-index: 98;
}
@media (orientation: portrait) {
  #s7-normandie {
    left: 59.375vw;
    top: 3.75vw;
    width: 37.1354vw;
    height: auto;
  }
}

#s7-record {
  left: 91.4815vh;
  top: 61.4815vh;
  width: auto; /* 77px */
  height: 7.1296vh; /* 77px */
  aspect-ratio: 77 / 77;
  background: url(assets/record.png) no-repeat;
  background-size: contain;
  z-index: 92;
  transition: transform 0.6s ease;
  cursor: pointer;
}
#s7-record:hover {
  transform: rotate(90deg) !important;
}
@media (orientation: portrait) {
  #s7-record {
    left: 51.4583vw;
    top: 34.5833vw;
    width: 4.0104vw;
    height: auto;
  }
}

#s7-woman-typing-slider {
  left: 7.037vh;
  top: 7.5926vh;
  width: auto; /* 1222px */
  height: 84.8148vh; /* 916px */
  aspect-ratio: 1222 / 916;
  background: url(assets/woman-typing-slider.png) no-repeat;
  background-size: contain;
  z-index: 200;
}
@media (orientation: portrait) {
  #s7-woman-typing-slider {
    left: 3.9583vw;
    top: 4.2708vw;
    width: 63.6458vw;
    height: auto;
  }
}

#s7-woman-typing-slider-text {
  position: absolute;
  left: 18.3333vh;
  top: 18.3333vh;
  width: auto; /* 833px */
  height: 48.4259vh; /* 523px */
  aspect-ratio: 833 / 523;
  background: var(--woman_typing_slider_text_svg_url) no-repeat;
  background-size: contain;
  z-index: 201;
}
@media (orientation: portrait) {
  #s7-woman-typing-slider-text {
    left: 10.3125vw;
    top: 10.3125vw;
    width: 43.3854vw; /* 833px */
    height: auto;
  }
}

#s7-normandie-slider {
  left: 74.9074vh;
  top: 5.2778vh;
  width: auto; /* 1058px */
  height: 67.7778vh; /* 732px */
  aspect-ratio: 1058 / 732;
  background: url(assets/normandie-slider.png) no-repeat;
  background-size: contain;
  z-index: 200;
}
@media (orientation: portrait) {
  #s7-normandie-slider {
    left: 42.1354vw;
    top: 2.9688vw;
    width: 55.1042vw;
    height: auto;
  }
}

#s7-normandie-slider-text {
  position: absolute;
  left: 23.4259vh;
  top: 20.9259vh;
  width: auto; /* 556px */
  height: 26.2037vh; /* 283px */
  aspect-ratio: 556 / 283;
  background: var(--normandie_slider_text_svg_url) no-repeat;
  background-size: contain;
  z-index: 201;
}
@media (orientation: portrait) {
  #s7-normandie-slider-text {
    left: 13.1771vw;
    top: 11.7708vw;
    width: 28.9583vw; /* 556px */
    height: auto;
  }
}

#s7-record-slider {
  left: 0vh;
  top: 0vh;
  width: auto; /* 433px */
  height: 100vh; /* 1080px */
  aspect-ratio: 433 / 1080;
  background: url(assets/record-slider.png) no-repeat;
  background-size: contain;
  z-index: 200;
}
@media (orientation: portrait) {
  #s7-record-slider {
    left: 0vw;
    top: 0vw;
    width: 22.5521vw;
    height: auto;
  }
}

#s8-police-bike {
  left: 121.8519vh;
  top: 79.6296vh;
  width: auto; /* 139px */
  height: 13.8889vh; /* 150px */
  aspect-ratio: 139 / 150;
  background: url(assets/police-bike.png) no-repeat;
  background-size: contain;
  z-index: 98;
}
@media (orientation: portrait) {
  #s8-police-bike {
    left: 68.5417vw;
    top: 44.7917vw;
    width: 7.2396vw;
    height: auto;
  }
}

#s8-bridge {
  left: 66.7593vh;
  top: 5.8333vh;
  width: auto; /* 637px */
  height: 37.7778vh; /* 408px */
  aspect-ratio: 637 / 408;
  background: url(assets/bridge.png) no-repeat;
  background-size: contain;
  z-index: 96;
}
@media (orientation: portrait) {
  #s8-bridge {
    left: 37.5521vw;
    top: 3.2812vw;
    width: 33.1771vw;
    height: auto;
  }
}

#s8-legion-honor {
  left: 51.5741vh;
  top: 52.2222vh;
  width: auto; /* 420px */
  height: 27.8704vh; /* 301px */
  aspect-ratio: 420 / 301;
  background: url(assets/legion-honor.png) no-repeat;
  background-size: contain;
  z-index: 94;
}
@media (orientation: portrait) {
  #s8-legion-honor {
    left: 29.0104vw;
    top: 29.375vw;
    width: 21.875vw;
    height: auto;
  }
}

#s8-blue-record {
  left: 32.837vh;
  top: 14.087vh;
  width: auto; /* 183px */
  height: 16.9439vh; /* 183px */
  aspect-ratio: 1 / 1;
  background: transparent;
  z-index: 92;
  transition: transform 0.6s ease, background 0.6s ease;
  cursor: pointer;
}
#s8-blue-record:hover {
  background: url(assets/blue-record-hover.png) no-repeat center center;
  background-size: contain;
  transform: rotate(90deg) !important;
}
@media (orientation: portrait) {
  #s8-blue-record {
    left: 18.4708vw;
    top: 7.924vw;
    width: 9.9994vw;
    height: auto;
  }
}

#s8-blue-record-slider {
  left: 19.9074vh;
  top: 8.2407vh;
  width: auto; /* 360px */
  height: 33.3333vh; /* 360px */
  aspect-ratio: 360 / 360;
  background: url(assets/blue-record-slider.png) no-repeat;
  background-size: contain;
  z-index: 200;
}
@media (orientation: portrait) {
  #s8-blue-record-slider {
    left: 11.1979vw;
    top: 4.6354vw;
    width: 18.75vw;
    height: auto;
  }
}

#s7-top-mark-slider {
  left: 39.9074vh;
  top: 0vh;
  width: auto; /* 1058px */
  height: 74.9074vh; /* 809px */
  aspect-ratio: 1058 / 809;
  background: url(assets/top-mark-slider.png) no-repeat;
  background-size: contain;
  z-index: 220;
}
@media (orientation: portrait) {
  #s7-top-mark-slider {
    left: 22.4479vw;
    top: 0vw;
    width: 55.1042vw;
    height: auto;
  }
}

#s7-top-mark-slider-text {
  position: absolute;
  left: 18.7963vh;
  top: 18.0556vh;
  width: auto; /* 339px */
  height: 39.1667vh; /* 423px */
  aspect-ratio: 339 / 423;
  background: var(--top_mark_slider_text_svg_url) no-repeat;
  background-size: contain;
  z-index: 221;
}
@media (orientation: portrait) {
  #s7-top-mark-slider-text {
    left: 10.5729vw;
    top: 10.1562vw;
    width: 17.6562vw; /* 339px */
    height: auto;
  }
}

#s8-police-bike-slider {
  left: 33.1481vh;
  top: 48.0556vh;
  width: auto; /* 892px */
  height: 48.4259vh; /* 523px */
  aspect-ratio: 892 / 523;
  background: url(assets/police-bike-slider.png) no-repeat;
  background-size: contain;
  z-index: 200;
}
@media (orientation: portrait) {
  #s8-police-bike-slider {
    left: 18.6458vw;
    top: 27.0312vw;
    width: 46.4583vw;
    height: auto;
  }
}

#s8-police-bike-slider-text {
  position: absolute;
  left: 18.9815vh;
  top: 18.8889vh;
  width: auto; /* 374px */
  height: 9.537vh; /* 103px */
  aspect-ratio: 374 / 103;
  background: var(--police_bike_slider_text_svg_url) no-repeat;
  background-size: contain;
  z-index: 201;
}
@media (orientation: portrait) {
  #s8-police-bike-slider-text {
    left: 10.6771vw;
    top: 10.625vw;
    width: 19.4792vw; /* 374px */
    height: auto;
  }
}

#s8-bridge-slider {
  left: 50.9259vh;
  top: 5.0926vh;
  width: auto; /* 1058px */
  height: 67.7778vh; /* 732px */
  aspect-ratio: 1058 / 732;
  background: url(assets/bridge-slider.png) no-repeat;
  background-size: contain;
  z-index: 200;
}
@media (orientation: portrait) {
  #s8-bridge-slider {
    left: 28.6458vw;
    top: 2.8646vw;
    width: 55.1042vw;
    height: auto;
  }
}

#s8-bridge-slider-text {
  position: absolute;
  left: 18.9815vh;
  top: 18.1481vh;
  width: auto; /* 299px */
  height: 31.7593vh; /* 343px */
  aspect-ratio: 299 / 343;
  background: var(--bridge_slider_text_svg_url) no-repeat;
  background-size: contain;
  z-index: 201;
}
@media (orientation: portrait) {
  #s8-bridge-slider-text {
    left: 10.6771vw;
    top: 10.2083vw;
    width: 15.5729vw; /* 299px */
    height: auto;
  }
}

#s8-legion-honor-slider {
  left: 6.2037vh;
  top: 5.8333vh;
  width: auto; /* 1310px */
  height: 70vh; /* 756px */
  aspect-ratio: 1310 / 756;
  background: url(assets/legion-honor-slider.png) no-repeat;
  background-size: contain;
  z-index: 200;
}
@media (orientation: portrait) {
  #s8-legion-honor-slider {
    left: 3.4896vw;
    top: 3.2812vw;
    width: 68.2292vw;
    height: auto;
  }
}

#s8-legion-honor-slider-text {
  position: absolute;
  left: 18.9815vh;
  top: 23.8889vh;
  width: auto; /* 275px */
  height: 22.5vh; /* 243px */
  aspect-ratio: 275 / 243;
  background: var(--legion_honor_slider_text_svg_url) no-repeat;
  background-size: contain;
  z-index: 201;
}
@media (orientation: portrait) {
  #s8-legion-honor-slider-text {
    left: 10.6771vw;
    top: 13.4375vw;
    width: 14.3229vw; /* 275px */
    height: auto;
  }
}

#s9-book-goggles {
  left: 25vh;
  top: 52.5vh;
  width: auto; /* 664px */
  height: 38.0556vh; /* 411px */
  aspect-ratio: 664 / 411;
  background: url(assets/book-goggles.png) no-repeat;
  background-size: contain;
  z-index: 94;
}
@media (orientation: portrait) {
  #s9-book-goggles {
    left: 14.0625vw;
    top: 29.5312vw;
    width: 34.5833vw;
    height: auto;
  }
}

#s9-letters {
  left: 111.6667vh;
  top: 46.4815vh;
  width: auto; /* 428px */
  height: 27.1296vh; /* 293px */
  aspect-ratio: 428 / 293;
  background: url(assets/letters.png) no-repeat;
  background-size: contain;
  z-index: 96;
}
@media (orientation: portrait) {
  #s9-letters {
    left: 62.8125vw;
    top: 26.1458vw;
    width: 22.2917vw;
    height: auto;
  }
}

#s9-car {
  left: 29.8148vh;
  top: 29.1667vh;
  width: auto; /* 314px */
  height: 11.0185vh; /* 119px */
  aspect-ratio: 314 / 119;
  background: url(assets/car.png) no-repeat;
  background-size: contain;
  z-index: 98;
}
@media (orientation: portrait) {
  #s9-car {
    left: 16.7708vw;
    top: 16.4062vw;
    width: 16.3542vw;
    height: auto;
  }
}

#s9-book-goggles-slider {
  left: 39.9074vh;
  top: 22.1296vh;
  width: auto; /* 1058px */
  height: 67.7778vh; /* 732px */
  aspect-ratio: 1058 / 732;
  background: url(assets/book-goggles-slider.png) no-repeat;
  background-size: contain;
  z-index: 200;
}
@media (orientation: portrait) {
  #s9-book-goggles-slider {
    left: 22.4479vw;
    top: 12.4479vw;
    width: 55.1042vw;
    height: auto;
  }
}

#s9-book-goggles-slider-text {
  position: absolute;
  left: 25.6481vh;
  top: 25.5556vh;
  width: auto; /* 510px */
  height: 16.9444vh; /* 183px */
  aspect-ratio: 510 / 183;
  background: var(--book_goggles_slider_text_svg_url) no-repeat;
  background-size: contain;
  z-index: 201;
}
@media (orientation: portrait) {
  #s9-book-goggles-slider-text {
    left: 14.4271vw;
    top: 14.375vw;
    width: 26.5625vw; /* 510px */
    height: auto;
  }
}

#s9-letters-slider {
  left: 63.7037vh;
  top: 16.1111vh;
  width: auto; /* 1058px */
  height: 67.7778vh; /* 732px */
  aspect-ratio: 1058 / 732;
  background: url(assets/letters-slider.png) no-repeat;
  background-size: contain;
  z-index: 200;
}
@media (orientation: portrait) {
  #s9-letters-slider {
    left: 35.8333vw;
    top: 9.0625vw;
    width: 55.1042vw;
    height: auto;
  }
}

#s9-letters-slider-text {
  position: absolute;
  left: 24.1667vh;
  top: 17.4074vh;
  width: auto; /* 541px */
  height: 20.6481vh; /* 223px */
  aspect-ratio: 541 / 223;
  background: var(--letters_slider_text_svg_url) no-repeat;
  background-size: contain;
  z-index: 201;
}
@media (orientation: portrait) {
  #s9-letters-slider-text {
    left: 13.5937vw;
    top: 9.7917vw;
    width: 28.1771vw; /* 541px */
    height: auto;
  }
}

#s9-car-slider {
  left: 3.5185vh;
  top: 3.6111vh;
  width: auto; /* 1058px */
  height: 78.8889vh; /* 852px */
  aspect-ratio: 1058 / 852;
  background: url(assets/car-slider.png) no-repeat;
  background-size: contain;
  z-index: 200;
}
@media (orientation: portrait) {
  #s9-car-slider {
    left: 1.9792vw;
    top: 2.0312vw;
    width: 55.1042vw;
    height: auto;
  }
}

#s9-car-slider-text {
  position: absolute;
  left: 18.9815vh;
  top: 18.9815vh;
  width: auto; /* 720px */
  height: 16.9444vh; /* 183px */
  aspect-ratio: 720 / 183;
  background: var(--car_slider_text_svg_url) no-repeat;
  background-size: contain;
  z-index: 201;
}
@media (orientation: portrait) {
  #s9-car-slider-text {
    left: 10.6771vw;
    top: 10.6771vw;
    width: 37.5vw; /* 720px */
    height: auto;
  }
}

#s10-plane {
  left: 48.3333vh;
  top: 57.3148vh;
  width: auto; /* 388px */
  height: 27.1296vh; /* 293px */
  aspect-ratio: 388 / 293;
  background: url(assets/plane.png) no-repeat;
  background-size: contain;
  z-index: 108;
}
@media (orientation: portrait) {
  #s10-plane {
    left: 27.1875vw;
    top: 32.2396vw;
    width: 20.2083vw;
    height: auto;
  }
}

#s10-balloon-r {
  left: 15.463vh;
  top: 65.3704vh;
  width: auto; /* 173px */
  height: 15.463vh; /* 167px */
  aspect-ratio: 173 / 167;
  background: url(assets/balloon-r.png) no-repeat;
  background-size: contain;
  z-index: 106;
}
@media (orientation: portrait) {
  #s10-balloon-r {
    left: 8.6979vw;
    top: 36.7847vw;
    width: 9.0104vw;
    height: auto;
  }
}

#s10-earhart {
  left: 60.3704vh;
  top: 25.9259vh;
  width: auto; /* 818px */
  height: 56.8519vh; /* 614px */
  aspect-ratio: 818 / 614;
  background: url(assets/earhart.png) no-repeat;
  background-size: contain;
  z-index: 104;
}
@media (orientation: portrait) {
  #s10-earhart {
    left: 33.9583vw;
    top: 14.5833vw;
    width: 42.6042vw;
    height: auto;
  }
}

#s10-gold-string {
  left: 100.6481vh;
  top: 64.6296vh;
  width: auto; /* 870px */
  height: 115.7407vh; /* 1250px */
  aspect-ratio: 870 / 1250;
  background: url(assets/gold-string.png) no-repeat;
  background-size: contain;
  z-index: 102;
}
@media (orientation: portrait) {
  #s10-gold-string {
    left: 56.6146vw;
    top: 36.3542vw;
    width: 45.3125vw;
    height: auto;
  }
}

#s10-plane-slider {
  left: 19.537vh;
  top: 50vh;
  width: auto; /* 831px */
  height: 43.2407vh; /* 467px */
  aspect-ratio: 831 / 467;
  background: url(assets/plane-slider.png) no-repeat;
  background-size: contain;
  z-index: 200;
}
@media (orientation: portrait) {
  #s10-plane-slider {
    left: 10.9896vw;
    top: 28.125vw;
    width: 43.2812vw;
    height: auto;
  }
}

#s10-plane-slider-text {
  position: absolute;
  left: 19.537vh;
  top: 17.963vh;
  width: auto; /* 412px */
  height: 7.6852vh; /* 83px */
  aspect-ratio: 412 / 83;
  background: var(--plane_slider_text_svg_url) no-repeat;
  background-size: contain;
  z-index: 201;
}
@media (orientation: portrait) {
  #s10-plane-slider-text {
    left: 10.9896vw;
    top: 10.1042vw;
    width: 21.4583vw; /* 412px */
    height: auto;
  }
}

#s10-earhart-slider {
  left: 47.4074vh;
  top: 18.0556vh;
  width: auto; /* 897px */
  height: 67.7778vh; /* 732px */
  aspect-ratio: 897 / 732;
  background: url(assets/earhart-slider.png) no-repeat;
  background-size: contain;
  z-index: 200;
}
@media (orientation: portrait) {
  #s10-earhart-slider {
    left: 26.6667vw;
    top: 10.1562vw;
    width: 46.7188vw;
    height: auto;
  }
}

#s10-gold-string-slider {
  left: 14.3519vh;
  top: 11.7593vh;
  width: auto; /* 1222px */
  height: 76.5741vh; /* 827px */
  aspect-ratio: 1222 / 827;
  background: url(assets/gold-string-slider.png) no-repeat;
  background-size: contain;
  z-index: 200;
}
@media (orientation: portrait) {
  #s10-gold-string-slider {
    left: 8.0729vw;
    top: 6.6146vw;
    width: 63.6458vw;
    height: auto;
  }
}

#s10-gold-string-slider-text {
  position: absolute;
  left: 18.9815vh;
  top: 18.5185vh;
  width: auto; /* 783px */
  height: 39.2593vh; /* 424px */
  aspect-ratio: 783 / 424;
  background: var(--gold_string_slider_text_svg_url) no-repeat;
  background-size: contain;
  z-index: 201;
}
@media (orientation: portrait) {
  #s10-gold-string-slider-text {
    left: 10.6771vw;
    top: 10.4167vw;
    width: 40.7812vw; /* 783px */
    height: auto;
  }
}

/* === SLIDER TEXT TRANSITIONS === */
/* Ensure slider-text elements animate with their parent slider */
[id$="-slider-text"] {
  transition: inherit;
}

/* === FIXED CONTAINER FOR SECTION IMAGES AND MENU === */
/* 
Z-index hierarchy for sliders:
- story sliders (200): Story slider backgrounds
- story slider text (201): Text overlays on story sliders  
- story click-blocker (210): Covers story content when sliders are open

Z-index hierarchy for menu:
- menu-icon (1000): Clickable to open menu, covered by story click-blockers when needed
- menu-slider (1020): Menu background 
- menu links (1030): Navigation links for functionality
*/

/* Fixed container that mimics canvas centering - holds section images and menu */
.fixed-container {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100vh * 16 / 9); /* Match section aspect ratio 16:9 */
  height: 100vh;
  pointer-events: none; /* Allow clicks through to content below */
  z-index: 999; /* Below menu elements but above everything else */
}

/* When viewport is narrower than 16:9, shrink the container to max width */
@media (max-aspect-ratio: 16/9) {
  .fixed-container {
    width: 100vw;
    left: 0;
    transform: none;
  }
}

/* Section images container - same positioning as fixed-container but no high z-index */
.section-images-container {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100vh * 16 / 9); /* Match section aspect ratio 16:9 */
  min-width: calc(
    100vh * 16 / 9
  ); /* Prevent compression when viewport is narrow */
  height: 100vh;
  /* overflow-x: hidden;
  overflow-y: visible; */
  pointer-events: none; /* Allow clicks through to content below */
}

@media (orientation: portrait) {
  .fixed-container {
    width: 100vw;
    height: auto;
    transform: none;
    left: 0;
  }

  .section-images-container {
    width: 100vw;
    height: auto;
    transform: none;
    left: 0;
  }
}

/* Canvas mask system to hide section image overflow outside canvas boundaries */
.canvas-mask-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr calc(100vh * 16 / 9) 1fr;
  z-index: 500; /* Above all sliders but below menu elements */
  pointer-events: none;
}

.canvas-mask-left {
  background: rgb(216, 185, 163);
}

.canvas-mask-center {
  /* Transparent window for cropping section images - no background needed */
  background: transparent;
}

.canvas-mask-right {
  background: rgb(216, 185, 163);
}

/* Portrait mode - hide masks since canvas is full width */
@media (orientation: portrait) {
  .canvas-mask-wrapper {
    display: none;
  }
}

.section-images-container .animate {
  position: absolute; /* relative to container */
  pointer-events: auto; /* Enable clicks for section elements */
}

#arrow-container {
  left: 164.3407vh;
  top: 83.7593vh;
  width: 6.3518vh;
  height: 11.1111vh;
  z-index: 1000;
  display: block;
  position: absolute;
}

@media (orientation: portrait) {
  #arrow-container {
    left: 92.4417vw;
    top: 48.8021vw;
    width: 3.5729vw;
    height: 6.25vw;
  }
}

#arrow-up {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(assets/arrow-up.png) no-repeat;
  background-size: contain;
  display: none;
}

#arrow-down {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(assets/arrow-down.png) no-repeat;
  background-size: contain;
  display: none;
}

/* Front-page footer - copyright only, no background or icons */
#front-page-footer-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 2vh;
  box-sizing: border-box;
  z-index: 1000;
}

#front-page-footer-bar #copyright {
  color: #1e100a;
  font-size: 14px;
  font-family: "Georgia", serif;
  text-shadow: none;
}

@media (orientation: portrait) {
  #front-page-footer-bar {
    height: 34px;
    padding: 0 1.125vw;
  }

  #front-page-footer-bar #copyright {
    font-size: 12px;
  }

  /* Show mobile elements in portrait */
  #mobile-background-container,
  #mobile-container,
  #mobile-footer-bar {
    display: block;
  }
  
  #mobile-footer-bar {
    display: flex; /* footer needs flexbox for layout */
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: 2.0833vw 3.125vw; /* ~10px 15px at 1080px width */
  }

  #mobile-copyright {
    margin-top: 1.0417vw; /* ~5px at 1080px width */
    margin-left: 3.125vw; /* ~15px at 1080px width */
  }
}