/* ==========================================================================
   PORTFOLIO — Desktop (1280px – 1920px)
   Design reference: 1920x4940 total (922 hero + 3678 main + 340 footer).
   Same scaling scheme as the other pages: hero_portfolio follows the
   real viewport (100vh, white), the main screen below is a fixed rem
   height, footer is the shared component.
   ========================================================================== */

.portfolio-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    overflow: hidden;
}

/* Mobile-only hero elements (see portfolio.mobile.css) — hidden here
   so they don't leak through unstyled (this file only styles the
   desktop markup; without an explicit display:none the mobile img/div
   tags would render with browser-default static positioning). */
.portfolio-hero-mobile__bg,
.portfolio-hero-mobile__wordmark,
.portfolio-hero-mobile__marquee,
.portfolio-hero-mobile__logo,
.portfolio-main-mobile__cases,
.portfolio-main-mobile__greed,
.portfolio-main-mobile__greed-overlay,
.portfolio-main-mobile__greed-lightbox,
.portfolio-main-mobile__webcases,
.portfolio-main-mobile__section-label,
.portfolio-main-mobile__section-count,
.portfolio-main-mobile__section-arrow,
.portfolio-main-mobile__statistics-link,
.portfolio-main-mobile__reviews-intro,
.portfolio-main-mobile__reviews-avatar,
.portfolio-main-mobile__reviews-btn,
.portfolio-main-mobile__bottom-bg,
.portfolio-main-mobile__faq-heading,
.portfolio-main-mobile__faq-divider,
.portfolio-main-mobile__faq-btn,
.portfolio-main-mobile__bottom-logo {
    display: none;
}

/* Full-bleed hero photo (1920x1613, taller than the crop so it has
   room to sit centered and ride up 120px to frame correctly), fading
   in on load, then settling into a slow, gentle zoom. Sits behind the
   nav/wordmark/buttons (they're z-index: 1+ and later in the DOM). */
/* Reveal only starts once js/portfolio.js confirms the image is
   actually decoded (img.decode()) — a plain animation-delay isn't
   enough, since a large full-viewport webp can still be mid-decode
   when the delay runs out on a slow connection/cold cache, and you
   catch the opacity ramp painting over a half-decoded frame (visible
   as a hard vertical split, one side rendered and the other not). */
.portfolio-hero__bg-photo {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% calc(50% - 12rem);
    z-index: 0;
    opacity: 0;
}

.portfolio-hero__bg-photo.is-ready {
    animation: portfolio-hero-bg-reveal 6.8s both;
}

@keyframes portfolio-hero-bg-reveal {
    0%   { opacity: 0; scale: 1; animation-timing-function: ease; }
    25%  { opacity: 1; scale: 1; animation-timing-function: ease-out; }
    100% { opacity: 1; scale: 1.08; }
}

.portfolio-main {
    position: relative;
    width: 100%;
    height: 367.8rem;
    background-color: #ffffff;
    overflow: hidden;
}

/* Gradient art (white fading to black), pinned flush to the bottom
   edge so it always blends straight into the footer with no seam,
   regardless of any future height changes to this section. */
.portfolio-main__bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 92.2rem;
    object-fit: cover;
    z-index: 0;
}

/* Seam patch — solid black strip right at the bottom edge, covering
   any hairline gap between portfolio-main and the footer after it. */
.portfolio-main__seam-patch {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.5rem;
    background-color: #000000;
    z-index: 10;
}

/* Category labels — three rows of "name / name / [+]", same style as
   the service card titles elsewhere: treated as labels, not copy, so
   they stay in English across all languages. */
.portfolio-main__category {
    position: absolute;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 3.5rem;
    line-height: 3.5rem;
    letter-spacing: -0.08em;
    text-transform: uppercase;
    color: #000000;
    opacity: 1;
    z-index: 1;
}

.portfolio-main__category--visual-design { left: 5rem; top: 1.3rem; }
.portfolio-main__category--concept { left: 69rem; top: 1.3rem; }

/* Case preview grid — sits right under the "Visual design / Concept x
   Brandbook" label row. An asymmetric bento-style grid, not aligned
   rows. Active tiles (1-8) link out and get the 3D tilt effect (see
   js/tilt.js); 9-11 are plain placeholders for cases still in the
   works — no link, no hover reaction. */
.portfolio-case {
    position: absolute;
    display: block;
    /* Visible, not hidden — the whole point of the tilt effect is that
       the photo scales up and "lifts" past its own frame, so it can't
       be clipped to the container. */
    overflow: visible;
    z-index: 1;
    perspective: 80rem;
}

.portfolio-case.is-hovering {
    z-index: 5;
}

/* The tilt transform + shadow apply here, so both stacked photos
   (base + logo) move together as one rigid card instead of each
   tilting independently. */
.portfolio-case__inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    will-change: transform, box-shadow;
}

.portfolio-case__img {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.25s ease;
}

.portfolio-case__img--base {
    opacity: 1;
}

.portfolio-case__img--logo {
    opacity: 0;
}

/* The instant the tilt activates, crossfade to the logo version. */
.portfolio-case.is-hovering .portfolio-case__img--base {
    opacity: 0;
}

