:root {

    --matrix-font: 'VT323', monospace;

    --matrix-color: #00ff41;

    --matrix-bg: #030303;

}



/* Vlastní blokový kurzor */

body, a, button, input, textarea, label {

    /* 

       Vysvětlení SVG:

       width='10' height='18' - rozměry kurzoru

       fill='%2300ff41'       - barva kurzoru (URL kódovaný HEX, %23 = #)

       0 0                    - souřadnice "špičky" kurzoru (levý horní roh)

    */

    cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='18'%3E%3Crect width='10' height='18' fill='%2300ff41'/%3E%3C/svg%3E") 0 0, auto !important;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    background-color: var(--matrix-bg);

    color: var(--matrix-color);

    font-family: var(--matrix-font);

    font-size: 16px;

    /*text-shadow: 0 0 6px var(--matrix-color);*/

    letter-spacing: 2px;

    display: flex; /* Klíčové pro zarovnání aside a main vedle sebe */

    min-height: 100vh;

}



a {

    color: var(--matrix-color);

    text-decoration: none;

    /*transition: text-shadow 0.2s ease-in-out;*/

}

a:hover {

	font-size: 20px;

}



button {

    color: var(--matrix-color);

    text-decoration: none;

	background-color: var(--matrix-bg);

    /*transition: text-shadow 0.2s ease-in-out;*/

}

button:hover {

	size: 120%;

}



/* Navigace */

.side-nav {

    width: 110px;

    height: 100vh;

    position: sticky; /* Menu zůstane nahoře při scrollování */

    top: 0;

    padding: 30px 15px;

    border-right: 1px solid var(--matrix-color);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    transition: width 0.4s ease;

    overflow: hidden;

    background-color: var(--matrix-bg);

    z-index: 10;

	flex-shrink: 0;

}



.user {

    display: flex;

    align-items: center;

    gap: 15px;

    width: 100%;

}



.user-info {

    display: none;

    white-space: nowrap; /* Zabrání zalamování textu při animaci */

}



ul {

    list-style: none;

}



ul li {

    margin: 30px 0;

}



ul li a:hover {

    text-shadow: 0 0 15px var(--matrix-color);

}



.side-nav:hover .user-info {

    display: block;

}



/* Aplikace */

.app-nav {

    width: 80px;

    height: 100vh;

    position: sticky; /* Menu zůstane nahoře při scrollování */

    top: 0;

    padding: 30px 15px;

    border-right: 1px solid var(--matrix-color);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    transition: width 0.4s ease;

    overflow: hidden;

    background-color: var(--matrix-bg);

    z-index: 10;

	flex-shrink: 0;

}



.app-nav ul h1 {

	font-size: 15px;

}



.app-nav ul li a{

	font-size: 10px;

}



.app-nav ul li a:hover {

	font-size: 12px;

}



/* Main */

main {

    flex: 1; /* Automaticky zabere veškerý zbylý prostor vedle menu */

    padding: 2px 1%;

    border: 1px solid var(--matrix-color); /* Tvoje vizuální kontrola */

    display: flex;

    flex-direction: column;

    gap: 10px; /* Mezery mezi artikly */

}



/* Artikly */

article {

    border: solid var(--matrix-color);

    padding: 20px;

}



/* Globální styly pro text uvnitř článků (resetuje výchozí odsazení) */

article figure {

    margin: 0;

}



article figure img:not(:hover){

	transition: 2s;

}



article figure img:hover{

	width: 15%;

	height: 15%;

	transition: 2s;

}



article h1 {

    font-size: 24px; /* Velikost nadpisu podle obrázku */

    margin: 0 0 10px 0;

    text-shadow: 0 0 8px rgba(0, 255, 65, 0.5); /* Lehká neonová záře */

    font-weight: normal; /* V terminálu bývají fonty často bez tučného řezu */

}



article p {

    font-size: 16px;

    margin: 0;

    color: rgba(0, 255, 65, 0.8); /* Tlumenější zelená, aby nadpis vynikl */

}



/* 1. ÚVODNÍ ZPRÁVA (.notes) - Zaoblené rohy a glow efekt */

.notes {

    background: rgba(0, 5, 0, 0.85); /*  */

    border: 1px solid var(--matrix-color); /*  */

    /*border-radius: 8px;   */

    padding: 30px; /* Upraveno pro lepší proporce */

    box-shadow: 0 0 20px rgba(0, 255, 65, 0.2); /*  */

    backdrop-filter: blur(5px); /*  */

}



