/* ==========================================================================
   PORTFOLIO — Mobile (390px – 440px)
   Design not ready yet — verstka comes once the mockup is provided.
   ========================================================================== */

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

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

.portfolio-hero__nav,
.portfolio-hero__wordmark,
.portfolio-hero__bg-photo,
.portfolio-main__bg,
.portfolio-main__category,
.portfolio-main__heading,
.portfolio-main__services-text,
.portfolio-case,
.portfolio-main__service-card,
.portfolio-main__reviews-intro,
.portfolio-main__reviews-avatar,
.portfolio-main__reviews-btn {
    display: none;
}

/* Case carousel — plain scroll + snap (no JS), same technique as the
   main screen's mobile case carousel (see main_screen.mobile.css). */
.portfolio-main-mobile__cases {
    position: absolute;
    left: 0;
    top: 2rem;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overflow-anchor: none;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 2rem;
    scroll-padding-right: 2rem;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    z-index: 1;
}

.portfolio-main-mobile__cases::-webkit-scrollbar {
    display: none;
}

.portfolio-main-mobile__cases-track {
    display: flex;
    gap: 1rem;
    width: max-content;
    padding: 0 2rem;
}

/* No scroll-snap-align here on purpose — see .is-snap-ready below. A
   card only BECOMES a snap target once its own reveal transition has
   actually finished (added by js/portfolio.js on transitionend);
   while it doesn't have one yet, the browser has nothing to "correct"
   mid-animation (that's what caused cards to jolt/overshoot when the
   card carried both the transform animation and scroll-snap-align at
   the same time). */
