/* DOTNET EXPERT — PORTFOLIO
   Page-specific styles only. Shared shell, header, sections and typography: site.css.
   Load site.css before portfolio.css. */
#port-page {
    --port-cyan-soft: #e9fafd;
    --port-shadow-hover: 0 22px 48px rgba(38,54,58,.13);
}

    #port-page .port-intro__cta,
    #port-page .port-closing__cta {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-top: 12px;
        padding: 12px 18px;
        border: 1px solid var(--site-primary);
        border-radius: 12px;
        background: linear-gradient( 135deg, var(--site-primary-dark), var(--site-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(--site-ease), box-shadow .28s ease, background-position .3s ease;
    }

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

        #port-page .port-intro__cta i,
        #port-page .port-closing__cta i {
            transition: transform .25s var(--site-ease);
        }

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

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

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

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

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

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

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

        #port-page .port-project-card:hover {
            transform: translateY(-5px);
            border-color: #bddde4;
            box-shadow: var(--port-shadow-hover);
        }

    #port-page .port-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%);
    }

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

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

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

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

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

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

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

    #port-page .port-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));
    }

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

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

    #port-page .port-project-card__content {
        padding: 30px 30px 28px;
    }

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

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

    #port-page .port-project-card__content p {
        margin: 0 0 12px;
        color: var(--site-text);
    }

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

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

    #port-page .port-project-card__tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

        #port-page .port-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;
        }

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

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

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

        #port-page .port-capability:hover {
            transform: translateY(-5px);
            border-color: #dec196;
            box-shadow: var(--port-shadow-hover);
        }

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

        #port-page .port-capability p {
            margin: 0;
        }

    #port-page .port-technologies > .page-section-title {
        color: #fff;
    }

    #port-page .port-technologies > p {
        color: #c7e1e5;
    }

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

        #port-page .port-technologies::before {
            background: var(--site-primary);
        }

        #port-page .port-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;
        }

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

    #port-page .port-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;
    }

    #port-page .port-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: 1;
        transform: none;
        transition: opacity .55s var(--site-ease), transform .55s var(--site-ease), border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
        transition-delay: var(--animation-delay, 0ms);
    }

        #port-page .port-technologies__group: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);
        }

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

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

    #port-page .port-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: 12px;
        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;
    }

        #port-page .port-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);
        }

    #port-page .port-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: 13px;
        font-weight: 750;
    }

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

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

    #port-page .port-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: 1;
        transform: none;
        transition: opacity .55s var(--site-ease), transform .55s var(--site-ease), box-shadow .3s ease, border-color .3s ease;
        transition-delay: var(--animation-delay, 0ms);
    }

        #port-page .port-support-card:hover {
            transform: translateY(-5px);
            border-color: #b0d9e0;
            box-shadow: var(--port-shadow-hover);
        }

    #port-page .port-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(--site-primary-dark);
        font-size: 12px;
        font-weight: 850;
    }

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

    #port-page .port-support-card p {
        margin: 0;
    }

    #port-page .port-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%);
    }

        #port-page .port-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(--site-ease);
        }

        #port-page .port-closing:hover::after {
            transform: scale(1.12);
        }

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

@media (max-width: 1180px) {
    #port-page .port-projects {
        padding-left: 32px;
        padding-right: 32px;
    }
}

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

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

    #port-page .port-project-card__media {
        min-height: 260px;
    }

    #port-page .port-technologies__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {

    #port-page .port-projects {
        padding: 22px 20px;
    }

    #port-page .port-capabilities-grid,
    #port-page .port-support-grid {
        grid-template-columns: 1fr;
    }

    #port-page .port-project-card__content {
        padding: 24px 22px 22px;
    }
}

@media (max-width: 480px) {

    #port-page .port-projects {
        gap: 16px;
        padding: 20px 14px;
    }

    #port-page .port-project-card {
        border-radius: 16px;
    }

    #port-page .port-project-card__media {
        min-height: 220px;
        padding: 18px;
    }

    #port-page .port-project-card__content {
        padding: 20px 18px;
    }

    #port-page .port-project-card__title {
        font-size: 24px;
    }

    #port-page .port-capability,
    #port-page .port-support-card {
        padding: 18px;
    }

    #port-page .port-support-card {
        padding-left: 64px;
    }
}

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

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

/* Scroll reveal: the visible state animates when IntersectionObserver adds it.
   Without JavaScript, cards remain visible. */
@media (prefers-reduced-motion: no-preference) {
    #port-page.animation-ready .port-project-card.is-visible,
    #port-page.animation-ready .port-capability.is-visible,
    #port-page.animation-ready .port-technologies__group.is-visible,
    #port-page.animation-ready .port-support-card.is-visible {
        animation: port-reveal .65s var(--site-ease, ease-out) both;
        animation-delay: var(--animation-delay, 0ms);
    }
}

@keyframes port-reveal {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

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

/* Initial page-load entrance, separate from scroll-reveal cards.
   Scoped to Portfolio; shared site.css and other pages remain unchanged. */
@media (prefers-reduced-motion: no-preference) {
    #port-page .page-main {
        animation: port-page-enter .75s var(--site-ease, ease-out) both;
    }

    #port-page .page-header .page-eyebrow {
        animation: port-content-enter .55s .12s var(--site-ease, ease-out) both;
    }

    #port-page .page-header .page-title {
        animation: port-content-enter .7s .2s var(--site-ease, ease-out) both;
    }

    #port-page .page-header .page-description {
        animation: port-content-enter .65s var(--site-ease, ease-out) both;
    }

        #port-page .page-header .page-description:nth-of-type(1) {
            animation-delay: .3s;
        }

        #port-page .page-header .page-description:nth-of-type(2) {
            animation-delay: .38s;
        }

        #port-page .page-header .page-description:nth-of-type(3) {
            animation-delay: .46s;
        }

    #port-page .page-header .port-intro__cta {
        animation: port-content-enter .65s .52s var(--site-ease, ease-out) both;
    }
}

@keyframes port-page-enter {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

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

@keyframes port-content-enter {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

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