.notes:hover {

    border-color: #fff; /* Při najetí na článek okraj lehce "problikne" do bíla */

}



.notes figure img {

    width: 50px; /* Velikost kruhového "J" loga z tvého obrázku */

    height: 50px;

    object-fit: contain;

}



/* 2. APLIKACE (.app) - Ostré hrany a interaktivní hover efekt */

.app {

    background: transparent;

    border: 1px solid var(--matrix-color);

    padding: 20px;

    transition: all 0.3s ease; /* Plynulý přechod při najetí myši */

}



.app:hover {

    border-color: #fff; /* Při najetí na článek okraj lehce "problikne" do bíla */

}



.app a {

    text-decoration: none;

    color: inherit; /* Odkaz převezme barvu okolí */

}



/* 3. ČLÁNKY/PŘÍBĚHY (.story) - Flexbox pro zarovnání loga a textu */

.story {

    background: transparent;

    border: 1px solid var(--matrix-color);

    padding: 20px;

    display: flex;         /* Poskládá logo a text vedle sebe (nebo pod sebe, viz níže) */

    flex-direction: column; /* Podle obrázku je logo nahoře a text pod ním */

    gap: 15px;             /* Mezera mezi logem a textem */

    transition: border-color 0.3s ease;

}



.story:hover {

    border-color: #fff; /* Při najetí na článek okraj lehce "problikne" do bíla */

}



/* Styl pro obrázek/logo uvnitř článku */

.story figure img {

    width: 50px; /* Velikost kruhového "J" loga z tvého obrázku */

    height: 50px;

    object-fit: contain;

}



/* Nové styly pro článek blogu */

.blog_article {

    position: relative; /* Důležité pro vnořený nadpis */

    margin-top: 40px; /* Odsazení shora kvůli posunutému nadpisu */

    display: flex;

    flex-direction: column;

}



/* Vnořený nadpis */

.article-title {

    position: absolute;

    top: -14px; /* Posunutí přesně na linku rámečku (uprav podle tloušťky fontu) */

    left: 20px;

    background: rgb(0, 5, 0); /* Stejná barva jako pozadí .notes - "vymaže" pod sebou čáru */

    padding: 0 15px;

    margin: 0;

    color: var(--matrix-color);

    font-size: 1.2rem;

    font-weight: bold;

}



/* Efekt pro nadpis při hoveru celého článku */

.notes:hover .article-title {

    color: #fff;

}



/* Galerie obrázků (3 čtverce podle nákresu) */

.article-gallery {

    display: flex;

    gap: 15px;

    margin-bottom: 20px;

    flex-wrap: wrap; /* Pro lepší responzivitu na mobilech */

}



.article-gallery img {

    width: 120px;

    height: 120px;

    object-fit: cover;

    /*border: 2px solid var(--matrix-color); /* Vnitřní rámečky z nákresu */

}



.article-gallery img:not(:hover) {

	transition: 2s;

}



.article-gallery img:hover {

	width: 15%;

    height: 15%;

	transition: 2s;

	/*object-fit: none;*/

    /*border: 2px solid var(--matrix-color); /* Vnitřní rámečky z nákresu */

}



/* Blok s textem */

.article-text {

    /*border: 2px solid var(--matrix-color);*/

    padding: 20px;

    margin-bottom: 20px;

    color: #ccc;

    line-height: 1.6;

}



/* Datum vpravo dole */

.article-date {

    align-self: flex-end; /* Zarovná flex položku doprava */

    /*border: 2px solid var(--matrix-color);*/

    padding: 8px 15px;

    font-size: 0.9rem;

    color: var(--matrix-color);

}



/* Search input */

/* Obal pro vyhledávání, aby se správně choval při zmenšení menu */

.search-item {

    padding-right: 15px; /* Aby input nenarazil úplně do kraje při rozbalení */

}



/* Styly pro terminálový input */

.matrix-input {

    width: 100%;

    background-color: transparent; /* Průhledné pozadí */

    color: var(--matrix-color);

    font-family: var(--matrix-font);

    font-size: 16px;

    letter-spacing: 2px;

    padding: 8px 10px;

    border: 1px solid var(--matrix-color);

    outline: none; /* Odstraní výchozí modrý rámeček prohlížeče */

    caret-color: var(--matrix-color); /* Obarví blikající kurzor na zelenou */

    transition: box-shadow 0.3s ease, text-shadow 0.3s ease;

}



