/* ==========================================================
   KOS
   Design System v0.1
========================================================== */

/* ==========================================================
   ROOT
========================================================== */

:root {

    /* ------------------------------------------------------
       COLORS
    ------------------------------------------------------ */

    --bg: #f7f9ff;
    --bg-soft: #eef3ff;
    --surface: #ffffff;

    --text: #1d2433;
    --text-light: #677188;

    --primary: #753B5B;
    --secondary: #6D63C9;

    --accent: #F2C94C;

    --border: rgba(60,70,110,.08);

    /* Project colors */

    --blue: #5C8DF6;
    --cyan: #43B6E8;
    --green: #47C587;
    --orange: #F39C58;
    --yellow: #F2C94C;
    --pink: #E88CC7;
    --dark: #353A5C;


    /* ------------------------------------------------------
       TYPOGRAPHY
    ------------------------------------------------------ */

    --font: "Manrope", sans-serif;

    --fs-hero: clamp(2.8rem,5vw,4.8rem);

    --fs-h2:1.45rem;

    --fs-body:1rem;

    --fs-small:.9rem;


    /* ------------------------------------------------------
       SPACING
    ------------------------------------------------------ */

    --space-xs:.5rem;
    --space-sm:1rem;
    --space-md:2rem;
    --space-lg:4rem;
    --space-xl:6rem;
    --space-xxl:8rem;


    /* ------------------------------------------------------
       RADIUS
    ------------------------------------------------------ */

    --radius:28px;
    --radius-small:18px;


    /* ------------------------------------------------------
       SHADOW
    ------------------------------------------------------ */

    --shadow-soft:
        0 20px 50px rgba(40,55,110,.06);

    --shadow-hover:
        0 35px 80px rgba(45,70,140,.14);


    /* ------------------------------------------------------
       TRANSITIONS
    ------------------------------------------------------ */

    --transition:
        .35s cubic-bezier(.22,.61,.36,1);

}






/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after{

    margin:0;
    padding:0;

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

    font-family:var(--font);

    background:var(--bg);

    color:var(--text);

    line-height:1.6;

    -webkit-font-smoothing:antialiased;

    overflow-x:hidden;

}



img{

    display:block;
    max-width:100%;

}



a{

    color:inherit;

    text-decoration:none;

}



button{

    font:inherit;

    border:none;

    background:none;

    cursor:pointer;

}



ul{

    list-style:none;

}





/* ==========================================================
   TYPOGRAPHY
========================================================== */

h1{

    font-size:var(--fs-hero);

    line-height:1.05;

    font-weight:800;

    letter-spacing:-.04em;

}

h2{

    font-size:var(--fs-h2);

    font-weight:700;

    letter-spacing:-.02em;

}

h3{

    font-size:1.25rem;

    font-weight:700;

}



p{

    color:var(--text-light);

}




/* ==========================================================
   PAGE
========================================================== */

.page{

    position:relative;

    width:min(1500px,92vw);

    margin:auto;

}



/* ==========================================================
   BACKGROUND
========================================================== */

.background{

    position:fixed;

    inset:0;

    z-index:-10;

    overflow:hidden;

}



.gradient{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    opacity:.35;

}



.gradient-1{

    width:650px;

    height:650px;

    background:#dadfff;

    top:-200px;

    left:-120px;

}



.gradient-2{

    width:700px;

    height:700px;

    background:#efe7ff;

    right:-180px;

    bottom:-250px;

}



/* jemný filmový šum */

.noise{

    position:absolute;

    inset:0;

    opacity:.03;

    background-image:

    radial-gradient(circle at 25% 25%, rgba(0,0,0,.25) 1px, transparent 1px);

    background-size:8px 8px;

}

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

.hero {

    min-height: 92vh;

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

    text-align: center;

    padding: var(--space-xxl) 0;

}

.hero-logo {

    width: 200px;

    margin-bottom: 2rem;

    user-select: none;

}

.hero-label {

    display: inline-flex;

    align-items: center;

    gap: .6rem;

    padding: .45rem 1rem;

    margin-bottom: 2rem;

    border-radius: 999px;

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

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

    backdrop-filter: blur(18px);

    color: var(--primary);

    font-size: .92rem;

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;

    transition: opacity .3s ease;

}

.hero-label::before{

    content:"";

    width:8px;
    height:8px;

    border-radius:50%;

    background:var(--accent);

}

