/* style.css - Wszystkie style wizualne */

body {
    background-color: #f0f4f8;
    color: #333;
    overflow: hidden; /* Ukryj paski przewijania przeglądarki */
}

/* Ukrywanie kursora po 2s bezczynności lub na stałe */
body.hide-cursor {
    cursor: none;
}

/* --- ANIMACJE TŁA --- */
.bg-gradient-animated {
    background: linear-gradient(-45deg, #008c8c, #004e60, #006d9d, #003a55);
    background-size: 400% 400%;
    animation: gradientBG 20s ease infinite;
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -5;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Blobs */
.blob-1, .blob-2, .blob-3 {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: -4;
    opacity: 0.6;
    animation: blob 25s infinite alternate;
}
.blob-1 { top: 0; left: 0; width: 500px; height: 500px; background: #00e0e0; mix-blend-mode: overlay; }
.blob-2 { bottom: 0; right: 0; width: 600px; height: 600px; background: #005f73; animation-delay: -5s; }
.blob-3 { top: 50%; left: 50%; width: 400px; height: 400px; background: #ffffff; mix-blend-mode: soft-light; animation-delay: -10s; }

/* --- GLASSMORPHISM --- */
.glass-panel {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
    transition: all 0.5s ease;
}

.glass-panel-dark {
    background: rgba(0, 40, 60, 0.65);
    backdrop-filter: blur(35px);
    -webkit-backdrop-filter: blur(35px);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 25px 60px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
}

/* Shimmer overlay */
.glass-panel-dark::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%);
    transform: skewX(-20deg) translateX(-150%);
    animation: shimmer 6s infinite;
    pointer-events: none;
}

/* --- AGENDA LIST STYLING --- */

#timeline-container {
    scroll-behavior: smooth;
}

/* 1. DOMYŚLNY STYL (Przyszłe i ogólne) */
.timeline-item {
    /* WYDŁUŻONO CZAS i ZMIENIONO KRZYWĄ na łagodniejszą */
    transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
    border-left: 4px solid rgba(255, 255, 255, 0.3);
    opacity: 1; /* Wymuszona pełna widoczność */
    background: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.8rem;
    transform-origin: left center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    will-change: transform, background-color, box-shadow; /* Optymalizacja wydajności */
}

/* 2. STATUS LIVE (NOW) - Tylko kolor, bez wysunięcia */
.timeline-item.status-live {
    background: rgba(255, 255, 255, 0.95);
    border-left: 8px solid #00e0e0; /* Gruba turkusowa belka */
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
    z-index: 5;
    /* Usunięto transform: translateX */
}

/* 3. ACTIVE SLIDE (To co na slajdzie) - Wysunięcie i powiększenie */
.timeline-item.active-slide {
    transform: scale(1.03) translateX(15px); /* To jedyne miejsce z przesunięciem */
    background: #ffffff;
    border-right: 4px solid #008c8c;
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.25);
    z-index: 10;
    opacity: 1 !important;
}

/* 4. COMPACT ROW (Przeszłe) */
.timeline-item.compact-row {
    padding: 0.5rem 1rem;
    margin-bottom: 0.25rem;
    opacity: 0.5 !important;
    background: rgba(255, 255, 255, 0.15);
    border-left-width: 2px;
    border-left-color: transparent;
    display: flex;
    align-items: center;
    gap: 1rem;
    transform: scale(1);
    box-shadow: none;
}

.timeline-item.compact-row .time-pill {
    font-size: 0.75rem;
    background: transparent;
    padding: 0;
    color: #555;
    white-space: nowrap;
    font-weight: 700;
}

.timeline-item.compact-row .title-text {
    font-size: 0.9rem;
    font-weight: 500;
    color: #444;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* --- TICKER (PASEK PILNE) --- */
.ticker-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px; /* Wysokość paska */
    background: #eab308; /* Żółty ostrzegawczy */
    color: #000;
    z-index: 9999; /* Zawsze na wierzchu */
    overflow: hidden;
    display: flex;
    align-items: center;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.3);
    border-top: 2px solid #fff;
}

.ticker-content {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    animation: ticker 30s linear infinite;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.8rem;
    font-weight: 800;
    text-transform: uppercase;
}

@keyframes ticker {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}

/* Kiedy ticker jest aktywny, kontener główny musi się skurczyć */
body.ticker-active #app-content {
    padding-bottom: 5rem; /* Zrób miejsce na dole */
}

/* --- HEADER / LOGO INTRO --- */
#header-bg {
    position: fixed;
    top: 0; left: 0; width: 100%;
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(15px);
    z-index: 40;
    transition: height 1.8s cubic-bezier(0.85, 0, 0.15, 1);
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.15);
}
.header-bg-full { height: 100vh; }
.header-bg-bar { height: 7.5rem; }

#main-logo {
    position: fixed;
    z-index: 50;
    transition: all 1.8s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform, top, left, height;
}

.logo-center-start { top: 40%; left: 50%; height: 220px; transform: translate(-50%, -50%) scale(1); }
.logo-center-grown { top: 40%; left: 50%; height: 220px; transform: translate(-50%, -50%) scale(1.35); transition: transform 5s ease-out !important; }
.logo-corner { top: 1.25rem; left: 2rem; height: 80px; transform: translate(0, 0) scale(1); }

/* --- CONTENT TRANSITIONS --- */
.fade-enter-active {
    opacity: 1;
    transform: scale(1) translateY(0);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fade-exit-active {
    opacity: 0;
    transform: scale(0.95) translateY(-30px) rotateX(5deg);
    transition: opacity 0.5s ease-in, transform 0.5s ease-in;
}

/* --- SCROLLBAR --- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }