/* ======================================================
   AeroŽďár 2.0
   Design System
   Autor: Jiří Klíma 
   ====================================================== */

/* ===== Google Font ===== */


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ===== Proměnné ===== */

:root{

    --bg:#07111d;
    --bg2:#0d1b2f;

    --primary:#2bb5ff;
    --primary2:#008cff;

    --success:#00d084;
    --warning:#ffb703;
    --danger:#ff4d6d;

    --white:#ffffff;
    --text:#d8e6f3;
    --muted:#9fb5ca;

    --glass:rgba(255,255,255,.10);
    --glassBorder:rgba(255,255,255,.15);

    --radius:22px;

    --shadow:
        0 15px 45px rgba(0,0,0,.35);

    --transition:.35s ease;

}

/* ===== Reset ===== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    color:var(--white);

    background:
        radial-gradient(circle at top,#0d2748 0%,#07111d 60%,#03070c 100%);

    overflow-x:hidden;

}

/* Scrollbar */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#08131f;
}

::-webkit-scrollbar-thumb{
    background:var(--primary);
    border-radius:20px;
}

/* ===== Odkazy ===== */

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

img{

    max-width:100%;

    display:block;

}

.container{

    position:relative;

    z-index:2;

}
/* ======================================================
   HEADER
====================================================== */

.main-header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    padding:18px 0;

    z-index:9999;

    transition:.4s;

    background:rgba(6,16,28,.35);

    backdrop-filter:blur(20px);

    border-bottom:1px solid rgba(255,255,255,.08);

}

.main-header.scrolled{

    padding:10px 0;

    background:rgba(4,10,18,.88);

    box-shadow:0 10px 35px rgba(0,0,0,.35);

}

.navbar{

    padding:0;

}

.logo{

    display:flex;

    align-items:center;

    gap:15px;

}

.logo-icon{

    width:58px;

    height:58px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#35c5ff,#006dff);

    font-size:24px;

    color:white;

    box-shadow:0 12px 30px rgba(0,140,255,.45);

}

.logo-text{

    display:flex;

    flex-direction:column;

}

.logo-text .title{

    font-size:25px;

    font-weight:700;

    letter-spacing:.5px;

}

.logo-text .subtitle{

    font-size:12px;

    color:var(--muted);

}

.navbar-nav{

    gap:8px;

}

.nav-item{

    position:relative;

}

.nav-link{

    color:white !important;

    font-weight:500;

    padding:12px 18px !important;

    border-radius:30px;

    transition:.3s;

}


.nav-link:hover{

    color:white !important;

    background:rgba(255,255,255,.08);

}

.nav-link.active{

    background:linear-gradient(135deg,#29b8ff,#0078ff);

}

.nav-link::after{

    content:"";

    position:absolute;

    bottom:4px;

    left:50%;

    width:0;

    height:2px;

    transform:translateX(-50%);

    background:white;

    transition:.3s;

}

.nav-link:hover::after{

    width:50%;

}

.btn-login{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:40px;

    background:linear-gradient(135deg,#29b8ff,#006cff);

    color:white;

    font-weight:600;

    transition:.35s;

    box-shadow:0 12px 25px rgba(0,140,255,.35);

}

.btn-login:hover{

    transform:translateY(-3px);

    color:white;

}

.navbar-toggler{

    border:none;

    color:white;

    font-size:28px;

}

.navbar-toggler:focus{

    box-shadow:none;

}

/* Mobile */

@media(max-width:991px){

.main-header{

    padding:15px;

}

.logo-text .subtitle{

    display:none;

}

.navbar-collapse{

    margin-top:20px;

    border-radius:20px;

    padding:20px;

    background:rgba(10,22,40,.96);

}

.navbar-nav{

    gap:15px;

}

.btn-login{

    justify-content:center;

}
}
/* ======================================================
   HERO
====================================================== */

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:url("../img/hero.jpg") center center/cover no-repeat;
    filter:none;

}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            rgba(5,15,30,.18),
            rgba(5,15,30,.28)
        );

    pointer-events:none;
}

.hero-content{

    position:relative;

    z-index:10;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:40px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(20px);

    color:#8dd8ff;

    margin-bottom:30px;

}

.hero-title{

    font-size:92px;

    font-weight:800;

    line-height:1;

    margin-bottom:25px;

    text-shadow:0 10px 40px rgba(0,0,0,.45);

}

