/* ==========================================================
   JOSUÉ GONZÁLEZ GÓMEZ — PORTFOLIO V2
   Black / red / Poppins / technical HUD
========================================================== */

:root {

    --bg: #080808;
    --panel: #0c0c0c;
    --panel-2: #101010;

    --text: #eeeeee;

    --muted: #8f8f8f;
    --muted-2: #5f5f5f;

    --red: #CE152D;
    --red-bright: #ff1744;

    --border-red: rgba(228, 0, 43, .72);
    --border-white: rgba(255,255,255,.09);

    --ease: cubic-bezier(.16,1,.3,1);
}

/* Ancho del scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 4px;
}

/* Fondo del scrollbar */
::-webkit-scrollbar-track {
  background: rgba(255,255,255,.09);
  border-radius: 0px;
}

/* Barra que se mueve */
::-webkit-scrollbar-thumb {
  background: #630915;
  border-radius: 0px;
}

/* Hover */
::-webkit-scrollbar-thumb:hover {
  background: #CE152D;
}
/* ==========================================================
   ICON FONT (Material Symbols)
========================================================== */

.material-symbols-rounded {

    font-family: 'Material Symbols Rounded';

    font-variation-settings:
        'FILL' 1,
        'wght' 500,
        'GRAD' 0,
        'opsz' 24;

    font-weight: normal;

    font-style: normal;

    line-height: 1;

    letter-spacing: normal;

    text-transform: none;

    display: inline-block;

    white-space: nowrap;

    word-wrap: normal;

    direction: ltr;

    -webkit-font-smoothing: antialiased;
}


/* ==========================================================
   RESET
========================================================== */

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


.text-12 {
    font-size: 12px;
}

.text-14 {
    font-size: 14px;
}

.text-16 {
    font-size: 16px;
}


html {
    scroll-behavior: smooth;
}

/* offset anchors below the sticky header */
[id] {
    scroll-margin-top: 128px;
}


body {

    min-height: 100vh;

    background: var(--bg);

    color: var(--text);

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

    font-size: 14px;

    overflow-x: hidden;
}


body::before {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    opacity: .025;

    background-image:
        linear-gradient(
            rgba(255,255,255,.5) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.5) 1px,
            transparent 1px
        );

    background-size: 40px 40px;

    z-index: -2;
}


body::after {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: -1;
}


body.modal-open {
    overflow: hidden;
}


a {
    color: inherit;
    text-decoration: none;
}


button {
    font: inherit;
}


.site-header,
main,
.site-footer {

    width: min(1180px, calc(100% - 30px));

    margin-inline: auto;
}


/* ==========================================================
   HEADER
========================================================== */

.site-header {

    position: sticky;

    top: 0;

    z-index: 500;

    min-height: 112px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    background: rgba(8,8,8,.82);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border-bottom: 1px solid var(--red);
}


.site-header::before {

    content: "";

    position: absolute;

    left: 0;

    bottom: -2px;

    width: 100%;

    height: 2px;

    background: var(--red-bright);

    animation: lineGlow 12s linear infinite !important;
}


@keyframes lineGlow {

    0% {
        transform: scaleX(0);
        transform-origin: left;
    }

    45% {
        transform: scaleX(1);
        transform-origin: left;
    }

    55% {
        transform: scaleX(1);
        transform-origin: right;
    }

    100% {
        transform: scaleX(0);
        transform-origin: right;
    }
}


/* BRAND */

.brand-link {

    display: flex;

    align-items: center;

    gap: 12px;

    transform: translateY(0);

    transition:
        transform .3s var(--ease),
        opacity .25s ease;
}


.brand-link:hover {

    transform:
        translateY(-2px)
        scale(1.15)
        rotate(-1deg);
}


.brand-link:active {

    transform:
        translateY(1px)
        scale(.98);
}


.brand-link:focus-visible {

    outline: 1px solid var(--red);

    outline-offset: 5px;
}


.brand-mark {

    width: 29px;

    height: 55px;

    display: grid;

    place-items: center;

    background-image:
        url("img/SmallLogo.png");

    background-size:
        29px 55px;

    background-repeat: no-repeat;
}


.brand-copy {

    display: flex;

    flex-direction: column;
}


.brand-copy strong {

    font-size: 19px;

    line-height: 1.2;
}