.portfolio-case.is-hovering .portfolio-case__img--logo {
    opacity: 1;
}

.portfolio-case--1  { left: 5rem;     top: 5.5rem;  width: 17.5rem; height: 22.4rem; }
.portfolio-case--2  { left: 59.8rem;  top: 5.5rem;  width: 35.2rem; height: 45.8rem; }
.portfolio-case--3  { left: 96rem;    top: 28.9rem; width: 17.5rem; height: 22.4rem; }
.portfolio-case--4  { left: 114.5rem; top: 5.5rem;  width: 54rem;   height: 34.2rem; }
.portfolio-case--5  { left: 41.3rem;  top: 5.5rem;  width: 17.5rem; height: 22.4rem; }
.portfolio-case--6  { left: 96rem;    top: 5.5rem;  width: 17.5rem; height: 22.4rem; }
.portfolio-case--7  { left: 41.3rem;  top: 28.9rem; width: 17.5rem; height: 22.4rem; }
.portfolio-case--8  { left: 41.3rem;  top: 52.3rem; width: 17.5rem; height: 22.4rem; }
.portfolio-case--9  { left: 5rem;     top: 28.9rem; width: 35.3rem; height: 45.8rem; }
.portfolio-case--10 { left: 169.5rem; top: 5.5rem;  width: 17.5rem; height: 22.4rem; }
.portfolio-case--11 { left: 169.5rem; top: 28.9rem; width: 17.5rem; height: 22.4rem; }

/* Under the "Interface flow / Landing x Website" row. */
.portfolio-case--website-1 { left: 5rem;    top: 91.7rem; width: 45.8rem; height: 35.3rem; }
.portfolio-case--website-2 { left: 51.8rem; top: 91.7rem; width: 45.8rem; height: 35.3rem; }

/* Under the "SMM design / Social media" row. */
.portfolio-case--smm-1  { left: 5rem;    top: 144rem;   width: 17.7rem; height: 22.1rem; }
.portfolio-case--smm-2  { left: 23.7rem; top: 144rem;   width: 17.7rem; height: 22.1rem; }
.portfolio-case--smm-3  { left: 61.1rem; top: 144rem;   width: 17.7rem; height: 22.1rem; }
.portfolio-case--smm-4  { left: 5rem;    top: 167.1rem; width: 17.7rem; height: 22.1rem; }
.portfolio-case--smm-5  { left: 23.7rem; top: 167.1rem; width: 17.7rem; height: 22.1rem; }
.portfolio-case--smm-6  { left: 42.4rem; top: 167.1rem; width: 17.7rem; height: 22.1rem; }
.portfolio-case--smm-7  { left: 23.7rem; top: 190.2rem; width: 17.7rem; height: 22.1rem; }
.portfolio-case--smm-8  { left: 42.4rem; top: 144rem;   width: 17.7rem; height: 22.1rem; }
.portfolio-case--smm-9  { left: 61.1rem; top: 167.1rem; width: 17.7rem; height: 22.1rem; }
.portfolio-case--smm-10 { left: 5rem;    top: 190.2rem; width: 17.7rem; height: 22.1rem; }

.portfolio-case.is-disabled {
    cursor: default;
}
.portfolio-main__category--plus-1 { right: 5rem; top: 1.3rem; }

.portfolio-main__category--interface-flow { left: 5rem; top: 87.2rem; }
.portfolio-main__category--landing { left: 113.5rem; top: 87.2rem; }
.portfolio-main__category--plus-2 { right: 5rem; top: 87.2rem; }

.portfolio-main__category--smm { left: 5rem; top: 139.5rem; }
.portfolio-main__category--social-media { left: 91.8rem; top: 139.5rem; }
.portfolio-main__category--plus-3 { right: 5rem; top: 139.5rem; }

/* "Select a direction" heading. */
.portfolio-main__heading {
    position: absolute;
    top: 232.5rem;
    left: 0;
    width: 100%;
    text-align: center;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600;
    font-size: 13rem;
    line-height: 12rem;
    letter-spacing: -0.06em;
    color: #000000;
    opacity: 1;
    z-index: 1;
}

/* Same two intro paragraphs as the main screen's services zone
   (same copy, same data-i18n keys, same font treatment) — just a
   different top offset here. */
.portfolio-main__services-text {
    position: absolute;
    top: 250.9rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: -0.05em;
    color: #000000;
    opacity: 0.5;
    white-space: pre-line;
    z-index: 1;
}

.portfolio-main__services-text--left {
    left: 10rem;
    text-align: left;
}

.portfolio-main__services-text--right {
    right: 10rem;
    text-align: right;
}

/* Service cards — exact copy of the main screen's animated service
   cards (same markup, same hover behavior: grow taller, reveal a
   photo, swap the mark icon, lift the title), just a different top
   offset here. */
.portfolio-main__service-card {
    position: absolute;
    top: 260rem;
    width: 32.5rem;
    height: 32.5rem;
    border-radius: 3.5rem;
    background-color: #e5e5e5;
    overflow: hidden;
    z-index: 1;
    transition: height 0.3s ease;
}

