/* ═══════════════════════════════════════════════════════════════════════════
   Stream Cinema Caolina — Login stránka
   css/login.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Přebije style.css pro login stránku ────────────────────────────────── */
body.login-page {
    background: #000;
    overflow: hidden;
}
body.login-page .cosmic-bg,
body.login-page .stars,
body.login-page .nebula {
    display: none !important;
}

/* ── Canvas — rotující Mléčná dráha ─────────────────────────────────────── */
#mw-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* ── Barevné mlhoviny přes canvas ────────────────────────────────────────── */
@keyframes mw-nebula-shift {
    0%   { transform: translate(   0,    0) rotate(  0deg); opacity: .45; }
    25%  { transform: translate( 18px, -10px) rotate( 1.5deg); opacity: .65; }
    50%  { transform: translate(  5px,  15px) rotate(-.5deg); opacity: .5;  }
    75%  { transform: translate(-12px,  -5px) rotate( 1deg);  opacity: .6;  }
    100% { transform: translate(   0,    0) rotate(  0deg); opacity: .45; }
}

@keyframes mw-core-pulse {
    0%, 100% { opacity: .45; transform: translate(-50%,-50%) scale(1);    }
    50%       { opacity: .8;  transform: translate(-50%,-50%) scale(1.12); }
}

@keyframes mw-glow-breathe {
    0%, 100% { box-shadow: 0 4px 22px rgba(200,120,255,.35), 0 0 50px rgba(255,185,70,.18); }
    50%       { box-shadow: 0 6px 32px rgba(200,120,255,.55), 0 0 80px rgba(255,185,70,.35); }
}

@keyframes star-twinkle {
    0%, 100% { opacity: 0;  transform: scale(0);   }
    20%       { opacity: .9; transform: scale(1.2); }
    80%       { opacity: .7; transform: scale(1);   }
}

@keyframes login-fadein {
    from { opacity: 0; transform: translateY(22px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

@keyframes galaxy-logo-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 16px rgba(255,200,120,.55))
                drop-shadow(0 0 32px rgba(200,155,255,.35));
    }
    50% {
        filter: drop-shadow(0 0 28px rgba(255,225,140,.85))
                drop-shadow(0 0 55px rgba(215,175,255,.6));
    }
}

.mw-nebula {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    animation: mw-nebula-shift 45s ease-in-out infinite;
    background:
        radial-gradient(ellipse 50% 28% at 50% 52%, rgba(255,185,80,.10)  0%, transparent 65%),
        radial-gradient(ellipse 38% 18% at 47% 53%, rgba(195,135,255,.13) 0%, transparent 50%),
        radial-gradient(ellipse 65% 42% at 28% 66%, rgba(75,115,255,.07)  0%, transparent 58%),
        radial-gradient(ellipse 55% 38% at 74% 34%, rgba(255,95,55,.06)   0%, transparent 58%);
}

.mw-core {
    position: fixed;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    width: 340px;
    height: 130px;
    z-index: 3;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(255,225,155,.18) 0%,
        rgba(255,185,85,.10)  28%,
        rgba(195,115,255,.05) 58%,
        transparent 100%
    );
    filter: blur(10px);
    animation: mw-core-pulse 9s ease-in-out infinite;
}

.mw-vignette {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(
        ellipse 72% 68% at 50% 52%,
        rgba(0,0,8,.02)  0%,
        rgba(0,0,8,.55)  58%,
        rgba(0,0,4,.95)  100%
    );
}