.hero-slogan{

    font-size:40px;

    font-weight:700;

    text-shadow:0 5px 25px rgba(0,0,0,.4);

}

.hero-text{

    max-width:620px;

    color:#d8e6f3;

    font-size:20px;

    line-height:1.9;

    margin-bottom:45px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.hero-buttons .btn{

    padding:15px 32px;

    border-radius:50px;

    font-weight:600;

}

.btn-primary{

    background:linear-gradient(135deg,#33c8ff,#006eff);

    border:none;

}

.btn-primary:hover{

    transform:translateY(-4px);

}

.btn-outline-light{

    border:2px solid rgba(255,255,255,.35);

}

.btn-outline-light:hover{

    background:white;

    color:#00152c;

}
.hero-stars{
    z-index:1;
}

.overlay{
    display:none;
    pointer-events:none;
}



@keyframes starsMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(300px);

    }

}

.hero-content{

    position:relative;

    z-index:5;

}
.hero h2{

    line-height:1.15;

}
/* ==========================================
   GLASS WEATHER CARD
========================================== */

.weather-card{

    background:rgba(24,34,52,.55);

    backdrop-filter:blur(28px);

    border:1px solid rgba(255,255,255,.14);

    box-shadow:
        0 25px 70px rgba(0,0,0,.35);

}

.weather-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 35px 70px rgba(0,0,0,.45);

}
/* ==========================================
   GLASS WEATHER CARD
========================================== */

.weather-card::before{

    content:"";

    position:absolute;

    top:-80px;
    left:-80px;

    width:220px;
    height:220px;

    border-radius:50%;

    background:rgba(255,255,255,.12);

    filter:blur(40px);

}
/* ======================================================
   GLASS CARD
====================================================== */

.glass{

    position:relative;

   background: rgba(20, 30, 50, .45);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);

border: 1px solid rgba(255,255,255,.12);

box-shadow:
    0 25px 60px rgba(0,0,0,.35);

    overflow:hidden;

    transition:.35s ease;

}

.glass::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.18),
            rgba(255,255,255,0)
        );

    pointer-events:none;

}

.glass:hover{

    transform:translateY(-8px);

    box-shadow:
        0 30px 70px rgba(0,0,0,.45);

}
/*=========================================================
    WEATHER CARD
=========================================================*/

.weather-card{

    width:100%;
    max-width:430px;

    padding:32px;

    color:#fff;

}

.weather-header{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:20px;

    letter-spacing:2px;

    font-size:.85rem;

    text-transform:uppercase;

    color:#cbd5e1;

}

.weather-icon{

    width:70px;
    height:70px;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:50%;

    background:rgba(255,255,255,.08);

}

.weather-icon i{

    font-size:2rem;

    transition:.3s;

}
.weather-temp{

    font-size:4rem;

    font-weight:700;

    line-height:1;

    margin-bottom:10px;

}

.weather-state{

    font-size:1.1rem;

    color:#dbeafe;

    margin-bottom:18px;

}

.weather-location{

    display:flex;
    align-items:center;

    gap:10px;

    margin-bottom:30px;

    color:#cbd5e1;

}

.weather-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

.weather-grid .item{

    display:flex;

    gap:14px;

    align-items:center;

    padding:16px;

    border-radius:18px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.12);

    transition:.3s;

}

.weather-grid .item:hover{

    transform:translateY(-5px);

    background:rgba(255,255,255,.14);

}

.weather-grid i{

    font-size:1.35rem;

    width:26px;

    text-align:center;

    color:#6ee7ff;

}

.weather-grid small{

    display:block;

    color:#cbd5e1;

    font-size:.8rem;

}

.weather-grid strong{

    font-size:1rem;

    color:#fff;

}
@keyframes float{

    0%{transform:translateY(0);}
    50%{transform:translateY(-8px);}
    100%{transform:translateY(0);}

}
.btn{

    transition:.3s;

}

.btn:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(0,140,255,.35);

}
.hero{
    transition: background-image 0.5s ease;
}
.weather-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
    margin-top:25px;
}

.item{
    display:flex;
    align-items:center;
    gap:14px;

    padding:15px;

    border-radius:16px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(8px);

    transition:.3s;
}

.item:hover{
    background:rgba(255,255,255,.15);
}

