/* Mockabit splash — contentless landing. Just the wordmark + ambient motion +
   a single pulsating circle. Deliberately says nothing about the product.
   Cinematic aurora palette, distinct from the app and the admin console. */
:root{
  --s-bg:#05060d;
  --s-bg2:#0a0b1a;
  --s-ink:#eef1ff;
  --s-aurora1:#5b8cff;
  --s-aurora2:#9b6cff;
  --s-aurora3:#39e0c8;
  --s-dim:#5a6180;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  background:radial-gradient(ellipse at 50% 40%,var(--s-bg2),var(--s-bg) 70%);
  color:var(--s-ink);
  font-family:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
#field{position:fixed;inset:0;z-index:0;display:block}

.stage{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:58px;text-align:center}

/* Kinetic wordmark — the only text on the page */
.wordmark{
  font-size:clamp(48px,11vw,132px);font-weight:700;letter-spacing:-.04em;line-height:1;
  background:linear-gradient(100deg,var(--s-aurora1),var(--s-aurora2) 45%,var(--s-aurora3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% 100%;
  animation:sheen 9s ease-in-out infinite;
  filter:drop-shadow(0 8px 40px rgba(91,140,255,.25));
}
@keyframes sheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* Pulsating circle — the sole interactive element */
.enter{position:relative;width:132px;height:132px;border:0;background:none;cursor:pointer;outline:none}
.enter .ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(155,108,255,.55)}
.enter .ring.r1{animation:ripple 3.4s ease-out infinite}
.enter .ring.r2{animation:ripple 3.4s ease-out infinite 1.13s}
.enter .ring.r3{animation:ripple 3.4s ease-out infinite 2.26s}
@keyframes ripple{0%{transform:scale(.55);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.enter .core{
  position:absolute;inset:34px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,var(--s-aurora3),var(--s-aurora2) 60%,var(--s-aurora1));
  box-shadow:0 0 40px rgba(91,140,255,.55),inset 0 0 20px rgba(255,255,255,.25);
  animation:breathe 3.4s ease-in-out infinite;
  transition:transform .3s ease,box-shadow .3s ease;
}
.enter:hover .core{transform:scale(1.08);box-shadow:0 0 60px rgba(57,224,200,.7),inset 0 0 22px rgba(255,255,255,.35)}
.enter:focus-visible{outline:2px solid var(--s-aurora3);outline-offset:8px;border-radius:50%}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.enter .hint{position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%);white-space:nowrap;color:var(--s-dim);font-size:12px;letter-spacing:.28em;text-transform:uppercase;font-weight:500}

/* Closed state: the circle stops inviting entry */
.enter.closed{cursor:not-allowed}
.enter.closed .ring{animation:none;opacity:.15}
.enter.closed .core{animation:none;background:radial-gradient(circle at 40% 36%,#3a3f57,#23273a);box-shadow:none}
.enter.closed:hover .core{transform:none;box-shadow:none}
.enter.closed .hint{color:#4a4f68}

@media (prefers-reduced-motion:reduce){
  .wordmark{animation:none}
  .enter .ring{animation:none;opacity:.3}
  .enter .core{animation:none}
}