* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #050914;
  display: grid;
  place-items: center;
  font-family: Arial, Helvetica, sans-serif;
  color: #eaf2ff;
}

.banner {
  position: relative;
  width: min(1200px, 96vw);
  aspect-ratio: 3 / 1;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(circle at 20% 30%, rgba(80,160,255,.25), transparent 28%),
    radial-gradient(circle at 80% 65%, rgba(255,170,70,.18), transparent 26%),
    linear-gradient(135deg, #07111f, #0d1728 45%, #101015);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  border: 1px solid rgba(140,190,255,.22);
}

.grid,
.scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.grid {
  background-image:
    linear-gradient(rgba(120,180,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,180,255,.08) 1px, transparent 1px);
  background-size: 42px 42px;
  animation: drift 14s linear infinite;
}

.scanlines {
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,.035) 0,
    rgba(255,255,255,.035) 1px,
    transparent 1px,
    transparent 5px
  );
  mix-blend-mode: overlay;
  opacity: .45;
}

.scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 36px;
}

.scene h1 {
  margin: 0;
  font-size: clamp(3rem, 9vw, 7rem);
  letter-spacing: .12em;
  text-shadow: 0 0 28px rgba(100,190,255,.8);
}

.scene p {
  margin: 10px 0 0;
  font-size: clamp(1rem, 2.2vw, 1.6rem);
  color: #b9c8dd;
}

.scene-illusion {
  animation: illusionOut 8s ease-in-out infinite;
}

.scene-reveal {
  opacity: 0;
  transform: scale(1.03);
  animation: revealIn 8s ease-in-out infinite;
}

.terminal {
  position: absolute;
  left: 32px;
  top: 28px;
  padding: 10px 14px;
  border: 1px solid rgba(120,210,255,.28);
  border-radius: 12px;
  background: rgba(0,0,0,.32);
  color: #7ee7ff;
  font-family: monospace;
  font-size: .95rem;
}

.terminal.small {
  top: auto;
  bottom: 28px;
  color: #ffbd75;
}

.ghost {
  animation: glitch 1.1s infinite;
}

.operators {
  font-size: clamp(3rem, 8vw, 6rem);
  filter: drop-shadow(0 0 28px rgba(255,190,90,.75));
  animation: nod 2.2s ease-in-out infinite;
}

.tagline {
  margin-top: 14px;
  color: #7ef0c9;
  font-weight: bold;
  letter-spacing: .08em;
}

.cloudns {
  position: absolute;
  right: 28px;
  bottom: 24px;
  font-size: .95rem;
  color: #b9d6ff;
  opacity: .9;
}

@keyframes illusionOut {
  0%, 36% { opacity: 1; filter: blur(0); transform: scale(1); }
  46% { opacity: .45; filter: blur(2px) hue-rotate(80deg); transform: skewX(-4deg); }
  56%, 100% { opacity: 0; filter: blur(8px); transform: scale(.98); }
}

@keyframes revealIn {
  0%, 42% { opacity: 0; filter: blur(8px); transform: scale(1.05); }
  58%, 100% { opacity: 1; filter: blur(0); transform: scale(1); }
}

.reveal-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  background: rgba(0,0,0,.18);
  border-radius: 28px;
  opacity: .98;
  animation: none;
}

.illusion-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  border-radius: 28px;
  opacity: .92;
}

@keyframes drift {
  from { background-position: 0 0; }
  to { background-position: 84px 42px; }
}

@keyframes glitch {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(2px, -1px); }
  40% { transform: translate(-2px, 1px); }
  60% { transform: translate(1px, 2px); }
  80% { transform: translate(-1px, -2px); }
}

@keyframes nod {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(-1deg); }
}