@font-face {

    font-family:"Kommuna";

    src:url("../assets/fonts/Kommuna-Normal.ttf") format("truetype");

    font-weight:400;

}

@font-face {

    font-family:"Kommuna";

    src:url("../assets/fonts/Kommuna-NormalBold.ttf") format("truetype");

    font-weight:700;

}

:root{

    --accent:#FF7700;

    --header-size:15px;
    --body-size:24px;
    --body-line-height:1.25;
--body-letter-spacing:0px;
    --project-title-size:18px;
    --more-size:16px;
    --footer-size:15px;

    --page-padding:40px;
    --project-gap:24px;
}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

body{

     font-family:"Kommuna", sans-serif;
    font-weight:400;

    background:#E7E7E7;
    color:#111;

}

a{

    text-decoration:none;
    color:inherit;

}

/* HEADER */

.header{

    position:relative;

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

    padding:var(--page-padding);

    font-size:var(--header-size);

    flex-wrap:wrap;

}

.header-right{

    display:flex;
    align-items:center;
    gap:20px;

} 

.header-logo{

    position:absolute;
    left:50%;
    transform:translateX(-50%);

}

.header-logo img{

    display:block;
    height:52px;

}

.header-logo img{

    height:55px;
    display:block;

}

.burger{

    display:none;

    background:none;
    border:none;

    font-size:28px;
    cursor:pointer;

    color:#111;

    transition:.3s;

}

.burger:hover{

    color:var(--accent);

}

.header-nav{

    display:flex;
    gap:40px;

    transition:.35s ease;

}

.mobile-home-link{

    display:none;

}

.header-nav a,
.footer-links a{
    .header-nav a{

    font-weight:400;

}
    position:relative;
    transition:.3s;

}

.header-nav a::after,
.footer-links a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-4px;

    width:0%;
    height:1px;

    background:var(--accent);

    transition:.35s ease;

}

.header-nav a:hover,
.footer-links a:hover{

    color:var(--accent);

}

.header-nav a:hover::after,
.footer-links a:hover::after{

    width:100%;

}

/* INTRO */

.intro{

    max-width:900px;

    margin-top:30px;
    margin-bottom:50px;

    padding-left:var(--page-padding);
    padding-right:var(--page-padding);

}

.intro p{

    font-family:"Kommuna", sans-serif;

    font-size:var(--body-size);
    font-weight:400;

    line-height:var(--body-line-height);

    letter-spacing:var(--body-letter-spacing);

    color:#000000;

}

p, h1, h2, h3, .play-title, .play-meta{

    text-wrap:pretty;

}

.tools{

    font-family:"Kommuna", sans-serif;

    color:#777;

    opacity:1;

}

.intro-clients{

    margin-top:1em;

}

/* PROJECTS */

.projects{

    display:grid;

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

    gap:24px;

    padding-left:var(--page-padding);

    padding-right:var(--page-padding);

}

.project-card{

    display:flex;
    flex-direction:column;

    width:100%;

}
.project-preview{

    overflow:hidden;

    aspect-ratio:16/10;

    width:100%;

}

.project-preview img,
.project-preview video{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

}


.project-info{

    margin-top:12px;
    margin-bottom:40px;

    min-height:60px;

}

.project-info h3{

    font-size:var(--project-title-size);

    font-weight:500;

    line-height:var(--project-line-height);

    letter-spacing:var(--project-letter-spacing);

    transition:.3s ease;

}

.project-info span{

    display:block;

    margin-top:2px;

    font-size:var(--more-size);

    color:rgba(0,0,0,.5);

    transition:.3s ease;

}

.project-card:hover .project-info span{

    color:var(--accent);

}

/* FOOTER */

footer{

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

    margin-top:1px;

    padding:var(--page-padding);

}

.footer-links{

    display:flex;
    gap:24px;

    font-size:var(--footer-size);

}

.footer-year{

    font-size:var(--footer-size);

}

/* MOBILE */

