@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

.portfolio-page .portfolio-tech-hero {
    --pfh-bg: #1a0b0f;
    --pfh-wine: #2a0d16;
    --pfh-title: #f7f2ef;
    --pfh-title-x: 0px;
    --pfh-title-y: 0px;
    --pfh-person-x: 0px;
    --pfh-person-y: 0px;
    --pfh-title-scale-y: 1;
    position: relative;
    isolation: isolate;
    width: 100%;
    height: max(720px, 100svh);
    min-height: 100svh;
    overflow: hidden;
    color: var(--pfh-title);
    background:
        radial-gradient(circle at 50% 12%, rgba(242, 54, 101, 0.18), transparent 34rem),
        linear-gradient(145deg, var(--pfh-bg) 0%, var(--pfh-wine) 54%, #18090e 100%);
    contain: layout paint;
}

.portfolio-page .pfh-frame {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
    max-width: 1600px;
    margin-inline: auto;
}

.portfolio-page .pfh-title {
    position: absolute;
    top: clamp(7.5rem, 14svh, 9.5rem);
    left: 50%;
    z-index: 1;
    width: min(100vw, 1800px);
    margin: 0;
    color: var(--pfh-title);
    font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
    font-size: clamp(14rem, 34vw, 36rem);
    font-weight: 400;
    line-height: 0.72;
    letter-spacing: -0.055em;
    text-align: center;
    white-space: nowrap;
    transform: translate3d(calc(-50% + var(--pfh-title-x)), var(--pfh-title-y), 0) scaleY(var(--pfh-title-scale-y));
    transition: transform 0.35s cubic-bezier(.2, .75, .25, 1);
    animation: pfh-title-in 0.95s 0.08s cubic-bezier(.2, .75, .25, 1) both;
    will-change: transform;
}

.portfolio-page .pfh-portrait {
    position: absolute;
    z-index: 10;
    left: 50%;
    bottom: 0;
    width: min(68vw, 62rem);
    height: min(90svh, 59rem);
    margin: 0;
    transform: translate3d(calc(-50% + var(--pfh-person-x)), var(--pfh-person-y), 0);
    transition: transform 0.4s cubic-bezier(.2, .75, .25, 1);
    animation: pfh-person-in 1.05s 0.22s cubic-bezier(.2, .75, .25, 1) both;
    will-change: transform;
    pointer-events: none;
}

.portfolio-page .pfh-portrait picture,
.portfolio-page .pfh-portrait img {
    display: block;
    width: 100%;
    height: 100%;
}

.portfolio-page .pfh-portrait img {
    object-fit: contain;
    object-position: center bottom;
    filter: contrast(1.02) saturate(0.92) drop-shadow(0 1.8rem 2.5rem rgba(0, 0, 0, 0.32));
}

@keyframes pfh-title-in {
    from { opacity: 0; translate: 0 2rem; }
    to { opacity: 1; translate: 0 0; }
}

@keyframes pfh-person-in {
    from { opacity: 0; translate: 0 2.4rem; }
    to { opacity: 1; translate: 0 0; }
}

@media (max-width: 1023px) {
    .portfolio-page .portfolio-tech-hero {
        height: max(680px, 92svh);
    }

    .portfolio-page .pfh-title {
        top: clamp(7rem, 13svh, 8.5rem);
        font-size: clamp(12rem, 32vw, 25rem);
    }

    .portfolio-page .pfh-portrait {
        width: min(80vw, 48rem);
        height: min(86svh, 50rem);
    }
}

@media (max-width: 640px) {
    .portfolio-page .portfolio-tech-hero {
        height: clamp(27.5rem, 72.5svh, 38.75rem);
        min-height: 0;
        background:
            radial-gradient(circle at 50% 37%, rgba(242, 54, 101, 0.13), transparent 15rem),
            linear-gradient(165deg, #4a101e 0%, #3d0d19 48%, #2d0a13 100%);
    }

    .portfolio-page .pfh-frame {
        height: 100%;
        min-height: 0;
        padding-inline: 0;
        overflow: hidden;
    }

    .portfolio-page .pfh-title {
        --pfh-title-scale-y: 0.82;
        top: 39.7%;
        width: 100vw;
        font-size: min(34.5vw, 8.3rem);
        line-height: 0.72;
        letter-spacing: -0.048em;
        white-space: nowrap;
    }

    .portfolio-page .pfh-portrait {
        bottom: 0;
        width: min(68vw, 40svh, 20rem);
        height: auto;
    }

    .portfolio-page .pfh-portrait picture,
    .portfolio-page .pfh-portrait img {
        height: auto;
    }

    .portfolio-page .pfh-portrait img {
        filter: contrast(1.02) saturate(0.94) drop-shadow(0 1rem 1.4rem rgba(0, 0, 0, 0.24));
    }
}

@media (max-height: 720px) and (min-width: 641px) {
    .portfolio-page .portfolio-tech-hero { height: 720px; }
    .portfolio-page .pfh-title { top: 7rem; }
    .portfolio-page .pfh-portrait { height: 41rem; }
}

@media (prefers-reduced-motion: reduce) {
    .portfolio-page .pfh-title,
    .portfolio-page .pfh-portrait {
        animation: none !important;
        transition: none !important;
        translate: none !important;
    }
}