:host {
  --a: #ff5f6d;
  --b: #ffc371;
  --c: #ff5f6d;
  --glow: rgb(255 95 109 / 45%);
}
:host([theme='ocean']) {
  --a: #2193b0;
  --b: #6dd5ed;
  --c: #b2fefa;
  --glow: rgb(33 147 176 / 45%);
}
:host([theme='neon']) {
  --a: #f72585;
  --b: #7209b7;
  --c: #4cc9f0;
  --glow: rgb(114 9 183 / 55%);
}

.stage {
  background:
    radial-gradient(60% 80% at 15% 10%, color-mix(in srgb, var(--a) 35%, transparent), transparent),
    radial-gradient(50% 70% at 85% 90%, color-mix(in srgb, var(--c) 30%, transparent), transparent),
    #0d0d14;
  box-shadow: 0 30px 80px -30px var(--glow);
  transition: box-shadow 400ms ease;
}

h1 {
  background: linear-gradient(100deg, var(--a), var(--b), var(--c), var(--a)) 0 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: flow 6s linear infinite;
  filter: drop-shadow(0 4px 24px var(--glow));
}

.tagline {
  animation: rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes flow {
  to { background-position: 300% 0; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  h1, .tagline { animation: none; }
}