/* =========================================================
   GROWTH DIGITAL STUDIO
   DEDICATED PORTFOLIO PAGE
   PART 1 — FOUNDATION + HERO
========================================================= */


/* =========================================================
   PAGE FOUNDATION
========================================================= */

.portfolio-page {

    position: relative;

    width: 100%;

    overflow: hidden;

    background: #08090d;

    color: #ffffff;

}


/* =========================================================
   CONTAINER
========================================================= */

.portfolio-page .portfolio-container {

    width:
        min(
            calc(100% - 48px),
            var(--container-width)
        );

    margin-inline: auto;

}


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

.portfolio-page .portfolio-hero {

    position: relative;

    min-height: 92vh;

    display: flex;

    align-items: center;

    padding:
        150px 0
        100px;

    overflow: hidden;

    isolation: isolate;

}


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

.portfolio-page .portfolio-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -3;

    background:

        radial-gradient(
            circle at 78% 28%,
            rgba(139,92,246,0.20),
            transparent 32%
        ),

        radial-gradient(
            circle at 18% 82%,
            rgba(37,99,235,0.10),
            transparent 32%
        ),

        linear-gradient(
            135deg,
            #08090d 0%,
            #0b0a12 55%,
            #0d0b18 100%
        );

}


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

.portfolio-page .portfolio-hero::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -2;

    opacity: 0.32;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        );

    background-size: 80px 80px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 88%
        );

}


/* =========================================================
   HERO INNER
========================================================= */

.portfolio-page .portfolio-hero-inner {

    position: relative;

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(300px, 0.92fr);

    align-items: center;

    gap: 80px;

}


/* =========================================================
   HERO COPY
========================================================= */

.portfolio-page .portfolio-hero-copy {

    max-width: 760px;

}


/* =========================================================
   EYEBROW
========================================================= */

.portfolio-page .portfolio-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 28px;

    color: var(--color-primary-light);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.22em;

    text-transform: uppercase;

}


.portfolio-page .portfolio-eyebrow::before {

    content: "";

    width: 38px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            var(--color-accent)
        );

}


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

.portfolio-page .portfolio-hero h1 {

    margin: 0;

    max-width: 820px;

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

    font-size:
        clamp(
            3.8rem,
            8vw,
            7.5rem
        );

    font-weight: 600;

    line-height: 0.94;

    letter-spacing: -0.065em;

}


.portfolio-page .portfolio-hero h1 span {

    display: block;

    color: transparent;

    background:
        linear-gradient(
            100deg,
            #a78bfa,
            #60a5fa
        );

    -webkit-background-clip: text;

    background-clip: text;

}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.portfolio-page .portfolio-hero-description {

    max-width: 650px;

    margin-top: 34px;

    color: var(--color-text-secondary);

    font-size:
        clamp(
            1rem,
            1.5vw,
            1.15rem
        );

    line-height: 1.8;

}


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

.portfolio-page .portfolio-hero-actions {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 38px;

    flex-wrap: wrap;

}


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

.portfolio-page .portfolio-primary-cta,
.portfolio-page .portfolio-secondary-cta {

    min-height: 50px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 0 22px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 700;

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal),
        background var(--transition-normal);

}


.portfolio-page .portfolio-primary-cta {

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            #3b82f6
        );

    box-shadow:
        0 12px 45px
        rgba(99,102,241,0.22);

}


.portfolio-page .portfolio-primary-cta:hover {

    transform: translateY(-3px);

    box-shadow:
        0 18px 55px
        rgba(99,102,241,0.35);

}


.portfolio-page .portfolio-secondary-cta {

    border:
        1px solid
        rgba(255,255,255,0.12);

    background:
        rgba(255,255,255,0.035);

    color:
        var(--color-text-secondary);

}


.portfolio-page .portfolio-secondary-cta:hover {

    transform: translateY(-3px);

    color: #ffffff;

    border-color:
        rgba(167,139,250,0.40);

    background:
        rgba(139,92,246,0.10);

}


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

.portfolio-page .portfolio-hero-visual {

    position: relative;

    min-height: 440px;

    display: grid;

    place-items: center;

}


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

.portfolio-page .portfolio-orbit {

    position: relative;

    width:
        min(
            420px,
            100%
        );

    aspect-ratio: 1;

    border:
        1px solid
        rgba(167,139,250,0.16);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(139,92,246,0.09),
            transparent 62%
        );

    box-shadow:
        0 0 100px
        rgba(99,102,241,0.10);

}


/* =========================================================
   ORBIT INNER RINGS
========================================================= */

.portfolio-page .portfolio-orbit::before {

    content: "";

    position: absolute;

    inset: 12%;

    border:
        1px solid
        rgba(96,165,250,0.15);

    border-radius: 50%;

}


.portfolio-page .portfolio-orbit::after {

    content: "";

    position: absolute;

    inset: 25%;

    border:
        1px dashed
        rgba(167,139,250,0.20);

    border-radius: 50%;

    animation:
        portfolioOrbitSpin
        18s
        linear
        infinite;

}


/* =========================================================
   ORBIT CENTER
========================================================= */

.portfolio-page .portfolio-orbit-center {

    position: absolute;

    top: 50%;
    left: 50%;

    width: 110px;
    height: 110px;

    display: grid;

    place-items: center;

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

    border:
        1px solid
        rgba(255,255,255,0.14);

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(139,92,246,0.20),
            rgba(37,99,235,0.08)
        );

    backdrop-filter: blur(20px);

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

    box-shadow:
        0 20px 70px
        rgba(0,0,0,0.35);

}


