:root {
  --ink: #362852;
  --ink-deep: #251b3e;
  --saffron: #d89c23;
  --cream: #f7f3ed;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  color: var(--cream);
  background: var(--ink-deep);
  font-family: "IBM Plex Sans Arabic", sans-serif;
  overflow: hidden;
}
.glow {
  position: fixed;
  width: 46vw;
  height: 46vw;
  border-radius: 50%;
  filter: blur(28px);
  opacity: 0.9;
  pointer-events: none;
}
.glow-a {
  top: -12vw;
  right: -8vw;
  background: radial-gradient(circle, #7d62c4 0%, rgba(90, 69, 136, 0.35) 42%, transparent 70%);
  animation: drift 5s ease-in-out infinite alternate;
}
.glow-b {
  bottom: -16vw;
  left: -10vw;
  background: radial-gradient(circle, rgba(216, 156, 35, 0.95) 0%, rgba(216, 156, 35, 0.28) 40%, transparent 68%);
  animation: drift 6s ease-in-out infinite alternate-reverse;
}
.glow-c {
  top: 28vh;
  left: 18vw;
  width: 28vw;
  height: 28vw;
  background: radial-gradient(circle, #9a7ad4 0%, rgba(54, 40, 82, 0.2) 46%, transparent 70%);
  animation: drift 7s ease-in-out infinite alternate;
}
.flow {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.flow path.line {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 120 680;
}
.flow .gold { stroke: rgba(216, 156, 35, 0.9); stroke-width: 2.4; animation: stream 7s linear infinite; }
.flow .lilac { stroke: rgba(190, 168, 230, 0.75); stroke-width: 1.6; animation: stream 11s linear infinite reverse; }
@keyframes stream { to { stroke-dashoffset: -800; } }
@media (max-width: 800px) {
  .glow { filter: blur(14px); opacity: 0.72; }
  .flow .gold { animation-duration: 4s; }
  .flow .lilac { animation-duration: 6s; }
}
#spark .star { transform-box: fill-box; transform-origin: center; opacity: 0; }
#spark.on .star { animation: glint 0.7s ease-out; }
@keyframes glint {
  0% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  30% { opacity: 1; transform: scale(1) rotate(20deg); }
  100% { opacity: 0; transform: scale(0.4) rotate(40deg); }
}
@keyframes drift {
  to { transform: translate(14vw, -10vh) scale(1.18); }
}
main {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 32px 24px;
}
img {
  width: min(220px, 46vw);
  height: auto;
}
p {
  margin: 22px 0 0;
  color: var(--saffron);
  font-weight: 600;
  letter-spacing: 0;
  font-size: 1rem;
}
h1 {
  margin: 10px 0 0;
  font-family: Alexandria, "IBM Plex Sans Arabic", sans-serif;
  font-weight: 700;
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  line-height: 1.6;
  letter-spacing: 0;
}
small {
  display: block;
  margin-top: 28px;
  color: rgba(247, 243, 237, 0.55);
  font-size: 0.95rem;
}
.gate {
  position: relative;
  z-index: 2;
  margin: 28px auto 0;
  display: grid;
  gap: 10px;
  width: min(320px, 86vw);
  justify-items: stretch;
  text-align: start;
}
.gate label {
  font-size: 0.9rem;
  color: rgba(247, 243, 237, 0.78);
}
.gate input {
  min-height: 46px;
  border: 1px solid rgba(247, 243, 237, 0.22);
  border-radius: 12px;
  background: rgba(255, 253, 250, 0.06);
  color: var(--cream);
  padding: 0 14px;
  font: inherit;
}
.gate button {
  min-height: 46px;
  border: 0;
  border-radius: 12px;
  background: var(--saffron);
  color: var(--ink-deep);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.gate-msg {
  margin: 0;
  color: #f0b4b0;
  font-size: 0.9rem;
}