.hero h1{

    max-width: 950px;

    margin-bottom: 2rem;

}

.hero-description{

    max-width:700px;

    font-size:1.15rem;

    line-height:1.9;

    margin-bottom:4rem;

}

.scroll-indicator{

    display:flex;

    align-items:center;

    gap:.75rem;

    color:var(--text-light);

    font-size:.9rem;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.scroll-indicator::after{

    content:"↓";

    font-size:1.2rem;

    animation:bounce 2s infinite;

}

.brand-title {
    font-size: 5rem;
    letter-spacing: -0.05em;
    font-weight: 700;
    color: #000000;
}

.brand-title span {
    color: #753B5B;
    font-weight: 800;
}


/* ==========================================================
   PROJECT GRID
========================================================== */

.projects{

    display:grid;

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

    gap:2rem;

    margin-bottom:10rem;

}



/* ==========================================================
   CARD SIZES
========================================================== */

.card{

    min-height:280px;

}

/* hlavní projekt */

.card-large{

    grid-column:span 6;

    min-height:350px;

}

/* široká karta */

.card-wide{

    grid-column:span 8;

}

/* běžné */

.card:not(.card-large):not(.card-wide){

    grid-column:span 4;

}



/* ==========================================================
   FOOTER
========================================================== */

.footer{

    position:relative;

    padding:6rem 0 3rem;

}

.footer-logo {
    width: 72px;
    height: auto;
    display: block;
    margin-bottom: 1rem;
}

.footer-line{

    width:100%;

    height:1px;

    margin-bottom:4rem;

    background:

    linear-gradient(
        90deg,
        transparent,
        rgba(73,62,145,.18),
        transparent
    );

}

.footer-content{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:5rem;

}

.footer-brand{

    max-width:420px;

}

.footer-brand p{

    line-height:1.8;

}

.footer-links{

    display:flex;

    gap:2rem;

    align-items:center;

}

.footer-links a{

    position:relative;

    color:var(--text-light);

    font-weight:600;

    transition:var(--transition);

}

.footer-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:var(--transition);

}

.footer-links a:hover{

    color:var(--primary);

}

.footer-links a:hover::after{

    width:100%;

}

.copyright{

    margin-top:5rem;

    text-align:center;

    font-size:.9rem;

    color:var(--text-light);

}



/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1200px){

    .card-large{

        grid-column:span 12;

    }

    .card-wide{

        grid-column:span 12;

    }

    .card{

        grid-column:span 6 !important;

    }

}



@media (max-width:900px){

    .hero{

        min-height:75vh;

    }

    .hero-logo{

        width:130px;

    }

    .projects{

        grid-template-columns:1fr;

    }

    .card{

        grid-column:span 1 !important;

    }

    .footer-content{

        flex-direction:column;

    }

    .footer-links{

        flex-wrap:wrap;

    }

}



@media (max-width:600px){

    .page{

        width:92%;

    }

    .hero h1{

        font-size:2.6rem;

    }

    .hero-description{

        font-size:1rem;

    }

}



/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes bounce{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(6px);

    }

}

/* ==========================================================
   PROJECT CARDS
========================================================== */

.card{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:flex-end;

    border-radius:var(--radius);

    cursor:pointer;

    isolation:isolate;

    box-shadow:var(--shadow-soft);

}

/* světelný odlesk */

.card::before{

    content:"";

    position:absolute;

    inset:0;

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

    opacity:.45;

    z-index:1;

    transition:.5s;

}

/* jemná záře */

.card::after{

    content:"";

    position:absolute;

    inset:-30%;

    background:
        radial-gradient(circle,
            rgba(255,255,255,.28),
            transparent 70%);

    opacity:0;

    transition:.6s;

    z-index:0;

}

/* vlozena SVG vrstva v kartach */

.card-blueprint{

    position:absolute;

    inset:0;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:1.8rem;

    pointer-events:none;

    opacity:.38;

    transition:
        transform .7s,
        opacity .5s;

}

.card-blueprint svg{

    width:100%;

    height:100%;

    display:block;

    object-fit:contain;

}

.card:hover .card-blueprint{

    opacity:.52;

    transform:scale(1.04);

}



/* ==========================================================
   CARD CONTENT
========================================================== */

.card-content{

    position:relative;

    z-index:5;

    width:100%;

    height:100%;

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    padding:2rem;

}