.portfolio-page .portfolio-orbit-center strong {

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

    font-size: 30px;

    letter-spacing: -0.05em;

}


.portfolio-page .portfolio-orbit-center span {

    position: absolute;

    bottom: 19px;

    font-size: 7px;

    letter-spacing: 0.18em;

    color: var(--color-text-muted);

    text-transform: uppercase;

}


/* =========================================================
   ORBIT NODES
========================================================= */

.portfolio-page .portfolio-orbit-node {

    position: absolute;

    width: 52px;
    height: 52px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(255,255,255,0.12);

    border-radius: 50%;

    background:
        rgba(10,11,17,0.85);

    backdrop-filter: blur(12px);

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

    color:
        var(--color-primary-light);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.08em;

    box-shadow:
        0 15px 40px
        rgba(0,0,0,0.30);

}


.portfolio-page .portfolio-orbit-node:nth-child(1) {

    top: 7%;

    right: 18%;

}


.portfolio-page .portfolio-orbit-node:nth-child(2) {

    right: 2%;

    top: 48%;

}


.portfolio-page .portfolio-orbit-node:nth-child(3) {

    bottom: 10%;

    left: 18%;

}


.portfolio-page .portfolio-orbit-node:nth-child(4) {

    top: 48%;

    left: 2%;

}


/* =========================================================
   ORBIT ANIMATION
========================================================= */

@keyframes portfolioOrbitSpin {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .portfolio-page .portfolio-hero-inner {

        grid-template-columns: 1fr;

        gap: 60px;

    }


    .portfolio-page .portfolio-hero-copy {

        max-width: 850px;

    }


    .portfolio-page .portfolio-hero-visual {

        min-height: 360px;

    }


    .portfolio-page .portfolio-orbit {

        width:
            min(
                360px,
                85vw
            );

    }

}


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

@media (max-width: 767px) {

    .portfolio-page .portfolio-container {

        width:
            calc(100% - 36px);

    }


    .portfolio-page .portfolio-hero {

        min-height: auto;

        padding:
            130px 0
            75px;

    }


    .portfolio-page .portfolio-hero h1 {

        font-size:
            clamp(
                3.2rem,
                15vw,
                5rem
            );

    }


    .portfolio-page .portfolio-hero-description {

        margin-top: 25px;

        font-size: 0.95rem;

        line-height: 1.7;

    }


    .portfolio-page .portfolio-hero-actions {

        margin-top: 30px;

        flex-direction: column;

        align-items: stretch;

    }


    .portfolio-page .portfolio-primary-cta,
    .portfolio-page .portfolio-secondary-cta {

        width: 100%;

    }


    .portfolio-page .portfolio-hero-visual {

        min-height: 300px;

    }


    .portfolio-page .portfolio-orbit {

        width:
            min(
                300px,
                82vw
            );

    }


    .portfolio-page .portfolio-orbit-center {

        width: 82px;
        height: 82px;

        border-radius: 23px;

    }


    .portfolio-page .portfolio-orbit-center strong {

        font-size: 23px;

    }


    .portfolio-page .portfolio-orbit-center span {

        bottom: 13px;

        font-size: 6px;

    }


    .portfolio-page .portfolio-orbit-node {

        width: 42px;
        height: 42px;

        font-size: 7px;

    }

}


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

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

    .portfolio-page .portfolio-orbit::after {

        animation: none;

    }

}




/* =========================================================
   PORTFOLIO — PART 2
   SECTION HEADINGS + FEATURED PROJECTS
========================================================= */


/* =========================================================
   SECTION BASE
========================================================= */

.portfolio-page .portfolio-featured,
.portfolio-page .portfolio-work,
.portfolio-page .portfolio-proof,
.portfolio-page .portfolio-cta {

    position: relative;

    padding:
        120px 0;

}


/* =========================================================
   SECTION HEADING
========================================================= */

.portfolio-page .portfolio-section-heading {

    max-width: 760px;

    margin-bottom: 55px;

}


.portfolio-page .portfolio-section-heading > div {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 20px;

}


.portfolio-page .portfolio-section-number {

    color:
        var(--color-primary-light);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.15em;

}


.portfolio-page .portfolio-section-label {

    color:
        var(--color-text-muted);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.20em;

}


.portfolio-page .portfolio-section-heading h2 {

    margin: 0;

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

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

    font-weight: 600;

    line-height: 1;

    letter-spacing: -0.055em;

}


.portfolio-page .portfolio-section-heading h2 span {

    color:
        transparent;

    background:
        linear-gradient(
            100deg,
            #a78bfa,
            #60a5fa
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

}


.portfolio-page .portfolio-section-heading p {

    max-width: 650px;

    margin-top: 22px;

    color:
        var(--color-text-secondary);

    font-size: 15px;

    line-height: 1.8;

}


/* =========================================================
   FEATURED SECTION
========================================================= */

.portfolio-page .portfolio-featured {

    background:
        linear-gradient(
            180deg,
            #08090d 0%,
            #0a0b11 100%
        );

}


.portfolio-page .portfolio-featured::before {

    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 70%;

    height: 1px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(139,92,246,0.35),
            transparent
        );

}


/* =========================================================
   FEATURED GRID
========================================================= */

.portfolio-page .portfolio-featured-grid {

    display: grid;

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

    gap: 18px;

}


