/* =========================================================
   PORTFOLIO / PROJECTS
   Web Deployment-aligned visual system with portfolio naming.
   ========================================================= */

#portfolio-overview.portfolio-page {
    --portfolio-ink: #303638;
    --portfolio-heading: #2f3638;
    --portfolio-primary: #159fca;
    --portfolio-primary-dark: #087aa1;
    --portfolio-accent: #22c9df;
    --portfolio-cyan-soft: #e9fafd;
    --portfolio-text: #58676d;
    --portfolio-muted: #819096;
    --portfolio-border: #dce7ea;
    --portfolio-soft: #f5fafb;
    --portfolio-white: #ffffff;
    --portfolio-green: #2e8b70;
    --portfolio-orange: #bd7a32;
    --portfolio-purple: #6d68a7;
    --portfolio-radius: 20px;
    --portfolio-shadow: 0 18px 48px rgba(38,54,58,.075);
    --portfolio-shadow-hover: 0 22px 48px rgba(38,54,58,.13);
    --portfolio-ease: cubic-bezier(.22, 1, .36, 1);
    position: relative;
    overflow: clip;
    padding: 91px 0 68px;
    color: var(--portfolio-text);
    background: radial-gradient(circle at 8% 5%, rgba(34,201,223,.13), transparent 24%), radial-gradient(circle at 95% 14%, rgba(21,159,202,.10), transparent 23%), linear-gradient(180deg, #f7fbfc 0%, #ffffff 46%, #f7fbfc 100%);
    font-size: 16px;
    line-height: 1.75;
}

#portfolio-overview::before,
#portfolio-overview::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
}

#portfolio-overview::before {
    width: 360px;
    height: 360px;
    top: 280px;
    left: -230px;
    border: 1px solid rgba(34,201,223,.14);
    box-shadow: 0 0 0 28px rgba(34,201,223,.025), 0 0 0 58px rgba(34,201,223,.018);
}

#portfolio-overview::after {
    width: 280px;
    height: 280px;
    right: -190px;
    bottom: 320px;
    border: 1px solid rgba(21,159,202,.12);
}

