: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: #050014;
}

.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.36);
}

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

.banner__background {
  z-index: -6;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.45) contrast(1.13);
  transform: scale(1.08);
  animation: hyperspace 5s ease-in-out infinite alternate;
}

.banner__overlay {
  z-index: -5;
  background:
    linear-gradient(112deg, rgba(3, 0, 19, 0.94) 0 45%, rgba(29, 0, 54, 0.5) 65%, rgba(0, 230, 255, 0.12) 100%),
    linear-gradient(0deg, rgba(3, 0, 15, 0.94) 0%, transparent 54%);
}

.banner__burst {
  position: absolute;
  z-index: -4;
  top: -87px;
  right: -93px;
  width: 310px;
  height: 310px;
  opacity: 0.2;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 7deg,
    #54f4ff 0deg 2deg,
    transparent 2deg 11deg,
    #ff4b98 11deg 13deg,
    transparent 13deg 22deg
  );
  animation: burst-spin 16s linear infinite;
}

.banner__laser {
  position: absolute;
  z-index: -2;
  left: -30px;
  width: 360px;
  height: 3px;
  transform-origin: center;
  filter: blur(0.2px);
  opacity: 0.75;
}

.banner__laser--one {
  top: 93px;
  background: linear-gradient(90deg, transparent, #ff3f9b 28%, #fff 52%, transparent 85%);
  box-shadow: 0 0 11px #ff3f9b;
  transform: rotate(-10deg);
  animation: laser-one 2.8s ease-in-out infinite;
}

.banner__laser--two {
  top: 146px;
  background: linear-gradient(90deg, transparent, #35eeff 36%, #fff 60%, transparent 94%);
  box-shadow: 0 0 11px #35eeff;
  transform: rotate(7deg);
  animation: laser-two 3.2s ease-in-out infinite reverse;
}

.banner__logo {
  position: absolute;
  z-index: 5;
  top: 11px;
  left: 13px;
  width: 150px;
  height: auto;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.85));
  opacity: 0;
  transform: translateY(-8px) skewX(-5deg);
  animation: logo-slam 0.48s cubic-bezier(0.2, 1.5, 0.4, 1) 0.08s forwards;
}

.banner__content {
  position: absolute;
  z-index: 4;
  top: 47px;
  left: 13px;
  display: block;
  width: 205px;
}

.banner__badge {
  display: inline-block;
  padding: 4px 9px 5px;
  color: #12001b;
  background: #f9ff33;
  border: 2px solid #160021;
  border-radius: 3px;
  box-shadow: 3px 3px 0 #ff3f9b, 0 0 12px rgba(249, 255, 51, 0.48);
  font-size: 10px;
  line-height: 1;
  font-weight: 1000;
  letter-spacing: 0.08em;
  transform: rotate(-3deg) scale(0);
  animation: badge-pop 0.5s cubic-bezier(0.2, 1.7, 0.4, 1) 0.3s forwards;
}

.banner__headline {
  display: block;
  margin-top: 7px;
  font-weight: 1000;
  letter-spacing: -0.06em;
  text-shadow: 0 3px 0 #07000c, 0 0 12px rgba(0, 0, 0, 0.95);
  transform: skewX(-5deg);
}

.banner__headline-small {
  display: block;
  font-size: 16px;
  line-height: 1.1;
  opacity: 0;
  transform: translateX(-18px);
  animation: headline-arrives 0.45s ease-out 0.52s forwards;
}

.banner__glitch {
  position: relative;
  display: inline-block;
  margin-top: 2px;
  color: #fff;
  font-size: 25px;
  line-height: 1.05;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-18px);
  animation: headline-arrives 0.45s ease-out 0.64s forwards, glitch-jump 2.6s steps(1) 1.4s infinite;
}

.banner__glitch::before,
.banner__glitch::after {
  position: absolute;
  inset: 0;
  content: attr(data-text);
  pointer-events: none;
}

.banner__glitch::before {
  z-index: -1;
  color: #32efff;
  transform: translate(-2px, 1px);
}

.banner__glitch::after {
  z-index: -2;
  color: #ff3f9b;
  transform: translate(3px, -1px);
}

.banner__description {
  display: block;
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 10px;
  line-height: 1.45;
  font-weight: 800;
  text-shadow: 0 2px 6px #000;
  opacity: 0;
  animation: fade-in 0.4s ease-out 0.87s forwards;
}

