@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Clash+Display:wght@600;700&family=Space+Grotesk:wght@600;700;800&display=swap');

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--dark-bg-primary);
    color: var(--dark-text);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(147, 51, 234, 0.12) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 90% 90%, rgba(236, 72, 153, 0.07) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

#app {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', sans-serif;
    line-height: 1.15;
    font-weight: 700;
}

code, pre, .mono {
    font-family: 'JetBrains Mono', monospace;
}

input, button, textarea, select {
    font-family: 'Inter', sans-serif;
    outline: none;
    border: none;
}

button { cursor: pointer; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
a { color: var(--dark-secondary); text-decoration: none; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--dark-primary-20); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--dark-primary-40); }
::selection { background: var(--dark-primary-30); color: var(--white); }

.container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 32px;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0 var(--dark-primary-30); }
    70%  { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes slide-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.page-bg {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.crosshair-svg {
    width: min(820px, 95vw);
    height: min(820px, 95vw);
    opacity: 0.045;
}

.ch-outer-ring {
    animation: ch-spin-slow 18s linear infinite;
    transform-origin: 512px 512px;
}

.ch-mid-ring {
    animation: ch-spin-slow 12s linear infinite reverse;
    transform-origin: 512px 512px;
}

.ch-inner-ring {
    animation: ch-spin-slow 7s linear infinite;
    transform-origin: 512px 512px;
}

.ch-crosshair {
    animation: ch-pulse 3s ease-in-out infinite;
    transform-origin: 512px 512px;
}

.ch-dot {
    animation: ch-dot-pulse 2s ease-in-out infinite;
    transform-origin: 512px 512px;
}

.ch-lock-ring {
    animation: ch-lock 4s ease-in-out infinite;
    transform-origin: 512px 512px;
}

.ch-scan-line {
    animation: ch-scan 3s linear infinite;
    transform-origin: 512px 512px;
}

.ch-star {
    animation: ch-star-flash 2.4s ease-in-out infinite;
    transform-origin: 512px 512px;
}

@keyframes ch-spin-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes ch-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

@keyframes ch-dot-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.5); opacity: 0.7; }
}

@keyframes ch-lock {
    0%, 100% { stroke-dashoffset: 0; opacity: 1; }
    50%       { stroke-dashoffset: 40; opacity: 0.4; }
}

@keyframes ch-scan {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes ch-star-flash {
    0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
    40%       { opacity: 1; transform: scale(1.2) rotate(20deg); }
    55%       { opacity: 1; transform: scale(0.9) rotate(-10deg); }
    70%       { opacity: 0.6; transform: scale(1.1) rotate(5deg); }
    85%       { opacity: 0; transform: scale(0.5) rotate(0deg); }
}
/* ============================================================================
   Interaction states & motion — consistency / quality-floor polish (additive).
   The reset above clears outlines app-wide, leaving keyboard focus invisible;
   this restores a visible focus ring (on keyboard nav only, via :focus-visible),
   unifies the disabled affordance, gives plain links a hover, and honours the
   OS "reduce motion" setting. Reinforces the existing dark/purple identity.
   ========================================================================== */
:root { --ring: var(--dark-secondary); }   /* keyboard-focus ring colour */

:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}
/* Custom toggles overlay a real checkbox with a styled track — ring the track. */
.switch input:focus-visible + .switch-track {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* Buttons get the disabled affordance text inputs (.input-plain) already have.
   !important on the hover-driven props so a disabled button can't lift/glow. */
.btn:disabled, .btn[disabled],
button:disabled, button[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none !important;
    transform: none !important;
}
select:disabled { opacity: 0.6; cursor: not-allowed; }

/* Plain links gain a subtle hover (base sets a colour but no hover state).
   Nav links / buttons keep their own higher-specificity hovers. */
a:hover { color: var(--dark-400); }

/* Honour prefers-reduced-motion: neutralise transitions, transforms, looping FX. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .btn:hover, .btn-primary:hover, .btn-scan:hover { transform: none !important; }
}