/* Efekt při kliknutí do pole (Focus) */

.matrix-input:focus {

    /* Vnitřní a vnější záře */

    box-shadow: inset 0 0 8px rgba(0, 255, 65, 0.4), 0 0 10px rgba(0, 255, 65, 0.6);

    /*text-shadow: 0 0 8px var(--matrix-color);*/

}



/* Zástupný text (placeholder) */

.matrix-input::placeholder {

    /*color: rgba(0, 255, 65, 0.5); /* Poloprůhledná zelená */

    font-family: var(--matrix-font);

}



/* Odstranění moderního "křížku" pro smazání v prohlížečích založených na Webkitu (Chrome, Safari, Edge) */

.matrix-input::-webkit-search-decoration,

.matrix-input::-webkit-search-cancel-button,

.matrix-input::-webkit-search-results-button,

.matrix-input::-webkit-search-results-decoration {

    -webkit-appearance: none;

}



/*Vizuální efekty*/

/* Animace postupného psaní pro úvodní zprávu */

.notes h1 {

    display: inline-block; /* Důležité pro správný výpočet šířky */

    overflow: hidden; /* Skryje text, dokud ho animace neodhalí */

    /*white-space: nowrap; /* Zabrání zalomení textu na další řádek */

    animation: typing 3s steps(40, end); /* 40 je zhruba počet znaků tvého nadpisu */

}



@keyframes typing {

    from { width: 0; }

    to { width: 100%; }

}



/* Přidání podtržítka za nadpisy a jeho rozblikání */

article h1::after {

    content: "_"; /* Znak terminálového kurzoru */

    margin-left: 5px; /* Lehká mezera za textem */

    color: var(--matrix-color); /* Použití tvé neonově zelené proměnné */

    animation: blink-caret 1s step-end infinite;

}



@keyframes blink-caret {

    from, to { opacity: 1; }

    50% { opacity: 0; }

}



/* Aplikace glitch animace při najetí myší na sekci .app */

.app:hover h2 {

    animation: glitch-anim 0.3s linear infinite;

}



/* Samotná animace vrstvení stínů a posunů */

@keyframes glitch-anim {

    0% { 

        text-shadow: 2px 0 #fff, -2px 0 var(--matrix-color); 

        transform: translate(0); 

    }

    25% { 

        text-shadow: -2px 0 var(--matrix-color), 2px 0 #fff; 

        transform: translate(1px, 1px); 

    }

    50% { 

        text-shadow: 2px 0 #fff, -2px 0 var(--matrix-color); 

        transform: translate(-1px, -1px) skewX(-10deg); 

    }

    75% { 

        text-shadow: -2px 0 var(--matrix-color), 2px 0 #fff; 

        transform: translate(0, 2px); 

    }

    100% { 

        text-shadow: 2px 0 #fff, -2px 0 var(--matrix-color); 

        transform: translate(0) skewX(0deg); 

    }

}





/*Terminály*/



/* Mobil (do šířky 520px) */

@media (max-width: 520px) {

    .side-nav:hover {

        width: 110px; /* Zabrání roztahování levého menu na telefonu */

    }

    .app-nav {

        display: none; /* OPRAVENO: Úplně skryje pravý panel na malém displeji */

    }

}



/* Notebooky / Menší desktopy (od 1200px výše) */

@media (min-width: 1200px) {

    .side-nav:hover {

        width: 300px; /* Levé menu se roztáhne */

    }

    /* Pravé menu se neroztahuje, zachovává 80px */

    .app-nav:hover {

        width: 80px; 

    }

}



/* Širokoúhlé monitory (od 1600px výše) */

@media (min-width: 1600px) {

    .side-nav:hover {

        width: 300px; 

    }

    .app-nav:hover {

        width: 150px; /* Až na velkém monitoru se pravé menu roztáhne */

    }

}



/* --- EASTER EGGY --- */

/* --- ANIMOVANÝ BÍLÝ KRÁLÍK --- */

.white-rabbit {

    position: fixed; 

    bottom: 50px; 

    left: -150px; 

    z-index: 9999; 

    opacity: 0.7;

    transition: opacity 0.3s ease, filter 0.3s ease;

    animation: run-rabbit 60s linear infinite;

}



/* Nastavení samotného GIFu */