/* =========================================================
   FEATURED CARD
========================================================= */

.portfolio-page .portfolio-featured-card {

    position: relative;

    min-width: 0;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius: 26px;

    background:
        rgba(255,255,255,0.025);

    transition:
        transform 450ms
        cubic-bezier(.22,1,.36,1),
        border-color 350ms ease,
        box-shadow 450ms ease;

}


.portfolio-page .portfolio-featured-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(167,139,250,0.28);

    box-shadow:
        0 30px 90px
        rgba(0,0,0,0.40);

}


/* =========================================================
   FEATURED LARGE CARD
========================================================= */

.portfolio-page .portfolio-featured-large {

    grid-column:
        span 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(320px, 0.65fr);

}


/* =========================================================
   PROJECT IMAGE
========================================================= */

.portfolio-page .portfolio-project-image {

    position: relative;

    min-height: 330px;

    overflow: hidden;

    background:
        #10121a;

}


.portfolio-page .portfolio-featured-large
.portfolio-project-image {

    min-height: 460px;

}


.portfolio-page .portfolio-project-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 700ms
        cubic-bezier(.22,1,.36,1);

}


.portfolio-page .portfolio-featured-card:hover
.portfolio-project-image img {

    transform:
        scale(1.045);

}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.portfolio-page .portfolio-image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(8,9,13,0.02) 30%,
            rgba(8,9,13,0.65) 100%
        );

    pointer-events: none;

}


/* =========================================================
   PROJECT INDEX
========================================================= */

.portfolio-page .portfolio-project-index {

    position: absolute;

    top: 20px;

    left: 20px;

    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(255,255,255,0.14);

    border-radius: 50%;

    background:
        rgba(8,9,13,0.55);

    backdrop-filter:
        blur(12px);

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

    color: #ffffff;

    font-size: 9px;

    font-weight: 800;

}


/* =========================================================
   PROJECT INFO
========================================================= */

.portfolio-page .portfolio-project-info {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    padding: 30px;

}


.portfolio-page .portfolio-featured-large
.portfolio-project-info {

    justify-content: center;

    padding: 42px;

}


/* =========================================================
   PROJECT TOP
========================================================= */

.portfolio-page .portfolio-project-top {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 20px;

}


.portfolio-page .portfolio-project-top span {

    color:
        var(--color-primary-light);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 0.16em;

}


.portfolio-page .portfolio-project-top span:last-child {

    color:
        var(--color-text-muted);

}


/* =========================================================
   PROJECT TITLE
========================================================= */

.portfolio-page .portfolio-project-info h3 {

    margin: 0;

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

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.7rem
        );

    font-weight: 600;

    line-height: 1.05;

    letter-spacing: -0.04em;

}


/* =========================================================
   PROJECT DESCRIPTION
========================================================= */

.portfolio-page .portfolio-project-info > p {

    max-width: 520px;

    margin:
        15px 0 0;

    color:
        var(--color-text-secondary);

    font-size: 13px;

    line-height: 1.75;

}


/* =========================================================
   PROJECT TAGS
========================================================= */

.portfolio-page .portfolio-project-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 22px;

}


.portfolio-page .portfolio-project-tags span {

    padding:
        7px 10px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius: 999px;

    background:
        rgba(255,255,255,0.035);

    color:
        var(--color-text-muted);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.04em;

}


/* =========================================================
   PROJECT LINK
========================================================= */

.portfolio-page .portfolio-project-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 30px;

    padding-bottom: 5px;

    border-bottom:
        1px solid
        rgba(167,139,250,0.35);

    color:
        #ffffff;

    font-size: 11px;

    font-weight: 700;

    transition:
        color 250ms ease,
        gap 250ms ease,
        border-color 250ms ease;

}


.portfolio-page .portfolio-project-link:hover {

    gap: 15px;

    color:
        var(--color-primary-light);

    border-color:
        var(--color-primary-light);

}


/* =========================================================
   FEATURED CARD ACCENT GLOW
========================================================= */

.portfolio-page .portfolio-featured-card::after {

    content: "";

    position: absolute;

    right: -100px;

    bottom: -120px;

    width: 260px;

    height: 260px;

    border-radius: 50%;

    background:
        rgba(139,92,246,0.08);

    filter:
        blur(60px);

    pointer-events: none;

    transition:
        opacity 350ms ease;

}


.portfolio-page .portfolio-featured-card:hover::after {

    opacity: 1.5;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .portfolio-page .portfolio-featured-large {

        grid-column:
            span 2;

        grid-template-columns:
            1fr;

    }


    .portfolio-page .portfolio-featured-large
    .portfolio-project-image {

        min-height: 400px;

    }


    .portfolio-page .portfolio-featured-large
    .portfolio-project-info {

        padding: 32px;

    }

}


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

@media (max-width: 767px) {

    .portfolio-page .portfolio-featured,
    .portfolio-page .portfolio-work,
    .portfolio-page .portfolio-proof,
    .portfolio-page .portfolio-cta {

        padding:
            85px 0;

    }


    .portfolio-page .portfolio-section-heading {

        margin-bottom: 38px;

    }


    .portfolio-page .portfolio-section-heading h2 {

        font-size:
            clamp(
                2.5rem,
                12vw,
                3.6rem
            );

    }


    .portfolio-page .portfolio-section-heading p {

        font-size: 13px;

        line-height: 1.7;

    }


    .portfolio-page .portfolio-featured-grid {

        grid-template-columns: 1fr;

        gap: 14px;

    }


    .portfolio-page .portfolio-featured-large {

        grid-column:
            span 1;

    }


    .portfolio-page .portfolio-project-image,
    .portfolio-page .portfolio-featured-large
    .portfolio-project-image {

        min-height: 260px;

    }


    .portfolio-page .portfolio-project-info,
    .portfolio-page .portfolio-featured-large
    .portfolio-project-info {

        padding: 25px;

    }


    .portfolio-page .portfolio-project-info h3 {

        font-size: 1.8rem;

    }

}



