/*==================================================
  PORTFOLIO HERO
==================================================*/

.portfolio-hero{

    position:relative;

    min-height:850px;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding:130px 0 90px;

    background:
        radial-gradient(
            circle at 78% 50%,
            rgba(0,217,255,.08),
            transparent 38%
        );

}


/*==================================================
  HERO GRID
==================================================*/

.portfolio-hero-grid{

    width:100%;

    max-width:var(--container-width);

    margin:0 auto;

    padding:0 30px;

    display:grid;

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

    align-items:center;

    gap:30px;

}


/*==================================================
  HERO CONTENT
==================================================*/

.portfolio-hero-content{

    position:relative;

    z-index:10;

    width:100%;

    max-width:650px;

}


/*==================================================
  HERO TITLE
==================================================*/

.portfolio-hero-title{

    margin:26px 0 24px;

    font-family:var(--heading-font);

    font-size:clamp(3rem,5vw,5.2rem);

    line-height:1.05;

    letter-spacing:-2px;

    font-weight:var(--fw-black);

}


.portfolio-hero-title span{

    display:block;

    margin-top:8px;

}


/*==================================================
  HERO TEXT
==================================================*/

.portfolio-hero-text{

    max-width:610px;

    margin:0;

    color:var(--text-light);

    font-size:1.05rem;

    line-height:1.85;

}


/*==================================================
  HERO ACTIONS
==================================================*/

.portfolio-hero-actions{

    display:flex;

    align-items:center;

    gap:16px;

    margin-top:36px;

    flex-wrap:wrap;

}


/*==================================================
  HERO STATUS
==================================================*/

.portfolio-hero-status{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:32px;

    color:var(--text-muted);

    font-size:.72rem;

    letter-spacing:1px;

    text-transform:uppercase;

}


.portfolio-status-dot{

    flex-shrink:0;

    width:7px;

    height:7px;

    border-radius:50%;

    background:var(--accent);

    box-shadow:var(--glow-success);

    animation:
        portfolioStatusPulse
        2s
        ease-in-out
        infinite;

}


@keyframes portfolioStatusPulse{

    0%,
    100%{

        opacity:.4;

        transform:scale(.8);

    }

    50%{

        opacity:1;

        transform:scale(1);

    }

}


/*==================================================
  HERO VISUAL
==================================================*/

.portfolio-hero-visual{

    position:relative;

    width:min(700px, 100%);

    height:700px;

    max-width:100%;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    perspective:1200px;

}


/*==================================================
  AMBIENT GLOW
==================================================*/

.portfolio-orbit-glow{

    position:absolute;

    width:78%;

    height:78%;

    left:50%;

    top:50%;

    transform:
        translateX(-50%) scale(.9);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            var(--glass-strong),
            transparent 68%
        );

    filter:blur(35px);

    opacity:.75;

    pointer-events:none;

    animation:
        portfolioGlowPulse
        5s
        ease-in-out
        infinite;

}


@keyframes portfolioGlowPulse{

    0%,
    100%{

        transform:
            translate(-50%,-50%)
            scale(.94);

        opacity:.6;

    }

    50%{

        transform:
            translate(-50%,-50%)
            scale(1.08);

        opacity:1;

    }

}


/*==================================================
  MAIN SVG
==================================================*/

.portfolio-core-svg{

    position:relative;

    display:block;

    width:100%;

    height:auto;

    max-width:700px;

    aspect-ratio:1 / 1;

    overflow:visible;

    z-index:2;

}


/*==================================================
  SVG GRID
==================================================*/

.portfolio-svg-grid{

    fill:none;

    stroke:var(--border);

    stroke-width:1;

    opacity:.4;

}


/*==================================================
  ORBITS
==================================================*/

.portfolio-orbit{

    fill:none;

    stroke:var(--border-primary);

    stroke-width:1;

    transform-box:view-box;

    transform-origin:350px 350px;

}


.portfolio-orbit-one{

    animation:
        portfolioOrbitOne
        18s
        linear
        infinite;

}


.portfolio-orbit-two{

    animation:
        portfolioOrbitTwo
        13s
        linear
        infinite
        reverse;

}


.portfolio-orbit-three{

    animation:
        portfolioOrbitThree
        9s
        linear
        infinite;

}


