:root {
  color-scheme: light;
  background: #7e9ab9;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

main {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.landscape,
.landscape * {
  pointer-events: none;
  -webkit-user-drag: none;
}

.landscape {
  position: absolute;
  left: 50%;
  top: 70%;
  width: max(100vw, 133.333333vh);
  height: max(100vh, 75vw);
  width: max(100vw, 133.333333svh);
  height: max(100svh, 75vw);
  transform: translate(-50%, -70%);
  animation: arrive 3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.mountain,
.mist {
  display: block;
  width: 100%;
  height: 100%;
}

.mist {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mist-drift--near {
  animation: drift-near 17s linear -6s infinite;
}

.mist-drift--wrap {
  animation: drift-wrap 14s linear -4s infinite;
}

.mist-drift--far {
  animation: drift-far 23s linear -14s infinite;
}

@keyframes drift-near {
  0% { transform: translate(360px, 80px) scale(1, .85); opacity: 0; }
  20% { opacity: .7; }
  50% { transform: translate(-40px, -30px) scale(1.15, 1); opacity: .85; }
  80% { opacity: .5; }
  100% { transform: translate(-520px, 45px) scale(1.3, .8); opacity: 0; }
}

@keyframes drift-wrap {
  0% { transform: translate(-430px, 110px) scale(.9, .8); opacity: 0; }
  20% { opacity: .65; }
  50% { transform: translate(0, -40px) scale(1.1, 1.1); opacity: .9; }
  80% { opacity: .6; }
  100% { transform: translate(470px, 80px) scale(1.2, .85); opacity: 0; }
}

@keyframes drift-far {
  0% { transform: translate(-450px, 30px); opacity: 0; }
  20%, 70% { opacity: .8; }
  50% { transform: translate(0, -90px); }
  100% { transform: translate(530px, -20px); opacity: 0; }
}

@keyframes arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (orientation: portrait) {
  .landscape { left: 49%; transform: translate(-49%, -70%); }
}

@media (prefers-reduced-motion: reduce) {
  .landscape,
  .mist-drift { animation: none; }
  .mist { display: none; }
}