.brand-copy em {

    color: var(--red);

    font-size: 12px;

    font-style: normal;
}


.brand-copy small {

    color: var(--muted);
}

.gotolink
{
    color: var(--red-bright);
    font-weight: bold;
    text-decoration: underline;
}
/* NAV */

.main-nav {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

    justify-content: center;
}


.nav-link {

    width: auto;

    min-width: 65px;

    height: 20px;

    text-align: center;

    position: relative;

    color: var(--muted);

    font-size: 12px;

    font-weight: 600;

    transition:
        color .25s ease,
        transform .3s var(--ease);
}


.nav-link:hover {

    color: var(--text);

    transform:
        translateY(-2px)
        rotate(-2deg)
        scale(1.18);

    font-size: 13px;
}


.nav-link:active {

    transform:
        translateY(1px)
        scale(.96);
}


.nav-link:focus-visible {

    outline: 2px solid var(--red);

    outline-offset: 5px;
}


.nav-link::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -7px;

    width: 0;

    height: 1px;

    background: var(--red);

    transition:
        width .35s var(--ease);
}


.nav-link:hover::after {
    width: 100%;
}


/* WORK BADGE */

.work-badge {

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 8px 12px;

    background: transparent;

    border: 1px solid var(--red);

    transition:
        transform .3s var(--ease),
        background .25s ease,
        border-color .25s ease;
}


.work-badge:hover {

    transform:
        translateY(-3px) scale(1.025) rotate(1deg);

    background: var(--red);

    border-color: var(--red);
}


.work-badge:hover strong {

    color: #000;
}


.work-badge:hover small {

    color: #fff;
}


.work-badge:active {

    transform:
        translateY(1px);
}


.work-badge:focus-visible {

    outline: 1px solid var(--red);

    outline-offset: 4px;
}


.work-badge strong {

    display: block;

    color: var(--red);

    transition: color .25s ease;
}


.work-badge small {

    display: block;

    color: var(--muted);

    transition: color .25s ease;
}


.status-dot {

    display: inline-block;

    width: 7px;

    height: 7px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #ff4f00;

    box-shadow:
        0 0 10px #ff4f00;

    animation:
        statusPulse 1.25s ease-in-out infinite !important;
}


@keyframes statusPulse {

    0%,
    100% {

        opacity: .85;

        transform: scale(1);
    }

    50% {

        opacity: 1;

        transform: scale(1.25);
    }
}


/* ==========================================================
   SECTIONS
========================================================== */

.section {

    position: relative;

    padding: 55px 28px;

    border-bottom:
        1px solid var(--border-red);

    overflow: hidden;
}


.section::before,
.section::after {

    content: "";

    position: absolute;

    top: -4px;

    width: 8px;

    height: 8px;

    background: var(--red);

    border-radius: 50%;

    box-shadow:
        0 0 8px rgba(228,0,43,.4);
}


.section::before {
    left: -4px;
}


.section::after {
    right: -4px;
}


.section-heading {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 20px;
}


.section-heading h2 {

    font-size: 16px;

    font-weight: 700;

    letter-spacing: .5px;
}


.section-icon {

    color: var(--red);

    font-size: 14px;
}


.section-description {

    max-width: 700px;

    margin-bottom: 28px;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.7;
}


/* ==========================================================
   SCROLL REVEAL
========================================================== */

.reveal-section {

    opacity: 0;

    transform:
        translateY(45px);

    transition:
        opacity .8s ease,
        transform 1s var(--ease);
}


.reveal-section.is-visible {

    opacity: 1;

    transform:
        translateY(0);
}


/* ==========================================================
   HERO ENTRANCE ANIMATION
==========================================================

   Plays once, automatically, when the page first loads
   (not scroll-triggered like .reveal-section above).

   To tweak it, just edit the two variables below:

   --hero-in-duration  how long each element takes to fade/slide in
   --hero-in-stagger    delay added between each element in line

   With the values below the whole sequence takes about 2s
   (duration 1s + 6 elements * .16s stagger).

   Want it slower / faster? Just change the numbers.
   Want a different motion? Edit the heroIn keyframes.
========================================================== */

:root {

    --hero-in-duration: 1s;

    --hero-in-stagger: .16s;
}


.hero-in {

    opacity: 0;

    transform: translateY(24px);

    animation:
        heroIn var(--hero-in-duration) var(--ease)
        forwards !important;
}


.hero-in-1 { animation-delay: calc(var(--hero-in-stagger) * 1) !important; }
.hero-in-2 { animation-delay: calc(var(--hero-in-stagger) * 2) !important; }
.hero-in-3 { animation-delay: calc(var(--hero-in-stagger) * 3) !important; }
.hero-in-4 { animation-delay: calc(var(--hero-in-stagger) * 4) !important; }
.hero-in-5 { animation-delay: calc(var(--hero-in-stagger) * 5) !important; }
.hero-in-6 { animation-delay: calc(var(--hero-in-stagger) * 6) !important; }


@keyframes heroIn {

    from {

        opacity: 0;

        transform: translateY(24px);
    }

    to {

        opacity: 1;

        transform: translateY(0);
    }
}


/* ==========================================================
   INTRO
========================================================== */

.intro-section {

    padding-top: 65px;
}


.intro-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.7fr)
        minmax(280px, .8fr);

    gap: 55px;

    align-items: center;
}


.eyebrow {

    margin-bottom: 14px;

    color: var(--red);

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 1.8px;
}


.intro-copy h1 {

    max-width: 800px;

    margin-bottom: 20px;

    font-size:
        clamp(38px, 6vw, 70px);

    line-height: .98;

    letter-spacing: -3px;
}


.intro-copy h1 span,
.contact-copy h2 span {

    color: var(--red);
}


.intro-text {

    max-width: 760px;

    color: #b0b0b0;

    font-size: 14px;

    line-height: 1.8;
}


.intro-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 28px;
}


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

.button {
    margin-top: 12px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 39px;

    padding: 9px 16px;

    border: 1px solid var(--red);

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition:
        transform .25s var(--ease),
        background .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}


.button-primary {

    background: var(--red);

    color: #fff;
}


.button-primary:hover {

    transform:
        translateY(-8px)
        rotate(-2deg)
        scale(1.025);

    background:
        var(--red-bright);

    color: #000;

    font-size: 16px;
}


.button-primary:active {

    transform:
        translateY(1px)
        scale(.96);
}


.button-primary:focus-visible {

    outline: 1px solid #fff;

    outline-offset: 4px;
}


.button-secondary {

    background: transparent;

    color: var(--text);
}


.button-secondary:hover {

    transform:
        translateY(-8px)
        rotate(2deg)
        scale(1.025);

    color: #CE152D;

    font-size: 16px;
}


.button-secondary:active {

    transform:
        translateY(1px)
        scale(.96);
}


.button-secondary:focus-visible {

    outline: 1px solid var(--red);

    outline-offset: 4px;
}


/* ==========================================================
   INTRO PANEL
========================================================== */

.intro-panel {

    position: relative;

    padding: 25px;

    background: var(--panel);

    border: 1px solid var(--border-white);
}


.intro-panel::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 1px;

    background: var(--red);

    animation:
        panelScan 5s linear infinite !important;
}


@keyframes panelScan {

    0% {

        transform: scaleX(0);

        transform-origin: left;
    }

    45% {

        transform: scaleX(1);

        transform-origin: left;
    }

    55% {

        transform: scaleX(1);

        transform-origin: right;
    }

    100% {

        transform: scaleX(0);

        transform-origin: right;
    }
}


.panel-label {

    display: block;

    margin-bottom: 12px;

    color: var(--muted);

    font-size: 12px;

    letter-spacing: 1.5px;
}


.status-large {

    display: flex;

    align-items: center;

    gap: 9px;

    color: var(--red);

    font-size: 19px;

    font-weight: 700;

    margin-bottom: 12px;
}


.intro-panel > p {

    color: var(--muted);

    font-size: 14px;

    line-height: 1.7;
}


.mini-stats {

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 1px;

    margin-top: 25px;

    background:
        var(--border-red);
}


.mini-stats div {

    padding: 10px 7px;

    background:
        var(--panel);
}


.mini-stats strong {

    display: block;

    color:
        var(--text);
}


.mini-stats small {

    color:
        var(--red);
}


/* ==========================================================
   PROFESSIONAL EXPERIENCE
========================================================== */

.experience-list {

    display: flex;

    flex-direction: column;

    gap: 0;
}


