/* --- RESET I BAZA --- */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    /* ZMIANA: Pozwalamy na scrollowanie w pionie (auto), ale blokujemy w poziomie (hidden) */
    overflow-y: auto; 
    overflow-x: hidden;
    font-family: Arial, sans-serif;
    background-color: #222;
}

/* --- LOGOWANIE --- */
#login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Logowanie zawsze na pełen ekran bez scrolla */
    width: 100%;
    background-color: #333;
    z-index: 200;
    position: fixed; /* ZMIANA: Fixed, żeby okno logowania nie uciekło przy scrollowaniu */
    top: 0;
    left: 0;
    padding: 20px;
    box-sizing: border-box;
}

.login-box {
    background: white;
    padding: 2rem 1.5rem;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

h2 { margin-top: 0; color: #333; font-size: 1.5rem; }
input { padding: 12px; font-size: 16px; border: 2px solid #ddd; border-radius: 8px; width: 100%; box-sizing: border-box; text-align: center; }
button { padding: 15px; font-size: 14px; font-weight: bold; background-color: #007bff; color: white; border: none; border-radius: 8px; cursor: pointer; width: 100%; line-height: 1.4; transition: background 0.3s, transform 0.1s; white-space: normal; }
button:hover { background-color: #0056b3; }
button:active { transform: scale(0.98); }
#error-msg { color: #dc3545; font-weight: bold; margin: 0; min-height: 1.2em; }
.extra-link-container { margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee; }
.secret-link { display: inline-block; color: #ff4500; background-color: #fff5f5; text-decoration: none; font-size: 1.1rem; font-weight: 900; text-transform: uppercase; padding: 10px 15px; border: 2px dashed #ff4500; border-radius: 8px; transition: all 0.3s; animation: pulse 1.5s infinite; }
.secret-link:hover { background-color: #ff4500; color: white; text-decoration: none; animation: none; }
@keyframes pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 69, 0, 0.7); } 50% { transform: scale(1.05); box-shadow: 0 0 10px 5px rgba(255, 69, 0, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 69, 0, 0); } }
.hidden { display: none !important; }

/* --- GŁÓWNY KONTENER GALERII --- */
#gallery-container {
    position: relative;
    width: 100%;
    /* ZMIANA: Zamiast sztywnego height, dajemy min-height */
    min-height: 100vh;
    height: auto; 
    background-color: #000;
    overflow: visible; /* Pozwalamy elementom wystawać */
}

/* --- NAPIS STO LAT --- */
.wishes-text {
    position: fixed; /* ZMIANA: Fixed, żeby napis jechał razem z nami lub był zawsze na środku ekranu */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    color: white;
    font-size: 4rem;
    font-family: 'Comic Sans MS', 'Chalkboard SE', sans-serif;
    text-shadow: 0 0 15px #ff00de, 0 0 30px #ff00de;
    z-index: 100;
    margin: 0;
    opacity: 0;
    transition: opacity 2s ease-in;
    pointer-events: none;
}
.wishes-text.visible { opacity: 1; }

/* --- SIATKA ZDJĘĆ (GRID) --- */
#flying-photos {
    display: grid;
    width: 100%;
    /* ZMIANA: Grid też musi się rozciągać */
    min-height: 100vh; 
    height: auto;
    padding: 20px;
    box-sizing: border-box;
    gap: 15px;
    
    /* DOMYŚLNIE (TELEFON): 3 kolumny, rzędy automatyczne */
    grid-template-columns: repeat(3, 1fr);
    /* grid-template-rows nie jest potrzebne, grid sam stworzy nowe rzędy */
    grid-auto-rows: 25vh; /* Każdy rząd ma 25% wysokości ekranu */
}

/* DLA KOMPUTERÓW */
@media (min-width: 768px) {
    #flying-photos {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 40vh; /* Na kompie rzędy są wyższe */
        gap: 30px;
        padding: 50px;
    }
}

/* --- STYL POJEDYNCZEGO ZDJĘCIA --- */
.fly-item {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    
    opacity: 0;
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    border-radius: 8px;
    background-color: #222;
    
    transition: transform 0.3s ease;
}

/* --- ANIMACJE --- */
@keyframes zoomIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.anim-zoom { animation: zoomIn 0.8s forwards; }

@keyframes slideLeft { from { transform: translateX(-100vw); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.anim-left { animation: slideLeft 0.8s ease-out forwards; }

@keyframes slideRight { from { transform: translateX(100vw); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.anim-right { animation: slideRight 0.8s ease-out forwards; }

@keyframes spinIn { from { transform: rotate(-360deg) scale(0); opacity: 0; } to { transform: rotate(0) scale(1); opacity: 1; } }
.anim-spin { animation: spinIn 0.8s forwards; }

@keyframes dropDown { from { transform: translateY(-100vh); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.anim-drop { animation: dropDown 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }