/* Swiper + Screensaver combined styles */

/* ===== FULL-SCREEN FOUNDATION ===== */
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  color: #fff;
  position: relative;
}

.swiper {
  width: 100%;
  height: 100%;
  position: relative;
}

.swiper-slide {
  width: 100%;
  height: 100%;
}

.swiper-slide iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ===== PAGINATION (BULLETS) ===== */
.swiper-pagination {
  position: relative;
  display: inline-block;
}

.swiper-pagination-bullet {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  opacity: 0.8;
  cursor: pointer;
  transition: opacity 0.3s;
  border: none;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  background: #4285f4;
}

.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
  top: -30px;
}

/* Screensaver container (hidden by default) */
#screensaverContainer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 10; /* above swiper */
  cursor: none;
}

/* ===== Screensaver styles (adapted from screensaver.php) ===== */
#screensaverContainer * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#screensaverContainer {
  background: #000;
  overflow: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

#screensaverContainer .night-sky {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at bottom, #000 0%, #050505 100%);
  overflow: hidden;
  z-index: 0;
}

#screensaverContainer .night-sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      circle at 50% 40%,
      rgba(160, 180, 220, 0.35) 0%,
      rgba(120, 140, 180, 0.18) 12%,
      rgba(80, 90, 110, 0.07) 28%,
      rgba(0, 0, 0, 0) 55%
    ),
    radial-gradient(
      circle at 48% 42%,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.05) 22%,
      rgba(0, 0, 0, 0) 50%
    ),
    linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}

#screensaverContainer .grain-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZDjAAAAF0lEQVR4AWOAgf+PBhYGBgYGJgYwGhgAABIvA6qR4p4GAAAAAElFTkSuQmCC);
  background-size: 64px 64px;
  mix-blend-mode: overlay;
  opacity: 0.07;
  animation: grainShift 1.2s steps(4) infinite;
}

@keyframes grainShift {
  0% {
    transform: translate(0, 0);
    opacity: 0.06;
  }

  25% {
    transform: translate(4px, -2px);
    opacity: 0.075;
  }

  50% {
    transform: translate(-3px, 3px);
    opacity: 0.065;
  }

  75% {
    transform: translate(2px, 1px);
    opacity: 0.08;
  }

  100% {
    transform: translate(0, 0);
    opacity: 0.07;
  }
}

#screensaverContainer .aurora-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
      120deg,
      rgba(0, 40, 80, 0) 0%,
      rgba(20, 90, 140, 0.08) 18%,
      rgba(60, 160, 220, 0.12) 25%,
      rgba(100, 200, 255, 0.1) 32%,
      rgba(30, 90, 140, 0.06) 40%,
      rgba(0, 40, 80, 0) 55%
    ),
    linear-gradient(
      300deg,
      rgba(0, 30, 60, 0) 0%,
      rgba(40, 120, 180, 0.1) 22%,
      rgba(80, 200, 255, 0.12) 30%,
      rgba(40, 120, 180, 0.08) 38%,
      rgba(0, 30, 60, 0) 50%
    );
  background-repeat: no-repeat;
  filter: blur(18px) saturate(140%);
  opacity: 0.22;
  mix-blend-mode: screen;
  animation: auroraDrift 60s ease-in-out infinite;
}

@keyframes auroraDrift {
  0% {
    transform: translateX(0) scale(1);
    opacity: 0.18;
  }

  50% {
    transform: translateX(-6%) scale(1.05);
    opacity: 0.24;
  }

  100% {
    transform: translateX(0) scale(1);
    opacity: 0.2;
  }
}

#screensaverContainer .stars,
#screensaverContainer .stars::before,
#screensaverContainer .stars::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 5vw 10vh #bbb, 12vw 25vh #ccc, 20vw 5vh #aaa, 28vw 40vh #bbb,
    35vw 15vh #ccc, 42vw 55vh #bbb, 50vw 30vh #ccc, 60vw 8vh #bbb,
    68vw 42vh #ccc, 76vw 18vh #bbb, 84vw 35vh #ccc, 92vw 12vh #bbb,
    10vw 70vh #aaa, 18vw 85vh #ccc, 26vw 60vh #bbb, 34vw 80vh #ccc,
    44vw 70vh #bbb, 52vw 85vh #ccc, 62vw 65vh #bbb, 72vw 78vh #ccc,
    82vw 68vh #bbb, 90vw 88vh #ccc, 15vw 50vh #bbb, 25vw 32vh #ccc,
    55vw 52vh #bbb, 65vw 25vh #ccc, 75vw 50vh #bbb, 85vw 60vh #ccc,
    95vw 40vh #bbb, 7vw 15vh #bbb, 13vw 42vh #ccc, 19vw 28vh #aaa,
    23vw 12vh #ccc, 31vw 22vh #bbb, 37vw 5vh #ccc, 47vw 18vh #bbb,
    53vw 42vh #ccc, 59vw 12vh #bbb, 63vw 3vh #ccc, 69vw 27vh #bbb,
    73vw 14vh #ccc, 79vw 9vh #bbb, 83vw 26vh #ccc, 87vw 6vh #aaa, 93vw 24vh #ccc,
    4vw 55vh #bbb, 14vw 52vh #ccc, 24vw 48vh #bbb, 36vw 58vh #ccc,
    48vw 50vh #bbb, 58vw 56vh #ccc, 70vw 52vh #bbb, 78vw 60vh #ccc,
    88vw 54vh #bbb, 96vw 58vh #ccc;
  animation: twinkle 7s ease-in-out infinite alternate;
  opacity: 0.65;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.35))
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.15));
  z-index: 2;
}