.banner__planet {
  position: absolute;
  z-index: 0;
  top: 43px;
  right: -30px;
  width: 129px;
  height: 129px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, #fff8a8 0 3%, #ff6ac1 14%, #632dba 52%, #12052c 76%);
  box-shadow: inset -17px -12px 24px rgba(0, 0, 0, 0.5), 0 0 23px rgba(255, 55, 174, 0.62);
  opacity: 0;
  transform: scale(0.6);
  animation: planet-appears 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) 0.38s forwards, planet-float 3s ease-in-out 1.1s infinite alternate;
}

.banner__planet::after {
  position: absolute;
  top: 46px;
  left: -22px;
  width: 172px;
  height: 28px;
  content: "";
  border: 8px solid rgba(85, 239, 255, 0.78);
  border-right-color: rgba(255, 66, 165, 0.8);
  border-radius: 50%;
  transform: rotate(-17deg);
}

.banner__astronaut {
  position: absolute;
  z-index: 3;
  right: -13px;
  bottom: 28px;
  width: 124px;
  height: auto;
  filter: drop-shadow(0 8px 11px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 9px rgba(57, 235, 255, 0.35));
  opacity: 0;
  transform: translate(28px, 25px) rotate(19deg) scale(0.72);
  animation: astronaut-launch 0.75s cubic-bezier(0.2, 1.4, 0.4, 1) 0.58s forwards, astronaut-float 2.8s ease-in-out 1.35s infinite alternate;
}

.banner__impact {
  position: absolute;
  z-index: 5;
  top: 43px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 45px;
  height: 34px;
  color: #100019;
  background: #f9ff33;
  clip-path: polygon(50% 0%, 61% 22%, 83% 8%, 82% 33%, 100% 39%, 78% 55%, 94% 78%, 68% 74%, 61% 100%, 45% 79%, 22% 94%, 25% 67%, 0 61%, 22% 43%, 7% 20%, 35% 27%);
  font-family: Arial Black, Arial, sans-serif;
  font-size: 11px;
  font-weight: 900;
  opacity: 0;
  transform: rotate(10deg) scale(0);
  animation: impact-pop 0.42s cubic-bezier(0.2, 1.8, 0.4, 1) 1.08s forwards;
}

.banner__cta {
  position: absolute;
  z-index: 7;
  right: 11px;
  bottom: 10px;
  left: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 37px;
  color: #090014;
  background: linear-gradient(90deg, #35efff 0%, #f9ff33 50%, #ff4b9c 100%);
  background-size: 200% 100%;
  border: 2px solid #fff;
  border-radius: 4px;
  box-shadow: 4px 4px 0 #170024, 0 0 21px rgba(82, 237, 255, 0.42);
  font-size: 13px;
  line-height: 1;
  font-weight: 1000;
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(12px) skewX(-4deg);
  animation: cta-arrives 0.48s cubic-bezier(0.2, 1.4, 0.4, 1) 1.05s forwards, cta-color 2.2s linear 1.7s infinite alternate;
}

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

.banner:hover .banner__cta,
.banner:focus-visible .banner__cta {
  filter: brightness(1.15) saturate(1.2);
}

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

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

@keyframes hyperspace {
  to { transform: scale(1.14) translateX(-4px); filter: saturate(1.7) contrast(1.18); }
}

@keyframes burst-spin {
  to { transform: rotate(360deg); }
}

@keyframes laser-one {
  50% { opacity: 0.3; transform: translateX(14px) rotate(-10deg); }
}

@keyframes laser-two {
  50% { opacity: 0.3; transform: translateX(-13px) rotate(7deg); }
}

@keyframes logo-slam {
  to { opacity: 1; transform: translateY(0) skewX(-5deg); }
}

@keyframes badge-pop {
  to { transform: rotate(-3deg) scale(1); }
}

@keyframes headline-arrives {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes glitch-jump {
  0%, 90%, 100% { transform: translate(0, 0); }
  92% { transform: translate(2px, -1px); }
  94% { transform: translate(-2px, 1px); }
  96% { transform: translate(1px, 0); }
}

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

@keyframes planet-appears {
  to { opacity: 0.85; transform: scale(1); }
}

@keyframes planet-float {
  to { transform: translateY(-5px) rotate(4deg); }
}

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

@keyframes astronaut-float {
  to { transform: translateY(-5px) rotate(-2deg); }
}

@keyframes impact-pop {
  to { opacity: 1; transform: rotate(10deg) scale(1); }
}

@keyframes cta-arrives {
  to { opacity: 1; transform: translateY(0) skewX(-4deg); }
}

@keyframes cta-color {
  to { background-position: 100% 0; }
}

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