.card-content h2{

    margin-bottom:.8rem;

    color:white;

    line-height:1.2;

}

.card-content p{

    max-width:320px;

    color:rgba(255,255,255,.88);

    line-height:1.7;

}

.card-arrow{

    font-size:2rem;

    color:white;

    opacity:.55;

    transition:var(--transition);

}



/* ==========================================================
   PROJECT COLORS
========================================================== */

.theme-motion{

    background:
        linear-gradient(
            145deg,
            #719eff,
            #4f6dff
        );

}

.theme-drink{

    background:
        linear-gradient(
            145deg,
            #f4b26d,
            #ea8854
        );

}

.theme-family{

    background:
        linear-gradient(
            145deg,
            #65d5a2,
            #3abf7b
        );

}

.theme-ergo{

    background:
        linear-gradient(
            145deg,
            #62c8ff,
            #36a8df
        );

}

.theme-paper{

    background:
        linear-gradient(
            145deg,
            #ffd768,
            #efbf3d
        );

}

.theme-health{

    background:
        linear-gradient(
            145deg,
            #ef9dd6,
            #d86cb2
        );

}

.theme-space{

    background:
        linear-gradient(
            145deg,
            #575d8d,
            #323750
        );

}



/* ==========================================================
   HOVER
========================================================== */

.projects:hover .card{

    filter:saturate(.82);

}

.projects:hover .card:hover{

    filter:saturate(1);

}



.card:hover{

    transform:
        translateY(-10px)
        scale(1.02);

    box-shadow:var(--shadow-hover);

}



.card:hover::before{

    opacity:.75;

}



.card:hover::after{

    opacity:1;

}



.card:hover .card-arrow{

    transform:translateX(8px);

    opacity:1;

}



/* ==========================================================
   LOADING
========================================================== */

.card{

    opacity:0;

    transform:
        translateY(40px);

}

body.loaded .card{

    opacity:1;

    transform:none;

}

body.loaded .card:nth-child(1){

    transition-delay:.05s;

}

body.loaded .card:nth-child(2){

    transition-delay:.10s;

}

body.loaded .card:nth-child(3){

    transition-delay:.15s;

}

body.loaded .card:nth-child(4){

    transition-delay:.20s;

}

body.loaded .card:nth-child(5){

    transition-delay:.25s;

}

body.loaded .card:nth-child(6){

    transition-delay:.30s;

}

body.loaded .card:nth-child(7){

    transition-delay:.35s;

}

.card{

    transition:
        opacity .6s,
        transform .6s,
        box-shadow .35s;

}



/* ==========================================================
   HERO LOADING
========================================================== */

