/* ==========================================================
   SLANTWISE STUDIO
   STYLE.CSS
   ========================================================== */


/* ---------- FONTS ---------- */

@font-face{
    font-family:"SchulbuchNord";
    src:url("assets/fonts/SchulbuchNord-Normal.otf") format("opentype");
    font-weight:400;
}

@font-face{
    font-family:"SchulbuchNord";
    src:url("assets/fonts/SchulbuchNord-Fett.otf") format("opentype");
    font-weight:700;
}

@font-face{
    font-family:"SchulbuchSued";
    src:url("assets/fonts/SchulbuchSued-Fett.otf") format("opentype");
    font-weight:700;
}

@font-face{
    font-family:"VCR";
    src:url("assets/fonts/VCR_OSD_MONO.ttf") format("truetype");
}


/* ---------- RESET ---------- */

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

:root{

    --bg:#080808;
    --paper:#ebe9df;
    --grey:#b5b5b0;
    --line:rgba(255,255,255,.08);

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--paper);

    overflow-x:hidden;

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

}


/* ---------- SIGNAL ---------- */

#signal{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    z-index:-5;

}

#noise{

    position:fixed;

    inset:0;

    pointer-events:none;

    opacity:.08;

    z-index:-2;

}

.scanlines{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-1;

    background:

    repeating-linear-gradient(

        0deg,

        rgba(255,255,255,.02),

        rgba(255,255,255,.02) 1px,

        transparent 2px,

        transparent 4px

    );

}

.vignette{

    position:fixed;

    inset:0;

    pointer-events:none;

    background:

    radial-gradient(

        circle,

        transparent 35%,

        rgba(0,0,0,.45) 100%

    );

}

#colourbars{

    position:fixed;

    inset:0;

    opacity:0;

    pointer-events:none;

    z-index:5;

}


/* ---------- MAIN ---------- */

.site{

    position:relative;

    width:min(920px,90vw);

    margin:auto;

    padding:10vh 0 8vh;

}


/* ---------- LOGO ---------- */

.identity{

    margin-bottom:8rem;

}

.identity h1{

    font-family:"SchulbuchNord";

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.14em;

    line-height:.9;

    font-size:clamp(4rem,10vw,8rem);

}

.studio{

    margin-top:1rem;

    font-family:"SchulbuchNord";

    letter-spacing:.45em;

    font-size:.75rem;

    opacity:.55;

}


/* ---------- LABEL ---------- */

.section-label{

    font-family:"VCR";

    letter-spacing:.25em;

    font-size:15px;

    color:#888;

    margin-bottom:2rem;

}


/* ---------- POSTER ---------- */

.poster-container{

    margin-bottom:3rem;

}

.poster{

    width:420px;

    max-width:100%;

    display:block;

    opacity:0;

    animation:posterReveal 5s forwards;

    filter:

        brightness(.95)

        contrast(1.05)

        saturate(.9);

    box-shadow:

        0 0 30px rgba(255,255,255,.05),

        0 40px 120px rgba(0,0,0,.8);

}

@keyframes posterReveal{

0%{

opacity:0;

filter:blur(10px);

}

30%{

opacity:.05;

}

70%{

opacity:.7;

filter:blur(1px);

}

100%{

opacity:1;

filter:none;

}

}


/* ---------- FILMS ---------- */

.film{

    margin-bottom:3rem;

}

.film h2{

    font-family:"SchulbuchNord";

    font-size:clamp(2.5rem,5vw,4rem);

    letter-spacing:.08em;

    margin-bottom:.8rem;

}

.film h3{

    font-family:"SchulbuchNord";

    font-size:1.5rem;

    margin-bottom:.6rem;

}

.meta{

    font-family:"VCR";

    font-size:15px;

    color:#9b9b9b;

    letter-spacing:.18em;

}

.meta span{

    margin:0 .8rem;

}


/* ---------- PRACTICE ---------- */

.practice{

    margin-top:6rem;

    max-width:650px;

}

.practice p{

    line-height:2;

    color:var(--grey);

}


/* ---------- FOOTER ---------- */

footer{

    margin-top:7rem;

    padding-top:2rem;

    border-top:1px solid var(--line);

}

.footer-grid{

    display:flex;

    flex-wrap:wrap;

    gap:2rem;

    font-family:"SchulbuchNord";

    font-size:.75rem;

    letter-spacing:.28em;

    opacity:.45;

}


/* ---------- VCR ---------- */

.osd{

    position:fixed;

    top:40px;

    right:40px;

    z-index:50;

    text-align:right;

    font-family:"VCR";

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

    font-size:18px;

    line-height:1.8;

    user-select:none;

    pointer-events:none;

    text-shadow:

        0 0 8px rgba(255,255,255,.2);

}

.record{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:10px;

}

.rec-dot{

    width:8px;

    height:8px;

    border-radius:50%;

    background:#ff4343;

    animation:blink 1.2s infinite;

}

@keyframes blink{

0%,45%{

opacity:1;

}

46%,100%{

opacity:.2;

}

}


/* ---------- MOBILE ---------- */

@media(max-width:700px){

.site{

padding-top:8vh;

}

.identity{

margin-bottom:4rem;

}

.identity h1{

font-size:4rem;

}

.osd{

right:20px;

top:20px;

font-size:14px;

}

.footer-grid{

flex-direction:column;

gap:1rem;

}

}