body { font-family: 'Sora', ui-sans-serif, system-ui, sans-serif; }

    /* ---------- Shared ambient background ---------- */
    .bg-scene {
      position: fixed; inset: 0; z-index: -1; pointer-events: none;
      background:
        radial-gradient(60rem 40rem at 78% 8%, rgba(6,182,212,.14), transparent 60%),
        radial-gradient(50rem 40rem at 5% 55%, rgba(99,102,241,.13), transparent 60%),
        #020617;
    }
    .bg-grid {
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(148,163,184,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,.07) 1px, transparent 1px);
      background-size: 56px 56px;
      -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
      mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
    }

    /* ---------- Splash (fast, non-blocking: hidden as soon as the DOM is ready) ---------- */
    @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    .animate-spin-slow { animation: spin-slow 8s linear infinite; }
    #splash { opacity: 1; visibility: visible; transition: opacity .5s ease-out, visibility .5s ease-out; }
    #splash.fade-out { opacity: 0; visibility: hidden; }

    /* ---------- Entrance ---------- */
    @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
    .rise { opacity: 0; animation: rise .9s cubic-bezier(.16,1,.3,1) forwards; animation-delay: calc(.2s + var(--i, 0) * .12s); }

    /* ---------- Form card: leans back slightly, flattens when you use it ---------- */
    .form-wrap { perspective: 1600px; }
    @media (min-width: 640px) {
      .form-card { transform: rotateX(3deg); transform-origin: 50% 0; transition: transform .7s cubic-bezier(.16,1,.3,1), box-shadow .4s ease; }
      .form-card:hover, .form-card:focus-within { transform: none; }
    }
    .form-card:hover, .form-card:focus-within { box-shadow: 0 40px 80px -30px rgba(6,182,212,.28); }

    /* ---------- Animated border ---------- */
    @keyframes gradient-move { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
    .glow-border {
      position: absolute; inset: 0; border-radius: 1.5rem; padding: 2px;
      background-image: linear-gradient(270deg, #6366f1, #06b6d4, #3b82f6, #6366f1);
      background-size: 600% 600%;
      animation: gradient-move 4s linear infinite;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: destination-out;
      mask-composite: exclude;
      pointer-events: none; opacity: .7;
    }

    /* ---------- Header tile on glass plates ---------- */
    @keyframes bob { 0%,100% { transform: translateZ(44px) translateY(0); } 50% { transform: translateZ(44px) translateY(-4px); } }
    .bob { animation: bob 4.5s ease-in-out infinite; }

    /* ---------- Inputs ---------- */
    .field {
      width: 100%; background: rgba(2,6,23,.85); border: 1px solid #1e293b; border-radius: .85rem;
      padding: .75rem 1rem; color: #f1f5f9; font-size: .875rem;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .field::placeholder { color: #64748b; }
    .field:focus { outline: none; border-color: #22d3ee; box-shadow: 0 0 0 4px rgba(34,211,238,.12); }

    /* ---------- Radio options ---------- */
    .opt {
      display: flex; align-items: center; gap: .75rem; padding: .75rem; border-radius: .85rem;
      background: rgba(2,6,23,.5); border: 1px solid rgba(30,41,59,.9); cursor: pointer;
      transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
    }
    .opt:hover { border-color: #334155; transform: translateX(4px); }
    .opt:has(input:checked) {
      border-color: rgba(34,211,238,.6); background: rgba(6,182,212,.08);
      box-shadow: 0 8px 20px -10px rgba(34,211,238,.4);
    }
    .opt:has(input:checked) span { color: #e2e8f0; }
    .opt input:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }

    /* ---------- 3D submit key ---------- */
    .key-btn {
      background: linear-gradient(to bottom, #22d3ee, #6366f1); color: #020617; font-weight: 800;
      box-shadow: 0 6px 0 #3730a3, 0 20px 30px -12px rgba(79,70,229,.6);
      transition: transform .15s ease, box-shadow .15s ease, filter .2s ease;
    }
    .key-btn:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-2px); }
    .key-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 #3730a3, 0 8px 14px -8px rgba(79,70,229,.6); }
    .key-btn:disabled { opacity: .7; cursor: wait; }

    @media (prefers-reduced-motion: reduce) {
      .rise { animation: none; opacity: 1; }
      .bob, .glow-border, .animate-spin-slow { animation: none; }
      .form-card { transform: none !important; transition: none; }
      .opt, .key-btn { transition: none; }
    }
    a:focus-visible, button:focus-visible { outline: 2px solid #22d3ee; outline-offset: 3px; border-radius: .5rem; }
    /* ============================================================
   SPLASH — keyframes only (referenced via Tailwind arbitrary values)
   ============================================================ */

@keyframes splash-halo-spin   { to { transform: rotate(360deg); } }
@keyframes splash-ring-spin   { to { transform: rotate(360deg); } }
@keyframes splash-ring-spin-2 { to { transform: rotate(-360deg); } }
@keyframes splash-orbit       { to { transform: rotate(360deg); } }

@keyframes splash-glow-pulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

@keyframes splash-logo-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@keyframes splash-shimmer {
  to { background-position: 200% center; }
}

@keyframes splash-dot-bounce {
  0%, 60%, 100% { transform: translateY(0);    opacity: .35; }
  30%           { transform: translateY(-3px); opacity: 1;   }
}

@keyframes splash-dot-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .3; }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  #splash * { animation: none !important; }
}