:root{color-scheme:dark}
html,body{margin:0;min-height:100%;height:100%;overflow:hidden;background:#020814;font-family:Segoe UI,sans-serif}

#landing,
.intro{position:fixed;inset:0;overflow:hidden;background:#020814}

/* Video layer */
#landing .bg,
.intro .bg{position:absolute;inset:0;overflow:hidden;background:linear-gradient(135deg,rgba(2,8,20,.96) 0%,rgba(2,8,20,.72) 38%,rgba(2,8,20,.28) 100%);transform-origin:center;will-change:transform,filter}
#landing .bg:after,
.intro .bg:after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.12) 0%,transparent 24%),radial-gradient(circle at center,transparent 20%,rgba(0,0,0,.72) 100%) }
#landing .landing-video,
.intro .landing-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block;background:#020814 url('../assets/images/landing-bg.png') center/cover no-repeat}
/* Overlay */
#landing .overlay,
.intro .overlay{
    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        rgba(0,0,0,.45) 0%,
        rgba(0,0,0,.30) 35%,
        rgba(0,0,0,.12) 70%,
        rgba(0,0,0,.05) 100%
    );

    z-index:1;
}

/* Hero container */
/* Hero container */
#landing .landing-shell,
.intro .landing-shell{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:3;
    pointer-events:none;
}

#landing .center,
.intro .center{
    position:absolute;

    left:9%;
    top:50%;

    transform:translateY(-50%);

    width:440px;
    max-width:40vw;
    box-sizing:border-box;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    text-align:left;

    z-index:10;
}

#landing .logo,
.intro .logo{
    width:150px;
    max-width:150px;
    margin-bottom:24px;
}

#landing .title,
.intro .title{
    font-size:clamp(1.8rem,3.3vw,2.5rem);
    letter-spacing:.13em;
    line-height:1.16;
    margin:0;
    text-shadow:0 3px 12px rgba(0,0,0,.62),0 12px 28px rgba(0,0,0,.32);
    font-weight:500;
    transform:none !important;
}

#landing .sub,
.intro .sub{
    font-size:clamp(.95rem,1.5vw,1.15rem);
    opacity:.95;
    line-height:1.55;
    margin-top:17px;
    letter-spacing:.035em;
    text-shadow:0 2px 10px rgba(0,0,0,.45);
    transform:none !important;
}

#landing .enter,
.intro .enter{
    margin-top:34px;
    align-self:flex-start;

    padding:12px 30px;

    border-radius:40px;
    border:1px solid rgba(255,255,255,.4);
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(12px);

    color:#fff;
    font-size:1rem;
    cursor:pointer;

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

    box-shadow:0 16px 34px rgba(0,0,0,.26);
}

#landing .enter:hover,
#landing .enter:focus-visible,
.intro .enter:hover,
.intro .enter:focus-visible{
    transform:scale(1.05);
    background:rgba(255,255,255,.20);
    border-color:rgba(255,255,255,.60);
    outline:none;
}

#landing .enter:focus-visible,
.intro .enter:focus-visible{
    box-shadow:
        0 0 0 3px rgba(255,255,255,.28),
        0 14px 32px rgba(0,0,0,.22);
}

/* Responsive rules */
/*@media (max-width:640px){#landing .center,.intro .center{left:0;width:100%;max-width:none;padding:1.5rem 1.75rem 2rem}#landing .logo,.intro .logo{width:min(150px,52vw);max-width:none;margin-bottom:24px}#landing .title,.intro .title{font-size:clamp(1.6rem,7vw,2.2rem);margin-top:0}#landing .sub,.intro .sub{font-size:.95rem;margin-top:14px}#landing .enter,.intro .enter{margin-top:28px;padding:14px 34px}}*/
/* =========================================
   MOBILE — PORTRAIT
========================================= */

