/* CSS Custom Properties & Reset Extensions */
:root {
    --color-primary: #C70100;
    --color-secondary: #831005;
    --color-dark: #000000;
}

html {
    scroll-behavior: smooth;
}

/* Glassmorphism & UI Utilities */
.glass-panel {
    background: rgba(20, 20, 20, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.glass-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.hover-glow:hover {
    border-color: var(--color-primary);
    box-shadow: 0 0 20px rgba(199, 1, 0, 0.15);
    transform: translateY(-2px);
}

/* Buttons */
.btn-primary {
    background-color: var(--color-primary);
    color: #fff;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}
.btn-primary:hover {
    background-color: #a30000;
    box-shadow: 0 0 15px rgba(199, 1, 0, 0.4);
}

.btn-ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}
.btn-ghost:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(199, 1, 0, 0.05);
}

/* Hero Background Effects */
.hero-bg-lines {
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 40px,
        rgba(255, 255, 255, 0.03) 40px,
        rgba(255, 255, 255, 0.03) 41px
    );
    mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}


.hero-glow-ellipse {
    width: 150vw; 
    min-width: 1000px;
    height: 80vw;
    min-height: 500px;
    position: absolute;
    bottom: -63vw; 
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: #000000;
    box-shadow: 
        0 -15px 60px rgba(199, 1, 0, 0.4),
        0 -60px 180px rgba(199, 1, 0, 0.25),
        0 -120px 400px rgba(199, 1, 0, 0.15),
        0 -200px 700px rgba(199, 1, 0, 0.08),
        inset 0 30px 80px rgba(199, 1, 0, 0.6),
        inset 0 100px 200px rgba(199, 1, 0, 0.2);
    border-top: 1px solid rgba(199, 1, 0, 0.8);
    z-index: 0;
    pointer-events: none;
}


@media (max-width: 768px) {
    .hero-glow-ellipse {
        bottom: -350px; 
        box-shadow: 
            0 -10px 40px rgba(199, 1, 0, 0.4),
            0 -40px 100px rgba(199, 1, 0, 0.25),
            0 -80px 200px rgba(199, 1, 0, 0.15),
            inset 0 20px 50px rgba(199, 1, 0, 0.6),
            inset 0 60px 100px rgba(199, 1, 0, 0.2);
    }
}


@keyframes bar {
    0% { height: 20%; }
    100% { height: 100%; }
}

/* Прогресс-бар (On Market) */
@keyframes fillBar {
    0% { width: 0%; }
    100% { width: 100%; }
}

@media (max-width: 768px) {
    .glitch-wrapper {
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    }
    .glitch-wrapper::before {
        text-shadow: 2px 0 0 rgba(0, 255, 255, 0.3), -1px 0 5px rgba(255, 255, 255, 0.6);
    }
    .glitch-wrapper::after {
        text-shadow: -2px 0 0 rgba(199, 1, 0, 0.3), 1px 0 5px rgba(255, 255, 255, 0.6);
    }
}

.stars-container {
    background-image: 
        /* Левый край */
        radial-gradient(1px 1px at 8% 12%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1.5px 1.5px at 15% 28%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 4% 45%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 12% 65%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1.5px 1.5px at 6% 80%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 18% 90%, rgba(255,255,255,0.8), transparent),
        /* Правый край */
        radial-gradient(1.5px 1.5px at 92% 15%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 85% 32%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 96% 48%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1.5px 1.5px at 88% 62%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 94% 78%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 82% 92%, rgba(255,255,255,0.7), transparent);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0.7; /* Общая прозрачность звезд */
}
/* Glitch Animation */
.glitch-wrapper {
    position: relative;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 0 15px rgba(255,255,255,0.2);
}
.glitch-wrapper::before,
.glitch-wrapper::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4; 
}

.glitch-wrapper::before {
    color: rgba(255, 255, 255, 0.8);
    z-index: -1;
    text-shadow: 2px 0 5px rgba(255,255,255,0.4);
    animation: glitch-anim-1 3s infinite linear alternate-reverse;
}

.glitch-wrapper::after {
    color: rgba(200, 200, 200, 0.6);
    z-index: -2;
    text-shadow: -2px 0 5px rgba(255,255,255,0.3);
    animation: glitch-anim-2 2.5s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
    0% { clip-path: inset(20% 0 80% 0); transform: translate(-2px, 1px); }
    20% { clip-path: inset(60% 0 10% 0); transform: translate(2px, -1px); }
    40% { clip-path: inset(40% 0 50% 0); transform: translate(-2px, 2px); }
    60% { clip-path: inset(80% 0 5% 0); transform: translate(2px, -2px); }
    80% { clip-path: inset(10% 0 70% 0); transform: translate(-1px, 1px); }
    100% { clip-path: inset(30% 0 50% 0); transform: translate(1px, -1px); }
}

@keyframes glitch-anim-2 {
    0% { clip-path: inset(10% 0 60% 0); transform: translate(2px, -1px); }
    20% { clip-path: inset(80% 0 5% 0); transform: translate(-2px, 1px); }
    40% { clip-path: inset(30% 0 20% 0); transform: translate(2px, 2px); }
    60% { clip-path: inset(70% 0 10% 0); transform: translate(-2px, -2px); }
    80% { clip-path: inset(20% 0 50% 0); transform: translate(1px, 1px); }
    100% { clip-path: inset(50% 0 30% 0); transform: translate(-1px, -1px); }
}

/* Scroll Reveal Base States */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Download Modal Animation */
@keyframes loading {
    0% { width: 0%; }
    100% { width: 100%; }
}