#portfolio-overview,
#portfolio-overview * {
    box-sizing: border-box;
}

    #portfolio-overview img {
        max-width: 100%;
        height: auto;
    }

    #portfolio-overview a {
        color: var(--portfolio-primary-dark);
    }

    #portfolio-overview p:last-child {
        margin-bottom: 0;
    }

    /* ---------------------------------------------------------
   Container / Main panel
   --------------------------------------------------------- */

    #portfolio-overview .portfolio-container {
        position: relative;
        z-index: 1;
        width: min(1180px, calc(100% - 40px));
        margin: 20px auto;
    }

    #portfolio-overview .portfolio-main {
        min-width: 0;
        overflow: hidden;
        border: 1px solid var(--portfolio-border);
        border-radius: 24px;
        background: var(--portfolio-white);
        box-shadow: var(--portfolio-shadow);
        animation: portfolioFadeUp .65s var(--portfolio-ease) both;
    }

    /* ---------------------------------------------------------
   Intro / Hero
   --------------------------------------------------------- */

    #portfolio-overview .portfolio-intro {
        position: relative;
        overflow: hidden;
        padding: 46px 48px 44px;
        background: radial-gradient(circle at 88% 0%, rgba(34,201,223,.16), transparent 31%), linear-gradient(135deg, #ffffff 0%, #f5fafb 100%);
    }

        #portfolio-overview .portfolio-intro::before {
            content: "";
            position: absolute;
            top: 0;
            left: 48px;
            width: 86px;
            height: 4px;
            border-radius: 0 0 6px 6px;
            background: linear-gradient( 90deg, var(--portfolio-primary), var(--portfolio-accent) );
        }

    #portfolio-overview .portfolio-intro__eyebrow {
        display: inline-flex;
        align-items: center;
        margin: 0 0 18px;
        padding: 6px 12px;
        border: 1px solid #c9eaf0;
        border-radius: 999px;
        background: rgba(255,255,255,.82);
        color: var(--portfolio-primary-dark);
        font-size: 10px;
        font-weight: 850;
        letter-spacing: .15em;
        line-height: 1.2;
        box-shadow: 0 5px 15px rgba(21,159,202,.06);
    }

    #portfolio-overview .portfolio-intro__title {
        max-width: 930px;
        margin: 0 0 22px;
        color: var(--portfolio-heading);
        font-size: clamp(36px, 4vw, 56px);
        font-weight: 780;
        line-height: 1.06;
        letter-spacing: -.045em;
        animation: portfolioTitleIn .75s var(--portfolio-ease) both;
    }

    #portfolio-overview .portfolio-intro__text {
        max-width: 930px;
        margin: 0 0 14px;
        color: #5d7077;
        font-size: 17px;
        line-height: 1.82;
        animation: portfolioTextIn .7s .12s var(--portfolio-ease) both;
    }

    #portfolio-overview .portfolio-intro__cta,
    #portfolio-overview .portfolio-closing__cta {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-top: 12px;
        padding: 12px 18px;
        border: 1px solid var(--portfolio-primary);
        border-radius: 12px;
        background: linear-gradient( 135deg, var(--portfolio-primary-dark), var(--portfolio-primary) );
        color: #ffffff;
        font-size: 14px;
        font-weight: 750;
        line-height: 1.2;
        text-decoration: none;
        box-shadow: 0 10px 24px rgba(21,159,202,.18);
        transition: transform .28s var(--portfolio-ease), box-shadow .28s ease, background-position .3s ease;
    }

        #portfolio-overview .portfolio-intro__cta:hover,
        #portfolio-overview .portfolio-closing__cta:hover {
            transform: translateY(-2px);
            color: #ffffff;
            box-shadow: 0 14px 30px rgba(21,159,202,.24);
        }

        #portfolio-overview .portfolio-intro__cta i,
        #portfolio-overview .portfolio-closing__cta i {
            transition: transform .25s var(--portfolio-ease);
        }

        #portfolio-overview .portfolio-intro__cta:hover i,
        #portfolio-overview .portfolio-closing__cta:hover i {
            transform: translateX(3px);
        }

    /* ---------------------------------------------------------
   Common content blocks
   --------------------------------------------------------- */

    #portfolio-overview .portfolio-block {
        position: relative;
        padding: 40px 48px;
        border-top: 1px solid rgba(210,224,228,.78);
    }

        #portfolio-overview .portfolio-block::before {
            content: "";
            position: absolute;
            top: 0;
            left: 48px;
            width: 58px;
            height: 3px;
            border-radius: 0 0 5px 5px;
            background: var(--portfolio-primary);
        }

    #portfolio-overview .portfolio-block__title {
        position: relative;
        margin: 0 0 25px;
        color: var(--portfolio-heading);
        font-size: clamp(27px, 2.4vw, 35px);
        font-weight: 740;
        line-height: 1.2;
        letter-spacing: -.028em;
    }

        #portfolio-overview .portfolio-block__title::after {
            content: "";
            display: block;
            width: 42px;
            height: 3px;
            margin-top: 12px;
            border-radius: 3px;
            background: var(--portfolio-accent);
            transform-origin: left center;
            transition: width .35s var(--portfolio-ease);
        }

    #portfolio-overview .portfolio-block:hover .portfolio-block__title::after {
        width: 64px;
    }

    #portfolio-overview .portfolio-block p {
        margin-top: 0;
        margin-bottom: 14px;
    }

    #portfolio-overview .portfolio-overview-block {
        background: linear-gradient(135deg, #eefbfd 0%, #ffffff 80%);
    }

        #portfolio-overview .portfolio-overview-block::before {
            background: var(--portfolio-accent);
        }

    /* ---------------------------------------------------------
   Project cards
   --------------------------------------------------------- */

    #portfolio-overview .portfolio-projects {
        display: grid;
        gap: 20px;
        padding: 28px 48px 48px;
        border-top: 1px solid rgba(210,224,228,.78);
        background: #ffffff;
    }

    #portfolio-overview .portfolio-project-card {
        display: grid;
        grid-template-columns: minmax(260px, .9fr) minmax(0, 1.35fr);
        overflow: hidden;
        border: 1px solid var(--portfolio-border);
        border-radius: 20px;
        background: #ffffff;
        box-shadow: 0 10px 30px rgba(38,54,58,.055);
        opacity: 0;
        transform: translateY(18px);
        transition: opacity .55s var(--portfolio-ease), transform .55s var(--portfolio-ease), border-color .3s ease, box-shadow .3s ease;
        transition-delay: var(--animation-delay, 0ms);
    }

        #portfolio-overview .portfolio-project-card:nth-child(even) {
            grid-template-columns: minmax(0, 1.35fr) minmax(260px, .9fr);
        }

            #portfolio-overview .portfolio-project-card:nth-child(even) .portfolio-project-card__media {
                order: 2;
            }

            #portfolio-overview .portfolio-project-card:nth-child(even) .portfolio-project-card__content {
                order: 1;
            }

        #portfolio-overview .portfolio-project-card.is-visible:hover {
            transform: translateY(-5px);
            border-color: #bddde4;
            box-shadow: var(--portfolio-shadow-hover);
        }

    #portfolio-overview .portfolio-project-card__media {
        position: relative;
        min-height: 310px;
        margin: 0;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 28px;
        background: radial-gradient(circle at 25% 20%, rgba(34,201,223,.13), transparent 30%), linear-gradient(145deg, #eef6f8 0%, #dfeaec 100%);
    }

    #portfolio-overview .portfolio-project-card:nth-child(2) .portfolio-project-card__media {
        background: linear-gradient(145deg, #f2f6fa, #e2e8ef);
    }

    #portfolio-overview .portfolio-project-card:nth-child(3) .portfolio-project-card__media {
        background: linear-gradient(145deg, #eff8f3, #e1eee7);
    }

    #portfolio-overview .portfolio-project-card:nth-child(4) .portfolio-project-card__media {
        background: linear-gradient(145deg, #f7f7f7, #e8e8e8);
    }

    #portfolio-overview .portfolio-project-card:nth-child(5) .portfolio-project-card__media {
        background: linear-gradient(145deg, #fff4f0, #f8ddd6);
    }

    #portfolio-overview .portfolio-project-card:nth-child(6) .portfolio-project-card__media {
        background: linear-gradient(145deg, #eef6ff, #dfeeff);
    }

    #portfolio-overview .portfolio-project-card:nth-child(7) .portfolio-project-card__media {
        background: linear-gradient(145deg, #eef8f2, #dfede4);
    }

    #portfolio-overview .portfolio-project-card:nth-child(8) .portfolio-project-card__media {
        background: linear-gradient(145deg, #f7f4ff, #e9e3f6);
    }

    #portfolio-overview .portfolio-project-card__media::after {
        content: "";
        position: absolute;
        inset: auto 0 0;
        height: 32%;
        pointer-events: none;
        background: linear-gradient(180deg, transparent, rgba(47,54,56,.08));
    }

    #portfolio-overview .portfolio-project-card__media img {
        display: block;
        width: 100%;
        max-height: 340px;
        object-fit: contain;
        border-radius: 12px;
        transition: transform .55s var(--portfolio-ease), filter .55s ease;
    }

    #portfolio-overview .portfolio-project-card:hover .portfolio-project-card__media img {
        transform: scale(1.025);
        filter: saturate(1.04);
    }

    #portfolio-overview .portfolio-project-card__content {
        padding: 30px 30px 28px;
    }

    #portfolio-overview .portfolio-project-card__client {
        display: inline-flex;
        align-items: center;
        margin-bottom: 13px;
        padding: 5px 10px;
        border: 1px solid #cbe7ec;
        border-radius: 999px;
        background: var(--portfolio-cyan-soft);
        color: var(--portfolio-primary-dark);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .03em;
        line-height: 1.3;
    }

    #portfolio-overview .portfolio-project-card__title {
        margin: 0 0 16px;
        color: var(--portfolio-heading);
        font-size: clamp(24px, 2.3vw, 32px);
        font-weight: 760;
        line-height: 1.18;
        letter-spacing: -.025em;
    }

    #portfolio-overview .portfolio-project-card__content p {
        margin: 0 0 12px;
        color: var(--portfolio-text);
    }

    #portfolio-overview .portfolio-project-card__technologies {
        margin-top: 20px;
        padding-top: 18px;
        border-top: 1px solid #e6eef0;
    }

        #portfolio-overview .portfolio-project-card__technologies > strong {
            display: block;
            margin-bottom: 10px;
            color: var(--portfolio-heading);
            font-size: 14px;
            font-weight: 780;
        }

    #portfolio-overview .portfolio-project-card__tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

        #portfolio-overview .portfolio-project-card__tags span {
            display: inline-flex;
            align-items: center;
            min-height: 31px;
            padding: 6px 10px;
            border: 1px solid #d9e8eb;
            border-radius: 9px;
            background: #f7fbfc;
            color: #4b5e64;
            font-size: 12px;
            font-weight: 700;
            line-height: 1.2;
        }

    /* ---------------------------------------------------------
   Capability cards
   --------------------------------------------------------- */

    #portfolio-overview #portfolio-project-range {
        background: linear-gradient(135deg, #fffaf3 0%, #ffffff 82%);
    }

        #portfolio-overview #portfolio-project-range::before,
        #portfolio-overview #portfolio-project-range .portfolio-block__title::after {
            background: var(--portfolio-orange);
        }

    #portfolio-overview .portfolio-capabilities-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        margin-top: 24px;
    }

    #portfolio-overview .portfolio-capability {
        padding: 20px;
        border: 1px solid #eadcc8;
        border-radius: 16px;
        background: rgba(255,255,255,.88);
        opacity: 0;
        transform: translateY(18px);
        transition: opacity .55s var(--portfolio-ease), transform .55s var(--portfolio-ease), border-color .3s ease, box-shadow .3s ease;
        transition-delay: var(--animation-delay, 0ms);
    }

        #portfolio-overview .portfolio-capability.is-visible:hover {
            transform: translateY(-5px);
            border-color: #dec196;
            box-shadow: var(--portfolio-shadow-hover);
        }

        #portfolio-overview .portfolio-capability h3 {
            margin: 0 0 8px;
            color: var(--portfolio-heading);
            font-size: 19px;
        }

        #portfolio-overview .portfolio-capability p {
            margin: 0;
        }

    /* ---------------------------------------------------------
   Technologies
   --------------------------------------------------------- */

    #portfolio-overview .portfolio-technologies {
        position: relative;
        overflow: hidden;
        color: #eefbfc;
        background: linear-gradient( 135deg, #10282f 0%, #12343d 52%, #0d242b 100% );
    }

        #portfolio-overview .portfolio-technologies::before {
            background: var(--portfolio-primary);
        }

        #portfolio-overview .portfolio-technologies::after {
            content: "";
            position: absolute;
            width: 280px;
            height: 280px;
            right: -100px;
            top: -130px;
            border-radius: 50%;
            background: rgba(34,201,223,.10);
            pointer-events: none;
        }

        #portfolio-overview .portfolio-technologies .portfolio-block__title {
            color: #ffffff;
        }

        #portfolio-overview .portfolio-technologies > p {
            position: relative;
            z-index: 1;
            color: #c7e1e5;
        }

    #portfolio-overview .portfolio-technologies__grid {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
        margin-top: 26px;
        align-items: stretch;
        grid-auto-rows: 1fr;
    }

    #portfolio-overview .portfolio-technologies__group {
        display: flex;
        flex-direction: column;
        min-height: 205px;
        height: 100%;
        padding: 22px;
        border: 1px solid rgba(96,226,239,.18);
        border-radius: 16px;
        background: linear-gradient( 145deg, rgba(255,255,255,.055), rgba(34,201,223,.035) );
        box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 14px 30px rgba(0,0,0,.14);
        backdrop-filter: blur(6px);
        opacity: 0;
        transform: translateY(18px);
        transition: opacity .55s var(--portfolio-ease), transform .55s var(--portfolio-ease), border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
        transition-delay: var(--animation-delay, 0ms);
    }

        #portfolio-overview .portfolio-technologies__group.is-visible:hover {
            transform: translateY(-5px);
            border-color: rgba(34,201,223,.48);
            background: rgba(255,255,255,.075);
            box-shadow: 0 18px 38px rgba(0,0,0,.18);
        }

        #portfolio-overview .portfolio-technologies__group h3 {
            margin: 0 0 14px;
            color: #ffffff;
            font-size: 17px;
            font-weight: 760;
        }

    #portfolio-overview .portfolio-technologies__items {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        flex: 1;
    }

    #portfolio-overview .portfolio-technologies__item {
        display: flex;
        min-height: 43px;
        align-items: center;
        justify-content: center;
        padding: 9px 10px;
        border: 1px solid rgba(91,220,234,.20);
        border-radius: 10px;
        background: rgba(7,27,33,.52);
        color: #e5f8fa;
        font-size: .86rem;
        font-weight: 650;
        line-height: 1.25;
        text-align: center;
        transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
    }

        #portfolio-overview .portfolio-technologies__item:hover {
            transform: translateY(-2px);
            border-color: rgba(69,220,237,.62);
            background: rgba(34,201,223,.12);
            box-shadow: 0 7px 18px rgba(0,0,0,.14);
        }

    #portfolio-overview .portfolio-technologies__item--featured {
        border-color: rgba(65,221,237,.48);
        background: linear-gradient( 135deg, rgba(34,201,223,.17), rgba(34,201,223,.07) );
        color: #ffffff;
        font-size: .92rem;
        font-weight: 750;
    }

    /* ---------------------------------------------------------
   Support / working style
   --------------------------------------------------------- */

    #portfolio-overview #portfolio-support {
        background: linear-gradient(135deg, #f2fafc 0%, #e9f6f9 100%);
    }

    #portfolio-overview .portfolio-support-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        margin-top: 26px;
    }

    #portfolio-overview .portfolio-support-card {
        position: relative;
        min-height: 155px;
        padding: 20px 20px 18px 68px;
        border: 1px solid #d1e4e8;
        border-radius: 16px;
        background: rgba(255,255,255,.86);
        opacity: 0;
        transform: translateY(18px);
        transition: opacity .55s var(--portfolio-ease), transform .55s var(--portfolio-ease), box-shadow .3s ease, border-color .3s ease;
        transition-delay: var(--animation-delay, 0ms);
    }

        #portfolio-overview .portfolio-support-card.is-visible:hover {
            transform: translateY(-5px);
            border-color: #b0d9e0;
            box-shadow: var(--portfolio-shadow-hover);
        }

    #portfolio-overview .portfolio-support-card__number {
        position: absolute;
        top: 22px;
        left: 21px;
        display: grid;
        width: 36px;
        height: 36px;
        place-items: center;
        border-radius: 10px;
        background: linear-gradient(145deg, #e1f7fa, #d1eef2);
        color: var(--portfolio-primary-dark);
        font-size: 12px;
        font-weight: 850;
    }

    #portfolio-overview .portfolio-support-card h3 {
        margin: 0 0 8px;
        color: var(--portfolio-heading);
        font-size: 19px;
    }

    #portfolio-overview .portfolio-support-card p {
        margin: 0;
    }

    /* ---------------------------------------------------------
   Closing CTA
   --------------------------------------------------------- */

    #portfolio-overview .portfolio-closing {
        position: relative;
        overflow: hidden;
        background: radial-gradient(circle at 92% 15%, rgba(34,201,223,.24), transparent 25%), linear-gradient(135deg, #eaf9fc 0%, #f8fcfd 100%);
    }

        #portfolio-overview .portfolio-closing::after {
            content: "";
            position: absolute;
            width: 230px;
            height: 230px;
            right: -95px;
            bottom: -125px;
            border: 1px solid rgba(21,159,202,.18);
            border-radius: 50%;
            box-shadow: 0 0 0 28px rgba(21,159,202,.035), 0 0 0 56px rgba(21,159,202,.025);
            pointer-events: none;
            transition: transform .55s var(--portfolio-ease);
        }

        #portfolio-overview .portfolio-closing:hover::after {
            transform: scale(1.12);
        }

    /* ---------------------------------------------------------
   Visible states
   --------------------------------------------------------- */

    #portfolio-overview .portfolio-project-card.is-visible,
    #portfolio-overview .portfolio-capability.is-visible,
    #portfolio-overview .portfolio-technologies__group.is-visible,
    #portfolio-overview .portfolio-support-card.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 960px) {
    #portfolio-overview .portfolio-project-card,
    #portfolio-overview .portfolio-project-card:nth-child(even) {
        grid-template-columns: 1fr;
    }

        #portfolio-overview .portfolio-project-card:nth-child(even) .portfolio-project-card__media,
        #portfolio-overview .portfolio-project-card:nth-child(even) .portfolio-project-card__content {
            order: initial;
        }

    #portfolio-overview .portfolio-project-card__media {
        min-height: 260px;
    }

    #portfolio-overview .portfolio-technologies__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    #portfolio-overview {
        padding: 90px 0 48px;
    }

        #portfolio-overview .portfolio-container {
            width: min(100% - 20px, 680px);
        }

        #portfolio-overview .portfolio-intro,
        #portfolio-overview .portfolio-block {
            padding-left: 22px;
            padding-right: 22px;
        }

        #portfolio-overview .portfolio-intro {
            padding-top: 30px;
            padding-bottom: 28px;
        }

            #portfolio-overview .portfolio-intro::before,
            #portfolio-overview .portfolio-block::before {
                left: 22px;
            }

        #portfolio-overview .portfolio-intro__title {
            font-size: clamp(32px, 8.5vw, 43px);
        }

        #portfolio-overview .portfolio-projects {
            padding: 22px;
        }

        #portfolio-overview .portfolio-capabilities-grid,
        #portfolio-overview .portfolio-support-grid {
            grid-template-columns: 1fr;
        }

        #portfolio-overview .portfolio-project-card__content {
            padding: 24px 22px 22px;
        }
}

