:root {
    --bg-top: #071023;
    --bg-bottom: #020412;
    --accent: #00e6d9;       /* Hlavní neonová */
    --accent-2: #2be6ff;     /* Druhá barva do gradientu (z LinkTree tlačítka) */
    --glass: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.06);
    --muted: rgba(234, 246, 247, 0.7);
}

*{box-sizing:border-box}
html,body{min-height:100%}
body {
    margin: 0;
    font-family: Inter, sans-serif;
    color: #eaf6f7;
    /* Vytvoříme jeden dlouhý přechod odshora dolů */
    background: linear-gradient(to bottom, var(--bg-top) 0%, var(--bg-bottom) 100%);
    background-attachment: scroll; /* Důležité: gradient se táhne s obsahem */
    min-height: 100vh;
}

section {
    background: transparent !important;
}



/* --- NOVÁ ČISTÁ NAVIGACE --- */
#hlavicka {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    backdrop-filter: blur(10px);
    background: rgba(2, 4, 18, 0.7); /* Tmavší podklad pro čitelnost */
    border-bottom: 1px solid var(--glass-border);
    transition: background-color 0.3s ease;
}

#hlavicka nav {
    height: 60px;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center; /* Vycentrování celého menu */
    padding: 0 24px;
}

#hlavicka nav ul {
    display: flex;
    gap: 40px; /* Rozestupy mezi položkami */
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

#hlavicka nav ul li a {
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--muted); /* Jemná bílá */
    transition: all 0.3s ease;
    position: relative;
}

/* Hover efekt - Text se rozsvítí (neon) */
#hlavicka nav ul li a:hover:not(.tlacitko-cta) {
    color: var(--accent);
    text-shadow: 0 0 10px rgba(0, 230, 217, 0.7);
}