.item-icon{
    width:48px;
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.10);

    font-size:22px;

    color:#6ddcff;
}

.item-info small{
    display:block;
    opacity:.7;
    font-size:.8rem;
}

.item-info strong{
    display:block;
    font-size:1.1rem;
    color:#fff;
}
@media (max-width: 768px){

    .weather-grid{
        grid-template-columns:1fr;
    }

    .item{
        padding:12px;
    }

}

.nav-link i{
    margin-right:8px;
    width:18px;
    text-align:center;
    opacity:.9;
}

.nav-link{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:500;
}

.nav-link i{
    width:18px;
    text-align:center;
    font-size:.95rem;
}

.nav-link:hover i{
    color:#58c8ff;
}
.dropdown-menu{

    border:none;
    border-radius:12px;

    box-shadow:0 10px 30px rgba(0,0,0,.18);

    padding:.5rem;

}

.dropdown-item{

    border-radius:8px;

    padding:.6rem .9rem;

    transition:.25s;

}

.dropdown-item i{

    width:22px;

    color:#1f8fff;

}

.dropdown-item:hover{

    background:#1f8fff;

    color:#fff;

}

.dropdown-item:hover i{

    color:#fff;

}
.page-hero{

    padding:120px 0 70px;

    text-align:center;

    color:#fff;

    background:
        linear-gradient(rgba(5,20,40,.78),
        rgba(5,20,40,.78)),
        url("../img/hero-bg.jpg") center/cover;

}

.page-hero h1{

    font-size:3rem;

    font-weight:700;

    margin-bottom:15px;

}

.page-hero p{

    font-size:1.2rem;

    opacity:.9;

}
.page-hero{

    position:relative;

    overflow:hidden;

    padding:140px 0 90px;

    color:#fff;

    text-align:center;

}
.sky-animation{

    position:absolute;

    inset:0;

    z-index:0;

    animation:skyCycle 10s forwards;

}
@keyframes skyCycle{

    0%{

        background:#ff9e3d;

    }

    25%{

        background:#6dc8ff;

    }

    50%{

        background:#2e7dd7;

    }

    75%{

        background:#0c2f63;

    }

    100%{

        background:#020814;

    }

}
@keyframes starsFade{

    0%{

        opacity:0;

    }

    60%{

        opacity:0;

    }

    100%{

        opacity:.35;

    }

}
.space-card img{
    width:100%;
    height:180px;
    object-fit:cover;
    border-radius:12px;
}
.glass-card{

    background: rgba(255,255,255,.08);

    backdrop-filter: blur(18px);

    border:1px solid rgba(255,255,255,.10);

    border-radius:20px;

    padding:25px;

    height:100%;

    box-shadow:0 10px 30px rgba(0,0,0,.25);

    transition:.3s;

}

.glass-card:hover{

    transform:translateY(-5px);

    border-color:#3ea6ff;

}

.page-hero{

    padding:70px 0 50px;

    background:linear-gradient(
        180deg,
        rgba(14,30,55,.9),
        rgba(8,18,35,1)
    );

    margin-bottom:40px;

}
canvas{

    max-height:320px;

}
/* ===== Kompas větru ===== */

.wind-compass{

    position:relative;

    width:170px;

    height:170px;

    margin:auto;

    border:2px solid rgba(255,255,255,.25);

    border-radius:50%;

}

.wind-center{

    position:absolute;

    width:14px;

    height:14px;

    background:#fff;

    border-radius:50%;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

}

.wind-arrow{

    position:absolute;

    left:50%;

    top:18px;

    transform-origin:50% 67px;

    transform:translateX(-50%) rotate(0deg);

    font-size:34px;

    color:#4fc3ff;

    transition:1s;

    text-shadow:0 0 12px #4fc3ff;

}

.wind-compass::before{

    content:"S";

    position:absolute;

    top:8px;

    left:50%;

    transform:translateX(-50%);

}

.wind-compass::after{

    content:"J";

    position:absolute;

    bottom:8px;

    left:50%;

    transform:translateX(-50%);

}

.wind-east{

    position:absolute;

    right:10px;

    top:50%;

    transform:translateY(-50%);

}

.wind-west{

    position:absolute;

    left:10px;

    top:50%;

    transform:translateY(-50%);

}
body{

    padding-top:110px;

}