.rabbit-gif {

    width: 80px; /* Uprav podle toho, jak velkého králíka seženeš */

    height: auto;

    /* Pokud bys sehnal králíka, co běží doleva, můžeš ho otočit zrcadlově takto: */

    /* transform: scaleX(-1); */ 

}



/* Když uživatel najede myší na králíka */

.white-rabbit:hover {

    opacity: 1;

    /* Použijeme drop-shadow místo text-shadow, aby zářil samotný obrázek */

    filter: drop-shadow(0 0 15px var(--matrix-color)); 

    animation-play-state: paused; /* ZASTAVÍ pohyb králíka */

}



/* Obarvení králíka do zelena při hoveru (volitelné) */

.white-rabbit:hover .rabbit-gif {

    /* GIF nejde jednoduše přebarvit přes 'color', ale můžeme ho natónovat pomocí filtrů: */

    filter: sepia(100%) saturate(500%) hue-rotate(70deg); 

}



/* Původní animace pohybu zleva doprava (ZŮSTÁVÁ BEZE ZMĚNY) */

@keyframes run-rabbit {

    0%, 85% { transform: translateX(0); }

    88% { transform: translateX(50vw); }

    92% { transform: translateX(50vw); }

    95%, 100% { transform: translateX(120vw); }

}



/* --- EASTER EGG 1: LŽÍCE --- */

.spoon {

    display: inline-block;

    cursor: pointer;

    transition: transform 1.5s ease-in, opacity 1.5s ease-in;

}



.spoon:hover {

    transform: rotate(45deg) translateY(15px) scaleY(0.5); /* Lžíce se ohne dolů */

    opacity: 0; /* A plynule zmizí */

}

.spoon img {

    width: 20px; /* Zmenší obrázek, aby odpovídal velikosti textu (uprav podle potřeby) */

    height: auto; /* Zachová správný poměr stran */

    vertical-align: middle; /* Zarovná lžíci hezky na střed řádku s okolním textem */

    

    /* VOLITELNÉ: Pokud má tvé PNG jinou barvu a chceš ho "zmatrixovatet" do neonově zelené: */

    /* filter: sepia(100%) saturate(500%) hue-rotate(70deg); */

}



/* --- EASTER EGG 2: DÉJÀ VU KOČKA (ÚPRAVA PRO GIF) --- */

.deja-vu-cat {

    position: fixed;

    top: 20px; /* Zůstává nahoře, aby se nekryla s králíkem */

    left: -150px; /* Posunuto více doleva, aby se GIF bezpečně schoval mimo obrazovku */

    z-index: 1; /* Bude na pozadí za textem  */

    opacity: 0.6; /* Lehce ztlumeno, aby to nerušilo čtení */

    pointer-events: none; /* Nelze na ni kliknout  */

    

    /* Původní 40 vteřinová smyčka  */

    animation: deja-vu-walk 40s linear infinite;

}



/* Úprava pro samotný animovaný GIF */

.cat-gif {

    width: 170px; /* Zkrotí velikost GIFu - uprav podle reálných rozměrů obrázku */

    height: auto; 

    

    /* VOLITELNÉ: Pokud je tvůj GIF např. moc světlý nebo mu chceš dodat matrixový nádech: */

    /* filter: brightness(0) drop-shadow(0 0 5px #00ff41); */

}



/* Fázování animace pro efekt Deja Vu (ZŮSTÁVÁ BEZE ZMĚNY)  */

@keyframes deja-vu-walk {

    0% { transform: translateX(0); }

    8% { transform: translateX(120vw); } /* 1. průchod obrazovkou (trvá cca 3 vteřiny) */

    8.01% { transform: translateX(0); } /* Okamžitý návrat mimo obrazovku na start */

    11% { transform: translateX(0); } /* Pauza cca 1,5 vteřiny... */

    19% { transform: translateX(120vw); } /* 2. průchod! Déjà vu! Zase přesně 3 vteřiny */

    19.01%, 100% { transform: translateX(0); } /* Zmizí a čeká do konce smyčky */

}



/* --- EASTER EGG 3: PILULKY --- */

.pill-choice {

    display: flex;

    flex-direction: column;

    gap: 15px;

	font-size: 10px;

}



.pill-choice a:hover{ 

	font-size: 11px;

}



.pill-choice label:hover{ 

	font-size: 11px;

}