.experience-item {

    position: relative;

    display: grid;

    grid-template-columns:
        55px minmax(0,1fr);

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

    transition:
        border-color .3s ease;
}


.experience-item:last-child {

    border-bottom:
        1px solid var(--border-white);
}


.experience-item:hover {

    border-color:
        var(--border-red);
}


.experience-marker {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    gap: 10px;

    padding-top: 25px;

    border-right:
        1px solid var(--border-white);

    transition:
        border-color .3s ease;
}


/*
    Optional company logo.

    Drop an image at images/logos/<slug>.png
    matching the src already set on the <img>
    and it will appear automatically above the
    01 / 02 / 03 marker number — no code edits
    needed. If the file is missing, the inline
    onerror="this.remove()" quietly removes the
    tag so the layout looks exactly as it does
    today (number only).
*/

.experience-logo {

    width: 30px;

    height: 30px;

    object-fit: contain;

    border-radius: 4px;
}


.experience-item:hover
.experience-marker {

    border-color:
        var(--red);
}


.experience-marker::after {

    content: "";

    position: absolute;

    top: 55px;

    right: -3px;

    width: 5px;

    height: 5px;

    background:
        var(--red);

    border-radius: 50%;

    box-shadow:
        0 0 10px
        rgba(228,0,43,.7);

    transition:
        transform .4s var(--ease);
}


.experience-item:hover
.experience-marker::after {

    transform:
        scale(1.8);
}


.experience-marker span {

    color:
        var(--red);

    font-size:
        11px;

    font-weight:
        600;
}


.experience-main {

    padding:
        28px 5px 30px 25px;

    transition:
        transform .4s var(--ease);
}


.experience-item:hover
.experience-main {

    transform:
        translateX(5px);
}


.experience-heading {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 20px;

    margin-bottom: 20px;
}

/* Keep company, role and employment type aligned to the left. */
.experience-heading > div {

    flex:
        1 1 auto;

    min-width:
        0;

    text-align:
        left;
}



.experience-role-icon {

    flex: 0 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    border: 1px solid var(--border-white);

    background: var(--panel-2);

    color: var(--red);

    font-size: 20px;

    transition:
        border-color .3s ease,
        transform .3s var(--ease);
}


.experience-item:hover
.experience-role-icon {

    border-color: var(--border-red);

    transform: rotate(-4deg);
}


.experience-company {

    display: block;

    margin-bottom: 4px;

    color:
        var(--red);

    font-size:
        12px;

    font-weight:
        600;

    letter-spacing:
        1.6px;
}


.experience-heading h3 {

    font-size:
        23px;

    line-height:
        1.2;

    margin-bottom:
        4px;
}


.experience-type {

    color:
        var(--muted);

    font-size:
        12px;
}


.experience-date {

    flex:
        0 0 auto;

    color:
        var(--muted);

    font-size:
        12px;

    white-space:
        nowrap;
}


.experience-description {

    max-width:
        850px;

    margin-bottom:
        20px;
}


.experience-description p {

    position:
        relative;

    padding-left:
        18px;

    margin-bottom:
        8px;

    color:
        #b0b0b0;

    font-size:
        14px;

    line-height:
        1.75;
}


.experience-description p::before {

    content:
        "—";

    position:
        absolute;

    left:
        0;

    color:
        var(--red);
}


.experience-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;
}


.experience-tags span {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        24px;

    padding:
        4px 8px;

    border:
        1px solid var(--border-white);

    color:
        var(--muted);

    font-size:
        11px;

    transition:
        transform .25s var(--ease),
        border-color .25s ease,
        color .25s ease;
}


.experience-tags span:hover {

    transform:
        translateY(-2px)
        rotate(-1deg);

    border-color:
        var(--red);

    color:
        var(--text);
}


/* ==========================================================
   CORE SKILLS
========================================================== */

.skills-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap:
        12px;
}


.skill-panel {

    position:
        relative;

    padding:
        22px;

    background:
        var(--panel);

    border:
        1px solid var(--border-white);

    overflow:
        hidden;

    transition:
        transform .35s var(--ease),
        border-color .3s ease,
        background .3s ease;
}


.skill-panel::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        0;

    height:
        1px;

    background:
        var(--red-bright);

    transition:
        width .5s var(--ease);
}