#screensaverContainer .stars::before,
#screensaverContainer .stars::after {
  content: "";
}

#screensaverContainer .stars::before {
  box-shadow: 8vw 20vh #666, 16vw 10vh #777, 24vw 30vh #666, 32vw 12vh #777,
    40vw 25vh #666, 48vw 10vh #777, 56vw 20vh #666, 64vw 30vh #777,
    72vw 10vh #666, 80vw 25vh #777, 88vw 18vh #666, 96vw 32vh #777,
    12vw 60vh #666, 22vw 72vh #777, 30vw 55vh #666, 38vw 65vh #777,
    46vw 60vh #666, 54vw 75vh #777, 66vw 58vh #666, 74vw 72vh #777,
    82vw 55vh #666, 90vw 70vh #777;
  animation-duration: 9s;
  animation-delay: -2s;
  opacity: 0.4;
  z-index: 2;
}

#screensaverContainer .stars::after {
  box-shadow: 6vw 15vh #666, 14vw 35vh #777, 22vw 18vh #666, 30vw 45vh #777,
    38vw 22vh #666, 46vw 40vh #777, 54vw 18vh #666, 62vw 35vh #777,
    70vw 15vh #666, 78vw 45vh #777, 86vw 20vh #666, 94vw 38vh #777,
    8vw 80vh #666, 18vw 90vh #777, 28vw 75vh #666, 36vw 90vh #777,
    48vw 80vh #666, 58vw 90vh #777, 68vw 82vh #666, 78vw 92vh #777,
    88vw 78vh #666, 96vw 92vh #777;
  animation-duration: 11s;
  animation-delay: -4s;
  opacity: 0.3;
  z-index: 2;
}

@keyframes twinkle {
  0% {
    opacity: 0.35;
    transform: translate3d(0, 0, 0);
  }

  50% {
    opacity: 0.95;
  }

  100% {
    opacity: 0.55;
    transform: translate3d(0, -0.4vh, 0);
  }
}

#screensaverContainer #moon-container {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30vw;
  max-width: 340px;
  min-width: 180px;
  z-index: 2;
  text-align: center;
}

#screensaverContainer #moon-container::before {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background: radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.25) 18%,
      rgba(180, 200, 255, 0.18) 32%,
      rgba(100, 120, 180, 0.08) 48%,
      rgba(40, 50, 80, 0.02) 62%,
      rgba(0, 0, 0, 0) 75%
    ),
    radial-gradient(
      circle at 52% 48%,
      rgba(200, 220, 255, 0.35) 0%,
      rgba(160, 180, 220, 0.12) 30%,
      rgba(0, 0, 0, 0) 70%
    );
  mix-blend-mode: screen;
  filter: blur(12px) brightness(1.15);
  animation: moonPulse 28s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes moonPulse {
  0% {
    opacity: 0.9;
  }

  50% {
    opacity: 1;
    filter: blur(14px) brightness(1.22);
  }

  100% {
    opacity: 0.9;
  }
}

#screensaverContainer #moon-img {
  width: 100%;
  height: auto;
  pointer-events: none;
  animation: rotate-moon 120s linear infinite;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.15));
}

@keyframes rotate-moon {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

#screensaverContainer #cloud-container {
  position: absolute;
  top: -35%;
  left: 0;
  transform: translateX(0);
  width: 220%;
  opacity: 0.9;
  pointer-events: none;
  animation: cloud-traverse 120s linear infinite;
  z-index: 3;
  filter: blur(1.2px) brightness(0.7) saturate(0.85);
}

#screensaverContainer #cloud-img {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(0.55) contrast(0.9) saturate(0.8);
}

@keyframes cloud-traverse {
  0% {
    transform: translateX(100vw);
    opacity: 0.05;
  }

  5% {
    opacity: 0.9;
  }

  95% {
    opacity: 0.9;
  }

  100% {
    transform: translateX(-160vw);
    opacity: 0.05;
  }
}

#screensaverContainer .shooting-star {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 8px 3px rgba(255, 255, 255, 0.9),
    0 0 14px 6px rgba(180, 200, 255, 0.6);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

#screensaverContainer .shooting-star::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 180px;
  height: 3px;
  transform: translateY(-50%);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.85),
    rgba(255, 255, 255, 0)
  );
  filter: blur(2px);
}

@keyframes starShoot {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(1);
  }

  6% {
    opacity: 1;
  }

  14% {
    opacity: 1;
  }

  18% {
    opacity: 0.35;
  }

  22% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

#screensaverContainer .satellite {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #d0e7ff;
  border-radius: 50%;
  box-shadow: 0 0 6px 2px rgba(160, 190, 255, 0.8);
  pointer-events: none;
  z-index: 2;
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  #screensaverContainer .aurora-layer,
  #screensaverContainer .grain-layer,
  #screensaverContainer #moon-container::before {
    animation: none;
  }
}