@font-face {
    font-family: 'BlueSakura';
    src: url('/fonts/BlueSakura.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'From the Stars Sb';
    src: url('/fonts/From%20the%20Stars%20Sb.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* Stable viewport height unit: ignores mobile browser toolbars showing/hiding */
:root {
    --vh: 1vh;
}

@supports (height: 1svh) {
    :root {
        --vh: 1svh;
    }
}

body {
    margin: 0;
}
body,
.timer,
.time,
.time p,
.time h2 {
    font-family: 'BlueSakura', sans-serif;
}

/* Background layer, pinned to the viewport so it always covers the screen */
.scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background-image:
        linear-gradient(
            to bottom,
            #7c39e6ff 0%,
            rgba(124, 57, 230, 0.85) 30%,
            rgba(124, 57, 230, 0) 52%
        ),
        url('/images/bghor1.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.lbloc, .rbloc {
    position: absolute;
    top: 0;
    height: 103%;
    width: auto;
}
.lbloc {
    right: 75%;
}

.rbloc {
    left: 75%;
    transform: scaleX(-1);
}

/* Landscape layout (desktop, tablets and phones held sideways) */
.page {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    padding:
        env(safe-area-inset-top, 0px)
        env(safe-area-inset-right, 0px)
        env(safe-area-inset-bottom, 0px)
        env(safe-area-inset-left, 0px);
}

.page img {
    display: block;
    height: auto;
}

.logoBEST{
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    align-self: start;
    width: min(17vw, var(--vh) * 30);
    margin: calc(var(--vh) * 2) -24.5vw;
    
}
.logoUT{
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    width: min(13vw, var(--vh) * 23);
    margin: calc(var(--vh) * 2) -23vw;
    
}

.titlu{
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    width: min(47vw, var(--vh) * 84);
}

.timer{
    --num: clamp(1.5rem, min(4vw, var(--vh) * 7.1), 5rem);
    --label: clamp(0.6rem, min(1.4vw, var(--vh) * 2.5), 1.5rem);
    --gap: clamp(0.75rem, min(3vw, var(--vh) * 5.3), 4rem);
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    margin-bottom: calc(var(--vh) * 6);
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-shadow: 0 0 12px rgba(170, 225, 255, 0.55);
}

.time h2 {
    font-family: 'From the Stars Sb', sans-serif;
    font-size: var(--num);
    font-weight: 500;
    margin: 0;
    line-height: 1;
    letter-spacing: 0.08em;
}

.timebox{
    --neon-color: #1fd3ffff;
    display: flex;
    gap: var(--gap);
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    border: 0.03em solid rgb(250, 250, 250);
    border-radius: 0.4em;
    padding: 0.4em;
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.32), transparent 28%),
        radial-gradient(circle at 85% 100%, rgba(130, 78, 228, 0.28), transparent 42%),
        rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px) saturate(135%);
    -webkit-backdrop-filter: blur(14px) saturate(135%);
    text-shadow:
        0 0 2px #fff,
        0 0 4px #fff,
        0 0 6px #fff,
        0 0 15px var(--neon-color),
        0 0 23px var(--neon-color),
        0 0 36px var(--neon-color);
    box-shadow:
        0 0 3px #fff,
        0 0 3px #fff,
        0 0 33px var(--neon-color),
        0 0 36px var(--neon-color),
        inset 0 0 21px var(--neon-color),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(255, 255, 255, 0.18);
    animation: timebox-pulsate 3s infinite alternate;
}

@keyframes timebox-pulsate {
    0% {
        text-shadow:
            0 0 2px #fff,
            0 0 4px #fff,
            0 0 6px #fff,
            0 0 15px var(--neon-color),
            0 0 23px #ff00ccff,
            0 0 36px #ff00ccff;
    }

    100% {
        text-shadow:
            0 0 5px #fff,
            0 0 9px #fff,
            0 0 18px #fff,
            0 0 36px #ff00ccff,
            0 0 49px #ff00ccff,
            0 0 65px #fff;
    }
}

.time{
    text-align: center;
    min-width: calc(var(--num) * 1.3);
}

.time p {
    margin: 0.45rem 0 0;
    font-size: var(--label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
}

.calc1, .calc2 {
    grid-row: 2;
    align-self: end;
    width: min(20vw, var(--vh) * 34);
    filter: drop-shadow(0 0 8px rgba(113, 194, 248, 0.64));
}

.calc1 {
    grid-column: 1;
    justify-self: start;
    margin: 0 0 calc(var(--vh) * 2) 10vw;
}

.calc2 {
    grid-column: 3;
    justify-self: end;
    margin: 0 10vw calc(var(--vh) * 2) 0;
}

/* Portrait layout (phones, tablets held upright): logos, title, timer, computers stacked */
@media (orientation: portrait){
    .scene {
        background-image:
            linear-gradient(
                to bottom,
                #7c39e6ff 0%,
                rgba(124, 57, 230, 0.85) 18%,
                rgba(124, 57, 230, 0) 52%
            ),
            url('/images/bg2vert.svg');
    }

    .lbloc, .rbloc {
        top: auto;
        bottom: -2px;
        height: 85%;
    }

    .page {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto auto 1fr auto;
    }

    .logoBEST{
        grid-column: 1;
        justify-self: end;
        align-self: center;
        width: min(40vw, var(--vh) * 18);
        margin: calc(var(--vh) * 2) 0vw 0 0;
        
    }
    .logoUT{
        grid-column: 2;
        justify-self: start;
        align-self: center;
        width: min(40vw, var(--vh) * 14.5);
        margin: calc(var(--vh) * 2) 0 0 4vw;
        
    }

    .titlu{
        grid-row: 2;
        width: min(78vw, var(--vh) * 40);
        margin-top: calc(var(--vh) * 3);
    }

    .timer{
        --num: clamp(1.75rem, min(11vw, var(--vh) * 6.5), 5rem);
        --label: clamp(0.7rem, min(3.8vw, var(--vh) * 2.2), 1.4rem);
        --gap: clamp(0.5rem, min(5vw, var(--vh) * 3), 3rem);
        grid-column: 1 / -1;
        grid-row: 3;
        margin-bottom: 0;
    }
    .time h2, .time p {
        text-shadow: 0 0 14px rgba(170, 225, 255, 0.55);
    }

    .calc1 {
        grid-row: 4;
        width: min(41vw, var(--vh) * 22);
    }
    .calc2 {
        position: absolute;
        bottom: 1vh;
        left: 4vw;
        width: 41vw;
    }

    .calc1 {
        grid-column: 1;
        margin: 0 0 calc(var(--vh) * 4) 8vw;
    }

    .calc2 {
        grid-column: 2;
        margin: 0 8vw calc(var(--vh) * 4) 0;
    }
}