/**
 * Compact portfolio hero + 3D case-study orbit
 */

.page-hero--portfolio.section-space {
    padding-top: 0.75rem;
    padding-bottom: 0.85rem;
}

.page-hero--portfolio .page-hero-shell,
.site-public .page-hero--portfolio .page-hero-shell,
.site-public .page-hero--portfolio .portfolio-hero {
    padding: 0.85rem 1.05rem;
    border-radius: 1.15rem;
    overflow: hidden;
}

.portfolio-hero__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(16rem, 0.95fr);
    gap: 0.75rem 1rem;
    align-items: center;
}

.portfolio-hero__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}

.page-hero--portfolio .eyebrow,
.portfolio-hero__copy .eyebrow {
    margin: 0;
    padding: 0.22rem 0.55rem;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
}

.page-hero--portfolio .page-hero-copy__title,
.page-hero--portfolio .display-title,
.site-public .page-hero--portfolio .display-title {
    margin: 0;
    max-width: 22ch;
    font-size: clamp(1.15rem, 2vw, 1.42rem) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.02em;
}

.page-hero--portfolio .page-intro,
.portfolio-hero__copy .page-intro {
    margin: 0;
    max-width: 34rem;
    font-size: 0.78rem;
    line-height: 1.45;
}

.portfolio-hero__metrics {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.15rem 0 0;
    padding: 0;
}

.portfolio-hero__metrics li {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.24rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(57, 198, 244, 0.22);
    background: rgba(7, 22, 36, 0.55);
}