@media (max-width: 480px) {
    #portfolio-overview {
        padding: 88px 0 36px;
    }

        #portfolio-overview .portfolio-container {
            width: calc(100% - 12px);
        }

        #portfolio-overview .portfolio-main {
            border-radius: 18px;
        }

        #portfolio-overview .portfolio-intro,
        #portfolio-overview .portfolio-block {
            padding-left: 16px;
            padding-right: 16px;
        }

        #portfolio-overview .portfolio-intro {
            padding-top: 24px;
            padding-bottom: 22px;
        }

            #portfolio-overview .portfolio-intro::before,
            #portfolio-overview .portfolio-block::before {
                left: 16px;
            }

        #portfolio-overview .portfolio-intro__title {
            font-size: 34px;
            line-height: 1.1;
        }

        #portfolio-overview .portfolio-intro__text {
            font-size: 16px;
            line-height: 1.75;
        }

        #portfolio-overview .portfolio-block {
            padding-top: 30px;
            padding-bottom: 30px;
        }

        #portfolio-overview .portfolio-block__title {
            font-size: 24px;
        }

        #portfolio-overview .portfolio-projects {
            gap: 16px;
            padding: 16px;
        }

        #portfolio-overview .portfolio-project-card {
            border-radius: 16px;
        }

        #portfolio-overview .portfolio-project-card__media {
            min-height: 220px;
            padding: 18px;
        }

        #portfolio-overview .portfolio-project-card__content {
            padding: 20px 18px;
        }

        #portfolio-overview .portfolio-project-card__title {
            font-size: 24px;
        }

        #portfolio-overview .portfolio-capability,
        #portfolio-overview .portfolio-support-card {
            padding: 18px;
        }

        #portfolio-overview .portfolio-support-card {
            padding-left: 64px;
        }
}

/* ---------------------------------------------------------
   Motion
   --------------------------------------------------------- */

@keyframes portfolioFadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes portfolioTitleIn {
    from {
        opacity: 0;
        transform: translateY(22px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes portfolioTextIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    #portfolio-overview *,
    #portfolio-overview *::before,
    #portfolio-overview *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    #portfolio-overview .portfolio-project-card,
    #portfolio-overview .portfolio-capability,
    #portfolio-overview .portfolio-technologies__group,
    #portfolio-overview .portfolio-support-card {
        opacity: 1;
        transform: none;
        transition-delay: 0ms;
    }
}