/* LinkTree tlačítko - zůstává výrazné */
.tlacitko-cta {
    padding: 8px 25px !important;
    border-radius: 50px;
    background: linear-gradient(180deg, #00e6d9, #2be6ff);
    color: #020412 !important;
    font-weight: 800;
    box-shadow: 0 0 15px rgba(0, 230, 217, 0.2);
}

.tlacitko-cta:hover {
    box-shadow: 0 0 25px rgba(0, 230, 217, 0.6);
    transform: translateY(-2px);
}


/* Main hero */
.sekce-hlavni{
	padding-top:60px; /* reduced space for fixed header */
	display:flex;
	position: center;
	align-items:center;
	justify-content:center;
}


.kontejner{position:center; width:95%;min-height: 545px; margin:auto;padding: 0}
/* Upravte existující třídu kontejneru */
.sekce-hlavni .kontejner {
    /* DŮLEŽITÉ: Stejná mezera nahoře i dole (např. 60px).
       Tím zajistíme, že prostor mezi texty je přesně uprostřed karty. */
    padding: 60px 20px; 

    /* Zbytek zůstává */
    min-height: 500px; 
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Roztáhne texty od sebe */
    align-items: center;
    background: rgba(0, 0, 0, 0.3); /* Jemné ztmavení na konci */
    border-top: 1px solid var(--glass-border);
    border-radius: 22px;
    box-shadow: 0 36px 120px rgba(2,6,23,0.72), inset 0 1px 0 rgba(255,255,255,0.02);
    width: 95%;
    margin: 0px auto 40px auto;
    position: relative;
}

/* Styl pro horní text */
.hero-top {
    z-index: 2; /* Musí být nad canvasem */
    text-align: center;
    width: 100%;
}

/* Styl pro dolní text */
.hero-bottom {
    z-index: 2; /* Musí být nad canvasem */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Mezera mezi odstavcem a H2 */
}

/* Úpravy fontů (mírné doladění pro lepší vzhled) */
/* H1 - Horní nadpis "Ahoj, jsem Jakub" */

/* Hlavní styl nadpisu - Klidový stav */
.sekce-hlavni h1 {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 64px;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1;
    color: #ffffff;
    
    /* Důležité pro pozicování glitch vrstev */
    position: relative; 
    display: inline-block;
}

/* Společné nastavení pro kopie textu (duchy) */
.sekce-hlavni h1::before,
.sekce-hlavni h1::after {
    content: attr(data-text); /* Zde si bere text z HTML */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    opacity: 0; /* Ve výchozím stavu skryté */
}

/* --- ČERVENÁ VRSTVA --- */
.sekce-hlavni h1::before {
    color: #ff003c;
    z-index: -1;
    /* Spustí se každých 5 sekund */
    animation: glitch-effect-1 5s infinite;
}

/* --- MODRÁ/KYANOVÁ VRSTVA --- */
.sekce-hlavni h1::after {
    color: #00e6d9;
    z-index: -2;
    /* Spustí se každých 5 sekund */
    animation: glitch-effect-2 5s infinite;
}

/* ANIMACE 1 (Červená)
   0% až 92% = Nic se neděje (ticho).
   93% až 100% = Silný glitch (cca 0.3s).
*/
@keyframes glitch-effect-1 {
    0%, 92% { 
        opacity: 0; 
        transform: translate(0); 
        clip-path: inset(0 0 0 0);
    }
    93% { 
        opacity: 1; 
        transform: translate(-10px, 0); /* Silný posun vlevo */
        clip-path: inset(10% 0 80% 0);  /* Oříznutí textu */
    }
    95% { 
        opacity: 1; 
        transform: translate(10px, 0);  /* Silný posun vpravo */
        clip-path: inset(40% 0 20% 0); 
    }
    97% { 
        opacity: 1; 
        transform: translate(-5px, 5px); 
        clip-path: inset(80% 0 5% 0); 
    }
    100% { 
        opacity: 0; 
        transform: translate(0); 
        clip-path: inset(0 0 0 0);
    }
}

/* ANIMACE 2 (Modrá)
   Trochu jiné hodnoty, aby se barvy nekryly a udělaly "roztržený" efekt.
*/
@keyframes glitch-effect-2 {
    0%, 92% { 
        opacity: 0; 
        transform: translate(0); 
        clip-path: inset(0 0 0 0);
    }
    93% { 
        opacity: 1; 
        transform: translate(8px, 0); 
        clip-path: inset(80% 0 5% 0); 
    }
    95% { 
        opacity: 1; 
        transform: translate(-8px, 0); 
        clip-path: inset(10% 0 60% 0); 
    }
    97% { 
        opacity: 1; 
        transform: translate(5px, -5px); 
        clip-path: inset(30% 0 30% 0); 
    }
    100% { 
        opacity: 0; 
        transform: translate(0); 
        clip-path: inset(0 0 0 0);
    }
}

/* A uprav H1 tak, že přidáš animation property */
.sekce-hlavni h1 {
    /* ... předchozí styly (font, shadow atd.) ... */
    
    /* Animace: spustí se jednou za 5 sekund a trvá 0.3s */
    animation: glitch-skew 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 5s infinite;
}

/* H2 - Dolní nadpis "Student IT..." */
.sekce-hlavni h2 {
    font-family: 'Rajdhani', sans-serif; /* Použijeme stejný font pro propojení */
    font-weight: 600; /* O něco tenčí než nadpis */
    font-size: 20px;
    margin: 0;
    color: var(--accent); /* Neonová barva */
    text-transform: uppercase;
    letter-spacing: 4px; /* Hodně roztažené pro "cinematic" efekt */
    padding-top: 10px;
    display: inline-block; /* Aby linka byla jen nad textem */
}

/* Popis "Interested in..." necháme v původním čistém fontu pro kontrast */
.sekce-hlavni .popis {
    font-family: 'Inter', sans-serif; /* Nebo tvůj základní font */
    font-weight: 400;
    font-size: 1rem;
    color: rgba(230,255,255,0.7);
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* Odstraníme staré styly, které už nepotřebujeme */
/* Smažte nebo zakomentujte staré definice pro .hero-top, pokud tam byly nějaké fixní pozice jako left: 80px atd. */

/* align meta & blueprint side-by-side near the bottom of the hero area */
.hero-body{display:flex;align-items:flex-end;gap:48px;width:100%;justify-content:center;min-height:260px}
.hero-meta{display:flex;flex-direction:column;gap:12px;align-items:flex-start;max-width:520px}
.blueprint-schema{display:flex;flex-direction:column;align-items:flex-start;gap:12px;max-width:520px}
.blueprint-schema img{width:360px;max-width:40%;filter:drop-shadow(0 14px 80px rgba(3,80,90,0.34));}
.blueprint-schema .popis{color:rgba(230,255,255,0.98);max-width:900px;text-align:left;font-size:0.95rem}


/* Hero canvas - sits behind content inside .kontejner */
#hero-canvas{
	position:absolute;
	top:0;left:0;width:100%;min-height:100%;
	border-radius:18px; /* match container */
	z-index:0;pointer-events:none;mix-blend-mode:screen;opacity:0.98;
}

/* ensure content sits above the canvas */
.sekce-hlavni .kontejner > *:not(#hero-canvas){
	position:relative;z-index:1;
}

.sekce-dovednosti{padding: 100px 24px 100px 0px}

/* Skills & cards */
/* --- ÚPRAVA SEKCE DOVEDNOSTI (SIDE-BY-SIDE) --- */

/* 1. Nastavení kontejneru specificky pro tuto sekci */
.sekce-dovednosti .kontejner {
    margin-top: 70px;    /* Trochu mezery nahoře */
    display: flex;           /* Zapne flexbox (vedle sebe) */
    flex-wrap: wrap;         /* Umožní zalomení (aby nadpis zůstal nahoře) */
    justify-content: space-between; /* Roztáhne boxy od sebe na kraj */
    align-items: flex-start;/* Zarovná boxy nahoru */
    
    /* DŮLEŽITÉ: Resetujeme výšku, která je u zámku fixní */
    min-height: auto;            
    padding: 40px 20px;      /* Klasický padding */
}

/* 2. Nadpis musí zabírat 100% šířky, aby byl nad sloupci */
.sekce-dovednosti h2 {
    /* Resetujeme horní margin */
    margin-top: 0;
    
    /* Zbytek tvých stylů pro H2 (barva, zarovnání atd.) */
    width: 100%;
    margin-bottom: 30px;
    text-align: center;
}
/* 3. Jednotlivé boxy (Skills a Tools) */
.skill-group {
    width: 48%;              /* Každý zabere necelou polovinu */
    display: block;          /* Ujistíme se, že to není inline-block */
    margin: 0;               /* Reset marginů */
    margin-bottom: 20px;
    
    /* Kosmetika boxů (volitelné, pokud už máš) */
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 25px;
}

/* 4. Responzivita - Na mobilu je chceme pod sebou */
@media (max-width: 768px) {
    .sekce-dovednosti .kontejner {
        flex-direction: column; /* Pod sebe */
    }
    
    .skill-group {
        width: 100%; /* Na mobilu přes celou šířku */
    }
}
.skill-group{display:inline-block;vertical-align:top;width:48%;margin:12px 1%;padding:20px;background:var(--glass);border-radius:12px;border:1px solid var(--glass-border);backdrop-filter:blur(6px)}
.skill-group h3{margin-top:0;color:var(--accent);}
.skill-group ul{margin:12px 0 0;padding-left:18px;color:var(--muted)}
.skill-name{color:#e9fcff}

/* Projects */
.sekce-projekty{min-height: 350px; padding:100x 24px 100px 24px; text-align:center;}
.sekce-projekty .kontejner{margin-top: 50px;}
.projekt-karta{display:inline-block;width:32%;min-width:220px;margin:12px 1%;vertical-align:top;padding:18px;background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:10px;border:1px solid rgba(255,255,255,0.04);box-shadow:0 8px 30px rgba(2,6,23,0.6)}
.projekt-karta h3{margin:0 0 8px;color:#00e6d9;font-size:1.05rem}
.projekt-karta p{color: white;font-size:0.95rem}
.projekt-karta a{color:var(--accent);text-decoration:none;font-weight:700}

/* Definice animace pro levitování (nahoru a dolů) */
@keyframes levitace {
  0% {
    translate: 0 0;
  }
  50% {
    translate: 0 -10px; /* Posune se o 10px nahoru */
  }
  100% {
    translate: 0 0;
  }
}

.projekt-karta {
  /* Základní nastavení pro plynulost */
  transition: scale 0.3s ease, box-shadow 0.3s ease;
  
  /* Spuštění levitace: */
  /* název animace | délka trvání | průběh | opakování */
  animation: levitace 3s ease-in-out infinite;
  
  /* Jen pro ukázku, aby karty byly vidět (můžeš smazat) */
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  cursor: pointer;
}

/* Co se stane, když na kartu najedeš myší */
.projekt-karta:hover {
  /* Zvětšení */
  scale: 1.05; 
  
  /* Volitelné: Zastavit levitaci při najetí, aby se na to lépe klikalo */
  animation-play-state: paused;
  
  /* Volitelné: Přidat výraznější stín pro 3D efekt */
  box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}





/* Personal section & footer */
.sekce-osobni{padding: 20px 24px; height: 200px; text-align: center;}
.sekce-osobni .kontejner{margin-top: 130px;}

.barevnyText{color: #00e6d9;}

/* --- FINÁLNÍ NÍZKÝ FOOTER (FIX VÝŠKY) --- */

footer#kontakt {
    position: relative;
    background: linear-gradient(180deg, rgba(7, 16, 35, 0.95) 0%, rgba(10, 25, 45, 1) 100%);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--glass-border);
    
    /* Změna výšky a odsazení */
    padding: 20px 0; /* Jen 20px nahoře a dole */
    margin-top: 50px;
    width: 100%;
    height: auto !important; /* Vynutíme automatickou výšku */
}

/* DŮLEŽITÁ OPRAVA: Resetujeme výšku kontejneru uvnitř footeru */
footer#kontakt .kontejner {
    min-height: 0 !important; /* Přebije globálních 545px */
    height: auto !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 20px; /* Boční odsazení */
}

/* Flexbox pro rozložení "Email vlevo - Ikony vpravo" */
.footer-content {
    display: flex;
    justify-content: space-between; /* Roztáhne obsah do stran */
    align-items: center; /* Zarovná na střed vertikálně */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 15px; /* Mezera nad copyrightem */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Jemná linka */
}

/* Levá strana (Texty) */
.footer-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.footer-left h3 {
    margin: 0;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.9rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.email-link {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
    transition: color 0.3s ease;
}

.email-link:hover {
    color: #fff;
    text-shadow: 0 0 10px var(--accent);
}

/* Pravá strana (Ikony) */
.footer-right {
    display: flex;
    align-items: center;
    gap: 15px; /* Mezery mezi ikonami */
}

.ikona-odkaz img {
    width: 32px; /* Malé kompaktní ikony */
    height: 32px;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
}

.ikona-odkaz:hover img {
    transform: scale(1.15);
    filter: drop-shadow(0 0 8px var(--accent));
}

/* Copyright úplně dole */
.copyright {
    margin: 0;
    margin-top: 10px;
    text-align: center;
    color: rgba(255, 255, 255, 0.2);
    font-size: 0.7rem;
}

/* --- MOBILNÍ ZOBRAZENÍ --- */
@media (max-width: 700px) {
    .footer-content {
        flex-direction: column; /* Pod sebe na mobilu */
        gap: 15px;
        text-align: center;
    }
    
    .footer-left {
        align-items: center; /* Vycentrovat texty na mobilu */
    }
    
    footer#kontakt {
        padding: 30px 0;
    }
}

/* Responsive */
@media (max-width:900px){
	.sekce-hlavni .kontejner{flex-direction:column;align-items:flex-start}
	.blueprint-schema img{max-width:60%}
	.projekt-karta{width:48%}
	.skill-group{width:100%;margin-bottom:12px}
}
@media (max-width:520px){
	#hlavicka nav{padding:12px}
	.sekce-hlavni h1{font-size:32px}
	.projekt-karta{width:100%}
}

/* Small accent decorative star (optional) */
.kontejner::after{content:'';position:absolute;right:6%;top:88%;width:18px;min-height:18px;background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0.2));transform:rotate(20deg);opacity:0.06}