.skill-panel:hover {

    transform:
        translateY(-4px)
        rotate(-.4deg);

    border-color:
        var(--border-red);

    background:
        var(--panel-2);
}


.skill-panel:hover::before {

    width:
        100%;
}


.skill-panel:active {

    transform:
        translateY(-1px)
        scale(.99);
}


.skill-panel:focus-visible {

    outline:
        1px solid var(--red);

    outline-offset:
        4px;
}


.skill-panel-header {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        18px;
}


.skill-icon {

    flex: 0 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 30px;

    height: 30px;

    border: 1px solid var(--border-white);

    background: var(--panel-2);

    color: var(--red);

    font-size: 17px;

    transition:
        border-color .3s ease,
        transform .3s var(--ease);
}


.skill-panel:hover
.skill-icon {

    border-color: var(--border-red);

    transform: rotate(-6deg) scale(1.05);
}


.skill-number {

    color:
        var(--red);

    font-size:
        11px;

    font-weight:
        600;

    letter-spacing:
        1px;
}


.skill-panel h3 {

    font-size:
        15px;

    font-weight:
        600;

    letter-spacing:
        .5px;
}


.skill-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;
}


.skill-tag {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        27px;

    padding:
        5px 9px;

    border:
        1px solid var(--border-white);

    background:
        transparent;

    color:
        var(--muted);

    font-family:
        inherit;

    font-size:
        11px;

    font-weight:
        500;

    appearance:
        none;

    -webkit-appearance:
        none;

    cursor:
        pointer;

    transition:
        transform .25s var(--ease),
        background .25s ease,
        color .25s ease,
        border-color .25s ease;
}


.skill-tag:hover {

    transform:
        translateY(-3px)
        scale(1.05)
        rotate(-1deg);

    border-color:
        var(--red);

    background:
        rgba(228,0,43,.08);

    color:
        var(--text);
}


.skill-tag:active {

    transform:
        translateY(0)
        scale(.96);
}


/*
    XP POP FLAVOR ANIMATION

    Purely cosmetic: clicking a skill tag spawns
    a small "+XP" element (created in script.js)
    that floats up and fades out, then removes
    itself. No score is stored anywhere.
*/

.skill-xp-pop {

    position:
        absolute;

    left:
        50%;

    bottom:
        100%;

    transform:
        translateX(-50%);

    padding:
        2px 7px;

    border:
        1px solid var(--border-red);

    background:
        var(--panel-2);

    color:
        var(--red-bright);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .4px;

    white-space:
        nowrap;

    pointer-events:
        none;

    z-index:
        5;

    animation:
        skillXpPop .9s var(--ease)
        forwards !important;
}


@keyframes skillXpPop {

    0% {

        opacity:
            0;

        transform:
            translateX(-50%)
            translateY(0)
            scale(.8);
    }

    18% {

        opacity:
            1;

        transform:
            translateX(-50%)
            translateY(-8px)
            scale(1.05);
    }

    100% {

        opacity:
            0;

        transform:
            translateX(-50%)
            translateY(-34px)
            scale(1);
    }
}


/* ==========================================================
   PROJECTS
========================================================== */

.projects-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        20px;
}


.project-card {

    display:
        grid;

    grid-template-columns:
        minmax(280px,.9fr)
        minmax(0,1.1fr);

    background:
        var(--panel);

    border:
        1px solid var(--border-white);

    transition:
        transform .4s var(--ease),
        border-color .3s ease;
}


.project-card:hover {

    transform:
        translateY(-4px)
        scale(1.05)
        rotate(-0.25deg);

    border-color:
        var(--border-red);
}


.project-media {

    position:
        relative;

    min-height:
        360px;

    overflow:
        hidden;

    background:
        #151515;
}


.project-media img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .7s var(--ease),
        filter .5s ease;
}


.project-card:hover
.project-media img {

    transform:
        scale(1.035);
}


.project-index {

    position:
        absolute;

    top:
        15px;

    left:
        15px;

    width:
        30px;

    height:
        30px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid var(--red);

    background:
        rgba(0,0,0,.8);

    color:
        var(--red);

    font-size:
        12px;
}


.project-details {

    padding:
        25px;
}


.project-title-row {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;

    margin-bottom:
        12px;
}


.project-kicker {

    color:
        var(--red);

    font-size:
        12px;

    letter-spacing:
        1.4px;
}