.blue-pill { color: #0088ff !important; text-shadow: 0 0 8px #0088ff; }

.red-pill { color: #ff003c !important; text-shadow: 0 0 8px #ff003c; }



/* Skrytí samotného checkboxu */

.red-pill input[type="checkbox"] {

    display: none; 

}



/* MAGIE: Pokud je červená pilulka zaškrtnutá, změníme barvu celého webu! */

body:has(#reality-toggle:checked) {

    --matrix-color: #ff003c; /* Změna globální proměnné z tvého kořenu :root */

    animation: reality-glitch 0.3s 4; /* Rychlý 4x opakovaný glitch celé stránky */

}



/* Silný glitch efekt odhalující realitu */

@keyframes reality-glitch {

    0% { filter: invert(0) hue-rotate(0deg); transform: translate(0); }

    25% { filter: invert(1) hue-rotate(180deg); transform: translate(-5px, 5px); }

    50% { filter: invert(0) hue-rotate(0deg); transform: translate(5px, -5px); }

    100% { filter: invert(0) hue-rotate(0deg); transform: translate(0); }

}



/* --- DIGITÁLNÍ HODINY --- */

.matrix-clock {

    font-family: var(--matrix-font);

    color: var(--matrix-color);

    font-size: 24px;

    text-shadow: 0 0 10px rgba(0, 255, 65, 0.6); /* Jemná neonová záře */

    margin-bottom: 5px; /* Vytvoří úhlednou mezeru mezi hodinami a tvým logem */

    letter-spacing: 2px;

    text-align: center; /* Zarovná čas na střed levého panelu */

    transition: text-shadow 0.3s ease;

}



/* Volitelný efekt při najetí myší (hodiny se více rozsvítí) */

.matrix-clock:hover {

    text-shadow: 0 0 20px var(--matrix-color);

}



/*New blog */

/* Terminálová logovací obrazovka nad stromem */

.terminal-header {

    margin-bottom: 20px;

    padding-bottom: 10px;

    border-bottom: 1px dashed var(--matrix-color);

    font-size: 14px;

}

.prompt {

    color: #fff;

    font-weight: bold;

}

.typing-cursor {

    animation: blink-caret 1s step-end infinite;

}



/* Reset a základ stromu */

ul.tree-nav, ul.tree-nav ul {

    list-style: none;

    margin: 0;

    padding: 0;

}



ul.tree-nav {

    margin-top: 10px;

}



/* Odsazení a vodící čáry pro podsložky */

ul.tree-nav ul {

    margin-left: 10px;

    padding-left: 20px;

    border-left: 1px dashed rgba(0, 255, 65, 0.4); /* Průhlednější zelená pro čáry */

}



/* Jednotlivé položky stromu */

ul.tree-nav li {

    margin: 0;

    padding: 5px 0;

    position: relative;

}



/* Horizontální napojovací čáry */

ul.tree-nav li::before {

    content: "";

    position: absolute;

    top: 17px;

    left: -20px;

    width: 15px;

    border-top: 1px dashed rgba(0, 255, 65, 0.4);

}



/* Skrytí výchozí HTML šipky u details */

ul.tree-nav details summary {

    cursor: pointer;

    outline: none;

    display: inline-block;

    user-select: none;

    transition: text-shadow 0.2s, color 0.2s;

}

ul.tree-nav details summary::-webkit-details-marker {

    display: none;

}



/* Vlastní indikátory [rozbaleno/zabaleno] */

ul.tree-nav details summary::before {

    content: "[+] ";

    color: #fff;

    font-weight: bold;

}

ul.tree-nav details[open] > summary::before {

    content: "[-] ";

}



/* Ikony složek a souborů */

ul.tree-nav summary.folder::after {

    content: " 📁";

}

ul.tree-nav summary.file::before {

    content: "[*] "; /* Soubor nemá rozbalovací plus/mínus, má hvězdičku */

}

ul.tree-nav summary.file::after {

    content: " 📄";

}



/* Hover efekty pro řádky v terminálu */

ul.tree-nav details summary:hover {

    text-shadow: 0 0 10px var(--matrix-color);

    color: #fff;

}



/* Pokud je složka prázdná */

.empty {

    color: rgba(0, 255, 65, 0.5);

    font-style: italic;

    font-size: 0.9em;

}



/* Odsazení samotného článku po jeho rozbalení */

ul.tree-nav article {

    margin-top: 15px;

    margin-bottom: 20px;

    margin-left: 10px;

}

/*End New*/



/*Vyhledávání search input*/

/* Třída, kterou JS přiřadí nevyhovujícím položkám */

.hidden-by-search {

    display: none !important;

}