.hero>*{

    opacity:0;

    transform:translateY(30px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

body.loaded .hero>*{

    opacity:1;

    transform:none;

}

body.loaded .hero-logo{

    transition-delay:.1s;

}

body.loaded .hero-label{

    transition-delay:.25s;

}

body.loaded h1{

    transition-delay:.4s;

}

body.loaded .hero-description{

    transition-delay:.55s;

}

body.loaded .scroll-indicator{

    transition-delay:.75s;

}



/* ==========================================================
   BUTTON
========================================================== */

.button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.75rem;

    padding:1rem 2rem;

    border-radius:999px;

    background:white;

    color:var(--primary);

    font-weight:700;

    transition:var(--transition);

    box-shadow:

        0 15px 40px rgba(60,70,120,.12);

}

.button:hover{

    transform:translateY(-4px);

    box-shadow:

        0 25px 60px rgba(60,70,120,.18);

}



/* ==========================================================
   FULLSCREEN DETAIL
========================================================== */

.project-detail{

    position:fixed;

    inset:0;

    z-index:1000;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:6rem;

    background:

        rgba(245,247,255,.82);

    backdrop-filter:blur(24px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:.5s;

}

.project-detail.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}



/* ==========================================================
   DETAIL PANEL
========================================================== */

.detail-content{

    width:min(900px,92vw);

    background:white;

    border-radius:36px;

    padding:4rem;

    box-shadow:

        0 40px 120px rgba(40,55,110,.12);

    transform:

        translateY(40px);

    transition:.55s;

}

.project-detail.active .detail-content{

    transform:none;

}

.detail-category{

    display:inline-block;

    padding:.5rem 1rem;

    border-radius:999px;

    background:var(--bg-soft);

    color:var(--primary);

    font-size:.8rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.detail-content h2{

    font-size:3rem;

    margin-top:2rem;

    margin-bottom:1.5rem;

}

.detail-lead{

    font-size:1.3rem;

    color:var(--text);

    line-height:1.8;

    margin-bottom:3rem;

}

.detail-text{

    margin-bottom:4rem;

}

.detail-text p{

    max-width:650px;

    line-height:2;

}



/* ==========================================================
   CLOSE BUTTON
========================================================== */

.close-detail{

    position:absolute;

    top:3rem;

    right:3rem;

    width:60px;

    height:60px;

    border-radius:50%;

    background:white;

    box-shadow:

        0 20px 40px rgba(40,55,110,.1);

    font-size:2rem;

    transition:var(--transition);

}

.close-detail:hover{

    transform:rotate(90deg);

}



/* ==========================================================
   GLASS PANEL
========================================================== */

.glass{

    background:

        rgba(255,255,255,.55);

    backdrop-filter:blur(20px);

    border:

        1px solid rgba(255,255,255,.55);

}



/* ==========================================================
   SCROLL REVEAL
========================================================== */

.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.reveal.visible{

    opacity:1;

    transform:none;

}



/* ==========================================================
   FOCUS EFFECT
========================================================== */

.projects:hover .card{

    opacity:.78;

}

.projects:hover .card:hover{

    opacity:1;

}



/* ==========================================================
   SELECTION
========================================================== */

::selection{

    background:var(--accent);

    color:var(--primary);

}



/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:transparent;

}

::-webkit-scrollbar-thumb{

    background:#d8def5;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#c3cbeb;

}



/* ==========================================================
   FUTURE STATES
========================================================== */

.card.active{

    transform:scale(1.03);

    z-index:20;

}

.card.hidden{

    opacity:0;

    pointer-events:none;

}



/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

/* ==========================================================
   LIGHT SWEEP
========================================================== */

.card::before{

    background:

    linear-gradient(

        115deg,

        rgba(255,255,255,.35),

        rgba(255,255,255,0) 35%,

        rgba(255,255,255,.18) 50%,

        rgba(255,255,255,0) 65%

    );

    background-size:220%;

}

.card:hover::before{

    animation:

        lightSweep

        1.4s ease;

}



@keyframes lightSweep{

    from{

        background-position:-180%;

    }

    to{

        background-position:180%;

    }

}



/* ==========================================================
   CARD GLOW
========================================================== */

.card::after{

    background:

        radial-gradient(

            circle at center,

            rgba(255,255,255,.30),

            transparent 70%

        );

}



/* ==========================================================
   PREMIUM SHADOW
========================================================== */

.card:hover{

    box-shadow:

        0 20px 60px rgba(30,40,80,.10),

        0 50px 120px rgba(30,40,80,.18);

}



/* ==========================================================
   GLASS NOISE
========================================================== */

.card::after{

    filter:blur(40px);

}



/* ==========================================================
   PROJECT STATUS
========================================================== */

.project-status{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    margin-top:1.2rem;

    font-size:.82rem;

    font-weight:600;

    color:rgba(255,255,255,.92);

}

.project-status::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:white;

}

/* themes */


/* ==========================================================
   AUTAPLNAEMOCI — FIRST VISUAL PASS
========================================================== */

.card[data-project="autaplnaemoci"] .card-blueprint svg {
    transform: translateY(-90px);
    
}

/* ==========================================================
   KOFOLA CAMPAIGN
========================================================== */

.card[data-project="kofola"] .card-blueprint svg {
    transform: translateX(150px);
    
}

/* ==========================================================
   STŘÍDAVKA
========================================================== */

.card[data-project="stridavka"] .card-blueprint svg {
    transform: translateX(100px);
    
}

/* ==========================================================
   GEOSEAT
========================================================== */

.card[data-project="geoseat"] .card-blueprint svg {
    transform: translateX(70px);
    
}

/* ==========================================================
   EVOSPACE
========================================================== */

.card[data-project="evospace"] .card-blueprint svg {
    transform: translateX(120px);
    
}

/* ==========================================================
   PRESSURECARE
========================================================== */

.card[data-project="pressurecare"] .card-blueprint svg {
    transform: translateX(70px);
    
}

/* ==========================================================
   PAPERHOUSES
========================================================== */

.card[data-project="paperhouses"] .card-blueprint svg {
    transform: translate(100px, -40px);
    
}