.project-title-row h3 {

    margin-top:
        3px;

    font-size:
        22px;
}


.project-status {

    color:
        var(--muted);

    font-size:
        12px;

    white-space:
        nowrap;
}


.project-description {

    max-width:
        600px;

    margin-bottom:
        15px;

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.7;
}


.tag-list {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;

    margin-bottom:
        20px;
}


.tag {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        24px;

    padding:
        4px 8px;

    border:
        1px solid var(--border-white);

    background:
        transparent;

    color:
        var(--muted);

    font-size:
        12px;
}


.project-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;
}


.button-project {

    background:
        transparent;

    color:
        var(--text);
}


.button-project:hover {

    transform:
        translateX(5px)
        scale(1.025)
        rotate(1deg);

    font-size:
        16px;

    background:
        var(--red);
    color: #000;
}


.button-project:active {

    transform:
        translateX(2px)
        scale(.96);
}


.button-project:focus-visible {

    outline:
        1px solid #fff;

    outline-offset:
        4px;
}


/* ==========================================================
   HOBBIES
========================================================== */

.hobbies-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        15px;
}


.hobby-card {

    width:
        100%;

    padding:
        0;

    text-align:
        left;

    color:
        inherit;

    background:
        var(--panel);

    border:
        1px solid var(--border-white);

    cursor:
        pointer;

    transition:
        transform .4s var(--ease),
        border-color .3s ease;
}


.hobby-card:hover {

    transform:
        translateY(-5px)
        scale(1.025)
        rotate(-1deg);

    border-color:
        var(--red);
}


.hobby-card:active {

    transform:
        translateY(-1px)
        scale(.99);
}


.hobby-card:focus-visible {

    outline:
        1px solid var(--red);

    outline-offset:
        4px;
}


.hobby-image {

    height:
        220px;

    overflow:
        hidden;
}


.hobby-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .6s var(--ease);
}


.hobby-card:hover
.hobby-image img {

    transform:
        scale(1.05);
}


.hobby-content {

    padding:
        18px;
}


.hobby-number {

    color:
        var(--red);

    font-size:
        12px;

    letter-spacing:
        1.3px;
}


.hobby-content h3 {

    margin:
        5px 0;

    font-size:
        18px;
}


.hobby-content p {

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.7;
}


.card-more {

    display:
        block;

    margin-top:
        15px;

    color:
        var(--red);

    font-size:
        12px;

    font-weight:
        600;

    letter-spacing:
        .5px;
}


/* ==========================================================
   CONTACT
========================================================== */

.contact-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        70px;

    align-items:
        center;
}


.contact-copy h2 {

    max-width:
        600px;

    margin-bottom:
        18px;

    font-size:
        clamp(38px,5vw,65px);

    line-height:
        1;

    letter-spacing:
        -2px;
}


.contact-copy p {

    max-width:
        500px;

    margin-bottom:
        25px;

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.8;
}


.contact-list {

    display:
        flex;

    flex-direction:
        column;
}


.contact-item {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        13px 0;

    border-bottom:
        1px solid var(--border-white);

    transition:
        transform .3s var(--ease),
        padding-left .3s var(--ease),
        border-color .25s ease;
}


.contact-item:hover {

    transform:
        translateX(6px)
        scale(1.1)
        rotate(.5deg);

    padding-left:
        4px;

    border-color:
        var(--red);
}


.contact-item:active {

    transform:
        translateX(2px)
        scale(.99);
}


.contact-item:focus-visible {

    outline:
        1px solid var(--red);

    outline-offset:
        4px;
}


.contact-icon {

    width:
        32px;

    height:
        32px;

    flex:
        0 0 auto;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid var(--red);

    color:
        var(--red);

    font-size:
        12px;
}


.contact-item small {

    display:
        block;

    color:
        var(--red);
}


.light-tittle {

    font-size:
        12px;

    color:
        #CE152D;
}


.availability-footer {

    display:
        none;

    align-items:
        center;

    gap:
        9px;

    margin-top:
        40px;

    padding:
        14px 16px;

    border:
        1px solid var(--red);

    background:
        rgba(228,0,43,.025);

    transition:
        transform .3s var(--ease);
}