/* =========================================================
   PORTFOLIO — PART 3
   FILTERS + WORK GRID + RESULTS CARDS
========================================================= */


/* =========================================================
   WORK SECTION
========================================================= */

.portfolio-page .portfolio-work {

    background:
        #08090d;

}


/* =========================================================
   WORK HEADING
========================================================= */

.portfolio-page .portfolio-work-heading {

    margin-bottom: 38px;

}


/* =========================================================
   FILTERS
========================================================= */

.portfolio-page .portfolio-filters {

    display: flex;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;

    margin-bottom: 42px;

}


.portfolio-page .portfolio-filter {

    min-height: 40px;

    padding:
        0 16px;

    border:
        1px solid
        rgba(255,255,255,0.09);

    border-radius: 999px;

    background:
        rgba(255,255,255,0.025);

    color:
        var(--color-text-muted);

    font-family:
        inherit;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.06em;

    cursor: pointer;

    transition:
        color 250ms ease,
        background 250ms ease,
        border-color 250ms ease,
        transform 250ms ease;

}


.portfolio-page .portfolio-filter:hover {

    color: #ffffff;

    border-color:
        rgba(167,139,250,0.30);

    background:
        rgba(139,92,246,0.08);

    transform:
        translateY(-2px);

}


.portfolio-page .portfolio-filter.is-active {

    color: #ffffff;

    border-color:
        rgba(139,92,246,0.50);

    background:
        linear-gradient(
            135deg,
            rgba(139,92,246,0.22),
            rgba(59,130,246,0.12)
        );

    box-shadow:
        0 8px 30px
        rgba(99,102,241,0.10);

}


/* =========================================================
   WORK GRID
========================================================= */

.portfolio-page .portfolio-grid {

    display: grid;

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

    gap: 16px;

}


/* =========================================================
   GRID CARD
========================================================= */

.portfolio-page .portfolio-grid-card {

    position: relative;

    min-width: 0;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,0.075);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.018)
        );

    transition:
        transform 400ms
        cubic-bezier(.22,1,.36,1),
        border-color 300ms ease,
        box-shadow 400ms ease;

}


.portfolio-page .portfolio-grid-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(167,139,250,0.25);

    box-shadow:
        0 25px 70px
        rgba(0,0,0,0.35);

}


/* =========================================================
   GRID IMAGE
========================================================= */

.portfolio-page .portfolio-grid-image {

    position: relative;

    aspect-ratio:
        4 / 3;

    overflow: hidden;

    background:
        #11131a;

}


.portfolio-page .portfolio-grid-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 600ms
        cubic-bezier(.22,1,.36,1);

}


.portfolio-page .portfolio-grid-card:hover
.portfolio-grid-image img {

    transform:
        scale(1.05);

}


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

.portfolio-page .portfolio-grid-content {

    padding:
        24px;

}


.portfolio-page .portfolio-grid-content > span {

    display: block;

    margin-bottom: 11px;

    color:
        var(--color-primary-light);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 0.17em;

}


.portfolio-page .portfolio-grid-content h3 {

    margin: 0;

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

    font-size: 1.55rem;

    font-weight: 600;

    line-height: 1.1;

    letter-spacing: -0.035em;

}


.portfolio-page .portfolio-grid-content p {

    margin:
        11px 0 0;

    color:
        var(--color-text-secondary);

    font-size: 12px;

    line-height: 1.7;

}


.portfolio-page .portfolio-grid-content a {

    display: inline-flex;

    align-items: center;

    margin-top: 18px;

    color:
        #ffffff;

    font-size: 10px;

    font-weight: 700;

    transition:
        color 250ms ease,
        transform 250ms ease;

}


.portfolio-page .portfolio-grid-content a:hover {

    color:
        var(--color-primary-light);

    transform:
        translateX(4px);

}


/* =========================================================
   RESULT CARDS
========================================================= */

.portfolio-page .portfolio-results-card {

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(139,92,246,0.14),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #0d0f18,
            #090a0f
        );

}


/* =========================================================
   REAL RESULTS IMAGE CARDS
========================================================= */

.portfolio-page .portfolio-results-image {

    position: relative;

    width: 100%;

    aspect-ratio: 4 / 3;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 5px;

    overflow: hidden;

    background: #0d0f15;

}



/* Images */

.portfolio-page .portfolio-results-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform 600ms cubic-bezier(.22,1,.36,1),
        filter 400ms ease;

}


/* Hover */

.portfolio-page .portfolio-results-card:hover
.portfolio-results-image img {

    filter:
        brightness(0.82);

}


/* Image border */

.portfolio-page .portfolio-results-image::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    border:
        1px solid
        rgba(255,255,255,0.06);

}


/* Results card content */

.portfolio-page .portfolio-results-card
.portfolio-grid-content {

    min-height: auto;

    padding: 24px;

}


/* Mobile */

