/* Public start page: the logo switches on like a neon sign */
body.landing {
  display: grid; place-items: center; min-height: 100vh; min-height: 100svh; overflow-x: clip;
  background:
    radial-gradient(46rem 34rem at 50% 34%, rgba(124, 58, 237, .2), transparent 70%),
    radial-gradient(38rem 24rem at 50% 108%, rgba(255, 46, 99, .13), transparent 70%),
    var(--bg);
}

/* Background grid, brighter around the pointer */
.grid {
  position: fixed; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(160, 130, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 130, 255, .07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 75%);
}
.grid.spot {
  background-image:
    linear-gradient(rgba(255, 90, 140, .34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(183, 148, 255, .34) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(circle 15rem at var(--mx, 50%) var(--my, 36%), #000, transparent);
  mask-image: radial-gradient(circle 15rem at var(--mx, 50%) var(--my, 36%), #000, transparent);
}

.hero {
  position: relative; display: flex; flex-direction: column; align-items: center;
  max-width: none; width: 100%; margin: 0; padding: 2rem 1rem; text-align: center;
}

/* Logo */
.mark { position: relative; width: clamp(9.5rem, 42vw, 15rem); aspect-ratio: 1; margin-bottom: 1.4rem; }
.mark svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.aura {
  position: absolute; inset: -22%; border-radius: 50%; opacity: .5; filter: blur(46px);
  background: conic-gradient(from 0deg, var(--solid), var(--pink), transparent 42%, var(--solid) 68%, var(--pink) 88%, var(--solid));
  animation: spin 18s linear infinite;
}
.mark-glow { filter: blur(14px); animation: lit 1s .9s both, breathe 5s 2s ease-in-out infinite; }
.mark-logo { filter: drop-shadow(0 0 3px rgba(220, 201, 255, .75)) drop-shadow(0 0 16px rgba(160, 107, 255, .75)); }
.n-line { stroke-dasharray: 1; animation: draw 1.2s ease-in-out both; }
.n-fill { animation: lit 1s .9s both; }

/* Text */
.wordmark {
  margin: 0 0 .9rem; padding-left: .34em; font-family: "Audiowide", var(--sans); font-size: clamp(1rem, 3.4vw, 1.3rem);
  font-weight: 400; letter-spacing: .34em; color: var(--accent-hi);
  animation: rise .7s 1.2s both;
}
.slogan {
  margin: 0 0 2rem; font-family: "Audiowide", var(--sans); font-size: clamp(1.9rem, 11vw, 4.6rem); line-height: 1.15; white-space: nowrap;
  color: #fff;
  text-shadow: 0 0 5px rgba(255, 255, 255, .55), 0 0 18px var(--pink), 0 0 46px rgba(255, 46, 99, .65), 0 0 90px rgba(124, 58, 237, .8);
  animation: lit 1s 1.4s both;
}
.flick { animation: broken 11s 6s linear infinite; }

.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; animation: rise .7s 1.9s both; }
.cta .btn { text-decoration: none; }
.cta .btn:hover { filter: none; box-shadow: 0 0 26px rgba(255, 46, 99, .55); }
.about { margin: 1.6rem 0 0; font-size: .9rem; color: var(--muted); animation: rise .7s 2.1s both; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(.6rem); } to { opacity: 1; transform: none; } }
@keyframes breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(1.05); } }
/* Switching on: a few short dips, then steady */
@keyframes lit {
  0%, 12% { opacity: 0; }
  14%, 30% { opacity: .8; }
  32%, 52% { opacity: .15; }
  54%, 70% { opacity: .95; }
  72%, 80% { opacity: .4; }
  82%, 100% { opacity: 1; }
}
/* "Brot" has a loose contact now and then */
@keyframes broken {
  0%, 91%, 93%, 95%, 100% { opacity: 1; }
  92% { opacity: .4; }
  94% { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  .aura, .mark-glow, .n-line, .n-fill, .wordmark, .slogan, .flick, .cta, .about { animation: none; }
}