.portfolio-main__service-card:hover {
    height: 42rem;
}

.portfolio-main__service-card--brand { left: 10rem; }
.portfolio-main__service-card--social { left: 44.9rem; }
.portfolio-main__service-card--ads { left: 79.8rem; }
.portfolio-main__service-card--web { left: 114.7rem; }
.portfolio-main__service-card--digital { left: 149.6rem; }

.portfolio-main__service-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.portfolio-main__service-card:hover .portfolio-main__service-card-bg {
    opacity: 1;
}

.portfolio-main__service-card-mark {
    position: absolute;
    left: 2.5rem;
    width: 12.3rem;
    height: 3.5rem;
    z-index: 1;
    transition: opacity 0.3s ease;
}

.portfolio-main__service-card-mark--default {
    top: 2.5rem;
    opacity: 1;
}

.portfolio-main__service-card-mark--hover {
    bottom: 2.5rem;
    opacity: 0;
}

.portfolio-main__service-card:hover .portfolio-main__service-card-mark--default {
    opacity: 0;
}

.portfolio-main__service-card:hover .portfolio-main__service-card-mark--hover {
    opacity: 1;
}

.portfolio-main__service-card-title {
    position: absolute;
    left: 2.5rem;
    bottom: 2.5rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 3.5rem;
    line-height: 3.5rem;
    letter-spacing: -0.05em;
    color: #000000;
    opacity: 0.7;
    z-index: 1;
    transition: color 0.3s ease, opacity 0.3s ease, bottom 0.3s ease;
}

.portfolio-main__service-card:hover .portfolio-main__service-card-title {
    bottom: 7rem;
    color: #ffffff;
    opacity: 1;
}

/* Reviews prompt — exact copy of the main screen's version, same copy
   and layout, just a different top offset here. */
.portfolio-main__reviews-intro {
    position: absolute;
    top: 313rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 3rem;
    line-height: 3rem;
    letter-spacing: -0.05em;
    color: #000000;
    z-index: 1;
}

.portfolio-main__reviews-avatar {
    position: absolute;
    top: 318rem;
    width: 9.7rem;
    height: 9.7rem;
    border-radius: 50%;
    object-fit: cover;
    z-index: 1;
}

.portfolio-main__reviews-avatar--1 { left: 59.6rem; }
.portfolio-main__reviews-avatar--2 { left: 66.1rem; }
.portfolio-main__reviews-avatar--3 { left: 72.6rem; }
.portfolio-main__reviews-avatar--4 { right: 72.6rem; }
.portfolio-main__reviews-avatar--5 { right: 66.1rem; }
.portfolio-main__reviews-avatar--6 { right: 59.6rem; }

/* Button painted last (below in DOM) so it sits visually on top of the
   avatars' inner edges, matching the reference composition. */
.portfolio-main__reviews-btn {
    position: absolute;
    top: 318rem;
    left: 50%;
    transform: translateX(-50%);
    width: 33.5rem;
    height: 9.7rem;
    z-index: 2;
    transition: opacity 0.2s ease;
}

.portfolio-main__reviews-btn:hover {
    opacity: 0.3;
}

.portfolio-main__reviews-btn-img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Top-left nav row. */
.portfolio-hero__nav {
    position: absolute;
    top: 5rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 4rem;
    line-height: 4rem;
    letter-spacing: -0.08em;
    color: #000000;
    opacity: 1;
    z-index: 1;
    transition: opacity 0.2s ease;
}

.portfolio-hero__nav:hover {
    opacity: 0.5;
}

.portfolio-hero__nav--homepage {
    left: 5rem;
    text-transform: uppercase;
}

.portfolio-hero__nav--index { left: 28.5rem; }
.portfolio-hero__nav--archive { left: 41.4rem; }
.portfolio-hero__nav--info { left: 57.6rem; }

/* Ukrainian positions */
html[data-lang="uk"] .portfolio-hero__nav--index { left: 26.5rem; }
html[data-lang="uk"] .portfolio-hero__nav--archive { left: 39.4rem; }
html[data-lang="uk"] .portfolio-hero__nav--info { left: 52.5rem; }

/* Japanese positions */
html[data-lang="ja"] .portfolio-hero__nav--index { left: 20.3rem; }
html[data-lang="ja"] .portfolio-hero__nav--archive { left: 43.1rem; }
html[data-lang="ja"] .portfolio-hero__nav--info { left: 65.6rem; }

/* Bottom-left wordmark. */
.portfolio-hero__wordmark {
    position: absolute;
    left: 5rem;
    bottom: 5rem;
    width: 67rem;
    height: 14.6rem;
    z-index: 1;
}

/* Settings/message/shop buttons sit a little higher here than on the
   hero (bottom: 5rem instead of 7rem) — loaded after actions.desktop.css
   so this simply overrides the "bottom" value, nothing else. */
.settings-btn,
.message-btn,
.shop-wrap {
    bottom: 5rem;
}

/* Keeps the settings panel exactly 14px above the button's top edge,
   matching the button's raised position on this page. */
.settings-panel {
    bottom: 11rem;
}