@media (max-width:768px){

.header{

    display:flex;
    flex-direction:column;
    padding:16px;

}

.header-right{

    width:100%;

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

    margin-top:0;

}

.burger{

    display:block;
    position:relative;
    z-index:100001;

}


.projects{

    grid-template-columns:1fr;
    gap:16px;

}

.project-info{

    margin-bottom:16px;

}

}

.footer-logo-section{

    width:100%;

    padding-left:40px;
    padding-right:40px;

    margin-top:70px;
    margin-bottom:0px;

}

.footer-logo-section img{

    width:100%;

    height:auto;

    display:block;

}
.project-info h3{

    position:relative;

    display:inline-block;

    transition:color .3s ease;

}
.project-info h3{

    font-size:var(--project-title-size);
    font-weight:500;

    transition:.3s ease;

}

.project-card:hover .project-info h3{

    color:var(--accent);

}

.more-link {
    display: flex;
    align-items: center;
    gap: 4px;
    line-height:1;
}

.plus-lottie {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    transform: translateY(-2px);
}




.header-nav a.active {
    color: var(--accent);
}

.header-nav a.active::after {
    width: 100%;
}

.contacts-page {

    min-height: calc(100vh - 120px);

    display: flex;
    align-items: flex-end;

    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
    padding-bottom: 40px;
}

.contacts-list {

    display: flex;
    flex-direction: column;

    gap: 10px;
}

.contacts-intro{

    display:none;

}

.contacts-list a {

    font-size: 32px;
    font-weight: 500;

    width: fit-content;

    transition: .3s ease;
}

.contacts-list a:hover {

    color: var(--accent);
}

.contacts-list .accent {

    color: var(--accent);
}

.header-nav a.active {
    color: var(--accent);
}

.header-nav a.active::after {
    width: 100%;
}

.contacts-page {

    min-height: calc(100vh - 120px);

    display: flex;
    align-items: flex-end;

    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
    padding-bottom: 40px;
}

.contacts-list {

    display: flex;
    flex-direction: column;

    gap: 10px;
}

.contacts-list a,
.contacts-list span{

    font-family:"Kommuna",sans-serif;
    font-weight:400;

    font-size:48px;

}

.contacts-list a {

    width: fit-content;

    transition: .3s ease;
}

.contacts-list a:hover {

    color: var(--accent);
}

.messengers {

    display: flex;
    align-items: center;
    gap: 12px;
}

.header-name a {
    color: inherit;
    text-decoration: none;
}

.header-name a {
    transition: .3s ease;
}

.header-name a:hover {
    color: var(--accent);
}

body.playground-page .header-name a:hover{

    color:var(--accent);

}




.playground-scene {

    position: fixed;
    inset: 0;

    overflow: hidden;
    touch-action:none;
}

#board {

    position: absolute;

    width: 9000px;
    height: 7000px;
}

.play-item {

    position: absolute !important;

    border-radius: 0;

    cursor: pointer;
}


.playground-hint {

    position: fixed;

    left: 50%;
    bottom: 30px;

    transform: translateX(-50%);

    z-index: 9999;

}

.header {
    position: relative;
    z-index: 1000;
}

.playground-hint {
    z-index: 1000;
}

.playground-scene {
    z-index: 1;
}

.header {
    z-index: 100;
}


.play-item {

    position: absolute;

    cursor: pointer;

    transition: transform .4s ease;

}


.play-thumb {

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

    background: rgba(0,0,0,.06);

    overflow: hidden;

}

.play-thumb img,
.play-thumb video {

    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    transition: transform .8s ease;

}

.play-thumb {

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

    overflow: hidden;

    background: rgba(0,0,0,.06);

}

.play-thumb img,
.play-thumb video {

    display: block;

    width: auto;
    height: auto;

    max-width:100%;
    max-height:100%;

    object-fit: contain;

}


.play-title {

    margin-top: 8px;

    font-size: 16px;
}

.play-meta {

    margin-top: 2px;

    font-size: 14px;

    opacity: .5;
}

.play-title {

    margin-top: 8px;

    font-size: 16px;

    font-weight: 500;

}

