/* Landing page scene: space → sky → sea, all CSS-animated SVG. */

body.landing {
  display: block;
  /* styles.css uses 100vh, which on mobile is taller than the visible area while the URL bar shows */
  min-height: 0;
  padding: 0;
  background: #0b1030;
  color: #fff;
}

.sprites {
  position: absolute;
  width: 0;
  height: 0;
}

.scene {
  --scale: 1;
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(#0b1030 0%, #1c2b63 22%, #3f6fb5 42%, #8fc3ea 56%, #f6d7b0 68%);
}

@media (max-width: 600px) {
  .scene {
    --scale: 0.7;
  }
}

/* Stars */

.stars {
  position: absolute;
  inset: 0 0 50% 0;
  background-image:
    radial-gradient(circle at 23px 41px, #fff 1px, transparent 1.5px),
    radial-gradient(circle at 167px 12px, #fff 0.8px, transparent 1.3px),
    radial-gradient(circle at 301px 88px, #fff 1.2px, transparent 1.8px),
    radial-gradient(circle at 92px 133px, #fff 0.8px, transparent 1.3px),
    radial-gradient(circle at 238px 197px, #fff 1px, transparent 1.5px),
    radial-gradient(circle at 371px 239px, #fff 0.8px, transparent 1.3px),
    radial-gradient(circle at 54px 226px, #fff 1.2px, transparent 1.8px),
    radial-gradient(circle at 345px 151px, #fff 0.8px, transparent 1.3px);
  background-size: 397px 263px;
  mask-image: linear-gradient(#000 30%, transparent);
  animation: twinkle 4s ease-in-out infinite alternate;
}

.stars--alt {
  background-image:
    radial-gradient(circle at 131px 63px, #fff 0.8px, transparent 1.3px),
    radial-gradient(circle at 262px 29px, #fff 1px, transparent 1.5px),
    radial-gradient(circle at 17px 171px, #fff 0.8px, transparent 1.3px),
    radial-gradient(circle at 203px 118px, #fff 1.2px, transparent 1.8px),
    radial-gradient(circle at 318px 207px, #fff 0.8px, transparent 1.3px),
    radial-gradient(circle at 109px 252px, #fff 1px, transparent 1.5px);
  background-size: 347px 281px;
  animation-delay: -2s;
}

@keyframes twinkle {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.35;
  }
}

/* Sun sitting on the horizon (sea is 32% tall) */

.sun {
  position: absolute;
  top: calc(68% - 50px);
  left: 70%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6d5 0 35%, #ffd27a 55%, rgba(255, 190, 110, 0) 70%);
  scale: var(--scale);
}

/* Lanes: each vehicle crosses the full width, looping forever */

.lane {
  position: absolute;
  top: var(--top);
  left: 0;
  width: calc(var(--w) * var(--scale));
  animation: cross var(--dur) linear var(--delay) infinite;
}

.lane--rev {
  animation-direction: reverse;
}

.lane--rev .craft {
  scale: -1 1;
}

@keyframes cross {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100vw);
  }
}

/* Rockets launch from behind the horizon and climb at --angle */

.lane--rocket {
  --dir: 1;
  --rise: 105vh;
  top: 75%;
  left: var(--x);
  rotate: calc(-1 * var(--dir) * var(--angle));
  animation: climb var(--dur) linear var(--delay) infinite;
}

.lane--rocket.lane--rev {
  --dir: -1;
}

@keyframes climb {
  from {
    translate: 0 0;
  }
  to {
    translate: calc(var(--dir) * var(--rise) / tan(var(--angle))) calc(-1 * var(--rise));
  }
}

.craft {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Contrails / exhaust trails */

.lane--trail::before {
  content: "";
  position: absolute;
  top: 45%;
  right: 92%;
  width: 22vw;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(to right, transparent, var(--trail, rgba(255, 255, 255, 0.75)));
}

.lane--rev.lane--trail::before {
  right: auto;
  left: 92%;
  background: linear-gradient(to left, transparent, var(--trail, rgba(255, 255, 255, 0.75)));
}

/* Vehicles */

.craft--plane {
  animation: drift 4s ease-in-out infinite alternate;
}

.craft--rocket {
  animation: drift 2.5s ease-in-out infinite alternate;
}

.craft--boat {
  transform-origin: 50% 90%;
  animation: bob 3.5s ease-in-out infinite alternate;
}

.lane--cloud {
  opacity: 0.8;
}

@keyframes drift {
  from {
    translate: 0 -4px;
  }
  to {
    translate: 0 4px;
  }
}

@keyframes bob {
  from {
    translate: 0 2px;
    rotate: -4deg;
  }
  to {
    translate: 0 -2px;
    rotate: 4deg;
  }
}

.flame {
  transform-box: fill-box;
  transform-origin: right center;
  animation: flicker 0.15s ease-in-out infinite alternate;
}

.flame--inner {
  animation-duration: 0.11s;
}

@keyframes flicker {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0.65) scaleY(0.9);
  }
}

.blink {
  fill: #ff3b3b;
  animation: blink 1.2s steps(1) infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  15% {
    opacity: 0;
  }
}

/* Sea: three wave layers with boats riding between them */

.sea {
  position: absolute;
  inset: auto 0 0 0;
  height: 32%;
}

.sea .lane {
  top: auto;
  bottom: var(--bottom);
}

.wave {
  position: absolute;
  inset: auto 0 0 0;
  background:
    var(--crest) repeat-x 0 0 / 120px 20px,
    linear-gradient(var(--water), var(--water)) no-repeat 0 19px / 100% 100%;
  animation: swell var(--swell) linear infinite;
}

.wave--back {
  --water: #3a83b8;
  --swell: 9s;
  --crest: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10 Q30 0 60 10 T120 10 V20 H0Z' fill='%233a83b8'/%3E%3C/svg%3E");
  height: 100%;
  animation-direction: reverse;
}

.wave--mid {
  --water: #2a6c9f;
  --swell: 7s;
  --crest: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10 Q30 0 60 10 T120 10 V20 H0Z' fill='%232a6c9f'/%3E%3C/svg%3E");
  height: 70%;
}

.wave--front {
  --water: #1d5786;
  --swell: 5s;
  --crest: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10 Q30 0 60 10 T120 10 V20 H0Z' fill='%231d5786'/%3E%3C/svg%3E");
  height: 40%;
  animation-direction: reverse;
}

@keyframes swell {
  from {
    background-position:
      0 0,
      0 19px;
  }
  to {
    background-position:
      120px 0,
      0 19px;
  }
}

/* Title */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: 26vh 16px 0;
  text-align: center;
  text-shadow: 0 2px 14px rgba(5, 10, 40, 0.6);
}

.hero h1 {
  margin: 0;
  font-size: clamp(2.25rem, 7vw, 4.5rem);
  letter-spacing: -0.02em;
}

.hero p {
  margin: 0.25em 0 0;
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  opacity: 0.9;
}

/* Freeze the scene mid-flight for people who prefer less motion */

@media (prefers-reduced-motion: reduce) {
  .scene,
  .scene * {
    animation-play-state: paused !important;
  }
}