/*==================================================
  MARKETPLACE HERO NETWORK
==================================================*/

.marketplace-hero{

    position:relative;

    min-height:820px;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding:130px 0 100px;

}


.marketplace-hero-grid{

    width:100%;

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

    margin:auto;

    padding:0 30px;

    display:grid;

    grid-template-columns:
        minmax(0,.85fr)
        minmax(0,1.15fr);

    align-items:center;

    gap:20px;

}


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

.marketplace-hero-ambient{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

    filter:blur(80px);

}


.marketplace-ambient-one{

    width:500px;

    height:500px;

    right:5%;

    top:10%;

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

    opacity:.8;

}


.marketplace-ambient-two{

    width:350px;

    height:350px;

    left:-100px;

    bottom:0;

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

}


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

.marketplace-hero-content{

    position:relative;

    z-index:5;

    max-width:650px;

}


.marketplace-hero-title{

    margin:25px 0;

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

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

    line-height:1.02;

    letter-spacing:-2px;

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

}


.marketplace-hero-title span{

    display:block;

    margin-top:8px;

}


.marketplace-hero-text{

    max-width:600px;

    color:var(--text-muted);

    font-size:1.05rem;

    line-height:1.85;

}


.marketplace-hero-status{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:35px;

    color:var(--text-muted);

    font-size:.62rem;

    letter-spacing:1.5px;

}


.marketplace-hero-status span{

    width:7px;

    height:7px;

    border-radius:50%;

    background:var(--primary);

    box-shadow:
        0 0 8px var(--primary);

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

}


.marketplace-hero-status strong{

    color:var(--primary-light);

}


.marketplace-hero-status small{

    opacity:.65;

}


/*==================================================
  NETWORK
==================================================*/

.marketplace-network{

    position:relative;

    width:min(720px,100%);

    aspect-ratio:1;

    margin:auto;

    perspective:1200px;

}


.marketplace-network-svg{

    display:block;

    width:100%;

    height:auto;

    overflow:visible;

    transform:
        perspective(1200px)
        rotateX(
            calc(var(--market-mouse-y,0) * -3deg)
        )
        rotateY(
            calc(var(--market-mouse-x,0) * 4deg)
        );

    transition:
        transform .15s ease-out;

}


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

.market-orbit{

    fill:none;

    stroke:var(--border-primary);

    stroke-width:1;

    opacity:.45;

    transform-box:view-box;

    transform-origin:400px 400px;

}


.market-orbit-one{

    stroke-dasharray:8 14;

    animation:
        marketplaceOrbitOne
        24s
        linear
        infinite;

}


.market-orbit-two{

    stroke-dasharray:3 12;

    animation:
        marketplaceOrbitTwo
        18s
        linear
        infinite
        reverse;

}


.market-orbit-three{

    stroke-dasharray:2 10;

    opacity:.7;

    animation:
        marketplaceOrbitThree
        12s
        linear
        infinite;

}


@keyframes marketplaceOrbitOne{

    to{
        transform:rotate(360deg);
    }

}


@keyframes marketplaceOrbitTwo{

    to{
        transform:rotate(360deg);
    }

}


@keyframes marketplaceOrbitThree{

    to{
        transform:rotate(360deg);
    }

}


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

.market-network-connections path{

    stroke:var(--border-primary);

    stroke-width:1.4;

    opacity:.55;

}


.market-network-connections
.market-secondary-link{

    stroke-dasharray:3 9;

    opacity:.3;

}


.market-network-connections
path:not(.market-secondary-link){

    stroke-dasharray:8 8;

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

}


@keyframes marketplaceConnectionPulse{

    0%,
    100%{
        opacity:.25;
    }

    50%{
        opacity:.8;
    }

}


/*==================================================
  DATA PARTICLES
==================================================*/

.market-particle{

    fill:var(--primary-light);

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

    pointer-events:none;

}


/*==================================================
  NETWORK NODES
==================================================*/

.market-node{

    cursor:pointer;

}