.play-meta {

    margin-top: 2px;

    font-size: 13px;

    font-weight: 400;

    color: rgba(0,0,0,.5);

}

.play-title,
.play-meta {

    opacity: 0;

    transform: translateY(12px);

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

}

.play-item:hover .play-title,
.play-item:hover .play-meta,
.play-item.active .play-title,
.play-item.active .play-meta {

    opacity: 1;

    transform: translateY(0);

}


.play-item {

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

}

.play-item:hover {

    transform:
        scale(1.045)
        translateY(-4px);

}



.play-item:hover video {

    transform: scale(1.03);

}

/* Playground: compact board on phones only. */
@media (max-width: 768px) {
    .play-item.landscape {
        width: 320px;
    }

    .play-item.square {
        width: 210px;
    }

    .play-item.portrait {
        width: 175px;
    }

    .play-title {
        margin-top: 5px;
        font-size: 13px;
    }

    .play-meta {
        margin-top: 1px;
        font-size: 11px;
    }
}


@media (max-width:768px){

    :root{

        --page-padding:16px !important;

    }

    .header-name{

    display:none;

}

.header{

    flex-direction:column;
    align-items:stretch;

}

.header-right{

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

    margin-top:0;

}

.header-logo{

    position:static;
    transform:none;

}

.burger{

    display:block;

}

.header-nav{

    position:fixed;
    inset:0;

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

    padding:160px 30px 20px;
    padding:110px 16px 20px;

    gap:10px;

    background:rgba(255,255,255,.92);
    backdrop-filter:blur(10px);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:.3s;

    z-index:9999;

}

.header-nav.open{

    opacity:1;
    visibility:visible;
    pointer-events:auto;

}

    .mobile-home-link{

        display:block;

    }

}

/* CV */

.cv-page{

    width:100%;

    max-width:1100px;

    margin:60px auto 120px;

    padding:0 40px;

}

.cv-preview{

    display:block;

    width:100%;

    height:auto;

    transition:.35s ease;

}

.cv-preview:hover{

    transform:scale(1.01);

}

.cv-download{

    display:inline-block;

    margin-top:32px;

    font-size:clamp(18px, 1.4vw, 24px);

    font-weight:500;

    transition:.3s ease;

}

.cv-download:hover{

    color:var(--accent);

}

@media (max-width:768px){

    .cv-page{

        padding:0 20px;

        margin:30px auto 60px;

    }

    .cv-preview{

        max-width:100%;

    }

}

.cv-content{

    width:100%;

    max-width:900px;

}

.play-item.landscape{

    width:520px;

}

.play-item.square{

    width:340px;

}

.play-item.portrait{

    width:280px;

}

.play-item.landscape .play-thumb{

    aspect-ratio:16/9;

}

.play-item.square .play-thumb{

    aspect-ratio:1/1;

}

.play-item.portrait .play-thumb{

    aspect-ratio:3/4;

}

.play-thumb{

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

    overflow:hidden;

    background:transparent;

}

/* Playground UI */


.aton .play-thumb,
.g8 .play-thumb{
    align-items:flex-start;
}

.aton video,
.g8 video{
    transform:translateY(-35px);
}

.book-intro p{

    font-size:var(--body-size);

    line-height:var(--body-line-height);

    letter-spacing:var(--body-letter-spacing);

}

/* PLAYGROUND INVERT */

body.playground-page .header,
body.playground-page .playground-hint{

    mix-blend-mode:difference;
    color:#000000;
    z-index:99999;

}

body.playground-page .header a,
body.playground-page .playground-hint{

    color:#fff;

}

body.playground-page .header-logo img{

    filter:invert(1);

}

body.playground-page .header-nav a.active,
body.playground-page .header-nav a:hover,
body.playground-page .header-name a:hover{

    color:var(--accent);

}

.header a span{

    position:relative;

    z-index:100000;

    mix-blend-mode:normal;

    color:inherit;

}

.header-nav a.active span{

    color:#FF7700;

}

.header-nav a:hover span{

    color:#FF7700;

}

.header-name a:hover span{

    color:#FF7700;

}

