/* ============================================================
   SSS Client Portal — Waitlist
   Base reset, keyframes, and interaction states.
   Layout/skin lives inline in index.html (ported verbatim from the
   approved Claude Design pass); this file holds only what inline
   styles can't express: resets, @keyframes, :hover and :focus.
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #050505;
}

::selection { background: rgba(10, 132, 255, 0.35); color: #fff; }

a { color: #0a84ff; text-decoration: none; }
a:hover { color: #4aa8ff; }

input::placeholder { color: rgba(255, 255, 255, 0.32); }

input:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid #0a84ff;
  outline-offset: 2px;
}

/* Email field focus glow (inline styles can't target :focus) */
.wl-input:focus {
  border-color: #0a84ff !important;
  box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.15);
}

/* Primary blue CTA hover */
.wl-btn-primary:hover:not([disabled]) {
  background: #2a97ff !important;
  transform: translateY(-1px);
  box-shadow: 0 16px 48px rgba(10, 132, 255, 0.55);
}

/* Ghost / secondary button hover */
.wl-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.09) !important;
}

/* Small lift for the copy / share buttons */
.wl-btn-lift:hover { transform: translateY(-1px); }

/* State-switcher pills (dev only; hidden in production) */
.wl-switch-btn { transition: background 0.18s, color 0.18s; }

@keyframes drift {
  0%   { transform: translate(-8%, -6%) scale(1); }
  50%  { transform: translate(9%, 6%) scale(1.18); }
  100% { transform: translate(-8%, -6%) scale(1); }
}
@keyframes drift2 {
  0%   { transform: translate(6%, 4%) scale(1.1); }
  50%  { transform: translate(-7%, -5%) scale(1); }
  100% { transform: translate(6%, 4%) scale(1.1); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}