.portfolio-main-mobile__case-card {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 23.6rem;
    height: 36rem;
    overflow: hidden;
    opacity: 0;
    transform: translateX(6rem);
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-main-mobile__case-card.is-snap-ready {
    scroll-snap-align: start;
}

.portfolio-main-mobile__cases.is-revealed .portfolio-main-mobile__case-card {
    opacity: 1;
    transform: translateX(0);
}

.portfolio-main-mobile__case-card:nth-child(1) { transition-delay: 0s; }
.portfolio-main-mobile__case-card:nth-child(2) { transition-delay: 0.08s; }
.portfolio-main-mobile__case-card:nth-child(3) { transition-delay: 0.16s; }
.portfolio-main-mobile__case-card:nth-child(4) { transition-delay: 0.24s; }
.portfolio-main-mobile__case-card:nth-child(5) { transition-delay: 0.32s; }
.portfolio-main-mobile__case-card:nth-child(6) { transition-delay: 0.4s; }
.portfolio-main-mobile__case-card:nth-child(7) { transition-delay: 0.48s; }
.portfolio-main-mobile__case-card:nth-child(8) { transition-delay: 0.56s; }

/* is-viewed no longer scales the card down — it used to, but since it
   can already be set on page load (for a case you visited before,
   from localStorage) it was overriding the reveal's own translateX
   with scale() right from the first paint, before the reveal even
   ran — the card just popped in at rest instead of sliding in like
   the others. The "Viewed" badge overlay is enough on its own; the
   card now stays full-size, same as any other card, which also reads
   as a more cohesive row. Press still gets a quick tactile shrink,
   but it only ever happens after the reveal has long settled. */
.portfolio-main-mobile__case-card.is-pressed {
    transform: scale(0.9);
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* "Viewed" badge — same size as the card, sits above the photo/title
   but below the like button (z-index 2), shown once js/portfolio.js
   marks the card .is-viewed (localStorage, set right before
   navigating into the case). */
.portfolio-main-mobile__viewed-badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23.6rem;
    height: 36rem;
    border-radius: 2rem;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.portfolio-main-mobile__case-card.is-viewed .portfolio-main-mobile__viewed-badge {
    opacity: 1;
}

.portfolio-main-mobile__viewed-badge-text {
    font-family: 'Atyp Display', sans-serif;
    font-weight: 300;
    font-size: 2rem;
    line-height: 2rem;
    letter-spacing: -0.05em;
    color: #ffffff;
}

.portfolio-main-mobile__case-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portfolio-main-mobile__case-title {
    position: absolute;
    left: 9rem;
    bottom: 4.7rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: -0.05em;
    color: #ffffff;
    white-space: pre-line;
    z-index: 1;
}

.portfolio-main-mobile__case-date {
    position: absolute;
    left: 9rem;
    bottom: 2.5rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: -0.05em;
    color: #ffffff;
    z-index: 1;
}

.portfolio-main-mobile__case-date-year {
    opacity: 0.5;
}

/* Like button — the tappable zone is the whole top-right corner of the
   card (bigger than the icon itself, easier to hit on a touchscreen),
   not just the 25x22 icon. Icon "pops" on tap: scales down, swaps to
   the filled heart mid-shrink, then scales back up (see
   js/portfolio-likes.js). */
.portfolio-main-mobile__like-zone {
    position: absolute;
    top: 0;
    right: 0;
    width: 8rem;
    height: 8rem;
    cursor: pointer;
    z-index: 2;
}

.portfolio-main-mobile__like-zone .portfolio-main-mobile__like-icon {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 2.5rem;
    height: 2.2rem;
    display: block;
    transition: transform 0.15s ease;
}

.portfolio-main-mobile__like-icon.is-pressed {
    transform: scale(0.7);
}

/* Bottom bg/logo, FAQ heading duplicate + divider + button — same
   assets/positions as the main screen's own bottom section, just this
   page's own coordinates. Clicking the FAQ button jumps to the main
   screen's own FAQ accordion. */
.portfolio-main-mobile__bottom-bg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 39.3rem;
    height: auto;
    max-width: none;
    z-index: 0;
}

.portfolio-main-mobile__faq-heading {
    position: absolute;
    left: 2rem;
    top: 135rem;
    width: 21.3rem;
    height: 12.5rem;
    max-width: none;
    z-index: 1;
}

.portfolio-main-mobile__faq-divider {
    position: absolute;
    left: 50%;
    top: 133rem;
    width: 35.3rem;
    height: 0.05rem;
    background-color: #000000;
    opacity: 0.5;
    transform: translateX(-50%);
    z-index: 1;
}

.portfolio-main-mobile__faq-btn {
    position: absolute;
    right: 2rem;
    top: 140.5rem;
    display: block;
    width: 6rem;
    height: 6.5rem;
    z-index: 1;
    transition: transform 0.15s ease;
}

.portfolio-main-mobile__faq-btn.is-pressed {
    transform: scale(0.92);
}

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

.portfolio-main-mobile__bottom-logo {
    position: absolute;
    left: 2rem;
    right: 2rem;
    bottom: 2rem;
    width: 35.3rem;
    height: 8.2rem;
    max-width: none;
    z-index: 1;
}

/* Statistics/reviews block — same elements/positions as the main
   screen's (see main_screen.mobile.css), duplicated here, text turned
   black (this section sits on the white background) and its own
   portfolio-specific "leave a review" button art. */
.portfolio-main-mobile__statistics-link {
    position: absolute;
    left: 2rem;
    top: 121.6rem;
    display: block;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 2rem;
    line-height: 2rem;
    letter-spacing: -0.05em;
    text-transform: lowercase;
    text-decoration: underline;
    color: #000000;
    z-index: 2;
}

.portfolio-main-mobile__reviews-intro {
    position: absolute;
    left: 2rem;
    top: 124.8rem;
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: -0.05em;
    color: #000000;
    z-index: 2;
}

.portfolio-main-mobile__reviews-avatar {
    position: absolute;
    top: 127rem;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    z-index: 2;
}

.portfolio-main-mobile__reviews-avatar--1 { left: 2rem; z-index: 5; }
.portfolio-main-mobile__reviews-avatar--2 { left: 4.7rem; z-index: 4; }
.portfolio-main-mobile__reviews-avatar--3 { left: 7.4rem; z-index: 3; }
.portfolio-main-mobile__reviews-avatar--4 { left: 10.1rem; z-index: 2; }
.portfolio-main-mobile__reviews-avatar--5 { left: 12.8rem; z-index: 1; }

.portfolio-main-mobile__reviews-btn {
    position: absolute;
    left: 15.5rem;
    top: 127rem;
    display: block;
    width: 13.8rem;
    height: 4rem;
    z-index: 2;
    transition: transform 0.15s ease;
}

.portfolio-main-mobile__reviews-btn.is-pressed {
    transform: scale(0.92);
}

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

/* Section labels above each grid-style carousel — text, live count,
   small chevron, all sharing one font/size/spacing recipe. */
.portfolio-main-mobile__section-label {
    position: absolute;
    left: 2rem;
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: -0.08em;
    color: #000000;
    z-index: 2;
}

.portfolio-main-mobile__section-label--greed { top: 43rem; }
.portfolio-main-mobile__section-label--webcases { top: 70rem; }

.portfolio-main-mobile__section-count {
    position: absolute;
    right: 3rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: -0.08em;
    text-align: right;
    color: #000000;
    z-index: 2;
}

#portfolioGreedCount { top: 43rem; }
#portfolioWebcasesCount { top: 70rem; }

.portfolio-main-mobile__section-arrow {
    position: absolute;
    right: 1.7rem;
    width: 1rem;
    height: 0.5rem;
    transform: rotate(-90deg);
    z-index: 2;
}

.portfolio-main-mobile__section-arrow--greed { top: 43.6rem; }
.portfolio-main-mobile__section-arrow--webcases { top: 70.6rem; }

/* Instagram-grid carousel — same scroll+snap technique as the case
   carousel above. Tapping a card expands it into a centered lightbox
   over a blurred full-screen overlay (see js/portfolio-greed.js);
   tapping it again shrinks it back into its own spot in the row. */
.portfolio-main-mobile__greed {
    position: absolute;
    left: 0;
    top: 45.5rem;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overflow-anchor: none;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 2rem;
    scroll-padding-right: 2rem;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    z-index: 1;
}

.portfolio-main-mobile__greed::-webkit-scrollbar {
    display: none;
}

.portfolio-main-mobile__greed-track {
    display: flex;
    gap: 1rem;
    width: max-content;
    padding: 0 2rem;
}

.portfolio-main-mobile__greed-card {
    display: block;
    flex-shrink: 0;
    width: 15.5rem;
    height: 19.5rem;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    overflow: hidden;
    scroll-snap-align: start;
    cursor: pointer;
}

.portfolio-main-mobile__greed-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Empty slot while this card's enlarged copy is floating in the
   lightbox — visibility (not display:none) so the row doesn't reflow
   and close the gap up. */
.portfolio-main-mobile__greed-card.is-active {
    visibility: hidden;
}

/* Full-screen backdrop, behind the enlarged card. */
.portfolio-main-mobile__greed-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 500;
}