.mw-particles {
    position: fixed;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    overflow: hidden;
}
.mw-particles span {
    position: absolute;
    border-radius: 50%;
    background: #fff;
    animation: star-twinkle ease-in-out infinite;
}
.mw-particles span:nth-child(1)  { width:2px; height:2px; top:12%; left:18%; animation-duration:3.2s; animation-delay:0s;   }
.mw-particles span:nth-child(2)  { width:1px; height:1px; top:28%; left:72%; animation-duration:4.1s; animation-delay:.8s;  }
.mw-particles span:nth-child(3)  { width:2px; height:2px; top:65%; left:35%; animation-duration:2.9s; animation-delay:1.4s; }
.mw-particles span:nth-child(4)  { width:1px; height:1px; top:44%; left:88%; animation-duration:5.3s; animation-delay:.3s;  }
.mw-particles span:nth-child(5)  { width:3px; height:3px; top:78%; left:15%; animation-duration:3.7s; animation-delay:2.1s; }
.mw-particles span:nth-child(6)  { width:1px; height:1px; top:9%;  left:54%; animation-duration:4.5s; animation-delay:1.1s; }
.mw-particles span:nth-child(7)  { width:2px; height:2px; top:55%; left:62%; animation-duration:3.0s; animation-delay:.6s;  }
.mw-particles span:nth-child(8)  { width:1px; height:1px; top:82%; left:45%; animation-duration:4.8s; animation-delay:3.0s; }
.mw-particles span:nth-child(9)  { width:2px; height:2px; top:33%; left:8%;  animation-duration:3.4s; animation-delay:.2s;  }
.mw-particles span:nth-child(10) { width:1px; height:1px; top:70%; left:80%; animation-duration:5.1s; animation-delay:2.4s; }
.mw-particles span:nth-child(11) { width:2px; height:2px; top:20%; left:40%; animation-duration:3.8s; animation-delay:1.7s; }
.mw-particles span:nth-child(12) { width:1px; height:1px; top:48%; left:22%; animation-duration:4.2s; animation-delay:.9s;  }
.mw-particles span:nth-child(13) { width:3px; height:3px; top:90%; left:60%; animation-duration:2.7s; animation-delay:3.5s; }
.mw-particles span:nth-child(14) { width:1px; height:1px; top:6%;  left:82%; animation-duration:5.6s; animation-delay:1.3s; }
.mw-particles span:nth-child(15) { width:2px; height:2px; top:60%; left:50%; animation-duration:3.1s; animation-delay:.5s;  }
.mw-particles span:nth-child(16) { width:1px; height:1px; top:38%; left:95%; animation-duration:4.7s; animation-delay:2.8s; }
.mw-particles span:nth-child(17) { width:2px; height:2px; top:85%; left:28%; animation-duration:3.5s; animation-delay:1.0s; }
.mw-particles span:nth-child(18) { width:1px; height:1px; top:15%; left:65%; animation-duration:4.3s; animation-delay:.4s;  }
.mw-particles span:nth-child(19) { width:2px; height:2px; top:72%; left:92%; animation-duration:3.9s; animation-delay:2.2s; }
.mw-particles span:nth-child(20) { width:1px; height:1px; top:42%; left:3%;  animation-duration:5.0s; animation-delay:1.6s; }


/* ══════════════════════════════════════════════════════════════════════════
   LOGIN KOMPONENTA
   ══════════════════════════════════════════════════════════════════════════ */

.login-screen {
    position: relative;
    z-index: 10;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-logo {
    height: 72px;
    margin-bottom: 36px;
    animation: galaxy-logo-pulse 5s ease-in-out infinite;
}

.login-card {
    background: rgba(2, 3, 15, .80);
    border: 1px solid rgba(180, 150, 255, .22);
    border-radius: 20px;
    padding: 44px 48px;
    width: 100%;
    max-width: 420px;
    box-shadow:
        0 0 0 1px rgba(255, 215, 120, .07),
        0 16px 70px rgba(0, 0, 0, .92),
        0 0 60px rgba(155, 95, 255, .12),
        inset 0 1px 0 rgba(255, 255, 255, .06);
    backdrop-filter: blur(28px) saturate(1.5);
    animation: login-fadein .9s cubic-bezier(.22,.68,0,1.2) both;
}

.login-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
    text-align: center;
    letter-spacing: -.01em;
    text-shadow:
        0 0 20px rgba(255, 215, 120, .48),
        0 0 50px rgba(200, 150, 255, .28);
}

.login-sub {
    font-size: .85rem;
    color: rgba(200, 185, 240, .48);
    text-align: center;
    margin-bottom: 32px;
    line-height: 1.6;
}

.login-label {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    color: rgba(200, 185, 240, .55);
    margin-bottom: 8px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.login-input {
    width: 100%;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(180, 150, 255, .18);
    border-radius: 11px;
    color: #fff;
    font-size: 1rem;
    padding: 14px 17px;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
    margin-bottom: 18px;
    font-family: inherit;
}
.login-input:focus {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 215, 120, .55);
    box-shadow: 0 0 0 3px rgba(255, 195, 80, .13), 0 0 24px rgba(255, 195, 80, .1);
}
.login-input::placeholder { color: rgba(180, 165, 220, .28); }

.login-btn {
    width: 100%;
    background: linear-gradient(135deg,
        rgba(255, 188, 70, .93)  0%,
        rgba(198, 98, 255, .93)  50%,
        rgba(68, 138, 255, .93)  100%);
    border: none;
    border-radius: 11px;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    padding: 15px;
    cursor: pointer;
    letter-spacing: .025em;
    font-family: inherit;
    transition: opacity .2s, transform .12s;
    animation: mw-glow-breathe 5s ease-in-out infinite;
}
.login-btn:hover  { opacity: .91; }
.login-btn:active { transform: scale(.984); }

.login-error {
    background: rgba(240, 71, 71, .09);
    border: 1px solid rgba(240, 71, 71, .25);
    border-radius: 10px;
    color: #f5a0a0;
    font-size: .85rem;
    padding: 12px 15px;
    margin-bottom: 20px;
    line-height: 1.5;
}

.login-footer {
    margin-top: 26px;
    font-size: .77rem;
    color: rgba(180, 165, 220, .34);
    text-align: center;
    line-height: 1.7;
}
.login-footer a       { color: rgba(255, 215, 120, .6); text-decoration: none; }
.login-footer a:hover { color: rgba(255, 215, 120, .9); text-decoration: underline; }