/* style.css */

body { 
    background-color: #F5F5F0; 
    color: #1c1c1c; 
    overflow-x: hidden; 
}

/* --- ANIMATIONS --- */
.reveal { 
    opacity: 0; 
    transform: translateY(30px); 
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); 
}
.reveal.active { 
    opacity: 1; 
    transform: translateY(0); 
}

.hero-word { 
    opacity: 0; 
    transform: translateY(20px); 
    animation: fadeUpEntry 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
}

@keyframes fadeUpEntry { 
    to { opacity: 1; transform: translateY(0); } 
}

/* Text Carousel */
.text-carousel-container { 
    height: 1.2em; 
    overflow: hidden; 
    position: relative; 
    display: inline-block; 
    vertical-align: bottom; 
}
.text-carousel-wrapper { 
    display: block; 
    animation: textSlideUp 10s cubic-bezier(0.4, 0, 0.2, 1) infinite; 
}
.text-carousel-item { 
    height: 1.2em; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

@keyframes textSlideUp {
    0%, 20% { transform: translateY(0%); }
    25%, 45% { transform: translateY(-20%); }
    50%, 70% { transform: translateY(-40%); }
    75%, 95% { transform: translateY(-60%); }
    100% { transform: translateY(-80%); }
}

/* Marquee (Бегущая строка) */
@keyframes marquee { 
    0% { transform: translateX(0); } 
    /* Двигаем только на 50%, так как контент продублирован. 
       Когда доедет до середины, визуально это будет начало дубликата, 
       и анимация начнется сначала незаметно для глаза. */
    100% { transform: translateX(-50%); } 
}

.animate-marquee { 
    animation: marquee 40s linear infinite; /* 40s для плавности, можно менять */
    width: max-content; /* Важно: чтобы контент выстроился в одну длинную линию */
}

/* --- MAP STYLES --- */
.custom-pin {
    background-color: #0B1F18;
    border: 2px solid #D4AF37;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}
.custom-pin:hover { 
    transform: scale(1.5); 
    background-color: #D4AF37; 
    border-color: #0B1F18; 
}

.leaflet-popup-content-wrapper { 
    background: rgba(255, 255, 255, 0.95); 
    border-radius: 0; 
    padding: 0; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); 
}
.leaflet-popup-content { 
    margin: 10px 15px; 
    font-family: 'Manrope', sans-serif; 
    font-size: 11px; 
    text-transform: uppercase; 
    letter-spacing: 0.1em; 
    color: #0B1F18; 
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #F5F5F0; }
::-webkit-scrollbar-thumb { background: #0B1F18; }

/* --- IMPACT SLIDER CUSTOM STYLES --- */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: #D4AF37; /* Alpine Gold */
    cursor: pointer;
    margin-top: -10px; /* Центровка */
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.3); /* Эффект свечения */
    transition: all 0.2s ease;
}
input[type=range]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 0 0 8px rgba(212, 175, 55, 0.2);
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #E5E7EB;
    border-radius: 2px;
}

/* Ken Burns Effect (Slow Zoom) */
@keyframes kenBurns {
    0% { transform: scale(1.0); }
    100% { transform: scale(1.15); }
}
.animate-ken-burns {
    animation: kenBurns 20s ease-out infinite alternate;
}

/* 3D Certificate Styles */
.perspective-1000 { perspective: 1000px; }
.rotate-y-6 { transform: rotateY(6deg); }
.rotate-x-6 { transform: rotateX(6deg); }

/* QR code styling */
.qr-code-container img {
    mix-blend-mode: multiply;
}