@media (max-width: 600px) {

    .portfolio-page .portfolio-results-image {

        aspect-ratio: 4 / 3;

    }

}


/* =========================================================
   FILTER HIDDEN STATE
========================================================= */

.portfolio-page .portfolio-grid-card.is-filter-hidden {

    display: none;

}


/* =========================================================
   FILTER REVEAL
========================================================= */

.portfolio-page .portfolio-grid-card.is-filter-visible {

    animation:
        portfolioFilterIn
        450ms
        cubic-bezier(.22,1,.36,1)
        both;

}


@keyframes portfolioFilterIn {

    from {

        opacity: 0;

        transform:
            translateY(16px)
            scale(0.98);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .portfolio-page .portfolio-grid {

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

    }

}


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

@media (max-width: 600px) {

    .portfolio-page .portfolio-filters {

        gap: 7px;

        margin-bottom: 30px;

    }


    .portfolio-page .portfolio-filter {

        min-height: 38px;

        padding-inline: 13px;

        font-size: 9px;

    }


    .portfolio-page .portfolio-grid {

        grid-template-columns: 1fr;

        gap: 14px;

    }


    .portfolio-page .portfolio-grid-content {

        padding:
            21px;

    }


    .portfolio-page .portfolio-grid-content h3 {

        font-size:
            1.45rem;

    }



}





/* =========================================================
   PORTFOLIO — PART 4
   VIDEO CARDS + CERTIFICATES
========================================================= */


/* =========================================================
   VIDEO CARD
========================================================= */

.portfolio-page .portfolio-video-card {

    overflow: hidden;

}


/* =========================================================
   VIDEO WRAPPER
========================================================= */

.portfolio-page .portfolio-video-wrapper {

    position: relative;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background: #0d0f15;

}


/* =========================================================
   VIDEO
========================================================= */

.portfolio-page .portfolio-video-wrapper video {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 700ms
        cubic-bezier(.22,1,.36,1),
        filter 500ms ease;

}


.portfolio-page .portfolio-video-card:hover
.portfolio-video-wrapper video {

    transform: scale(1.035);

    filter:
        brightness(0.72);

}


/* =========================================================
   VIDEO VIGNETTE
========================================================= */

.portfolio-page .portfolio-video-wrapper::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.02),
            rgba(0,0,0,0.30)
        );

}


/* =========================================================
   VIDEO PLAY BUTTON
========================================================= */

.portfolio-page .portfolio-video-play {

    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 2;

    width: 58px;
    height: 58px;

    display: grid;

    place-items: center;

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

    padding: 0;

    border:
        1px solid
        rgba(255,255,255,0.22);

    border-radius: 50%;

    background:
        rgba(8,9,13,0.58);

    backdrop-filter:
        blur(14px);

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

    color: #ffffff;

    font-size: 13px;

    cursor: pointer;

    transition:
        transform 350ms
        cubic-bezier(.22,1,.36,1),
        background 250ms ease,
        border-color 250ms ease,
        box-shadow 350ms ease;

}


.portfolio-page .portfolio-video-play:hover {

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

    background:
        rgba(139,92,246,0.24);

    border-color:
        rgba(167,139,250,0.55);

    box-shadow:
        0 0 40px
        rgba(139,92,246,0.25);

}


/* =========================================================
   PLAY BUTTON ACTIVE
========================================================= */

.portfolio-page .portfolio-video-card.is-playing
.portfolio-video-play {

    opacity: 0;

    pointer-events: none;

}


/* =========================================================
   VIDEO CARD HOVER GLOW
========================================================= */

.portfolio-page .portfolio-video-card::after {

    content: "";

    position: absolute;

    right: -80px;

    bottom: -100px;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background:
        rgba(96,165,250,0.07);

    filter:
        blur(60px);

    pointer-events: none;

}


/* =========================================================
   CERTIFICATE CARD
========================================================= */

.portfolio-page .portfolio-certificate-card {

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.015)
        );

}


/* =========================================================
   CERTIFICATE IMAGE
========================================================= */

.portfolio-page .portfolio-certificate-image {

    position: relative;

    aspect-ratio:
        4 / 3;

    overflow: hidden;

    background:
        #11131a;

}


.portfolio-page .portfolio-certificate-image::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(8,9,13,0.30)
        );

}


.portfolio-page .portfolio-certificate-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 650ms
        cubic-bezier(.22,1,.36,1);

}


.portfolio-page .portfolio-certificate-card:hover
.portfolio-certificate-image img {

    transform:
        scale(1.035);

}


/* =========================================================
   CREDENTIAL BADGE
========================================================= */

.portfolio-page .portfolio-certificate-card
.portfolio-grid-content > span {

    color:
        #60a5fa;

}


/* =========================================================
   VIDEO / CERTIFICATE RESPONSIVE
========================================================= */

@media (max-width: 600px) {

    .portfolio-page .portfolio-video-wrapper {

        aspect-ratio:
            16 / 11;

    }


    .portfolio-page .portfolio-video-play {

        width: 52px;
        height: 52px;

        font-size: 12px;

    }


    .portfolio-page .portfolio-certificate-image {

        aspect-ratio:
            4 / 3;

    }

}




/* =========================================================
   PORTFOLIO — PART 5
   PERFORMANCE PROOF + FINAL CTA + FINISHING
========================================================= */


/* =========================================================
   PERFORMANCE SECTION
========================================================= */