body.playground-page .header-nav a:hover,
body.playground-page .header-name a:hover,
body.playground-page .header-nav a.active{

    color:var(--accent);

}

/* CONTACT POSITION */

.contact-row{

    width:fit-content;

}

.Linkedin{

    margin-left:0px;
    margin-top:0px;

}

.Instagram{

    margin-left:0px;
    margin-top:0px;

}

.email{

    margin-left:2px;
    margin-top:0px;

}

.messenger{

    margin-left:2px;
    margin-top:0px;

}

@media (max-width:768px){

    .contacts-list a,
    .contacts-list span{

        font-size:clamp(16px, 5vw, 18px);
        white-space:nowrap;

    }

    .contacts-page{

        position:relative;
        min-height:calc(100svh - 87px);
        display:block;
        padding:80px 16px 32px;

    }

    .contacts-intro{

        display:block;
        max-width:600px;

    }

    .contacts-intro p{

        font-size:var(--body-size);
        line-height:var(--body-line-height);

    }

    .contacts-intro .tools{

        margin-top:1em;

    }

    .contacts-list{

        position:absolute;
        left:16px;
        bottom:32px;
        gap:16px;

    }

}

/* Mobile project navigation */
.project-mobile-burger,
.floating-project-controls,
.project-mobile-nav{

    display:none;

}

@media (max-width:768px){

    .floating-header{

        display:none !important;

    }

    .book-header{

        position:relative;
        min-height:91px;
        padding:16px !important;

    }

    .book-intro,
    .showreel-video,
    .footer-logo-section,
    footer{

        padding-left:16px !important;
        padding-right:16px !important;

    }

    .book-header .book-back{

        display:none;

    }

    .book-header .book-logo{

        position:absolute;
        right:16px;
        left:auto;
        top:16px;
        transform:none;

    }

    .project-mobile-burger{

        display:block;
        position:absolute;
        left:16px;
        top:29px;
        z-index:100002;
        padding:0;
        border:0;
        background:transparent;
        color:#111;
        font:inherit;
        font-size:28px;
        line-height:1;
        cursor:pointer;

    }

    .project-mobile-nav{

        position:fixed;
        inset:0;
        z-index:100001;
        padding:110px 16px 20px;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
        background:rgba(255,255,255,.96);
        backdrop-filter:blur(10px);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transition:.3s ease;
        font-size:18px;
        line-height:1.2;

    }

    .project-mobile-nav.open{

        opacity:1;
        visibility:visible;
        pointer-events:auto;

    }

    .project-mobile-nav a{

        position:relative;
        transition:.3s ease;

    }

    .project-mobile-nav a::after{

        content:"";
        position:absolute;
        left:0;
        bottom:-4px;
        width:0;
        height:1px;
        background:var(--accent);
        transition:.35s ease;

    }

    .project-mobile-nav a:hover{

        color:var(--accent);

    }

    .project-mobile-nav a:hover::after{

        width:100%;

    }

    .floating-project-controls{

        display:flex;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:91px;
        padding:16px;
        align-items:flex-start;
        justify-content:space-between;
        z-index:99999;
        mix-blend-mode:difference;
        opacity:0;
        transform:translateY(-20px);
        pointer-events:none;
        transition:opacity .35s ease, transform .35s ease;

    }

    .floating-project-controls.visible{

        opacity:1;
        transform:translateY(0);
        pointer-events:auto;

    }

    .floating-project-controls .project-mobile-burger{

        position:static;
        display:block;
        color:#fff;

    }

    .floating-project-logo img{

        display:block;
        height:55px;
        filter:invert(1);

    }

    body.playground-page.menu-open .header{

        mix-blend-mode:normal;
        color:#111;

    }

    body.playground-page.menu-open .header-logo img{

        filter:none;

    }

    body.playground-page.menu-open .header a,
    body.playground-page.menu-open .header .burger{

        color:#111;

    }

    body.playground-page.menu-open .header-nav{

        background:rgba(255,255,255,.84);
        backdrop-filter:blur(22px);

    }

}