:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
    "Yu Gothic", Meiryo, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 300px;
  height: 250px;
  overflow: hidden;
  background: #07101f;
}

.banner {
  position: relative;
  display: block;
  width: 300px;
  height: 250px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.banner__background,
.banner__shade,
.banner__stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.banner__background {
  z-index: -4;
  object-fit: cover;
  object-position: 52% center;
  transform: scale(1.04);
  animation: background-drift 9s ease-in-out infinite alternate;
}

.banner__shade {
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(3, 9, 22, 0.93) 0%, rgba(3, 9, 22, 0.76) 51%, rgba(3, 9, 22, 0.12) 100%),
    linear-gradient(0deg, rgba(3, 9, 22, 0.76) 0%, transparent 50%);
}

.banner__stars {
  z-index: -2;
  opacity: 0.8;
  background-image:
    radial-gradient(circle at 12% 21%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 64% 15%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 87% 32%, #ffe27a 0 1px, transparent 1.8px),
    radial-gradient(circle at 52% 47%, #fff 0 1px, transparent 1.5px);
  animation: stars-pulse 2.8s ease-in-out infinite alternate;
}

.banner__logo {
  position: absolute;
  top: 13px;
  left: 14px;
  width: 162px;
  height: auto;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.75));
  opacity: 0;
  transform: translateY(-7px);
  animation: reveal-down 0.55s ease-out 0.1s forwards;
}

.banner__copy {
  position: absolute;
  top: 55px;
  left: 14px;
  z-index: 2;
  display: block;
  width: 205px;
}

.banner__eyebrow {
  display: inline-block;
  padding: 3px 8px 4px;
  color: #dfffe8;
  background: rgba(2, 91, 53, 0.76);
  border: 1px solid rgba(124, 255, 166, 0.58);
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateX(-9px);
  animation: reveal-right 0.5s ease-out 0.35s forwards;
}

.banner__headline {
  display: block;
  margin-top: 7px;
  font-size: 20px;
  line-height: 1.28;
  font-weight: 900;
  letter-spacing: -0.04em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
  opacity: 0;
  transform: translateX(-11px);
  animation: reveal-right 0.55s ease-out 0.55s forwards;
}

.banner__headline span {
  color: #ffe36b;
  font-size: 22px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95), 0 0 16px rgba(255, 205, 54, 0.34);
}

.banner__review {
  display: block;
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
  text-shadow: 0 2px 6px #000;
  opacity: 0;
  animation: fade-in 0.5s ease-out 0.85s forwards;
}

.banner__astronaut {
  position: absolute;
  z-index: 1;
  right: -15px;
  bottom: 28px;
  width: 112px;
  height: auto;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.66));
  opacity: 0;
  transform: translate(15px, 16px) rotate(7deg) scale(0.86);
  animation: astronaut-arrives 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}

.banner__cta {
  position: absolute;
  right: 13px;
  bottom: 12px;
  left: 13px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 37px;
  color: #101725;
  background: linear-gradient(135deg, #ffec76 0%, #ffc631 100%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 9px;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.45), 0 0 18px rgba(255, 210, 67, 0.22);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.03em;
  opacity: 0;
  transform: translateY(9px);
  animation: reveal-up 0.5s ease-out 1.05s forwards, cta-glow 2.5s ease-in-out 1.7s infinite;
}

.banner__arrow {
  font-family: Arial, sans-serif;
  font-size: 23px;
  line-height: 0.7;
  transition: transform 0.2s ease;
}

.banner:hover .banner__cta,
.banner:focus-visible .banner__cta {
  background: linear-gradient(135deg, #fff399 0%, #ffd247 100%);
}

.banner:hover .banner__arrow,
.banner:focus-visible .banner__arrow {
  transform: translateX(3px);
}

.banner:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -4px;
}

@keyframes background-drift {
  to { transform: scale(1.1) translateX(-3px); }
}

@keyframes stars-pulse {
  from { opacity: 0.45; }
  to { opacity: 0.95; }
}

@keyframes reveal-down {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes reveal-right {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes reveal-up {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  to { opacity: 1; }
}

@keyframes astronaut-arrives {
  to { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
}

@keyframes cta-glow {
  50% { box-shadow: 0 5px 16px rgba(0, 0, 0, 0.45), 0 0 24px rgba(255, 210, 67, 0.5); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}