.portfolio-page .portfolio-proof {

    background:
        linear-gradient(
            180deg,
            #0a0b11 0%,
            #08090d 100%
        );

}


.portfolio-page .portfolio-proof::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(139,92,246,0.10),
            transparent 30%
        );

}


/* =========================================================
   PROOF INNER
========================================================= */

.portfolio-page .portfolio-proof-inner {

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    align-items: center;

    gap: 80px;

}


/* =========================================================
   PROOF COPY
========================================================= */

.portfolio-page .portfolio-proof-copy {

    position: relative;

}


.portfolio-page .portfolio-proof-copy
.portfolio-section-heading {

    margin-bottom: 0;

}


/* =========================================================
   PROOF CARDS
========================================================= */

.portfolio-page .portfolio-proof-cards {

    display: grid;

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

    gap: 12px;

}


/* =========================================================
   PROOF CARD
========================================================= */

.portfolio-page .portfolio-proof-card {

    position: relative;

    min-height: 190px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 24px;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.015)
        );

    transition:
        transform 350ms
        cubic-bezier(.22,1,.36,1),
        border-color 300ms ease,
        background 300ms ease;

}


.portfolio-page .portfolio-proof-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(167,139,250,0.28);

    background:
        linear-gradient(
            145deg,
            rgba(139,92,246,0.10),
            rgba(255,255,255,0.018)
        );

}


/* =========================================================
   PROOF CARD GLOW
========================================================= */

.portfolio-page .portfolio-proof-card::before {

    content: "";

    position: absolute;

    top: -50px;

    right: -50px;

    width: 130px;
    height: 130px;

    border-radius: 50%;

    background:
        rgba(139,92,246,0.12);

    filter:
        blur(35px);

    transition:
        transform 500ms ease;

}


.portfolio-page .portfolio-proof-card:hover::before {

    transform:
        scale(1.35);

}


/* =========================================================
   PROOF LABEL
========================================================= */

.portfolio-page .portfolio-proof-card > span {

    position: relative;

    color:
        var(--color-primary-light);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 0.17em;

}


/* =========================================================
   PROOF TITLE
========================================================= */

.portfolio-page .portfolio-proof-card strong {

    position: relative;

    margin-top: 9px;

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

    font-size:
        clamp(
            1.4rem,
            2vw,
            2rem
        );

    font-weight: 600;

    letter-spacing: -0.035em;

}


/* =========================================================
   PROOF DESCRIPTION
========================================================= */

.portfolio-page .portfolio-proof-card small {

    position: relative;

    margin-top: 8px;

    color:
        var(--color-text-muted);

    font-size: 10px;

    line-height: 1.5;

}


/* =========================================================
   FINAL CTA
========================================================= */

.portfolio-page .portfolio-cta {

    padding:
        145px 0;

    background:
        #08090d;

    text-align: center;

}


.portfolio-page .portfolio-cta::before {

    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 650px;
    height: 420px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(139,92,246,0.13),
            transparent 68%
        );

    filter:
        blur(25px);

    pointer-events: none;

}


/* =========================================================
   CTA INNER
========================================================= */

.portfolio-page .portfolio-cta-inner {

    position: relative;

    max-width: 850px;

    margin-inline: auto;

}


/* =========================================================
   CTA LABEL
========================================================= */

.portfolio-page .portfolio-cta-label {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color:
        var(--color-primary-light);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.20em;

}


.portfolio-page .portfolio-cta-label span {

    width: 28px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            var(--color-accent)
        );

}


/* =========================================================
   CTA TITLE
========================================================= */

.portfolio-page .portfolio-cta h2 {

    margin:
        25px 0 0;

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

    font-size:
        clamp(
            3.2rem,
            7vw,
            6.5rem
        );

    font-weight: 600;

    line-height: 0.95;

    letter-spacing: -0.065em;

}


.portfolio-page .portfolio-cta h2 span {

    display: block;

    color:
        transparent;

    background:
        linear-gradient(
            100deg,
            #a78bfa,
            #60a5fa
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

}


/* =========================================================
   CTA DESCRIPTION
========================================================= */

.portfolio-page .portfolio-cta p {

    max-width: 620px;

    margin:
        25px auto 0;

    color:
        var(--color-text-secondary);

    font-size: 14px;

    line-height: 1.8;

}


/* =========================================================
   CTA ACTIONS
========================================================= */

.portfolio-page .portfolio-cta-actions {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-top: 34px;

    flex-wrap: wrap;

}


/* =========================================================
   CTA BUTTON ARROW
========================================================= */

.portfolio-page .portfolio-primary-cta span:last-child,
.portfolio-page .portfolio-secondary-cta span:last-child {

    transition:
        transform 250ms ease;

}


.portfolio-page .portfolio-primary-cta:hover span:last-child,
.portfolio-page .portfolio-secondary-cta:hover span:last-child {

    transform:
        translate(3px, -3px);

}


/* =========================================================
   GENERAL FOCUS STATES
========================================================= */

.portfolio-page a:focus-visible,
.portfolio-page button:focus-visible {

    outline:
        2px solid
        rgba(167,139,250,0.75);

    outline-offset:
        4px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .portfolio-page .portfolio-proof-inner {

        grid-template-columns:
            1fr;

        gap: 45px;

    }


    .portfolio-page .portfolio-proof-cards {

        max-width:
            760px;

    }

}


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

@media (max-width: 767px) {

    .portfolio-page .portfolio-proof {

        padding:
            85px 0;

    }


    .portfolio-page .portfolio-proof-cards {

        grid-template-columns:
            1fr;

        gap: 10px;

    }


    .portfolio-page .portfolio-proof-card {

        min-height:
            145px;

        padding:
            22px;

    }


    .portfolio-page .portfolio-cta {

        padding:
            100px 0;

    }


    .portfolio-page .portfolio-cta h2 {

        font-size:
            clamp(
                3rem,
                14vw,
                4.5rem
            );

    }


    .portfolio-page .portfolio-cta p {

        font-size:
            13px;

    }


    .portfolio-page .portfolio-cta-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .portfolio-page .portfolio-cta-actions
    .portfolio-primary-cta,
    .portfolio-page .portfolio-cta-actions
    .portfolio-secondary-cta {

        width: 100%;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .portfolio-page .portfolio-container {

        width:
            calc(100% - 30px);

    }


    .portfolio-page .portfolio-hero {

        padding-top:
            115px;

    }


    .portfolio-page .portfolio-section-heading h2 {

        font-size:
            2.35rem;

    }


    .portfolio-page .portfolio-cta h2 {

        font-size:
            2.8rem;

    }

}


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

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

    .portfolio-page *,
    .portfolio-page *::before,
    .portfolio-page *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;

    }

}