.market-node-ring{

    fill:var(--glass);

    stroke:var(--border-primary);

    stroke-width:1.5;

    transform-box:fill-box;

    transform-origin:center;

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

}


.market-node-core{

    fill:var(--primary-light);

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

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

}


.market-node:hover
.market-node-ring{

    stroke:var(--primary-light);

}


.market-node:hover
.market-node-core{

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

}


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

.market-central-core{

    transform-box:view-box;

    transform-origin:400px 400px;

    animation:
        marketplaceCoreFloat
        6s
        ease-in-out
        infinite;

}


.market-core-outer{

    fill:var(--glass);

    stroke:var(--primary);

    stroke-width:1.5;

    stroke-dasharray:15 10;

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

    transform-box:view-box;

    transform-origin:400px 400px;

    animation:
        marketplaceCoreRotate
        15s
        linear
        infinite;

}


.market-core-inner{

    fill:var(--glass-strong);

    stroke:var(--primary-light);

    stroke-width:1;

    opacity:.8;

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

}


.market-core-energy{

    fill:var(--primary);

    opacity:.25;

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

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

}


.market-core-center{

    fill:var(--primary-light);

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

    animation:
        marketplaceCenterPulse
        1.6s
        ease-in-out
        infinite;

}


.market-core-scan{

    fill:none;

    stroke:var(--primary-light);

    stroke-width:2;

    stroke-dasharray:35 20;

    opacity:.7;

    animation:
        marketplaceScan
        4s
        linear
        infinite;

}


/*==================================================
  CORE ANIMATIONS
==================================================*/

@keyframes marketplaceCoreFloat{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-7px);
    }

}


@keyframes marketplaceCoreRotate{

    to{
        transform:rotate(360deg);
    }

}


@keyframes marketplaceCorePulse{

    0%,
    100%{
        opacity:.45;
    }

    50%{
        opacity:1;
    }

}


@keyframes marketplaceEnergyPulse{

    0%,
    100%{
        transform:scale(.7);
        opacity:.2;
    }

    50%{
        transform:scale(1.2);
        opacity:.6;
    }

}


@keyframes marketplaceCenterPulse{

    0%,
    100%{
        transform:scale(.85);
    }

    50%{
        transform:scale(1.15);
    }

}


@keyframes marketplaceScan{

    to{
        stroke-dashoffset:-450;
    }

}


@keyframes marketplaceNodePulse{

    0%,
    100%{
        transform:scale(.94);
        opacity:.55;
    }

    50%{
        transform:scale(1.08);
        opacity:1;
    }

}


@keyframes marketplaceNodeEnergy{

    0%,
    100%{
        transform:scale(.85);
        opacity:.65;
    }

    50%{
        transform:scale(1.15);
        opacity:1;
    }

}


@keyframes marketplaceStatusPulse{

    0%,
    100%{
        opacity:.35;
        transform:scale(.8);
    }

    50%{
        opacity:1;
        transform:scale(1);
    }

}


/*==================================================
  SVG LABELS
==================================================*/

.market-svg-label text{

    fill:var(--text-muted);

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

    font-size:10px;

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

    letter-spacing:2px;

}


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

.marketplace-network-hud{

    position:absolute;

    z-index:10;

    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;

}


.marketplace-network-hud strong{

    color:var(--primary-light);

}


.marketplace-network-hud i{

    color:var(--primary);

}


.market-hud-top{

    top:9%;

    right:4%;

}


.market-hud-bottom{

    bottom:8%;

    left:4%;

}


/*==================================================
  REDUCED MOTION
==================================================*/

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

    .marketplace-network-svg{

        transform:none;

    }

    .market-orbit,
    .market-network-connections path,
    .market-central-core,
    .market-core-outer,
    .market-core-inner,
    .market-core-energy,
    .market-core-center,
    .market-core-scan,
    .market-node-ring,
    .market-node-core,
    .marketplace-hero-status span{

        animation:none;

    }

}