/* ============================================================
   GLOBALNE USTAWIENIA FONTU DLA CAŁEJ STRONY
   ============================================================ */
* {
    font-family: 'Montserrat', -apple-system, system-ui, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}

/* ============================================================
   KLASA ANIMOWANEGO TŁA - DO REUŻYCIA
   ============================================================ */

.animated-background {
    overflow: hidden;
    position: relative;
    
    /* Subtelny gradient pastelowy z lekkim pulsowaniem */
    background: linear-gradient(
        135deg,
        #f8f9ff 0%,
        #f0f2ff 25%,
        #e8eaff 50%,
        #f0f2ff 75%,
        #f8f9ff 100%
    );
    background-size: 400% 400%;
    
    animation: gradientFloat 20s ease infinite, 
               gentlePulse 6s ease-in-out infinite alternate;
}

/* Subtelne cząsteczki/efekt mgiełki */
.animated-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(120, 119, 198, 0.03) 1px, transparent 1px),
        radial-gradient(circle at 80% 70%, rgba(100, 200, 255, 0.02) 1px, transparent 1px),
        radial-gradient(circle at 40% 80%, rgba(255, 182, 193, 0.02) 1px, transparent 1px);
    background-size: 50px 50px, 80px 80px, 60px 60px;
    animation: particleFloat 50s linear infinite;
    z-index: -1;
}

/* Efekt delikatnego rozmycia brzegów */
.animated-background::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle at 30% 30%, rgba(173, 216, 230, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(221, 160, 221, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 50% 20%, rgba(152, 251, 152, 0.1) 0%, transparent 50%);
    animation: softLight 25s ease-in-out infinite alternate;
    z-index: -2;
}

/* STOPKI SYSTEMOWE (WSPÓLNE DLA KAŻDEJ PODSTRONY) */
.footer-left,
.footer-right {
    position: fixed;
    bottom: 14px;
    font-size: 12px;
    font-weight: 400;
    color: #4a4a4a;
    opacity: 0.8;
    user-select: none;
    pointer-events: none;
}

.footer-left {
    left: 20px;
}

.footer-right {
    right: 20px;
    text-align: right;
}

/* LOGO SYSTEMOWE — WSPÓLNE */
.logo-top-left {
    position: fixed;
    top: 12px;
    left: 20px;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 1.2px;
    color: #1c1c1e;
    user-select: none;
    z-index: 20;
    text-shadow: 0 1px 3px rgba(255,255,255,0.4);
}


/* ============================================================
   K2 BADGE — PRAWY GÓRNY RÓG (SVG INSIDE)
   ============================================================ */
.kiosk2-badge {
    position: fixed;
    top: 10px;      /* dokładnie 10 px od góry */
    right: 10px;    /* dokładnie 10 px od prawej */

    z-index: 20;
    user-select: none;

    display: flex;
    align-items: center;
    justify-content: center;

    /* KONTENER MA ROZMIAR OBRAZKA, NIE 42×42 */
    width: auto;
    height: auto;
}

.k2-img {
    height: 42px;   /* skalujemy po wysokości */
    width: auto;    /* szerokość proporcjonalnie */

    display: block;
    pointer-events: none;
}

/* ============================================================
   ANIMACJE KEYFRAMES - DODAJ TO DO BASE.CSS!
   ============================================================ */

