.gea-intro__ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.gea-intro__gate-content {
  position: relative;
  z-index: 2;
}

.gea-intro__waves {
  z-index: 1;
}

.gea-intro__logo-scene,
.gea-intro__message-scene {
  z-index: 2;
}

/* Día: cielo muy suave, amanecer posterior a “Comenzar” y nubes lentas. */
.gea-intro__ambient--day {
  background:
    linear-gradient(180deg, rgba(218, 239, 255, 0.58) 0%, rgba(243, 250, 255, 0.24) 42%, rgba(255, 255, 255, 0) 76%);
}

.gea-intro__sun {
  position: absolute;
  top: clamp(44px, 9vh, 94px);
  right: clamp(34px, 9vw, 132px);
  width: clamp(64px, 8vw, 96px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fffdf1 0 12%, #ffe88a 31%, #ffd05a 53%, #ffb52c 78%, #f39b13 100%);
  box-shadow:
    0 0 0 18px rgba(255, 204, 76, 0.06),
    0 0 56px 16px rgba(255, 193, 54, 0.17);
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transform-origin: center;
  will-change: transform, opacity;
}

/* El sol no aparece en la pantalla previa: el amanecer pertenece al inicio real. */
.gea-intro__gate .gea-intro__sun {
  display: none;
}

/* Halo atmosférico que se abre detrás del disco. */
.gea-intro__stage .gea-intro__sun::before {
  content: "";
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 222, 126, 0.28) 0 30%, rgba(255, 197, 64, 0.12) 48%, rgba(255, 197, 64, 0) 72%);
  opacity: 0;
  transform: scale(1);
  pointer-events: none;
}

/* Un único ascenso, sin rebote ni cambios de tamaño. */
.gea-intro.is-playing .gea-intro__stage .gea-intro__sun {
  animation: gea-sun-rise 2.2s cubic-bezier(.25,.1,.25,1) .12s both;
}

.gea-intro.is-playing .gea-intro__stage .gea-intro__sun::before {
  animation: gea-sun-halo-open 2.6s ease-out .12s both;
}

.gea-intro__cloud {
  position: absolute;
  width: 126px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 26px rgba(52, 105, 146, 0.08);
  opacity: 0.78;
  will-change: transform;
}

.gea-intro__cloud::before,
.gea-intro__cloud::after {
  content: "";
  position: absolute;
  bottom: 7px;
  border-radius: 50%;
  background: inherit;
}

.gea-intro__cloud::before {
  left: 24px;
  width: 48px;
  height: 48px;
}

.gea-intro__cloud::after {
  right: 20px;
  width: 58px;
  height: 58px;
}

.gea-intro__cloud--one {
  top: 19%;
  left: -150px;
  transform: scale(0.82);
  animation: gea-cloud-drift-one 22s linear infinite;
}

.gea-intro__cloud--two {
  top: 33%;
  left: -190px;
  transform: scale(1.08);
  opacity: 0.58;
  animation: gea-cloud-drift-two 29s linear infinite 4s;
}

.gea-intro__cloud--three {
  top: 12%;
  left: -170px;
  transform: scale(0.62);
  opacity: 0.46;
  animation: gea-cloud-drift-three 35s linear infinite 8s;
}

/* Noche: estrellas concentradas en el cielo, sin competir con logo ni copy. */
.gea-intro__ambient--night {
  background:
    radial-gradient(circle at 18% 14%, rgba(29, 109, 242, 0.17), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(62, 139, 255, 0.09), transparent 26%),
    linear-gradient(180deg, rgba(3, 28, 72, 0.18), rgba(1, 25, 73, 0));
}

.gea-intro__star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px 1px rgba(255, 255, 255, 0.24);
  opacity: 0.42;
  animation: gea-star-twinkle 5.2s ease-in-out infinite;
  transform-origin: center;
}

/* Distribución irregular, siempre por encima de la zona central de contenido. */
.gea-intro__star:nth-child(1)  { top: 7%;  left: 10%; animation-delay: .2s; }
.gea-intro__star:nth-child(2)  { top: 11%; left: 22%; animation-delay: 1.4s; }
.gea-intro__star:nth-child(3)  { top: 6%;  left: 36%; width: 2px; height: 2px; animation-delay: 2.1s; }
.gea-intro__star:nth-child(4)  { top: 15%; left: 48%; animation-delay: .8s; }
.gea-intro__star:nth-child(5)  { top: 8%;  left: 61%; animation-delay: 2.8s; }
.gea-intro__star:nth-child(6)  { top: 18%; left: 72%; width: 2px; height: 2px; animation-delay: 1.8s; }
.gea-intro__star:nth-child(7)  { top: 9%;  left: 83%; animation-delay: 2.3s; }
.gea-intro__star:nth-child(8)  { top: 23%; left: 15%; width: 2px; height: 2px; animation-delay: .4s; }
.gea-intro__star:nth-child(9)  { top: 25%; left: 42%; animation-delay: 1.1s; }
.gea-intro__star:nth-child(10) { top: 22%; left: 76%; animation-delay: 3.1s; }
.gea-intro__star:nth-child(11) { top: 4%;  left: 52%; width: 2px; height: 2px; animation-delay: 3.7s; }
.gea-intro__star:nth-child(12) { top: 17%; left: 91%; animation-delay: 1.9s; }
.gea-intro__star:nth-child(13) { top: 27%; left: 59%; width: 2px; height: 2px; animation-delay: 2.6s; }