.availability-footer:hover {

    transform:
        scale(1.05)
        translateY(-2px)
        rotate(-.5deg);
}


.availability-footer strong {

    color:
        var(--red);
}


.availability-footer > span:last-child {

    color:
        var(--muted);

    font-size:
        14px;
}


/* ==========================================================
   MODAL SYSTEM
========================================================== */

.modal {

    position:
        fixed;

    inset:
        0;

    z-index:
        1000;

    display:
        grid;

    place-items:
        center;

    padding:
        25px;

    visibility:
        hidden;

    pointer-events:
        none;
}


.modal.is-open {

    visibility:
        visible;

    pointer-events:
        auto;
}


.modal-backdrop {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(0,0,0,.86);

    backdrop-filter:
        blur(5px);

    opacity:
        0;
}


.modal.is-open
.modal-backdrop {

    animation:
        overlayFadeIn .3s ease forwards !important;
}


.modal.is-closing
.modal-backdrop {

    animation:
        overlayFadeOut .3s ease forwards !important;
}


@keyframes overlayFadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes overlayFadeOut {

    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}


.modal-panel {

    position:
        relative;

    z-index:
        1;

    width:
        min(1000px, 100%);

    max-height:
        min(900px, calc(100vh - 50px));

    overflow-y:
        auto;

    background:
        var(--panel);

    border:
        1px solid var(--red);

    box-shadow:
        0 30px 100px rgba(0,0,0,.65);

    opacity:
        0;

    transform:
        scale(.5);
}


.modal.is-open
.modal-panel {

    animation:
        panelBounceIn .35s cubic-bezier(.22,1,.36,1)
        forwards !important;
}


.modal.is-closing
.modal-panel {

    animation:
        panelScaleOut .25s ease-in
        forwards !important;
}


@keyframes panelBounceIn {

    0% {

        opacity:
            0;

        transform:
            translateY(40px)
            scale(.9)
            rotate(-1deg);
    }

    55% {

        opacity:
            1;

        transform:
            translateY(-6px)
            scale(1.025)
            rotate(0.5deg);
    }

    75% {

        transform:
            translateY(2px)
            scale(.99)
            rotate(-0.5deg);
    }

    100% {

        opacity:
            1;

        transform:
            translateY(0)
            scale(1)
            rotate(0deg);
    }
}


@keyframes panelScaleOut {

    from {

        opacity:
            1;

        transform:
            scale(1)
            rotate(0.25deg);
    }

    to {

        opacity:
            0;

        transform:
            scale(.85)
            rotate(0deg);
    }
}


.modal-close {

    position:
        sticky;

    top:
        15px;

    float:
        right;

    z-index:
        5;

    margin:
        15px 15px -45px 0;

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid var(--red);

    background:
        rgba(0,0,0,.9);

    color:
        var(--text);

    cursor:
        pointer;

    font-size:
        20px;

    line-height:
        1;

    transition:
        transform .25s var(--ease),
        background .25s ease,
        color .25s ease;
}


.modal-close:hover {
    color: #000;

    transform:
        rotate(90deg);

    background:
        var(--red);
}


.modal-close:active {

    transform:
        rotate(90deg)
        scale(.9);
}


.modal-close:focus-visible {

    outline:
        1px solid #fff;

    outline-offset:
        4px;
}


.modal-header {

    padding:
        40px 40px 25px;

    border-bottom:
        1px solid var(--border-white);
}


.modal-header h2 {

    margin-bottom:
        7px;

    font-size:
        clamp(28px,4vw,48px);

    line-height:
        1;

    letter-spacing:
        -1px;
}


.modal-header p {

    color:
        var(--muted);

    font-size:
        14px;
}


.modal-content {

    padding:
        25px 40px 45px;
}


.modal-hero {

    width:
        100%;

    aspect-ratio:
        16/7;

    overflow:
        hidden;

    margin-bottom:
        30px;

    background:
        #111;

    border:
        1px solid var(--border-white);
}


.modal-hero img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.modal-section {

    margin:
        28px 0;
}


.modal-label {

    display:
        block;

    margin-bottom:
        9px;

    color:
        var(--red);

    font-size:
        12px;

    font-weight:
        600;

    letter-spacing:
        1.5px;
}


.modal-section p,
.modal-columns li,
.content-block--text p {

    color:
        #b0b0b0;

    font-size:
        14px;

    line-height:
        1.8;
}