.portfolio-main-mobile__greed-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* Lightbox — a single shared, initially-collapsed element (lives
   outside the scroll container so it's never clipped by its
   overflow). js/portfolio-greed.js sets its left/top/width/height
   inline, starting exactly at the tapped card's own on-screen rect
   so it visibly grows FROM that card, not from nowhere. */
.portfolio-main-mobile__greed-lightbox {
    position: fixed;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: left 0.4s ease, top 0.4s ease, width 0.4s ease, height 0.4s ease, opacity 0.25s ease;
    z-index: 501;
}

.portfolio-main-mobile__greed-lightbox.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.portfolio-main-mobile__greed-lightbox img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Web-case placeholders carousel — same scroll+snap technique, no
   click interaction (client sites aren't ready yet, just stub art). */
.portfolio-main-mobile__webcases {
    position: absolute;
    left: 0;
    top: 72.5rem;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overflow-anchor: none;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 2rem;
    scroll-padding-right: 2rem;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    z-index: 1;
}

.portfolio-main-mobile__webcases::-webkit-scrollbar {
    display: none;
}

.portfolio-main-mobile__webcases-track {
    display: flex;
    gap: 1rem;
    width: max-content;
    padding: 0 2rem;
}

.portfolio-main-mobile__webcase-card {
    display: block;
    flex-shrink: 0;
    width: 35.3rem;
    height: 43.6rem;
    overflow: hidden;
    scroll-snap-align: start;
}

.portfolio-main-mobile__webcase-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portfolio-main-mobile__like-count {
    position: absolute;
    top: 3rem;
    right: 3.7rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1rem;
    letter-spacing: 0.05em;
    text-align: right;
    color: #ffffff;
    opacity: 1;
}

/* Same page-fade-in trick for the mobile hero photo — opacity only,
   no scale/crop, so nothing shifts while it appears. */
.portfolio-hero-mobile__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 39.3rem;
    height: auto;
    max-width: none;
    opacity: 0;
    animation: portfolio-hero-mobile-bg-in 2.5s ease forwards;
    z-index: 0;
}