.portfolio-hero__metrics strong {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    color: var(--color-text-primary, #f4f8ff);
}

.portfolio-hero__metrics span {
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted, #8ea2bb);
}

.portfolio-hero__stage {
    --pf-tilt-x: 0deg;
    --pf-tilt-y: 0deg;
    position: relative;
    width: 100%;
    height: 11.35rem;
    overflow: hidden;
    perspective: 900px;
    perspective-origin: 50% 58%;
}

.portfolio-hero__code {
    position: absolute;
    inset: 0.35rem 0.2rem;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.35rem;
    padding: 0.15rem 0;
    pointer-events: none;
    mask-image: radial-gradient(ellipse 58% 62% at 50% 48%, transparent 42%, #000 78%);
    -webkit-mask-image: radial-gradient(ellipse 58% 62% at 50% 48%, transparent 42%, #000 78%);
}

.portfolio-hero__code-track {
    display: flex;
    gap: 1.15rem;
    width: max-content;
    font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;
    font-size: 0.58rem;
    line-height: 1;
    color: rgba(57, 198, 244, 0.42);
    white-space: nowrap;
    animation: portfolioHeroCodeDrift 22s linear infinite;
}

.portfolio-hero__code-track span:nth-child(even) {
    color: rgba(108, 77, 255, 0.42);
}

.portfolio-hero__code-track--rev {
    animation-duration: 26s;
    animation-direction: reverse;
    opacity: 0.85;
}

.portfolio-hero__chips {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.portfolio-hero__chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.22rem 0.42rem 0.22rem 0.28rem;
    border-radius: 999px;
    border: 1px solid rgba(57, 198, 244, 0.32);
    background: rgba(6, 17, 27, 0.88);
    color: #7eb6ff;
    font-size: 0.58rem;
    letter-spacing: 0.04em;
    box-shadow: 0 6px 16px rgba(3, 8, 14, 0.4);
    animation: portfolioHeroChipFloat 5.2s ease-in-out infinite;
}

.portfolio-hero__chip i {
    font-size: 0.72rem;
    color: #25b8f5;
}

.portfolio-hero__chip--1 {
    left: 2%;
    top: 10%;
    animation-delay: 0s;
}

.portfolio-hero__chip--2 {
    right: 3%;
    top: 8%;
    animation-delay: -1.1s;
}

.portfolio-hero__chip--3 {
    left: 1%;
    bottom: 18%;
    animation-delay: -2.2s;
}

.portfolio-hero__chip--4 {
    right: 2%;
    bottom: 16%;
    animation-delay: -3.1s;
}

.portfolio-hero__chip--5 {
    left: 38%;
    top: 4%;
    animation-delay: -1.8s;
}

.portfolio-hero__chip--2 i,
.portfolio-hero__chip--3 i {
    color: #6c4dff;
}

.portfolio-hero__chip--4 i,
.portfolio-hero__chip--5 i {
    color: #39c6f4;
}

.portfolio-hero__signals {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.portfolio-hero__signal {
    position: absolute;
    padding: 0.16rem 0.38rem;
    border-radius: 0.35rem;
    border: 1px solid rgba(108, 77, 255, 0.28);
    background: rgba(7, 22, 36, 0.72);
    font-family: ui-monospace, "Cascadia Code", monospace;
    font-size: 0.52rem;
    letter-spacing: 0.06em;
    color: rgba(126, 182, 255, 0.82);
    animation: portfolioHeroSignal 6.4s ease-in-out infinite;
}

.portfolio-hero__signal--1 {
    right: 18%;
    top: 22%;
    animation-delay: 0s;
}

.portfolio-hero__signal--2 {
    left: 8%;
    top: 42%;
    animation-delay: -2s;
}

.portfolio-hero__signal--3 {
    right: 6%;
    bottom: 34%;
    animation-delay: -3.4s;
}

.portfolio-hero__seo {
    position: absolute;
    right: 8%;
    bottom: 8%;
    z-index: 3;
    width: 4.4rem;
    height: 1.7rem;
    opacity: 0.7;
    pointer-events: none;
}

.portfolio-hero__seo-line {
    fill: none;
    stroke: #25b8f5;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-dasharray: 90;
    animation: portfolioHeroSeoDraw 4.8s ease-in-out infinite;
}

.portfolio-hero__seo-dot {
    fill: #6c4dff;
    animation: portfolioHeroSeoDot 4.8s ease-in-out infinite;
}

.portfolio-hero__floor {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 74%;
    height: 3.2rem;
    transform: rotateX(78deg);
    transform-origin: center top;
    background-image:
        linear-gradient(rgba(57, 198, 244, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57, 198, 244, 0.12) 1px, transparent 1px);
    background-size: 1.05rem 1.05rem;
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    opacity: 0.6;
    pointer-events: none;
}

.portfolio-hero__glow {
    position: absolute;
    left: 50%;
    top: 58%;
    width: 8.5rem;
    height: 2.8rem;
    transform: translate(-50%, 0);
    background: radial-gradient(ellipse at center, rgba(37, 184, 245, 0.26), transparent 70%);
    filter: blur(10px);
    pointer-events: none;
}

.portfolio-hero__deck {
    position: absolute;
    inset: 0;
    z-index: 6;
    transform-style: preserve-3d;
    transform: rotateX(calc(14deg + var(--pf-tilt-x))) rotateY(calc(-10deg + var(--pf-tilt-y)));
    transition: transform 180ms ease-out;
}

.portfolio-hero__card {
    position: absolute;
    left: 50%;
    top: 46%;
    width: 9.1rem;
    height: 5.85rem;
    margin: -2.925rem 0 0 -4.55rem;
    transform-style: preserve-3d;
    animation: portfolioHeroOrbit 9s ease-in-out infinite;
}

.portfolio-hero__card--1 {
    animation-delay: 0s;
}

.portfolio-hero__card--2 {
    animation-delay: -3s;
}

.portfolio-hero__card--3 {
    animation-delay: -6s;
}

.portfolio-hero__card-face {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0.7rem;
    border: 1px solid rgba(126, 182, 255, 0.28);
    background: #0b1724;
    box-shadow:
        0 10px 24px rgba(3, 8, 14, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    backface-visibility: hidden;
}

.portfolio-hero__card-face img,
.portfolio-hero__card-fallback {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.portfolio-hero__card-fallback {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 30% 20%, rgba(37, 184, 245, 0.35), transparent 50%),
        linear-gradient(145deg, #123056, #07121f);
    color: #7eb6ff;
    font-size: 1.25rem;
}

.portfolio-hero__card-meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    gap: 0.04rem;
    padding: 1.05rem 0.5rem 0.38rem;
    background: linear-gradient(180deg, transparent, rgba(5, 12, 20, 0.92));
}

.portfolio-hero__card-meta small {
    font-size: 0.52rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7eb6ff;
}

.portfolio-hero__card-meta strong {
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.2;
    color: #f4f8ff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes portfolioHeroOrbit {
    0%,
    100% {
        transform: translateX(-3.85rem) translateZ(-40px) rotateY(30deg) scale(0.86);
        z-index: 1;
        opacity: 0.78;
    }

    33% {
        transform: translateX(0) translateZ(52px) rotateY(0deg) scale(1.04);
        z-index: 4;
        opacity: 1;
    }

    66% {
        transform: translateX(3.85rem) translateZ(-40px) rotateY(-30deg) scale(0.86);
        z-index: 2;
        opacity: 0.78;
    }
}

@keyframes portfolioHeroCodeDrift {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

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

    50% {
        transform: translateY(-0.38rem);
    }
}

@keyframes portfolioHeroSignal {
    0%,
    100% {
        opacity: 0.35;
        transform: translateY(0);
    }

    50% {
        opacity: 0.95;
        transform: translateY(-0.28rem);
    }
}

@keyframes portfolioHeroSeoDraw {
    0% {
        stroke-dashoffset: 90;
        opacity: 0.35;
    }

    45%,
    70% {
        stroke-dashoffset: 0;
        opacity: 0.95;
    }

    100% {
        stroke-dashoffset: 0;
        opacity: 0.4;
    }
}

@keyframes portfolioHeroSeoDot {
    0%,
    35% {
        opacity: 0.2;
        transform: scale(0.7);
    }

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

    100% {
        opacity: 0.35;
        transform: scale(0.85);
    }
}

.portfolio-page .filter-bar {
    margin-top: 0.1rem;
}

@media (max-width: 639.98px) {
    .portfolio-hero__layout {
        grid-template-columns: 1fr;
        gap: 0.55rem;
    }

    .page-hero--portfolio .page-hero-copy__title,
    .page-hero--portfolio .display-title,
    .site-public .page-hero--portfolio .display-title {
        max-width: none;
        font-size: clamp(1.15rem, 5.2vw, 1.35rem) !important;
    }

    .portfolio-hero__stage {
        height: 10.5rem;
    }
}

@media (max-width: 575.98px) {
    .page-hero--portfolio.section-space {
        padding-top: 0.65rem;
        padding-bottom: 0.7rem;
    }

    .page-hero--portfolio .page-hero-shell,
    .site-public .page-hero--portfolio .page-hero-shell {
        padding: 0.8rem 0.85rem 0.9rem;
    }

    .portfolio-hero__stage {
        height: 9.6rem;
    }

    .portfolio-hero__card {
        width: 8.1rem;
        height: 5.2rem;
        margin: -2.6rem 0 0 -4.05rem;
    }

    .portfolio-hero__signal--2,
    .portfolio-hero__seo {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .portfolio-hero__card {
        animation: none;
        opacity: 1;
    }

    .portfolio-hero__card--1 {
        transform: translateX(-3.2rem) translateZ(-28px) rotateY(24deg) scale(0.9);
        z-index: 1;
    }

    .portfolio-hero__card--2 {
        transform: translateX(0) translateZ(40px) rotateY(0deg) scale(1);
        z-index: 4;
    }

    .portfolio-hero__card--3 {
        transform: translateX(3.2rem) translateZ(-28px) rotateY(-24deg) scale(0.9);
        z-index: 2;
    }

    .portfolio-hero__deck,
    .portfolio-hero__code-track,
    .portfolio-hero__chip,
    .portfolio-hero__signal,
    .portfolio-hero__seo-line,
    .portfolio-hero__seo-dot {
        animation: none;
        transition: none;
    }
}