/* =========================================================
   PORTFOLIO HERO — MOBILE ORBIT FIX
========================================================= */

@media (max-width: 767px) {

    .portfolio-page .portfolio-hero-orbit {

        height: 300px !important;

        min-height: 300px !important;

        margin-top: -20px;

        margin-bottom: -90px;

        overflow: hidden;

    }


    .portfolio-page .portfolio-orbit {

        width: 300px !important;

        max-width: 300px !important;

    }

}




/* =========================================================
   SINGLE RESULT IMAGE
========================================================= */

.portfolio-page .portfolio-results-image img:only-child {

    grid-column: 1 / -1;

    width: 100%;

}



/* =========================================================
   PORTFOLIO HERO — MOBILE CONTENT SPACING
========================================================= */

@media (max-width: 767px) {

    .portfolio-page .portfolio-hero-meta {

        margin-top: 24px !important;

        position: relative;

        z-index: 5;

        line-height: 1.8;

    }


    .portfolio-page .portfolio-hero-orbit {

        margin-top: 10px !important;

    }

}




/* =========================================================
   GDS PORTFOLIO — PREMIUM MOTION LAYER
   PART 1
========================================================= */


/* =========================================================
   1. FEATURED CARD — PREMIUM LIGHT
========================================================= */

.portfolio-page .portfolio-featured-card,
.portfolio-page .portfolio-grid-card {

    isolation: isolate;

}


.portfolio-page .portfolio-featured-card::before,
.portfolio-page .portfolio-grid-card::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 2;

    opacity: 0;

    background:
        radial-gradient(
            500px circle at var(--mouse-x, 50%)
            var(--mouse-y, 50%),
            rgba(139,92,246,0.12),
            transparent 45%
        );

    transition:
        opacity 400ms ease;

}


.portfolio-page .portfolio-featured-card:hover::before,
.portfolio-page .portfolio-grid-card:hover::before {

    opacity: 1;

}


/* =========================================================
   2. CARD BORDER GLOW
========================================================= */

.portfolio-page .portfolio-featured-card:hover,
.portfolio-page .portfolio-grid-card:hover {

    border-color:
        rgba(167,139,250,0.32);

    box-shadow:
        0 25px 80px
        rgba(0,0,0,0.42),
        0 0 45px
        rgba(99,102,241,0.07);

}


/* =========================================================
   3. IMAGE PREMIUM ZOOM
========================================================= */

.portfolio-page .portfolio-featured-card
.portfolio-project-image img,
.portfolio-page .portfolio-grid-card
.portfolio-grid-image img {

    will-change: transform;

}


/* =========================================================
   4. IMAGE LIGHT SWEEP
========================================================= */

.portfolio-page .portfolio-project-image::after,
.portfolio-page .portfolio-grid-image::after {

    content: "";

    position: absolute;

    inset: -100%;

    pointer-events: none;

    z-index: 3;

    background:
        linear-gradient(
            115deg,
            transparent 35%,
            rgba(255,255,255,0.08) 50%,
            transparent 65%
        );

    transform:
        translateX(-45%)
        rotate(8deg);

    transition:
        transform 900ms
        cubic-bezier(.22,1,.36,1);

}


.portfolio-page .portfolio-featured-card:hover
.portfolio-project-image::after,
.portfolio-page .portfolio-grid-card:hover
.portfolio-grid-image::after {

    transform:
        translateX(45%)
        rotate(8deg);

}


/* =========================================================
   5. PROJECT LINK MICRO INTERACTION
========================================================= */

.portfolio-page .portfolio-project-link {

    position: relative;

    z-index: 5;

}


.portfolio-page .portfolio-project-link span:last-child {

    display: inline-block;

    transition:
        transform 300ms
        cubic-bezier(.22,1,.36,1);

}


.portfolio-page .portfolio-project-link:hover
span:last-child {

    transform:
        translate(4px,-4px);

}


/* =========================================================
   6. FILTER BUTTON GLOW
========================================================= */

.portfolio-page .portfolio-filter {

    position: relative;

    overflow: hidden;

}