@keyframes portfolioOrbitOne{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


@keyframes portfolioOrbitTwo{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


@keyframes portfolioOrbitThree{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/*==================================================
  ORBIT DOTS
==================================================*/

.portfolio-orbit-dot{

    fill:var(--primary);

    filter:
        drop-shadow(
            0 0 8px
            var(--primary)
        );

}


/*==================================================
  PROJECT CONNECTIONS
==================================================*/

.portfolio-connections{

    fill:none;

    stroke:var(--border-primary);

    stroke-width:1.5;

    stroke-dasharray:6 9;

    opacity:.65;

    animation:
        portfolioConnectionPulse
        4s
        ease-in-out
        infinite;

}


@keyframes portfolioConnectionPulse{

    0%,
    100%{

        opacity:.2;

    }

    50%{

        opacity:.7;

    }

}


/*==================================================
  DATA PULSES
==================================================*/

.portfolio-data-pulse{

    fill:var(--primary-light);

    transform-box:fill-box;

    transform-origin:center;

    filter:
        drop-shadow(
            0 0 8px
            var(--primary-light)
        );

    animation:
        portfolioDataPulse
        2.5s
        ease-in-out
        infinite;

}


/*==================================================
  DATA PULSE DELAYS
==================================================*/

.portfolio-data-pulse.pulse-two{

    animation-delay:.5s;

}


.portfolio-data-pulse.pulse-three{

    animation-delay:1s;

}


.portfolio-data-pulse.pulse-four{

    animation-delay:1.5s;

}


@keyframes portfolioDataPulse{

    0%,
    100%{

        opacity:.25;

        transform:scale(.7);

    }

    50%{

        opacity:1;

        transform:scale(1.5);

    }

}


/*==================================================
  PROJECT NODES
==================================================*/

.portfolio-project-node{

    transform-box:view-box;

    transform-origin:center;

    transform:
        translate(
            var(--node-x, 0px),
            var(--node-y, 0px)
        );

}


/*==================================================
  NODE RINGS
==================================================*/

.portfolio-node-ring{

    fill:var(--glass);

    stroke:var(--border-primary);

    stroke-width:1.5;

    filter:
        drop-shadow(
            0 0 10px
            var(--primary)
        );

    transform-box:fill-box;

    transform-origin:center;

    animation:
        portfolioNodePulse
        3s
        ease-in-out
        infinite;

}


/*==================================================
  NODE CORE
==================================================*/

.portfolio-node-core{

    fill:var(--primary-light);

    filter:
        drop-shadow(
            0 0 8px
            var(--primary-light)
        );

}


/*==================================================
  NODE ANIMATION DELAYS
==================================================*/
/*==================================================
  NODE ANIMATION DELAYS
==================================================*/

.portfolio-project-node.node-two .portfolio-node-ring{

    animation-delay:.7s;

}


.portfolio-project-node.node-three .portfolio-node-ring{

    animation-delay:1.4s;

}


.portfolio-project-node.node-four .portfolio-node-ring{

    animation-delay:2.1s;

}


@keyframes portfolioNodePulse{

    0%,
    100%{

        opacity:.5;

        transform:scale(.94);

    }

    50%{

        opacity:1;

        transform:scale(1.06);

    }

}


/*==================================================
  CENTRAL CORE
==================================================*/

.portfolio-central-core{

    transform-box:view-box;

    transform-origin:350px 350px;

    animation:
        portfolioCoreFloat
        5s
        ease-in-out
        infinite;

}


@keyframes portfolioCoreFloat{

    0%,
    100%{

        transform:
            translateY(0)
            scale(1);

    }

    50%{

        transform:
            translateY(-6px)
            scale(1.025);

    }

}


/*==================================================
  CORE AURA
==================================================*/

.portfolio-central-core .core-aura{

    fill:var(--glass-strong);

    opacity:.4;

    filter:
        drop-shadow(
            0 0 35px
            var(--primary)
        );

}


/*==================================================
  CORE OUTER RING
==================================================*/

.portfolio-central-core .core-ring-outer{

    fill:var(--glass);

    stroke:var(--primary);

    stroke-width:1.5;

    stroke-dasharray:12 8;

    filter:
        drop-shadow(
            0 0 12px
            var(--primary)
        );

    transform-box:view-box;

    transform-origin:350px 350px;

    animation:
        portfolioCoreRotate
        14s
        linear
        infinite;

}


@keyframes portfolioCoreRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/*==================================================
  CORE INNER RING
==================================================*/

.portfolio-central-core .core-ring-inner{

    fill:var(--glass);

    stroke:var(--primary-light);

    stroke-width:1.5;

    opacity:.8;

    animation:
        portfolioCorePulse
        2.5s
        ease-in-out
        infinite;

}


@keyframes portfolioCorePulse{

    0%,
    100%{

        opacity:.5;

    }

    50%{

        opacity:1;

    }

}


/*==================================================
  CORE ENERGY
==================================================*/

.portfolio-central-core .core-energy{

    fill:var(--primary);

    opacity:.85;

    filter:
        drop-shadow(
            0 0 18px
            var(--primary)
        );

    transform-box:fill-box;

    transform-origin:center;

    animation:
        portfolioEnergyPulse
        2s
        ease-in-out
        infinite;

}


@keyframes portfolioEnergyPulse{

    0%,
    100%{

        transform:scale(.88);

        opacity:.65;

    }

    50%{

        transform:scale(1.08);

        opacity:1;

    }

}


/*==================================================
  CORE INTERFACE
==================================================*/

.portfolio-central-core .core-interface{

    fill:var(--body);

    stroke:var(--primary-light);

    stroke-width:1;

    opacity:.9;

}


.portfolio-central-core .core-interface-line{

    fill:none;

    stroke:var(--primary-light);

    stroke-width:2;

    stroke-linecap:round;

    stroke-linejoin:round;

    filter:
        drop-shadow(
            0 0 5px
            var(--primary)
        );

}


/*==================================================
  SCAN ARC
==================================================*/

.portfolio-scan-arc{

    fill:none;

    stroke:var(--primary-light);

    stroke-width:2;

    stroke-linecap:round;

    stroke-dasharray:35 15;

    opacity:.8;

    filter:
        drop-shadow(
            0 0 8px
            var(--primary)
        );

    animation:
    portfolioScanArc
    var(--scan-speed, 5s)
    linear
    infinite;

}


@keyframes portfolioScanArc{

    from{

        stroke-dashoffset:0;

    }

    to{

        stroke-dashoffset:-500;

    }

}


/*==================================================
  PROJECT LABELS
==================================================*/

.portfolio-project-label{

    position:absolute;

    z-index:20;

    display:flex;

    align-items:center;

    gap:9px;

    width:max-content;

    max-width:170px;

    box-sizing:border-box;

    padding:10px 14px;

    color:var(--text-light);

    font-size:.65rem;

    font-weight:var(--fw-semibold);

    line-height:1;

    letter-spacing:1px;

    white-space:nowrap;

    transform:
        translate(
            var(--label-x, 0px),
            var(--label-y, 0px)
        );

}


.portfolio-project-label i{

    flex-shrink:0;

    color:var(--primary);

    font-size:.75rem;

}


.portfolio-project-label span{

    display:block;

    flex:0 1 auto;

    min-width:0;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}



/*==================================================
  LABEL POSITIONS
==================================================*/

.portfolio-project-label.label-project-one{

    top:235px;

    left:95px;

    display: none;
    

}


.portfolio-project-label.label-project-two{

    top:390px;

    right:55px;

    display: none;

}


.portfolio-project-label.label-project-three{

    bottom:180px;

    left:105px;

    z-index:20;

    display: none;

}


/*==================================================
  HUD
==================================================*/

.portfolio-hud{

    position:absolute;

    z-index:6;

    display:flex;

    flex-direction:column;

    gap:5px;

    padding:10px 14px;

    border-left:2px solid var(--primary);

    background:
        linear-gradient(
            90deg,
            var(--glass-strong),
            transparent
        );

    color:var(--text-muted);

    font-size:.55rem;

    letter-spacing:1.5px;

}


.portfolio-hud strong{

    color:var(--primary-light);

    font-size:.65rem;

    letter-spacing:1px;

}


.portfolio-hud strong i{

    margin-right:5px;

    color:var(--accent);

    font-size:.45rem;

}


/*==================================================
  HUD POSITIONS
==================================================*/

.portfolio-hud.portfolio-hud-top{

    top:4%;

    right:9%;

}


.portfolio-hud.portfolio-hud-bottom{

    bottom:4%;

    left:9%;

}


/*==================================================
  HERO SCROLL
==================================================*/

.portfolio-hero-scroll{

    position:absolute;

    left:50%;

    bottom:24px;

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    gap:12px;

    z-index:10;

    color:var(--text-muted);

    font-size:.62rem;

    letter-spacing:2px;

    white-space:nowrap;

}


.portfolio-hero-scroll i{

    color:var(--primary);

    animation:
        portfolioScrollBounce
        1.8s
        ease-in-out
        infinite;

}


@keyframes portfolioScrollBounce{

    0%,
    100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(5px);

    }

}


/*==================================================
  HERO DEPTH
==================================================*/

.portfolio-hero::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-80px;

    width:900px;

    height:180px;

    transform:translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            var(--glass-strong),
            transparent 70%
        );

    filter:blur(30px);

    pointer-events:none;

    z-index:0;

}


/*==================================================
  CONTENT ABOVE DEPTH EFFECT
==================================================*/

.portfolio-hero-grid{

    position:relative;

    z-index:2;

}