/* --- BEZPEČNÉ SCROLL ANIMACE --- */

/* 1. Pro prvky, které se NESMÍ hýbat (protože už levitují nebo mají složitý layout) 
   - Např. .projekt-karta, .skill-group
   - Animujeme pouze průhlednost a rozostření. */
.fade-item {
    opacity: 0;
    filter: blur(10px);
    transition: opacity 0.8s ease, filter 0.8s ease;
    /* DŮLEŽITÉ: Žádný transform, aby se nerozbila levitace */
}

/* 2. Pro statické texty a kontejnery (H1, H2, odstavce)
   - Zde můžeme přidat i pohyb nahoru, vypadá to lépe. */
.fade-up {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(5px);
    transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease;
}

/* --- AKTIVNÍ STAV (přidá JavaScript) --- */
.in-view {
    opacity: 1 !important;
    transform: translateY(0) !important;
    filter: blur(0) !important;
}

/* --- EFEKT VYNOŘENÍ Z POZADÍ (POP-UP) --- */
.vynoreni {
    opacity: 0 !important; /* !important zajistí, že prvek zmizí hned */
    /* Posun dolů o 80px a zmenšení na 80 % */
    transform: translateY(80px) scale(0.8); 
    filter: blur(8px); /* Rozmazání pro hloubku */
    
    /* Nastavení přechodu: */
    /* Používám "cubic-bezier", aby to na konci trochu "nadskočilo" (pružný efekt) */
    transition: 
        opacity 0.6s ease-out,
        transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
        filter 0.6s ease;
        
    /* Zajistí, že se animace nebude tlouct s ničím jiným */
    will-change: opacity, transform, filter;
}

/* 2. Aktivní stav: Prvek je na svém místě */
.vynoreni.active {
    opacity: 1 !important;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* 3. Zpoždění pro druhý prvek (aby se nevynořily naráz) */
.zpozdeni {
    transition-delay: 0.2s; /* Druhý blok počká 0.2 sekundy */
}