@charset "UTF-8";
@font-face {
    font-family: "Pixel Georgia";
    src: url("../fonts/18959.ttf");
}

@font-face {
    font-family: "Pixel Times";
    src: url("../fonts/18963.ttf");
}

@font-face {
    font-family: "MKMEGADRIVE";
    src: url("../fonts/19247.ttf");
}

/*----------- content ------------

1. DEFAULT
2. PRELOADER
3. MAIN
4. ANIMATION
5. RESPONSIVE

*/

/*===============
    1. DEFAULT
=================*/

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

body {
    font-family: 'Pixel Times';
    color: #fff;
}

a {
    text-decoration: none;
    color: #fff;
}

/*===============
    3. MAIN
=================*/

.overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    z-index: 3;
}

.overlay::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: url(overlay.png);
    z-index: 2;
}

.overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, .5);
    z-index: 1;
}

.video--media {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

.content {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: content-in 1s ease both;
}

@keyframes content-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.content h1 {
    font-size: 58px;
    margin-bottom: 15px;
}

.content .links {
    display: flex;
    align-items: center;
    justify-content: center;
}

.content .links a {
    margin-right: 25px;
}

.content .links img {
    max-width: 56px;
}

.content .links a:hover {
    transform: scale(.9);
}

.content .links a:last-child {
    margin-right: 0;
}

/*==================
    5. RESPONSIVE
====================*/

@media (min-aspect-ratio: 16/9) {
    .video--media {
        height: 300%;
        top: -100%;
    }
}

@media (max-aspect-ratio: 16/9) {
    .video--media {
        width: 300%;
        left: -100%;
    }
}

@supports (object-fit: cover) {
    .video--media {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/*==================
    6. ENHANCEMENTS
====================*/

/* ---- starfield canvas ---- */
#stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* ---- typewriter caret ---- */
.content h1 .caret {
    display: inline-block;
    margin-left: 2px;
    font-weight: 400;
    animation: caret-blink 1s steps(1) infinite;
}

.content h1.typing-done .caret {
    animation: caret-blink 1.1s steps(1) infinite;
}

@keyframes caret-blink {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

/* ---- icon reveal animation ---- */
.content .links a {
    opacity: 0;
    transform: translateY(25px);
    transition: transform .35s ease, opacity .35s ease;
}

.content .links a.reveal {
    opacity: 1;
    transform: translateY(0);
}

.content .links a:hover {
    transform: translateY(0) scale(.9);
}

/* ---- tooltips on social icons ---- */
.content .links a {
    position: relative;
}

.content .links a::after {
    content: attr(data-tip);
    position: absolute;
    bottom: 115%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    background: rgba(0, 0, 0, .75);
    color: #fff;
    font-size: 13px;
    padding: 4px 9px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.content .links a:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ---- konami warp ---- */
body.warp .video--media {
    filter: hue-rotate(200deg) saturate(1.6) brightness(1.15);
    transform: scale(1.06);
    transition: filter 1.2s ease, transform 5s ease;
}

body.warp .content h1 {
    animation: warp-shake .12s steps(2) infinite;
}

@keyframes warp-shake {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(1px, -1px); }
    100% { transform: translate(-1px, 1px); }
}

/* ---- open resume line ---- */
.open-resume {
    display: inline-flex;
    align-items: baseline;
    margin-top: 30px;
    font-family: 'Pixel Times';
    font-size: 23px;
    line-height: 1;
    color: rgba(255, 255, 255, .68);
    text-shadow: 0 2px 8px rgba(0, 0, 0, .7);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .45s ease, transform .45s ease, color .2s ease;
}

.open-resume.reveal {
    opacity: 1;
    transform: translateY(0);
}

.open-resume .prompt {
    margin-right: 10px;
    color: #00BB58;
}

.open-resume .cmd-caret {
    margin-left: 2px;
    animation: caret-blink 1s steps(1) infinite;
}

.open-resume:hover {
    color: #fff;
}

.open-resume:hover .cmd {
    text-decoration: underline;
    text-underline-offset: 5px;
}

/* ---- audio controls (pixel style) ---- */
.audio-controls {
    position: fixed;
    bottom: 22px;
    left: 22px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    background: #14141f;
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 3px #000000, 5px 5px 0 3px rgba(0, 0, 0, .45);
    border-radius: 0;
    font-family: 'Pixel Times';
    image-rendering: pixelated;
    opacity: 0;
    transition: opacity .6s ease;
}

.audio-controls.show {
    opacity: 1;
}

.audio-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .12s steps(2), opacity .2s ease;
}

.audio-btn:hover {
    transform: translateY(-2px);
}

.audio-controls.muted .audio-btn {
    opacity: .4;
}

/* blocky fader track */
.volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 120px;
    height: 14px;
    border: 2px solid #000;
    box-shadow: 0 0 0 2px #fff;
    border-radius: 0;
    outline: none;
    background:
        linear-gradient(to right,
            #ffffff 0, #ffffff var(--vol, 50%),
            #3a3a4a var(--vol, 50%), #3a3a4a 100%);
}

/* square pixel handle */
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 8px;
    height: 22px;
    background: #fff;
    border: 2px solid #000;
    box-shadow: 0 0 0 2px #fff;
    border-radius: 0;
}

.volume-slider::-moz-range-thumb {
    width: 8px;
    height: 22px;
    background: #fff;
    border: 2px solid #000;
    border-radius: 0;
}

.volume-slider::-moz-range-track {
    height: 14px;
    background: transparent;
}

/* ---- custom pixel cursor ---- */
@media (hover: hover) and (pointer: fine) {
    html,
    body {
        cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='30'%20height='34'%20viewBox='0%200%2015%2017'%3E%3Cpath%20d='M1%201L1%2012L4%209L6%2014L8%2013L6%208L10%208Z'%20fill='white'%20stroke='black'%20stroke-width='1'%20stroke-linejoin='miter'%20shape-rendering='crispEdges'/%3E%3C/svg%3E") 2 2, auto;
    }

    a,
    button,
    input,
    .audio-btn,
    .content .links a {
        cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='30'%20height='34'%20viewBox='0%200%2015%2017'%3E%3Cpath%20d='M5%201L5%2010L7%208L9%2013L11%2012L9%208L12%208Z'%20fill='white'%20stroke='black'%20stroke-width='1'%20stroke-linejoin='miter'%20shape-rendering='crispEdges'/%3E%3Crect%20x='3'%20y='2'%20width='2'%20height='2'%20fill='white'/%3E%3C/svg%3E") 6 2, pointer;
    }
}
@media (max-width: 600px) {
    .content h1 {
        font-size: 42px;
    }

    .content .links img {
        max-width: 44px;
    }

    .content .links a {
        margin-right: 18px;
    }

    .open-resume {
        margin-top: 22px;
        font-size: 18px;
    }

    .audio-controls {
        bottom: 16px;
        left: 16px;
        padding: 8px 12px;
    }
}