@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Noto+Sans+TC:wght@400;500;700&family=Poppins:wght@500;700&display=swap");

:root {
  --cycle: 33.5s;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: "Inter", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  overflow: hidden;
  position: relative;
  background-color: #69d2e7;
  animation: skyCycle var(--cycle) linear infinite;
}

.stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
  animation: starsCycle var(--cycle) linear infinite;
}

.stars::before,
.stars::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  animation: starTwinkle 2.8s ease-in-out infinite alternate;
}

.stars::before {
  top: 0;
  left: 0;
  box-shadow:
    8vw 14vh #fff, 16vw 30vh rgba(255,255,255,.9), 24vw 8vh rgba(255,255,255,.95),
    31vw 40vh rgba(255,255,255,.9), 40vw 18vh #fff, 48vw 32vh rgba(255,255,255,.85),
    56vw 10vh rgba(255,255,255,.92), 64vw 24vh rgba(255,255,255,.9), 72vw 14vh #fff,
    80vw 35vh rgba(255,255,255,.86), 88vw 20vh rgba(255,255,255,.9), 94vw 42vh #fff,
    12vw 58vh rgba(255,255,255,.9), 22vw 70vh #fff, 34vw 62vh rgba(255,255,255,.88),
    45vw 76vh rgba(255,255,255,.94), 58vw 66vh #fff, 70vw 78vh rgba(255,255,255,.9),
    83vw 64vh rgba(255,255,255,.88), 92vw 74vh #fff;
}

.stars::after {
  top: 0;
  left: 0;
  opacity: 0.75;
  box-shadow:
    6vw 22vh rgba(255,255,255,.8), 14vw 44vh rgba(255,255,255,.75), 20vw 12vh rgba(255,255,255,.8),
    29vw 28vh rgba(255,255,255,.78), 37vw 52vh rgba(255,255,255,.8), 46vw 14vh rgba(255,255,255,.76),
    54vw 44vh rgba(255,255,255,.82), 62vw 18vh rgba(255,255,255,.78), 68vw 56vh rgba(255,255,255,.76),
    76vw 26vh rgba(255,255,255,.8), 84vw 12vh rgba(255,255,255,.78), 90vw 50vh rgba(255,255,255,.76),
    10vw 80vh rgba(255,255,255,.8), 26vw 84vh rgba(255,255,255,.75), 52vw 86vh rgba(255,255,255,.8),
    78vw 84vh rgba(255,255,255,.78), 96vw 82vh rgba(255,255,255,.76);
  animation-delay: 0.8s;
}

.sun,
.moon {
  position: absolute;
  top: 20px;
  left: 22vw;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.sun {
  z-index: 2;
  background: #f1c40f;
  box-shadow: 0 0 180px 2px #ffff75;
  animation: sunCycle var(--cycle) linear infinite;
}

.moon {
  z-index: 2;
  background: #fffbe5;
  box-shadow: 0 0 40px 2px rgba(255, 255, 231, 0.9);
  left: 78vw;
  -webkit-mask: radial-gradient(circle at 68% 50%, transparent 42%, #000 43%);
  mask: radial-gradient(circle at 68% 50%, transparent 42%, #000 43%);
  clip-path: inset(0 0 0 0 round 50%);
  animation: moonCycle var(--cycle) linear infinite;
}

.cloud {
  position: absolute;
  right: 100%;
  pointer-events: none;
  z-index: 3;
  opacity: 0.95;
}

.cloud1 {
  top: 5%;
  height: 100px;
  animation: cloudDrift 10s linear infinite;
}

.cloud2 {
  top: 13%;
  height: 70px;
  animation: cloudDrift 12s linear infinite;
  animation-delay: -3s;
}

.cloud3 {
  top: 24%;
  height: 80px;
  animation: cloudDrift 11.5s linear infinite;
  animation-delay: -1s;
}

.cloud4 {
  top: 36%;
  height: 50px;
  animation: cloudDrift 17s linear infinite;
  animation-delay: -4s;
}

.cloud5 {
  top: 48%;
  height: 30px;
  animation: cloudDrift 31s linear infinite;
  animation-delay: -2s;
}

.plane {
  position: absolute;
  height: clamp(48px, 7.2vw, 82px);
  z-index: 6;
  cursor: pointer;
  transform-origin: center;
  animation-name: planeBob;
  animation-duration: 4.8s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.plane:hover {
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.75));
}

.plane--left {
  transform: scaleX(-1);
}

.plane--right {
  transform: scaleX(1);
}

/* 3 planes entering from left, flying to right */
.plane--a {
  top: 10%;
  animation: flyLeftA 19s linear infinite;
}

.plane--b {
  top: 31%;
  animation: flyLeftB 23s linear infinite;
}

.plane--main {
  top: 56%;
  animation: flyLeftMain 21s linear infinite;
}

/* 2 planes entering from right, flying to left */
.plane--d {
  top: 21%;
  animation: flyRightD 24s linear infinite;
}

.plane--e {
  top: 70%;
  animation: flyRightE 26s linear infinite;
}

@keyframes skyCycle {
  0%,
  5%,
  100% {
    background-color: #69d2e7;
  }
  25%,
  75% {
    background-color: #1d2f41;
  }
}

@keyframes starsCycle {
  0%,
  15%,
  100% {
    opacity: 0;
  }
  24%,
  78% {
    opacity: 1;
  }
}

@keyframes starTwinkle {
  from {
    filter: brightness(0.8);
  }
  to {
    filter: brightness(1.15);
  }
}

@keyframes sunCycle {
  0%,
  10%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }
  30%,
  75% {
    transform: translateY(110vh);
    opacity: 0;
  }
}

@keyframes moonCycle {
  0%,
  18% {
    transform: translateY(110vh);
    opacity: 0;
  }
  32%,
  75% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(110vh);
    opacity: 0;
  }
}

@keyframes cloudDrift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(220vw);
  }
}

@keyframes flyLeftA {
  0% { left: -18vw; transform: translateY(0) scaleX(-1); }
  25% { transform: translateY(7px) scaleX(-1); }
  50% { transform: translateY(-4px) scaleX(-1); }
  75% { transform: translateY(5px) scaleX(-1); }
  100% { left: 108vw; transform: translateY(0) scaleX(-1); }
}

@keyframes flyLeftB {
  0% { left: -22vw; transform: translateY(0) scaleX(-1); }
  20% { transform: translateY(-6px) scaleX(-1); }
  55% { transform: translateY(6px) scaleX(-1); }
  100% { left: 118vw; transform: translateY(0) scaleX(-1); }
}

@keyframes flyLeftMain {
  0% { left: -20vw; transform: translateY(0) scaleX(-1); }
  30% { transform: translateY(8px) scaleX(-1); }
  60% { transform: translateY(-5px) scaleX(-1); }
  100% { left: 106vw; transform: translateY(0) scaleX(-1); }
}

@keyframes flyRightD {
  0% { left: 112vw; transform: translateY(0) scaleX(1); }
  28% { transform: translateY(8px) scaleX(1); }
  62% { transform: translateY(-6px) scaleX(1); }
  100% { left: -20vw; transform: translateY(0) scaleX(1); }
}

@keyframes flyRightE {
  0% { left: 114vw; transform: translateY(0) scaleX(1); }
  26% { transform: translateY(-7px) scaleX(1); }
  58% { transform: translateY(6px) scaleX(1); }
  100% { left: -22vw; transform: translateY(0) scaleX(1); }
}