/* SOLIDABLE Base CSS - Critical Path Styles */

/* Reset and Base Styles */
:root {
    --color-primary: #00ffae; /* Matrix green */
    --color-secondary: #ff0080; /* Cyberpunk pink */
    --color-accent: #00ffff; /* Electric blue */
    --color-bg: #0d0d0d; /* Dark theme */

    /* Gradient system */
    --grad-cyber-1: radial-gradient(1200px 800px at 20% 80%, color-mix(in oklab, var(--color-primary) 20%, transparent) 0%, transparent 55%);
    --grad-cyber-2: radial-gradient(1000px 800px at 80% 20%, color-mix(in oklab, var(--color-secondary) 20%, transparent) 0%, transparent 55%);
    --grad-cyber-3: radial-gradient(900px 900px at 40% 40%, color-mix(in oklab, var(--color-accent) 12%, transparent) 0%, transparent 60%);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Share Tech Mono', monospace;
    background: var(--color-bg);
    color: var(--color-primary);
    overflow-x: hidden;
    cursor: none;
}

/* Core Layout */
.ritual-interface {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 2rem;
}

/* Breathing Background Animation */
.breathing-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--grad-cyber-1), var(--grad-cyber-2), var(--grad-cyber-3);
    background-blend-mode: screen;
    animation: breathe 4s ease-in-out infinite, gradient-drift 16s ease-in-out infinite;
    filter: saturate(1.05) contrast(1.02);
    will-change: transform, opacity, background-position, filter;
    z-index: -1;
}

/* Background loading modifier */
.breathing-bg.bg-loading {
    animation: none !important;
    opacity: 0.4;
}

.breathing-bg::before {
    /* animated scanline + subtle grid noise overlay (CSS-only fallback) */
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.01) 0 1px, transparent 1px 4px);
    mix-blend-mode: overlay;
    opacity: 0.2;
    animation: scan-flicker 6s steps(60, end) infinite;
}

.breathing-bg::after {
    /* vignette + soft glow pulse */
    content: '';
    position: absolute;
    inset: -10%;
    pointer-events: none;
    background: radial-gradient(120% 80% at 50% 50%, transparent 40%, rgba(0,0,0,0.35) 80%);
    filter: blur(2px);
    animation: glow 8s ease-in-out infinite;
}

@keyframes breathe {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
}

@keyframes gradient-drift {
    0%, 100% { background-position: 0% 0%, 0% 0%, 0% 0%; }
    50% { background-position: 8% -6%, -6% 8%, 4% 6%; }
}

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

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

@keyframes scan-flicker {
    0%, 100% { opacity: 0.18; }
    20% { opacity: 0.22; }
    21% { opacity: 0.15; }
    22% { opacity: 0.2; }
    50% { opacity: 0.24; }
    55% { opacity: 0.17; }
    75% { opacity: 0.21; }
}

@keyframes glow {
    0%, 100% { filter: blur(2px) brightness(1); }
    50% { filter: blur(3px) brightness(1.05); }
}

/* Accessibility helpers */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* Custom cursor */
.cursor-ring, .cursor-dot {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 9999;
}

.cursor-dot {
    width: 6px; height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--color-primary);
}

.cursor-ring {
    width: 28px; height: 28px;
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--color-primary);
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.cursor-ring.active {
    transform: translate(-50%, -50%) scale(1.5);
    border-color: var(--color-accent);
    box-shadow: 0 0 16px var(--color-accent);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .ritual-interface {
        padding: 1rem;
    }
}

/* Touch-first adjustments */
@media (pointer: coarse) {
    body { cursor: auto; }
    .cursor-ring, .cursor-dot { display: none !important; }
}

/* Accessibility: Reduce Motion */
@media (prefers-reduced-motion: reduce) {
    .breathing-bg, .breathing-bg::before, .breathing-bg::after {
        animation: none !important;
    }
}