/* === BAREVNÉ SCHÉMA === */
    :root {
        --h1-color: #4da3ff;
        --link-active: rgba(77, 163, 255, 0.99);
        --logo-color: #4da3ff;
        --link-transform-a: 0.6s;
        --link-transform-theme: 3s;
        --glass-blur: 15px;
        --border-radius: 20px;

        --page-bg: #212121;
        --card-bg:  #212121;
        --text-color: #b6b8bb; /*b6b8bb*/
        --link-inactive: rgba(182, 184, 187, 0.8);
        --link-shadow: rgba(0, 0, 0, 0.8);
        
        --neum-dark: #131313;
        --neum-light: #2f2f2f;
        --neum-shadow: rgba(41, 150, 203, 0.3);
        --glass-bg: rgba(255, 255, 255, 0.15);
        --glass-border: rgba(16, 16, 16, 0.25);
        --glass-up-enlight: rgba(45, 45, 45, 0.55);
        --glass-line-enlight: rgba(255, 255, 255, 0.3);
        --glass-bottom-pouing:rgba(45, 45, 45, 0.7);
    }

    body.light {
        --page-bg: #eaeaea;
        --card-bg: #eaeaea;
        --text-color: #515253;
        --link-inactive: rgba(81, 82, 83, 0.8);
        --link-shadow: rgba(0, 0, 0, 0.1);

        --neum-dark: #bebebe;
        --neum-light: #ffffff;
        --neum-shadow: #eaeaea;     
        --glass-bg: rgba(255, 255, 255, 0.1);
        --glass-border: rgba(255, 255, 255, 0.3);
        --glass-up-enlight: rgba(255, 255, 255, 0.65);
        --glass-line-enlight: rgba(0, 0, 0, 0.05);
        --glass-bottom-pouing:rgba(255, 255, 255, 0.6);
    }
    
    /* Definice animace objevení */
    @keyframes fadeInUp {
        from {
            opacity: 0; /* Na začátku je úplná průhlednost = není vidět */
            transform: translateY(50px); /* Na začátku je 50px níže */
            transition: opacity 1.2s cubic-bezier(0.23, 1, 0.32, 1), /* Rychlost podle Bézierovy křivky */
                        transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* === ZÁKLAD === */
    /* Aplikuje se na úplně všechny prvky */
    * {
        box-sizing: border-box; /* Výsledná velikost prvku bude jako velikost boxu, do kterého prvek umisťuji */
    } 

    body {
        margin: 0;
        padding: 98px 12px 0 12px; /* Odsazení obsahu od zhora, kvůli navigačnímu menu */
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        font-weight: 500;
        background: var(--page-bg);
        color: var(--text-color);
        transition:
            background-color var(--link-transform-theme),
            color var(--link-transform-theme); /* doba změny barvy light/dark */
        display: flex;
        flex-direction: column;
        min-height: 100vh; /* Zajistí výšku přes celou obrazovku */
    }

    /* === MENU – TEKUTÉ SKLO === */
    header {
        position: fixed; /* Fixní pozice vůči oknu */
        top: 12px;       /* Vzdálenost od horního okraje okna */
        left: 12px;      /* Vzdálenost od levého okraje */
        right: 12px;
        z-index: 10; /* Menu bude nad obsahem*/
    }

    .navbar {
        display: flex; /* Aktivuje pružný (flexbox) model - prvky v menu budou vedle sebe */
        justify-content: space-between; /* Logo bude nalevo, odkazy napravo a mezi bude mezera */
        align-items: center; /* Obsah menu bude vertikálně ve steřdu (ale logo stejně vychází v jiné výšce než hamburgerové tlačítko) */
        border-radius: var(--border-radius); /* Zakulacení rohů */
        padding: 12px 20px; /* Prvky uvnitř skleněné dlaždice */
        background: var(--glass-bg); /* Barva rozostření */
        backdrop-filter: blur(var(--glass-blur)); /* Šířka rozostření skla */
            -webkit-backdrop-filter: blur(var(--glass-blur));
        border: 1px solid var(--glass-border);
        box-shadow: 
            1px 5px 10px rgba(0, 0, 0, 0.3), /* Černý stín pod sklem */
            inset 0 2px 2px var(--glass-up-enlight), /* rgba(255, 255, 255, 0.99) Osvícený odlesk nahoře */
            inset 0 3px 1px var(--glass-line-enlight), /* rgba(0, 0, 0, 0.05) Linka na horním odlesku */  
            inset 0 -20px 20px var(--glass-bottom-pouing); /*rgba(255, 255, 255, 0.6) Spodní zalití */  
        transition:
            opacity 1.2s cubic-bezier(0.23, 1, 0.32, 1), /* Rychlost podle Bézierovy křivky */
            transform 1.2s cubic-bezier(0.23, 1, 0.32, 1),            
            box-shadow var(--link-transform-theme), /* Pro plynulou změnu stínů */
            background-color var(--link-transform-theme), /* Pro plynulou změnu barvy pozadí */
            color var(--link-transform-theme); /* Zpomalení textu */
    }

    .logo {
        margin-top: 3px;
        height: 28px;
        fill: var(--logo-color); /* Vybarví vektory loga */
        stroke: none; /* Odstraní tenký obrys */
    }

    /* Skrytí hamburgeru na desktopu */
    .menu-toggle {
        display: none; /* Hamburgerové tlačítko nezobrazovat (protože jsem desktopovém zobrazení) */
        flex-direction: column; /* Čárky hamburgerového menu budou pod sebou */
        gap: 5px; /* Vzdálenost mezi čárkami hamburgerového menu */
        cursor: pointer; /* Změna kurzoru myši na ručičku, když uživatel ukáže na tlačítko */ 
        z-index: 100; /* Vrstav tlačítka, aby bylo vždy na vrchu */
    }

    .menu-toggle span {
        width: 25px; /* Délka čárky */
        height: 3px; /* Šířka čárky */
        background: var(--link-inactive);
        border-radius: 5px; /* Rádius čárek */
        transition: 1.5s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .nav-links {
        display: flex; /* Aktivuje pružný (flexbox) model, prvky v menu budou vedle sebe */
        align-items: center; /* Všechny prvky v menu budou svisle zarovnané */
        gap: 30px; /* Mezera mezi prvky */
    }

    .nav-links a {
        text-decoration: none; /* Link není modrý podtržený*/
        font-size: 1.5rem;
        font-weight: 450;
        color: var(--link-inactive);
        text-shadow:
            0px 0px 5px var(--link-shadow),
            0px -1px 2px rgba(255, 255, 255, 0.2); 
        transition: color var(--link-transform-a);
    }

    .nav-links a:hover {
        color: var(--link-active);
        text-shadow:
            0px -1px 1px rgba(235, 245, 255, 0.3),
            0px 1px 2px rgba(0, 0, 0, 0.2); 
    }

    /* === PŘEPÍNAČE === */
    .switches {
        display: flex; /* Aktivuje pružný (flexbox) model... */
        flex-direction: column; /* ... prvky budou podsebou */
        align-items: center; /* Přepínače budou svisle zarovnané */
        gap: 6px; /* Mezera mezi prvky */
        margin: 0 0 2px 10px; /* Odsune celý tento blok (celý sloupec) o 10 pixelů zleva od okraje nadřazeného prvku */
    }

    /* Aplikuje pravidla na všechny prvky <span>, které se nacházejí uvnitř třídy */
    .theme-switch span,
    .lang-switch span {
        cursor: pointer; /* když uživatel najede myší nad odkaz, kurzor se změní na ikonu ruky s ukazováčkem */
        color: var(--link-inactive); /* Nasatví barvu textu, když není odkaz aktivní */
        text-shadow:
            0px -1px 2px rgba(255, 255, 255, 0.2),
            0px 1px 2px rgba(0, 0, 0, 0.1); 
        transition: color var(--link-transform-a);
    }

    /* Aplikuje pravidla na prvky <span>, které jsou aktivní */
    .theme-switch span.active,
    .lang-switch span.active {
        color: var(--link-active);
        text-shadow:
            0px -1px 1px rgba(235, 245, 255, 0.3),
            0px 1px 2px rgba(0, 0, 0, 0.2); 
    }

    /* Aplikuje pravidla na prvky <span>, na které uživatel najel myší */
    .theme-switch span:hover,
    .lang-switch span:hover {
        color: var(--link-active);
        text-shadow:
            0px -1px 1px rgba(235, 245, 255, 0.3),
            0px 1px 2px rgba(0, 0, 0, 0.2); 
    }

    .theme-switch {
        gap: 6px;
        margin-left: -5px;
        font-size: 14px;
    }

    .lang-switch {
        display: flex; /* Aktivuje Flexbox. Protože zde není nastaveno flex-direction: column, prvky se vyskládají vodorovně vedle sebe do jednoho řádku */
        gap: 6px;
        font-size: 14px;
    }

    #moon, #sun {
        font-size: 16px;
    }

    /* === FOOTER === */
    .footer-card {
        margin: 40px 20px 20px 20px; /* Mezera kolem patičky */
        padding: 20px; /* Menší vnitřní odsazení než u velkých karet */
        opacity: 1; /* Chceme, aby byla vidět hned (nebo ji nechte na 0, pokud má také přiletět) */
        flex-shrink: 0; /* Patička se nikdy nezmenší */
    }

    .footer-card p {
        margin: 0;
        font-size: 0.9rem;
        letter-spacing: 1px;
        color: var(--link-inactive);
    }

    /* === OBSAH === */
    /* Definuje rozvržení hlavní části stránky (prvku <main>) */
    main {
        padding: 12px; /* Vnitřní okraj kolem celého obsahu uvnitř značky <main>*/
        display: grid; /* Aktivuje CSS Grid = dvourozměrné rozvržení (současně řádky i sloupce). Vhodné pro responzivní web. */
        gap: 30px; /* Mezera mezi bloky */
        justify-content: center; /* Vycentruje sloupce gridu */
        flex: 1; /* "Vytlačí" patičku k dolnímu okraji */
    }

    #projects-title {
        text-align: center;
        font-size: 32px;
        color: var(--h1-color);
        margin: 40px 0 20px; /* Větší mezera nahoře, menší pod nadpisem */
        font-weight: 600;
        width: 100%; /* Aby text-align: center fungoval v Gridu */
    }

    /* Definuje bloky obsahu všech stránek */
    .card {  
        border: none;
        border-radius: 20px; /* Rádiusy bloků */
        padding: 24px; /* Vnitřní odsazení obsahu od okraje */
        max-width: 1000px; /* Maximální šířka celé karty*/
        margin-left: auto; /* Automatický levý okraj pro centrování */
        margin-right: auto; /* Automatický pravý okraj pro centrování */
        width: 100%; /* Karta se roztáhne, dokud nenarazí na 1000px */
        opacity: 0;
        transition:
            opacity 1.2s cubic-bezier(0.23, 1, 0.32, 1), /* Rychlost podle Bézierovy křivky */
            transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);           
    }

    .neumorph {
        background: var(--card-bg);
        box-shadow: 9px 9px 27px var(--neum-dark),  /* Tmavý stín vpravo dole */
                   -9px -9px 27px var(--neum-light); /* Světlý stín vlevo nahoře */
        transition:
            box-shadow var(--link-transform-theme),
            background-color var(--link-transform-theme);
    }

    /* === Obsah bloků === */
    .block {
        display: flex; /* Normálně rozložit obsah vedle sebe */
        justify-content: center; /* Vycentruje celý obsah (text i obrázek) horizontálně*/ 
        align-items: center; /* Obě sekce (text i obrázek) budeou svisle vycentrované */
        gap: 32px; /* Mezera mezi textem a obrázkem */
    }

    .block-text {
        max-width: 270px;
    }

    .block-text h1 {
        margin: 0;
        font-size: 1.5rem;
        color: var(--h1-color);
        text-shadow: 0 0 10px var(--neum-shadow);
        opacity: 0; /* Na začátku je úplná průhlednost = není vidět */
        transform: translateY(50px); /* Na začátku je 50px níže */
        transition: opacity 1.2s cubic-bezier(0.23, 1, 0.32, 1), /* Rychlost podle Bézierovy křivky */
                    transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .block-text h2 {
        margin: 8px 0 16px; /* Horní, oba boční, spodní okraje */
        font-size: 1.2rem;
        opacity: 0; /* Na začátku je úplná průhlednost = není vidět */
        transform: translateY(50px); /* Na začátku je 50px níže */
        transition: opacity 1.2s cubic-bezier(0.23, 1, 0.32, 1), /* Rychlost podle Bézierovy křivky */
                    transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
    }

    /* Logo partnera */
    .block-text img:not(.video-thumbnail) {
        max-width: 140px; 
        margin: 16px 0; /* Horní a spodní, oba boční okraje */
        opacity: 0; /* Na začátku je úplná průhlednost = není vidět */
        transform: translateY(50px); /* Na začátku je 50px níže */
        transition: opacity 1.2s cubic-bezier(0.23, 1, 0.32, 1), /* Rychlost podle Bézierovy křivky */
                    transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .block-text p {
        line-height: 1.4; /* Řádkování uvnitř elementu*/
        font-size: 1rem;
        white-space: pre-line; /* Automatické zalamování textu */
        opacity: 0; /* Na začátku je úplná průhlednost = není vidět */
        transform: translateY(50px); /* Na začátku je 50px níže */
        transition: opacity 1.2s cubic-bezier(0.23, 1, 0.32, 1), /* Rychlost podle Bézierovy křivky */
                    transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .block-image img {
        max-width: 100%; /* Obrázek se zmenší, tak aby se vždy vešel do vymezeného prostoru bloku */
        max-height: 400px; 
        border-radius: 16px;
        opacity: 0; /* Na začátku je úplná průhlednost = není vidět */
        transform: translateY(50px); /* Na začátku je 50px níže */
        transition: opacity 1.2s cubic-bezier(0.23, 1, 0.32, 1), /* Rychlost podle Bézierovy křivky */
                    transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .home-text {
        text-align: center;
        min-height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .home-text h2 {
        margin-bottom: 20px;
    }

    .home-text p {
        font-size: 1.2rem;
        line-height: 1.6;
        white-space: pre-line;
    }

    .home-text h2,
    .home-text p { 
        opacity: 0;
        transform: translateY(50px);
        transition:
            opacity 1.2s cubic-bezier(0.23, 1, 0.32, 1), 
            transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .contact-container {
        display: flex;
        flex-direction: row; /* Na desktopu vedle sebe */
        justify-content: space-between;
        align-items: center;
        gap: 40px;
        text-align: left;
        min-height: 350px;
        max-width: 700px; 
        margin: 0 auto; /* Vycentrování užšího kontejneru */
        background: transparent !important;
        box-shadow: none !important;
    }

    .contact-text {
        flex: 1; /* Zabere dostupný prostor */
    }

    .contact-text h1 {
        color: var(--h1-color);
        margin-bottom: 20px;
    }

    .contact-details {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
 
    .contact-details p {
        font-size: 1.2rem;
        line-height: 1.6;
        margin: 0;
    }

    .email-row {
        display: flex;
        align-items: baseline;
    }

    .email-row span {
        margin-right: 1px; /* Mezery v e-mailu */
    }

    .address-text {
        white-space: pre-line;
    }

    /* Kontejner, který drží pozici */
    .contact-image-stack {
        position: relative; /* Pro vrstvení obrázků přes sebe */
        display: flex; /* Aktivuje flexbox pro centrování */
        align-items: center; /* Svislé vycentrování */
        justify-content: center; /* Vodorovné vycentrování */
        width: 220px;  /* Šířka celého bloku */
        height: 220px; /* Výška celého bloku */
        flex-shrink: 0;
        margin-top: 50px; /* Posune QR kód o 20px níže oproti textu vlevo */
        background: #eaeaea;    /* Světlé pozadí zajistí čitelnost i v dark mode */
        border-radius: 12px;  /* Jemné zaoblení světlého pozadí */
    }

    .stack-img {
        position: absolute;
        top: 10%;
        left: 10%;
        width: 80%;
        height: 80%;
        transition: transform 0.3s ease; /* Pro případné efekty */
    }

    .layer-1 {
        z-index: 1; /* Spodní vrstva */
        opacity: 1;
    }

    .layer-2, .layer-3, .layer-4, .layer-5 {
        z-index: 2;
        opacity: 0;
    }

    /* Třída pro aktivaci zobrazení všech vrstev na konci */
    .contact-image-stack.finished .stack-img {
        opacity: 1 !important;
    }

    .contact-text h1,
    .contact-text p,
    .contact-image-stack { 
        opacity: 0;
        transform: translateY(50px);
        transition:
            opacity 1.2s cubic-bezier(0.23, 1, 0.32, 1), 
            transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
    }

    /* Když rodičovská .card dostane třídu .visible, prvky se ukážou */
    .card.visible,
    .card.visible h1,
    .card.visible h2,
    .card.visible img:not(.video-thumbnail),
    .card.visible p,
    .card.visible .block-image img,
    .card.visible .home-text h2,
    .card.visible .home-text p,
    .card.visible .contact-text h1,
    .card.visible .contact-text p,
    .card.visible .contact-image-stack {
        opacity: 1;
        transform: translateY(0);
    }

    /* Postupné zpoždění pro "stagger" efekt */
    .card.visible h1 { transition-delay: 0.1s; }
    .card.visible h2 { transition-delay: 0.3s; }
    .card.visible .block-text img:not(.video-thumbnail) { transition-delay: 0.5s; }
    .card.visible p  { transition-delay: 0.7s; }
    .card.visible .block-image img { transition-delay: 0.4s; }
    .card.visible .home-text h2 { transition-delay: 0.1s; }
    .card.visible .home-text p { transition-delay: 0.3s; }
    .card.visible .contact-text h1 { transition-delay: 0.1s; }
    .card.visible .contact-text p:nth-child(1) { transition-delay: 0.3s; }
    .card.visible .contact-text p:nth-child(2) { transition-delay: 0.5s; }
    .card.visible .contact-text p:nth-child(3) { transition-delay: 0.7s; }
    .card.visible .contact-image-stack { transition-delay: 0.4s; }
    
    /* === RESPONSIVE === */
    /* Menu */
    @media (max-width: 800px) {
        .menu-toggle { display: flex; } /* Zobrazí se hamburgerové tlačítko */

        .navbar {
            height: 74px; /* Výchozí výška zavřeného menu */
            padding: 20px;
            overflow: hidden; /* Cokoliv přesahuje výšku zavřeného navimenu se skryje. To je důležité u zavřeného menu. */
            flex-wrap: wrap; /* Umožní prvkům (odkazům v menu) se zobrazit pod sebou */
            align-content: flex-start; /* Logo a křížek zůstane u horní hrany */
            transition:
                height 1s cubic-bezier(0.23, 1, 0.32, 1), 
                background-color 1s ease,
                box-shadow 1s ease;
        }

        /* Roztažený stav - celý pruh se promění v menu */
        .navbar.active {
            height: 450px; /* Výška rozbaleného menu */
        }

        .nav-links {
            display: flex;
            visibility: hidden; /* Normálně je menu skryté */
            width: 100%;
            flex-direction: column; /* Položky menu jsou pod sebou */
            align-items: flex-end; /* Vodorovně */
            justify-content: center; /* Svisle */
            gap: 30px; /* Mezery mezi položkama v menu */
            padding-top: 60px; /* Odsazení menu od loga */
            padding-right: 36px; /* Odsazení odkazů od kraje */
            opacity: 0; /* Na začátku jsou odkazy skryté */
            transform: translateY(-30px); /* Odkazy začnou o kousek výš */
            transition:
                opacity 1s ease,
                visibility 1s,
                transform 1.5s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .navbar.active .nav-links {
            visibility: visible;
            opacity: 1;
            transform: translateY(0); /* Vyplují na své místo */
        }

        /* Animace křížku */
        .menu-toggle.open span {background: var(--link-active); }
        .menu-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
        .menu-toggle.open span:nth-child(2) { opacity: 0; }
        .menu-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    }        
        

.video-preview-container {
    position: relative;
    margin-top: 15px;
    width: 250px;             /* Šířku si upravte dle potřeby */
    aspect-ratio: 16 / 9;     /* Vynutí poměr stran videa 16:9 */
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;         /* Ořízne obrázek, který vyčnívá */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    
    /* Animace celku */
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
    transition-delay: 0.3s;
}

.video-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Opacity a transform NEDÁVÁME – animuje se celý kontejner */
    opacity: 1;              /* ← Vždy viditelný uvnitř kontejneru */
    transform: none;         /* ← Žádný posun */
    transition: transform 0.3s ease;  /* Pouze pro hover efekt */
}


.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    /* Žádné vlastní transition, aby se nehýbal jinak než kontejner */
}

/* Aktivace animace celku */
.card.visible .video-preview-container {
    opacity: 1;
    transform: translateY(0);
}




/* Hover efekt - zvětší se jen obrázek, ne celý kontejner */
.video-preview-container:hover .video-thumbnail {
    transform: scale(1.05);
}


.play-icon {
    color: white;
    font-size: 40px;
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.5));
}


    /* Karty stránky */
    @media (max-width: 800px), (orientation: portrait) {
        .block {
            flex-direction: column; /* Uspořádání obsahu uvnitř bloků nad sebe */
            align-items: center; /* Horizontálně vycentrováno */
        } 

        .block-text {
            max-width: 600px; /* Maximální šířka textu */
            margin: 0 auto; /* Horní a spodní okraj 0, boční okraje se dopočítají, tak aby byl text uprostřed, i když je zaorvnaný na levo */
            text-align: left;
        }

        .contact-container {
            flex-direction: column; /* Text bude na mobilu přes celou šířku */
        }
    
        .contact-text p {
            justify-content: center; /* Vycentrování emailu na mobilu */
        }

        .contact-image-stack {
            display: none; /* Skryje celý blok s obrázky na mobilu */
        }
    }

    /* Použije se při zobrazení na šířku A pokud je okno prohlížeče minimálně 900px */
    @media (orientation: landscape) and (min-width: 900px) {
        main {
            grid-template-columns: repeat(1, 1fr); /* Původně byly 2 sloupce (2, 1fr) */
        }
    }