.gea-intro__star:nth-child(n+14) {
  display: none;
}

.gea-intro__star:nth-child(2),
.gea-intro__star:nth-child(5),
.gea-intro__star:nth-child(7),
.gea-intro__star:nth-child(10),
.gea-intro__star:nth-child(12) {
  width: 13px;
  height: 13px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.94);
  clip-path: polygon(
    50% 0%,
    60% 40%,
    100% 50%,
    60% 60%,
    50% 100%,
    40% 60%,
    0% 50%,
    40% 40%
  );
  box-shadow: none;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.32));
  animation-name: gea-star-sparkle;
  animation-duration: 6.4s;
}

.gea-intro__star:nth-child(5) {
  width: 17px;
  height: 17px;
  opacity: 0.72;
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.42));
}

.gea-intro__star:nth-child(12) {
  width: 10px;
  height: 10px;
  opacity: 0.52;
}

@keyframes gea-sun-rise {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: .96; transform: translate3d(0, 0, 0); }
}

@keyframes gea-sun-halo-open {
  from { opacity: 0; }
  to { opacity: .5; }
}

@keyframes gea-cloud-drift-one {
  from { transform: translateX(0) scale(0.82); }
  to { transform: translateX(calc(100vw + 310px)) scale(0.82); }
}

@keyframes gea-cloud-drift-two {
  from { transform: translateX(0) scale(1.08); }
  to { transform: translateX(calc(100vw + 390px)) scale(1.08); }
}

@keyframes gea-cloud-drift-three {
  from { transform: translateX(0) scale(0.62); }
  to { transform: translateX(calc(100vw + 340px)) scale(0.62); }
}

@keyframes gea-star-twinkle {
  0%, 100% { opacity: 0.24; transform: scale(0.82); }
  48% { opacity: 0.82; transform: scale(1.18); }
  68% { opacity: 0.46; transform: scale(1); }
}

@keyframes gea-star-sparkle {
  0%, 100% { opacity: 0.34; transform: scale(0.82); }
  42% { opacity: 0.96; transform: scale(1.12); }
  62% { opacity: 0.56; transform: scale(0.96); }
}

@media (max-width: 700px), (orientation: portrait) {
  .gea-intro__sun {
    top: max(54px, 9vh);
    right: 7vw;
    width: clamp(58px, 18vw, 78px);
  }

  .gea-intro__cloud {
    width: 102px;
    height: 28px;
  }

  .gea-intro__cloud::before {
    left: 20px;
    width: 38px;
    height: 38px;
  }

  .gea-intro__cloud::after {
    right: 16px;
    width: 46px;
    height: 46px;
  }

  .gea-intro__cloud--two {
    top: 27%;
    opacity: 0.48;
  }

  .gea-intro__cloud--three {
    display: none;
  }

  .gea-intro__star:nth-child(2),
  .gea-intro__star:nth-child(7),
  .gea-intro__star:nth-child(10) {
    width: 11px;
    height: 11px;
  }

  .gea-intro__star:nth-child(5) {
    width: 14px;
    height: 14px;
  }

  .gea-intro__star:nth-child(12) {
    width: 9px;
    height: 9px;
  }

  .gea-intro__star:nth-child(4),
  .gea-intro__star:nth-child(9) {
    display: none;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .gea-intro__sun {
    top: 24px;
    right: 8vw;
    width: 58px;
  }

  .gea-intro__cloud--two,
  .gea-intro__cloud--three {
    display: none;
  }

  .gea-intro__star:nth-child(8),
  .gea-intro__star:nth-child(9),
  .gea-intro__star:nth-child(10),
  .gea-intro__star:nth-child(12),
  .gea-intro__star:nth-child(13) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gea-intro__sun,
  .gea-intro__cloud,
  .gea-intro__star,
  .gea-intro__sun::before,
  .gea-intro__sun::after {
    animation: none !important;
  }
}