@keyframes gradientFloat {
    0% {
        background-position: 0% 0%;
    }
    25% {
        background-position: 100% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    75% {
        background-position: 0% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

@keyframes gentlePulse {
    0% {
        filter: brightness(1) saturate(1);
    }
    100% {
        filter: brightness(1.02) saturate(1.05);
    }
}

@keyframes particleFloat {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(50px, 50px);
    }
}

@keyframes softLight {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 0.6;
    }
    100% {
        transform: rotate(180deg) scale(1.1);
        opacity: 0.8;
    }
}

/* ============================================================
   OPTYMALIZACJA ANIMACJI
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .animated-background,
    .animated-background::before,
    .animated-background::after {
        animation: none !important;
    }
}


/* ============================================================
   BUTTON: LOGIN (UAKTUALNIONA WERSJA "WYBAJERZONA")
   ============================================================ */
.login-btn {
    margin-top: 20px;
    width: 100%;
    padding: 12px;

    background: linear-gradient(135deg, 
        #2c2d33 0%, 
        #1b1c1f 25%, 
        #2a2b30 50%, 
        #1b1c1f 75%, 
        #2c2d33 100%);
    background-size: 400% 400%;
    
    color: #f0f4ff;
    border: 1px solid rgba(120,140,255,0.35);
    border-radius: 8px;

    cursor: pointer;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    
    position: relative;
    overflow: hidden;
    
    transition: all 0.3s ease;
    animation: buttonShine 4s ease-in-out infinite alternate;
}

/* Efekt świetlnej obwódki */
.login-btn::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, 
        rgba(10, 132, 255, 0.6),
        rgba(100, 200, 255, 0.4),
        rgba(120, 140, 255, 0.6),
        rgba(100, 200, 255, 0.4));
    background-size: 400% 400%;
    border-radius: 10px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: borderGlow 3s ease-in-out infinite;
}

/* Wewnętrzny blask */
.login-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    border-radius: 50%;
}

/* Hover effects */
.login-btn:hover {
    background-position: 100% 100%;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 
        0 6px 20px rgba(140, 160, 255, 0.4),
        0 0 30px rgba(100, 200, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.login-btn:hover::before {
    opacity: 1;
}

.login-btn:hover::after {
    width: 300px;
    height: 300px;
}

/* Active/click effect */
.login-btn:active {
    transform: translateY(1px) scale(0.98);
    transition: transform 0.1s ease;
}

/* Subtelne migotanie tekstu */
.login-btn span {
    display: inline-block;
    position: relative;
    text-shadow: 0 0 8px rgba(240, 244, 255, 0.5);
    animation: textFlicker 5s infinite alternate;
}

/* Animacja gradientu przycisku */
@keyframes buttonShine {
    0% {
        background-position: 0% 0%;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }
    100% {
        background-position: 100% 100%;
        box-shadow: 0 4px 20px rgba(140, 160, 255, 0.3);
    }
}

/* Animacja świetlnej obwódki */
@keyframes borderGlow {
    0%, 100% {
        background-position: 0% 50%;
        filter: hue-rotate(0deg);
    }
    50% {
        background-position: 100% 50%;
        filter: hue-rotate(20deg);
    }
}

/* Subtelne migotanie tekstu */
@keyframes textFlicker {
    0%, 100% {
        opacity: 1;
        text-shadow: 0 0 8px rgba(240, 244, 255, 0.5);
    }
    50% {
        opacity: 0.95;
        text-shadow: 0 0 12px rgba(240, 244, 255, 0.8);
    }
}

/* Efekt "loading" dla przycisku (można aktywować przez dodanie klasy) */
.login-btn.loading {
    animation: buttonPulse 1.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes buttonPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(0.98);
    }
}

/* Dla wydajności - wyłączenie animacji gdy nie są preferowane */
@media (prefers-reduced-motion: reduce) {
    .login-btn,
    .login-btn::before,
    .login-btn span {
        animation: none !important;
    }
    
    .login-btn:hover::after {
        display: none;
    }
}

/* Dla ciemnego trybu */
@media (prefers-color-scheme: dark) {
    .login-btn {
        background: linear-gradient(135deg, 
            #3a3b40 0%, 
            #2a2b30 25%, 
            #3a3b40 50%, 
            #2a2b30 75%, 
            #3a3b40 100%);
        border-color: rgba(160, 180, 255, 0.4);
    }
    
    .login-btn:hover {
        box-shadow: 
            0 6px 20px rgba(160, 180, 255, 0.3),
            0 0 30px rgba(120, 200, 255, 0.15);
    }
}