/* =========================
   FONTS
========================= */

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

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

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

@font-face {
    font-family: 'Exo 2';
    src: url('fonts/Exo2-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}


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

html {
    margin: 0;
    padding: 0;

    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    overflow-x: hidden;
    overflow-y: auto;

    background: #000;

    min-height: 100dvh;
}

.scene {
    width: 100vw;
    height: 100svh;
}


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

.base,
.pulse {
    position: fixed;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100dvh;

    object-fit: cover;
}

.base {
    animation: breathe 9s ease-in-out infinite;
}

@keyframes breathe {
    0%   { opacity: 0.9; }
    20%  { opacity: 0.7; }
    50%  { opacity: 0.5; }
    80%  { opacity: 0.7; }
    100% { opacity: 0.9; }
}


/* =========================
   SCANNING PULSES
========================= */

.pulse {
    mask-image: linear-gradient(
        to right,
        transparent 35%,
        rgba(0, 0, 0, 0.1) 40%,
        rgba(0, 0, 0, 0.25) 44%,
        rgba(0, 0, 0, 0.5) 47%,
        rgba(0, 0, 0, 0.75) 48.5%,
        black 49%,
        black 51%,
        rgba(0, 0, 0, 0.75) 51.5%,
        rgba(0, 0, 0, 0.5) 53%,
        rgba(0, 0, 0, 0.25) 56%,
        rgba(0, 0, 0, 0.1) 60%,
        transparent 65%
    );

    -webkit-mask-image: linear-gradient(
        to right,
        transparent 35%,
        rgba(0, 0, 0, 0.1) 40%,
        rgba(0, 0, 0, 0.25) 44%,
        rgba(0, 0, 0, 0.5) 47%,
        rgba(0, 0, 0, 0.75) 48.5%,
        black 49%,
        black 51%,
        rgba(0, 0, 0, 0.75) 51.5%,
        rgba(0, 0, 0, 0.5) 53%,
        rgba(0, 0, 0, 0.25) 56%,
        rgba(0, 0, 0, 0.1) 60%,
        transparent 65%
    );

    mask-size: 100vw 100%;
    -webkit-mask-size: 100vw 100%;

    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;

    mix-blend-mode: screen;
}

.pulse1 { animation: scan1 40s linear infinite; }
.pulse2 { animation: scan2 40s linear infinite; }
.pulse3 { animation: scan3 40s linear infinite; }
.pulse4 { animation: scan4 40s linear infinite; }
.pulse5 { animation: scan5 40s linear infinite; }
.pulse6 { animation: scan6 40s linear infinite; }

@keyframes scan1 {
    0%    { mask-position: -100vw; }
    3.75% { mask-position: 100vw; }
    100%  { mask-position: 100vw; }
}

@keyframes scan2 {
    0%      { mask-position: 100vw; }
    12%     { mask-position: 100vw; }
    15.75%  { mask-position: -100vw; }
    100%    { mask-position: -100vw; }
}

@keyframes scan3 {
    0%      { mask-position: -100vw; }
    24%     { mask-position: -100vw; }
    27.75%  { mask-position: 100vw; }
    100%    { mask-position: 100vw; }
}

@keyframes scan4 {
    0%      { mask-position: 100vw; }
    38%     { mask-position: 100vw; }
    41.75%  { mask-position: -100vw; }
    100%    { mask-position: -100vw; }
}

@keyframes scan5 {
    0%      { mask-position: 100vw; }
    55%     { mask-position: 100vw; }
    58.75%  { mask-position: -100vw; }
    100%    { mask-position: -100vw; }
}

@keyframes scan6 {
    0%      { mask-position: -100vw; }
    72%     { mask-position: -100vw; }
    75.75%  { mask-position: 100vw; }
    100%    { mask-position: 100vw; }
}


/* =========================
   LEFT UI CLUSTER
========================= */

.id-cluster {
    position: fixed;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100dvh;

    overflow: hidden;

    z-index: 5;
    pointer-events: none;
}

.frame {
    position: absolute;
    top: 0;
    left: 0;

    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(0 0 8px rgba(0, 0, 0, 1))
        drop-shadow(0 0 15px rgba(0, 0, 0, 0.9))
        drop-shadow(0 0 20px rgba(0, 0, 0, 0.85));

    pointer-events: none;
}


/* =========================
   HALO CORE
========================= */

.halo-container {
    position: absolute;

    top: 11.1vh;
    left: 11.1vh;

    width: 46vh;
    height: 46vh;

    transform: translate(-50%, -50%);
}

.halo {
    position: absolute;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transform: scale(0);

    filter:
        drop-shadow(0 0 4px #67f7fc)
        drop-shadow(0 0 10px #67f7fc);
}

.halo:nth-child(1) {
    opacity: 0.60;

    filter:
        drop-shadow(0 0 5px #67f7fc)
        drop-shadow(0 0 15px #67f7fc);
}

.halo:nth-child(2) {
    opacity: 0.20;

    filter:
        hue-rotate(5deg)
        drop-shadow(0 0 15px #67f7fc);
}

.halo:nth-child(3)  { opacity: 0.35; }
.halo:nth-child(4)  { opacity: 0.10; }
.halo:nth-child(6)  { opacity: 0.20; }
.halo:nth-child(7)  { opacity: 0.15; }
.halo:nth-child(10) { opacity: 0.20; }
.halo:nth-child(11) { opacity: 0.20; }
.halo:nth-child(12) { opacity: 0.15; }

.halo:nth-child(5) {
    opacity: 0.40;

    filter:
        drop-shadow(0 0 10px #67f7fc)
        drop-shadow(0 0 30px #67f7fc);
}

.halo:nth-child(8) {
    opacity: 0.10;

    filter:
        drop-shadow(0 0 2px #67f7fc)
        drop-shadow(0 0 8px #67f7fc);
}

.halo:nth-child(9) {
    opacity: 0.15;

    filter:
        hue-rotate(-5deg)
        drop-shadow(0 0 15px #67f7fc);
}


/* =========================
   HALO ROTATION
========================= */

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes spin-rev {
    from { transform: rotate(360deg); }
    to   { transform: rotate(0deg); }
}

.core-active .halo:nth-child(1)  { animation: spin-rev 21s linear infinite; }
.core-active .halo:nth-child(2)  { animation: spin 17s linear infinite; }
.core-active .halo:nth-child(3)  { animation: spin 25s linear infinite; }
.core-active .halo:nth-child(4)  { animation: spin-rev 34s linear infinite; }
.core-active .halo:nth-child(5)  { animation: spin-rev 31s linear infinite; }
.core-active .halo:nth-child(6)  { animation: spin-rev 39s linear infinite; }
.core-active .halo:nth-child(7)  { animation: spin-rev 37s linear infinite; }
.core-active .halo:nth-child(8)  { animation: spin 19s linear infinite; }
.core-active .halo:nth-child(9)  { animation: spin-rev 44s linear infinite; }
.core-active .halo:nth-child(10) { animation: spin 29s linear infinite; }
.core-active .halo:nth-child(11) { animation: spin-rev 50s linear infinite; }
.core-active .halo:nth-child(12) { animation: spin-rev 33s linear infinite; }


/* =========================
   CORE IGNITION
========================= */

.core-ignition .halo {
    animation: ignition 1.5s ease forwards;
}

.core-ignition .halo:nth-child(1)  { animation-delay: 0.45s; }
.core-ignition .halo:nth-child(2)  { animation-delay: 0.4s; }
.core-ignition .halo:nth-child(3)  { animation-delay: 0.35s; }
.core-ignition .halo:nth-child(4)  { animation-delay: 0.3s; }
.core-ignition .halo:nth-child(5)  { animation-delay: 0.25s; }
.core-ignition .halo:nth-child(6)  { animation-delay: 0.2s; }
.core-ignition .halo:nth-child(7)  { animation-delay: 0.15s; }
.core-ignition .halo:nth-child(8)  { animation-delay: 0.1s; }
.core-ignition .halo:nth-child(9)  { animation-delay: 0.08s; }
.core-ignition .halo:nth-child(10) { animation-delay: 0.06s; }
.core-ignition .halo:nth-child(11) { animation-delay: 0.03s; }
.core-ignition .halo:nth-child(12) { animation-delay: 0s; }

@keyframes ignition {

    0% {
        transform: scale(0);
    }

    70% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}


/* =========================
   CORE RETRACTION
========================= */

.core-retraction .halo-container {
    animation: core-collapse 1.9s cubic-bezier(0.7, 0, 0.2, 1) forwards;
}

.core-retraction .halo:nth-child(1)  { animation: pulse-a 1.9s ease forwards; }
.core-retraction .halo:nth-child(2)  { animation: pulse-b 1.9s ease forwards; }
.core-retraction .halo:nth-child(3)  { animation: pulse-c 1.9s ease forwards; }
.core-retraction .halo:nth-child(4)  { animation: pulse-d 1.9s ease forwards; }
.core-retraction .halo:nth-child(5)  { animation: pulse-e 1.9s ease forwards; }
.core-retraction .halo:nth-child(6)  { animation: pulse-f 1.9s ease forwards; }
.core-retraction .halo:nth-child(7)  { animation: pulse-d 1.9s ease forwards; }
.core-retraction .halo:nth-child(8)  { animation: pulse-g 1.9s ease forwards; }
.core-retraction .halo:nth-child(9)  { animation: pulse-h 1.9s ease forwards; }
.core-retraction .halo:nth-child(10) { animation: pulse-g 1.9s ease forwards; }
.core-retraction .halo:nth-child(11) { animation: pulse-h 1.9s ease forwards; }
.core-retraction .halo:nth-child(12) { animation: pulse-g 1.9s ease forwards; }

@keyframes core-collapse {
    0%   { transform: translate(-50%, -50%) scale(1); }
    15%  { transform: translate(-50%, -50%) scale(1.05); }
    100% { transform: translate(-50%, -50%) scale(0); }
}

@keyframes pulse-a {
    0%   { transform: scale(1); }
    20%  { transform: scale(1.4); }
    100% { transform: scale(0); }
}

@keyframes pulse-b {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.5); }
    100% { transform: scale(0); }
}

@keyframes pulse-c {
    0%   { transform: scale(1); }
    15%  { transform: scale(1.3); }
    100% { transform: scale(0); }
}

@keyframes pulse-d {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.15); }
    100% { transform: scale(0); }
}

@keyframes pulse-e {
    0%   { transform: scale(1); }
    55%  { transform: scale(1.2); }
    100% { transform: scale(0); }
}

@keyframes pulse-f {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.1); }
    100% { transform: scale(0); }
}

@keyframes pulse-g {
    0%  { transform: scale(1); }
    30% { transform: scale(1.05); }
    60% { transform: scale(0); }
}

@keyframes pulse-h {
    0%  { transform: scale(1); }
    20% { transform: scale(1.03); }
    70% { transform: scale(0); }
}


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

.home {
    position: absolute;

    top: 5vh;
    left: 36vh;

    z-index: 11;
    pointer-events: auto;

    font-family: 'Orbitron', sans-serif;
    font-size: 4vh;
    letter-spacing: 0.3em;
}

.home,
.home:visited,
.home:hover,
.home:active {
    text-decoration: none;

    color: #018a8f;

    text-shadow:
        0 0 30px #129094
        0 0 20px #67f7fc66;
}

.mobile-break {
    display: inline;
}

.id-btn {
    position: absolute;

    left: 3.2vh;

    width: auto;
    height: 6vh;

    transform: translateY(-50%);

    z-index: 11;
    pointer-events: auto;

    display: inline-block;
}

.id-btn img {
    width: auto;
    height: 100%;

    display: block;
    object-fit: contain;

    transition:
        filter 0.15s ease,
        transform 0.1s ease;
}

.id-btn:hover img {
    filter:
        drop-shadow(0 0 16px #018a8f);
}

.id-btn.pressed img {
    transform: scale(0.90);
}

.about-btn   { top: 46vh; }
.cv-btn      { top: 56.6vh; }
.contact-btn { top: 67.3vh; }

.mobile-nav {
    display: none;
}


/* ==================================================
   MOBILE - GLOBAL
================================================== */

@media (max-width: 1600px) and (pointer: coarse) {

    html,
    body {
        overflow-x: hidden;
    }

    .scene {
        min-height: 100svh;
        height: auto;
    }

    .id-cluster {
        height: 100svh;
        overflow: hidden;
    }

    .scroll-page .id-cluster {
        position: absolute;
    }

    .frame {
        display: none;
    }


    /* =========================
       MOBILE HALO
    ========================= */

    .halo-container {
        top: -9vw;
        left: auto;
        right: -5vw;

        width: 30vw;
        height: 30vw;

        transform: none;

        z-index: 11;
    }

    .halo {
        filter: none;
    }

    .halo:nth-child(1)  { opacity: 1; }
    .halo:nth-child(2)  { opacity: 0.6; }
    .halo:nth-child(3)  { opacity: 0.9; }
    .halo:nth-child(4)  { opacity: 0.4; }
    .halo:nth-child(5)  { opacity: 1; }
    .halo:nth-child(6)  { opacity: 0.6; }
    .halo:nth-child(7)  { opacity: 0.4; }
    .halo:nth-child(8)  { opacity: 0.2; }
    .halo:nth-child(9)  { opacity: 0.3; }
    .halo:nth-child(10) { opacity: 0.3; }
    .halo:nth-child(11) { opacity: 0.5; }
    .halo:nth-child(12) { opacity: 0.2; }


    /* =========================
       MOBILE RETRACTION
    ========================= */

    @keyframes mobile-core-collapse {

        0% {
            transform: scale(1);
        }

        15% {
            transform: scale(1.05);
        }

        100% {
            transform: scale(0);
        }
    }

    .core-retraction .halo-container {
        animation: mobile-core-collapse 1.9s cubic-bezier(0.7, 0, 0.2, 1) forwards;
    }


    /* =========================
       MOBILE HOME
    ========================= */

    .home {
        top: 2.5svh;
        left: 50%;

        transform: translateX(-50%);

        text-align: center;

        font-size: 2.5vh;
        letter-spacing: 0.5em;
        line-height: 1.8em;

        z-index: 11;
    }

    .home,
    .home:visited,
    .home:hover,
    .home:active {
        color: #02bbb3;

        text-shadow:
            0 0 10px #129094,
            0 0 20px #02262766;
    }

    .mobile-break {
        display: block;
    }


    /* =========================
       MOBILE NAVIGATION
    ========================= */

    .id-btn {
        display: none;
    }

    .mobile-nav,
    .nav-core,
    .mobile-dropdown {
        pointer-events: auto;
    }

    .mobile-nav {
        position: absolute;
        display: block;
        z-index: 10;
    }

    .nav-core {
        display: block;

        height: auto;

        cursor: pointer;

        filter:
            drop-shadow(0 0 20px #129094);
    }

    .mobile-dropdown {
        position: absolute;

        top: 12vw;
        left: 0;

        display: flex;
        flex-direction: column;

        opacity: 0;
        pointer-events: none;

        transform: translateY(-1vh);

        transition:
            opacity 0.25s ease,
            transform 0.25s ease;
    }

    .mobile-nav.open .mobile-dropdown {
        opacity: 1;
        pointer-events: auto;

        transform: translateY(0);
    }

    .mobile-id-btn {
        position: relative;

        display: block;
    }

    .mobile-id-btn img {
        display: block;
        object-fit: contain;

        filter:
            drop-shadow(0 0 7px rgba(0, 0, 0, 1))
            drop-shadow(0 0 15px rgba(0, 0, 0, 1));
    }

    .about-btn,
    .cv-btn,
    .contact-btn {
        top: auto;
    }
}


/* ==================================================
   MOBILE - LANDSCAPE
================================================== */

@media (max-width: 1600px)
and (pointer: coarse)
and (orientation: landscape) {

    .home {
        font-size: 3vw;
    }

    .nav-core {
        width: 3vw;
    }

    .mobile-nav {
        top: 8vh;
        left: 6vw;
    }

    .mobile-dropdown {
        top: 6vw;
        left: 0;
        gap: 3vw;
    }

    .mobile-id-btn {
        width: 12vw;
        height: auto;
    }

    .mobile-id-btn img {
        width: 100%;
        height: auto;
    }
}


/* ==================================================
   MOBILE - PORTRAIT
================================================== */

@media (max-width: 1600px)
and (pointer: coarse)
and (orientation: portrait) {

    .nav-core {
        width: 7vw;
    }

    .mobile-nav {
        top: 5vh;
        left: 7vw;
    }

    .mobile-dropdown {
        top: 10vh;
        left: 0;
        gap: 5vh;
    }

    .mobile-id-btn {
        height: 5vh;
        width: auto;
    }

    .mobile-id-btn img {
        height: 100%;
        width: auto;
    }
}