@keyframes portfolio-hero-mobile-bg-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.portfolio-hero-mobile__wordmark {
    position: absolute;
    left: 2rem;
    top: 2rem;
    width: 15.1rem;
    height: 7rem;
    z-index: 1;
}

/* Infinite ribbons — identical technique/timing to the main-screen
   hero's (see hero.mobile.css), just different source images. */
.portfolio-hero-mobile__marquee {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.portfolio-hero-mobile__marquee-track {
    display: flex;
    width: max-content;
}

.portfolio-hero-mobile__marquee-track img {
    display: block;
    height: 1.1rem;
    width: auto;
    max-width: none;
    flex-shrink: 0;
}

.portfolio-hero-mobile__marquee--1 { bottom: 14.4rem; }
.portfolio-hero-mobile__marquee--2 { bottom: 13rem; }

.portfolio-hero-mobile__marquee--1 .portfolio-hero-mobile__marquee-track {
    animation: portfolio-hero-mobile-marquee-ltr 15s linear infinite;
}

.portfolio-hero-mobile__marquee--2 .portfolio-hero-mobile__marquee-track {
    animation: portfolio-hero-mobile-marquee-rtl 15.5s linear infinite;
}

@keyframes portfolio-hero-mobile-marquee-ltr {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0%); }
}

@keyframes portfolio-hero-mobile-marquee-rtl {
    from { transform: translateX(0%); }
    to   { transform: translateX(-50%); }
}

.portfolio-hero-mobile__logo {
    position: absolute;
    left: 2rem;
    right: 2rem;
    bottom: 2rem;
    width: 35.3rem;
    height: 7.7rem;
    max-width: none;
    z-index: 1;
}

/* Menu button here is dark (opposite of the default outlined style) —
   solid black circle, white dots. Dots stay the plain (un-inverted)
   white square: mix-blend-mode: difference against a black circle
   already renders them white, same mechanism the default state uses
   against a light backdrop with the invert(1) filter applied instead. */
.main-menu-trigger-btn {
    background-color: #000000;
    border-color: transparent;
}

/* Touch devices can leave :hover "stuck" after a tap (no real mouse
   to move away and clear it) — menu.mobile.css's default :hover
   (transparent + black border) has higher specificity than the plain
   class rule above and would otherwise win, showing an outline instead
   of staying filled after the menu closes. */
.main-menu-trigger-btn:hover:not(.is-open) {
    background-color: #000000;
    border-color: transparent;
}

.main-menu-trigger-btn .menu-dots-invert {
    filter: none;
}

/* Open state: the button itself turns white (menu.mobile.css's
   .is-open rule), so the dots need to switch back to black here —
   same invert(1) the rest of the site uses for dots-on-light. */
.main-menu-trigger-btn.is-open .menu-dots-invert {
    filter: invert(1);
}