/* ============================================
   METALCURE STUB — CYBER-INDUSTRIAL METAL
   Design System v1.38
   ============================================ */

/* CSS Variables (соответствуют дизайн-системе v1.38) */
:root {
    --color-black-dark: #0D0E12;
    --color-black-card: #161922;
    --color-black-border: #2A303C;
    --color-black-elevated: #1F2430;
    --color-mint: #00FFA3;
    --color-crimson: #FF0055;
    --color-text-primary: #FFFFFF;
    --color-text-muted: #94A3B8;
    --color-text-dim: #64748B;
    --color-success: #00FFA3;
    --color-error: #FF0055;
    --color-warning: #FFB800;
    --color-info: #00BFFF;
}

/* Tailwind Theme Extension (для кастомных цветов) */
body {
    background-color: var(--color-black-dark);
    color: var(--color-text-primary);
    font-family: 'Inter', 'Montserrat', system-ui, -apple-system, sans-serif;
}

.bg-dark { background-color: var(--color-black-dark); }
.bg-card { background-color: var(--color-black-card); }
.bg-black-dark { background-color: var(--color-black-dark); }
.border-border { border-color: var(--color-black-border); }
.text-mint { color: var(--color-mint); }
.text-crimson { color: var(--color-crimson); }
.text-muted { color: var(--color-text-muted); }
.text-dim { color: var(--color-text-dim); }
.from-mint { --tw-gradient-from: var(--color-mint); }
.to-crimson { --tw-gradient-to: var(--color-crimson); }
.bg-mint { background-color: var(--color-mint); }
.focus\:ring-mint:focus { --tw-ring-color: var(--color-mint); }
.focus\:ring-offset-black-dark:focus { --tw-ring-offset-color: var(--color-black-dark); }
.hover\:border-mint\/50:hover { border-color: rgba(0, 255, 163, 0.5); }

/* ============================================
   GLITCH EFFECT (Hero Logo)
   ============================================ */
.glitch-text {
    position: relative;
    display: inline-block;
}

.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

.glitch-text::before {
    left: 2px;
    text-shadow: -2px 0 var(--color-crimson);
    clip-path: inset(0 0 0 0);
    animation: glitch-1 3s infinite linear alternate-reverse;
}

.glitch-text::after {
    left: -2px;
    text-shadow: 2px 0 var(--color-mint);
    clip-path: inset(0 0 0 0);
    animation: glitch-2 3s infinite linear alternate-reverse;
}

@keyframes glitch-1 {
    0%, 100% { clip-path: inset(0 0 95% 0); }
    20% { clip-path: inset(20% 0 60% 0); }
    40% { clip-path: inset(50% 0 30% 0); }
    60% { clip-path: inset(70% 0 10% 0); }
    80% { clip-path: inset(10% 0 80% 0); }
}

@keyframes glitch-2 {
    0%, 100% { clip-path: inset(95% 0 0 0); }
    20% { clip-path: inset(60% 0 20% 0); }
    40% { clip-path: inset(30% 0 50% 0); }
    60% { clip-path: inset(10% 0 70% 0); }
    80% { clip-path: inset(80% 0 10% 0); }
}

/* ============================================
   FEATURE CARDS (Hover Neon Glow)
   ============================================ */
.feature-card {
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 163, 0.05), transparent);
    transition: left 0.5s ease;
}

.feature-card:hover::before {
    left: 100%;
}

/* ============================================
   CTA BUTTON (Clip-path slant)
   ============================================ */
.clip-path-slant {
    clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
}

/* ============================================
   TOAST NOTIFICATION (Easter Egg)
   ============================================ */
.toast {
    background: var(--color-black-card);
    border: 1px solid var(--color-mint);
    color: var(--color-mint);
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 0 20px rgba(0, 255, 163, 0.3);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    opacity: 0;
    transform: translateY(20px);
    animation: toast-in 0.3s ease forwards;
}

@keyframes toast-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.toast.toast-out {
    animation: toast-out 0.3s ease forwards;
}

@keyframes toast-out {
    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

/* ============================================
   ACCESSIBILITY: Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .glitch-text::before,
    .glitch-text::after {
        animation: none;
    }
    
    .feature-card::before {
        transition: none;
    }
    
    .toast {
        animation: none;
        opacity: 1;
        transform: none;
    }
    
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ============================================
   RESPONSIVE TYPOGRAPHY
   ============================================ */
html {
    font-size: 14px;
}

@media (min-width: 640px) {
    html { font-size: 15px; }
}

@media (min-width: 1024px) {
    html { font-size: 16px; }
}

/* ============================================
   SELECTION & SCROLLBAR
   ============================================ */
::selection {
    background: var(--color-mint);
    color: var(--color-black-dark);
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-black-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--color-black-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-mint);
}