.portfolio-page .portfolio-filter::after {

    content: "";

    position: absolute;

    width: 70px;

    height: 70px;

    top: 50%;

    left: 50%;

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

    border-radius: 50%;

    background:
        rgba(139,92,246,0.18);

    filter:
        blur(18px);

    pointer-events: none;

    transition:
        transform 400ms ease;

}


.portfolio-page .portfolio-filter:hover::after,
.portfolio-page .portfolio-filter.is-active::after {

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

}


/* =========================================================
   7. VIDEO PLAY BUTTON
========================================================= */

.portfolio-page .portfolio-video-play {

    transition:
        transform 400ms
        cubic-bezier(.22,1,.36,1),
        box-shadow 400ms ease,
        background 300ms ease;

}


.portfolio-page .portfolio-video-card:hover
.portfolio-video-play {

    transform:
        scale(1.12);

    box-shadow:
        0 0 45px
        rgba(139,92,246,0.28);

}


/* =========================================================
   8. RESULT VISUAL AMBIENT MOTION
========================================================= */

.portfolio-page .portfolio-results-lines {

    animation:
        portfolioGridDrift
        16s
        linear
        infinite;

}


@keyframes portfolioGridDrift {

    from {

        transform:
            translate3d(0,0,0);

    }

    50% {

        transform:
            translate3d(10px,6px,0);

    }

    to {

        transform:
            translate3d(0,0,0);

    }

}


/* =========================================================
   9. ACCESSIBILITY — REDUCED MOTION
========================================================= */

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

    .portfolio-page *,
    .portfolio-page *::before,
    .portfolio-page *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

    }

}




/* =========================================================
   GDS PORTFOLIO — MOBILE + SCROLL MOTION
   PART 3
========================================================= */


/* =========================================================
   1. SCROLL REVEAL — INITIAL STATE
========================================================= */

.portfolio-page .portfolio-scroll-reveal {

    opacity: 0;

    transform:
        translateY(45px)
        scale(0.985);

    filter:
        blur(4px);

    transition:
        opacity 700ms ease,
        transform 800ms cubic-bezier(.22,1,.36,1),
        filter 700ms ease;

}


/* =========================================================
   2. SCROLL REVEAL — VISIBLE
========================================================= */

.portfolio-page .portfolio-scroll-reveal.is-visible {

    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    filter:
        blur(0);

}


/* =========================================================
   3. CARD STAGGER
========================================================= */

.portfolio-page
.portfolio-featured-grid
.portfolio-scroll-reveal:nth-child(2) {

    transition-delay: 80ms;

}


.portfolio-page
.portfolio-featured-grid
.portfolio-scroll-reveal:nth-child(3) {

    transition-delay: 160ms;

}


.portfolio-page
.portfolio-featured-grid
.portfolio-scroll-reveal:nth-child(4) {

    transition-delay: 240ms;

}


/* =========================================================
   4. HERO ORBIT — SOFT BREATHING
========================================================= */

.portfolio-page
.portfolio-mobile-orbit-active {

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

    will-change:
        transform;

}


@keyframes portfolioOrbitBreathing {

    0%,
    100% {

        filter:
            brightness(1);

    }

    50% {

        filter:
            brightness(1.12);

    }

}


/* =========================================================
   5. HERO META STAGGER
========================================================= */

.portfolio-page .portfolio-hero-meta span {

    transition:
        transform 300ms
        cubic-bezier(.22,1,.36,1);

}


@media (max-width: 767px) {

    .portfolio-page .portfolio-hero-meta span {

        opacity: 0;

        transform:
            translateY(10px);

        animation:
            portfolioMetaIn
            500ms
            cubic-bezier(.22,1,.36,1)
            forwards;

        animation-delay:
            var(--meta-delay);

    }

}


@keyframes portfolioMetaIn {

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   6. MOBILE CARD MOTION
========================================================= */

@media (max-width: 767px) {

    .portfolio-page .portfolio-featured-card,
    .portfolio-page .portfolio-grid-card {

        transform-origin:
            center bottom;

    }


    .portfolio-page
    .portfolio-featured-card.is-visible,
    .portfolio-page
    .portfolio-grid-card.is-visible {

        box-shadow:
            0 20px 60px
            rgba(0,0,0,0.28);

    }

}


/* =========================================================
   7. MOBILE ORBIT DOT GLOW
========================================================= */

@media (max-width: 767px) {

    .portfolio-page .orbit-dot {

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

    }


    .portfolio-page .dot-two {

        animation-delay:
            700ms;

    }


    .portfolio-page .dot-three {

        animation-delay:
            1400ms;

    }

}


@keyframes portfolioDotPulse {

    0%,
    100% {

        opacity:
            0.55;

        transform:
            scale(0.9);

    }

    50% {

        opacity:
            1;

        transform:
            scale(1.2);

    }

}


/* =========================================================
   8. TOUCH DEVICES — REMOVE HOVER DEPENDENCY
========================================================= */

@media (hover: none) {

    .portfolio-page
    .portfolio-featured-card:hover,
    .portfolio-page
    .portfolio-grid-card:hover {

        transform:
            none;

    }

}


/* =========================================================
   9. REDUCED MOTION
========================================================= */

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

    .portfolio-page .portfolio-scroll-reveal {

        opacity: 1;

        transform: none;

        filter: none;

        transition: none;

    }


    .portfolio-page
    .portfolio-mobile-orbit-active,
    .portfolio-page .orbit-dot,
    .portfolio-page .portfolio-hero-meta span {

        animation: none !important;

    }

}