@media (max-width:640px){

    #landing .center,
    .intro .center{
        left:0;
        top:50%;
        width:100%;
        max-width:none;

        padding:
            max(24px, env(safe-area-inset-top))
            24px
            max(28px, env(safe-area-inset-bottom));

        box-sizing:border-box;

        transform:translateY(-50%);

        align-items:center;
        text-align:center;
    }

    #landing .logo,
    .intro .logo{
        width:115px;
        max-width:115px;
        margin-bottom:18px;
    }

    #landing .title,
    .intro .title{
        font-size:clamp(1.65rem,7.2vw,2.15rem);
        line-height:1.12;
        letter-spacing:.09em;
        margin:0;
    }

    #landing .sub,
    .intro .sub{
        font-size:clamp(.9rem,3.8vw,1rem);
        line-height:1.5;
        margin-top:14px;
        letter-spacing:.025em;
    }

	#landing .enter,
.intro .enter{
    align-self:center;
    margin-top:24px;

    width:120px;
    height:46px;

    padding:0;

    font-size:.95rem;
    line-height:46px;
}
    

    #landing .landing-video,
    .intro .landing-video{
        object-fit:cover;
        object-position:50% 42%;
	}
   }
   
   /* =========================================
   MOBILE — LANDSCAPE
========================================= */

@media (max-width:900px) and (orientation:landscape){

    #landing .center,
    .intro .center{
        left:5%;
        top:52%;
        transform:translateY(-50%);
        width:min(46vw,430px);
        max-width:430px;
        z-index:10;
    }

    #landing .logo,
    .intro .logo{
        width:84px;
        max-width:84px;
        margin-bottom:14px;
    }

    #landing .title,
    .intro .title{
        font-size:clamp(1.8rem,3.5vw,2.5rem);
        line-height:1.12;
        letter-spacing:.08em;
    }

    #landing .sub,
    .intro .sub{
        font-size:.95rem;
        line-height:1.35;
        margin-top:12px;
        max-width:360px;
    }

    #landing .enter,
    .intro .enter{
        align-self:flex-start;
        margin-top:18px;
        width:180px;
        height:50px;
        padding:0;
        line-height:50px;
        font-size:1rem;
    }

    #landing .landing-video,
    .intro .landing-video{
        object-fit:cover;
        object-position:35% 42%;
    }

    #landing .overlay,
    .intro .overlay{
        background:linear-gradient(
            90deg,
            rgba(0,0,0,.60) 0%,
            rgba(0,0,0,.38) 42%,
            rgba(0,0,0,.14) 78%,
            rgba(0,0,0,.05) 100%);
    }
}