.modal-columns {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        30px;

    padding:
        20px 0;

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

    border-bottom:
        1px solid var(--border-white);
}


.modal-columns ul {

    padding-left:
        15px;
}


/* ==========================================================
   MODULAR HOBBY CONTENT
========================================================== */

.content-block {

    margin-bottom:
        25px;
}


.content-block:last-child {

    margin-bottom:
        0;
}


.content-block--image {

    aspect-ratio:
        16/9;

    overflow:
        hidden;

    background:
        #111;

    border:
        1px solid var(--border-white);
}


.content-block--image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    display:
        block;
}


.content-block--text {

    padding:
        4px 0;
}


.modal-gallery {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        8px;
}


.modal-gallery img {

    width:
        100%;

    aspect-ratio:
        16/9;

    object-fit:
        cover;

    display:
        block;

    border:
        1px solid var(--border-white);

    transition:
        transform .45s var(--ease),
        border-color .3s ease;

    margin-top: 12px;
}


.modal-gallery img:hover {

    transform:
        scale(1.025);

    border-color:
        var(--red);
}


.content-block--video .modal-video {

    margin-top:
        0;
}


.modal-video {

    width:
        100%;

    aspect-ratio:
        16/9;

    margin-top:
        30px;

    background:
        #000;

    border:
        1px solid var(--border-white);
}


.modal-video iframe {

    width:
        100%;

    height:
        100%;

    display:
        block;

    border:
        0;
}


.modal-panel-small {

    width:
        min(700px, 100%);
}


.modal-panel-small .modal-hero {

    aspect-ratio:
        16/9;
}


/* ==========================================================
   FOOTER
========================================================== */

.site-footer {

    min-height:
        70px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    color:
        var(--muted-2);

    font-size:
        12px;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1100px) {

    .main-nav {
        gap: 7px;
    }

    .nav-link {
        min-width: 55px;
        font-size: 11px;
    }

}


@media (max-width: 900px) {

    .main-nav {
        display:
            none;
    }


    .intro-grid,
    .contact-grid {

        grid-template-columns:
            1fr;
    }


    .project-card {

        grid-template-columns:
            1fr;
    }


    .project-media {

        min-height:
            300px;
    }


    .hobbies-grid {

        grid-template-columns:
            1fr 1fr;
    }


    .contact-grid {

        gap:
            40px;
    }


    .skills-grid {

        grid-template-columns:
            1fr;
    }

}


@media (max-width: 600px) {

    .brand-copy strong {

        font-size:
            16px;
    }


    .brand-copy small {

        font-size:
            12px;
    }


    .work-badge {

        display:
            none;
    }


    .section {

        padding:
            40px 18px;
    }


    .intro-copy h1 {

        letter-spacing:
            -1.5px;
    }


    .hobbies-grid {

        grid-template-columns:
            1fr;
    }


    .project-title-row {

        flex-direction:
            column;
    }


    .project-status {

        align-self:
            flex-start;
    }


    .experience-item {

        grid-template-columns:
            38px minmax(0,1fr);
    }


    .experience-logo {

        width: 22px;

        height: 22px;
    }


    .experience-role-icon {

        width: 32px;

        height: 32px;

        font-size: 16px;
    }


    .experience-main {

        padding:
            22px 0 25px 18px;
    }


    .experience-heading {

        flex-direction:
            column;

        gap:
            8px;
    }


    .experience-heading h3 {

        font-size:
            20px;
    }


    .experience-date {

        font-size:
            11px;
    }


    .modal {

        padding:
            10px;
    }


    .modal-panel {

        max-height:
            calc(100vh - 20px);
    }


    .modal-header {

        padding:
            35px 22px 20px;
    }


    .modal-content {

        padding:
            20px 22px 35px;
    }


    .modal-columns {

        grid-template-columns:
            1fr;
    }


    .modal-gallery {

        grid-template-columns:
            1fr 1fr;
    }


    .availability-footer {

        display:
            flex;

        align-items:
            flex-start;

        flex-wrap:
            wrap;
    }


    .site-footer {

        padding:
            20px 0;

        flex-direction:
            column;

        align-items:
            flex-start;

        justify-content:
            center;

        gap:
            5px;
    }

}


@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            .01ms !important;
    }

}