/* --- ZÁKLADNÍ NASTAVENÍ (SPOLEČNÉ) --- */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    margin: 0;
    color: #333;
    overflow-x: hidden; /* Skryje vodorovný posuvník */
    background-attachment: fixed; /* <--- TOHLE JE DŮLEŽITÉ */
}

/* --- SPECIÁLNÍ STYL PRO LOGIN STRÁNKU --- */
/* Tohle zajistí, že login bude vždy uprostřed a bez scrollování */
body.login-body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* --- 1. SEKCE NA INDEXU: HERO (ANIMACE) --- */
#hero {
    position: relative;
    width: 100%;
    height: 100vh; /* Přesně na výšku obrazovky */
    overflow: hidden;
    /* Pro jistotu, aby se obsah centroval, pokud by uskočil */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- 2. SEKCE: MENU (KARTY) --- */
#menu {
    min-height: 100vh;
    
    /* --- ZMĚNA ZDE: PŘECHOD Z RŮŽOVÉ DO BÍLÉ --- */
    /* Začíná světle růžovou (jako konec horní sekce) a v půlce už je čistě bílá */
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%);
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px 20px;
    box-sizing: border-box;
    
    /* Zrušili jsme stín nahoře, aby byl přechod neviditelný */
    box-shadow: none; 
    border: none;
    
    position: relative;
    z-index: 20;
}

#menu h2 {
    font-size: 2.5rem;
    color: #d6336c;
    margin-bottom: 50px;
    text-align: center;
}

/* --- LOGIN BOX --- */
.container-login {
    background: rgba(255, 255, 255, 0.95);
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(214, 51, 108, 0.2);
    max-width: 400px; width: 90%;
    backdrop-filter: blur(5px);
    position: relative; z-index: 10;
    text-align: center;
}
.container-login h1 { color: #d6336c; margin-bottom: 1rem; }
.container-login input {
    padding: 12px; margin-top: 15px; border: 2px solid #ffd1dc;
    border-radius: 8px; width: 80%; font-size: 16px; outline: none;
    transition: all 0.3s; color: #555;
}
.container-login input:focus { border-color: #ff4d4d; box-shadow: 0 0 8px rgba(255, 77, 77, 0.2); }
.container-login button {
    padding: 12px 35px; margin-top: 25px;
    background: linear-gradient(to right, #ff758c, #ff7eb3);
    color: white; border: none; border-radius: 30px; cursor: pointer;
    font-size: 18px; font-weight: bold; letter-spacing: 1px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.container-login button:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(255, 117, 140, 0.4); }
.container-login .error { color: #d32f2f; margin-top: 15px; display: none; }

/* --- KARTY V MENU --- */
.cards-container {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 40px; max-width: 1200px;
}
.card {
    background: linear-gradient(145deg, #ffffff, #f0f0f0);
    width: 220px; height: 280px; border-radius: 20px;
    text-decoration: none; color: #333;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 20px;
    box-shadow: 10px 10px 20px #d1d1d1, -10px -10px 20px #ffffff;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer; border: 2px solid transparent;
}
.card .icon { font-size: 4rem; margin-bottom: 20px; transition: transform 0.3s; }
.card h3 { margin: 0; font-size: 1.5rem; color: #d6336c; }
.card p { font-size: 0.9rem; color: #777; margin-top: 10px; text-align: center;}
.card:hover {
    transform: translateY(-15px) scale(1.05);
    box-shadow: 0 20px 40px rgba(214, 51, 108, 0.3);
    border-color: #ff9a9e; background: white;
}
.card:hover .icon { transform: scale(1.2) rotate(10deg); }

/* --- ANIMACE (TEČKY, POZADÍ) --- */
#dots-container {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 5;
}
.dot {
    position: absolute; width: 13px; height: 13px;
    background-color: white; border-radius: 50%;
    box-shadow: 0 0 8px rgba(255,255,255,0.6);
    transition: top 6s cubic-bezier(0.2, 0.6, 0.2, 1), left 6s cubic-bezier(0.2, 0.6, 0.2, 1), background-color 3s ease;
}
@keyframes individual-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

#background-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden; z-index: 0; pointer-events: none;
}
.bg-shape {
    position: absolute; color: rgba(255, 255, 255, 0.7); 
    filter: blur(1px); animation: floatUp linear infinite;
}
@keyframes floatUp {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
    100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
}

/* --- TEXT I LOVE YOU --- */
#final-text-container {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); z-index: 30;
    width: 100%; text-align: center; pointer-events: none;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-weight: 800; color: #d6336c; font-size: 7rem; 
    text-shadow: 4px 6px 8px rgba(0, 0, 0, 0.5);
}
.letter { opacity: 0; display: inline-block; transform: translateY(20px); transition: all 0.3s ease-out; }
.letter.typed { opacity: 1; transform: translateY(0); }
.letter.space { width: 0.5em; }
.letter.jumping {
    animation-name: single-letter-jump; animation-duration: 1.5s;
    animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
@keyframes single-letter-jump {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-35px); text-shadow: 4px 40px 25px rgba(0, 0, 0, 0.3); }
    50% { transform: translateY(0); }
}

/* --- NOVÁ HEZČÍ ŠIPKA DOLŮ --- */
.scroll-indicator {
    position: absolute;
    bottom: 40px; /* Trochu výš */
    left: 50%;
    /* Centrování je teď součástí animace */
    opacity: 0; /* Na začátku skryté */
    transition: opacity 1s ease-in-out;
    z-index: 40;
    color: white; /* Barva šipky */
    /* Jemná bílá záře kolem šipky */
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.8));
}

/* Aplikujeme animaci přímo na SVG uvnitř */
.scroll-indicator svg {
    animation: elegant-bounce 2s infinite ease-in-out;
}

/* Nová, plynulejší animace "plavání" */
@keyframes elegant-bounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(15px); /* Posun dolů o 15px */
    }
}

/* --- UNIVERZÁLNÍ OPRAVA (MOBIL + TABLET + MALÝ LAPTOP) --- */
/* Toto pravidlo platí pro všechna zařízení menší než běžný monitor */
@media (max-width: 1200px) {
    
    #final-text-container {
        /* Flexbox zajistí, že prvky půjdou vedle sebe */
        display: flex !important;
        
        /* ZÁKAZ ZALOMENÍ - toto je klíčové */
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        
        /* Roztažení na celou šířku */
        width: 100vw !important; /* 100% šířky okna */
        max-width: 100% !important;
        
        /* Centrování */
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        
        /* Zrušení případných paddingů */
        padding: 0 !important;
        margin: 0 !important;
    }

    .letter {
        /* DYNAMICKÁ VELIKOST PÍSMA */
        /* Písmo bude vždy zabírat 7% šířky obrazovky. 
           Jelikož je text dlouhý cca 11 znaků, 11 * 7 = 77% šířky.
           To se vejde vždycky. */
        font-size: 7vw !important; 
        
        /* Resetování rozměrů, aby písmena nepřekážela */
        width: auto !important;
        height: auto !important;
        line-height: 1 !important;
        
        /* Minimální mezery */
        margin: 0 1px !important;
    }
    
    /* Úprava mezery mezi slovy (I_LOVE_YOU) */
    .letter.space {
        display: inline-block !important;
        width: 4vw !important; /* Mezera bude široká 4% obrazovky */
        margin: 0 !important;
    }
    
    /* Srdíčko může být o kousek větší */
    .letter[style*="color: red;"] {
        font-size: 8vw !important;
        margin-left: 2vw !important;
    }
}