/* Reduced-motion support */
@media (prefers-reduced-motion:reduce){#landing .bg,#landing .center,#landing .logo,#landing .enter,#landing .landing-video,.intro .bg,.intro .center,.intro .logo,.intro .enter,.intro .landing-video{animation:none!important;transition:none!important}#landing .landing-video,.intro .landing-video{transform:none!important}}

@keyframes appear{0%{opacity:0;transform:translateY(25px) scale(.96)}100%{opacity:1;transform:none}}

/* =========================================
   PROJECT CREDIT — компактна визитка под ВХОД
   Стиловете са тук, за да използват същите responsive режими.
========================================= */
#landing .project-credit,
.intro .project-credit{
    width:min(100%, 360px);
    box-sizing:border-box;
    margin-top:12px;
    padding:8px 10px 9px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:13px;
    background:rgba(5,10,18,.42);
    -webkit-backdrop-filter:blur(9px);
    backdrop-filter:blur(9px);
    color:rgba(255,255,255,.94);
    font-size:clamp(.68rem, .82vw, .78rem);
    line-height:1.28;
    text-shadow:0 1px 5px rgba(0,0,0,.45);
    opacity:0;
    transition:opacity 1.2s ease;
    pointer-events:none;
}

#landing .project-credit__heading,
.intro .project-credit__heading{
    margin:0 0 7px;
    padding-bottom:6px;
    border-bottom:1px solid rgba(255,255,255,.28);
    text-align:center;
    font-size:1.04em;
    font-weight:600;
    letter-spacing:.055em;
}

#landing .project-credit__row,
.intro .project-credit__row{
    display:flex;
    flex-wrap:wrap;
    column-gap:5px;
    row-gap:1px;
    margin-top:4px;
}

#landing .project-credit__label,
.intro .project-credit__label{
    color:rgba(211,224,245,.82);
    font-weight:600;
}

@media (max-width:640px){
    #landing .project-credit,
    .intro .project-credit{
        width:100%;
        max-width:360px;
        margin-top:11px;
        padding:8px 10px;
        border-radius:11px;
        font-size:clamp(.66rem, 2.65vw, .76rem);
        line-height:1.22;
        text-align:left;
    }
    #landing .project-credit__heading,
    .intro .project-credit__heading{
        margin-bottom:5px;
        padding-bottom:5px;
    }
    #landing .project-credit__row,
    .intro .project-credit__row{
        margin-top:3px;
    }
}

@media (max-width:900px) and (orientation:landscape){
    #landing .project-credit,
    .intro .project-credit{
        width:min(100%, 360px);
        margin-top:7px;
        padding:5px 8px 6px;
        border-radius:9px;
        font-size:clamp(.58rem, 1.35vw, .68rem);
        line-height:1.14;
    }
    #landing .project-credit__heading,
    .intro .project-credit__heading{
        margin-bottom:3px;
        padding-bottom:3px;
    }
    #landing .project-credit__row,
    .intro .project-credit__row{
        margin-top:2px;
    }
}

@media (prefers-reduced-motion:reduce){
    #landing .project-credit,
    .intro .project-credit{transition:none!important;}
}


/* PROJECT CREDIT — заглавие на проекта над разделителя */
#landing .project-credit__project-title,
.intro .project-credit__project-title{
    margin:0 0 7px;
    text-align:center;
    font-size:1.02em;
    line-height:1.25;
    font-style:italic;
}
#landing .project-credit__details,
.intro .project-credit__details{
    border-top:1px solid rgba(255,255,255,.28);
    padding-top:6px;
}
#landing .project-credit__heading,
.intro .project-credit__heading{
    border-bottom:0;
    margin-bottom:2px;
    padding-bottom:0;
}

/* LANDSCAPE / LOW HEIGHT — compact, top-anchored stack */
@media (orientation:landscape) and (max-height:600px){
    #landing .center,
    .intro .center{
        top:calc(8vh + max(6px, env(safe-area-inset-top)));
        transform:none;
        width:min(42vw,360px);
        max-width:360px;
        padding-top:0;
        padding-bottom:0;
    }
    #landing .logo,
    .intro .logo{
        width:36px;
        max-width:36px;
        margin-bottom:3px;
    }
    #landing .title,
    .intro .title{
        font-size:clamp(1rem,2.1vw,1.35rem);
        line-height:1.02;
        letter-spacing:.035em;
    }
    #landing .sub,
    .intro .sub{
        font-size:clamp(.62rem,1.05vw,.72rem);
        line-height:1.12;
        margin-top:3px;
        max-width:330px;
    }
    #landing .enter,
    .intro .enter{
        align-self:flex-start;
        width:112px;
        height:30px;
        line-height:30px;
        margin-top:5px;
        padding:0;
        font-size:.72rem;
    }
    #landing .project-credit,
    .intro .project-credit{
        width:min(100%,300px);
        max-width:300px;
        margin-top:4px;
        padding:3px 6px 4px;
        border-radius:8px;
        font-size:clamp(.5rem,.68vw,.6rem);
        line-height:1.08;
    }
    #landing .project-credit__heading,
    .intro .project-credit__heading{
        margin-bottom:2px;
        padding-bottom:2px;
    }
    #landing .project-credit__project-title,
    .intro .project-credit__project-title{
        margin-bottom:2px;
        line-height:1.08;
    }
    #landing .project-credit__details,
    .intro .project-credit__details{
        padding-top:2px;
    }
    #landing .project-credit__row,
    .intro .project-credit__row{
        column-gap:4px;
        row-gap:0;
        margin-top:1px;
    }
}