/* ============================================================
   BEINC — MVP Section
   Full-screen image shrinks into a landscape polaroid on scroll.
   Script text lives in the RIGHT STRIP, rotated -90°.
   ============================================================ */

/* ── SCROLL WRAPPER ── */
.mvp-scroll {
    position: relative;
    height: 320lvh;
    background: var(--color-black2);
    z-index: var(--z-base);
}

/* ── PINNED VIEWPORT ── */
.mvp-pinned {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100lvh;
    width: 100%;
    overflow: clip; /* clip instead of hidden — same visual result but no BFC,
                       prevents iOS Safari from interrupting momentum scroll
                       when this sticky element enters the viewport */
    background: var(--color-black2);
}

/* ── FULL-SCREEN HERO IMAGE (shrinks on scroll) ── */
.mvp-hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: clip;
    will-change: width, height, top, left;
    z-index: var(--z-hamburger); /* 10 — above guide lines (5) at all times */
}

.mvp-hero-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* Image wrappers (host depixelate canvas + distortion canvas) */
.mvp-img-wrap {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Override depix + distortion component rules — MVP needs cover fill, not aspect-ratio */
.mvp-hero-image .mvp-img-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* ── POLAROID FRAME (cream card, landscape) ── */
.mvp-polaroid {
    position: absolute;
    background: var(--color-white);
    opacity: 0;
    z-index: var(--z-content);
    overflow: clip;
    /* No border-radius per spec */
    /* Position + size set by JS */
}

/* ── RIGHT STRIP — script text + swap icon ── */
.mvp-polaroid-strip {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;   /* centers text element so rotation origin aligns with strip center */
    overflow: clip;
    /* width, top, height set by JS */
}

/* ── SCRIPT TEXT (BEINC TEAM) — rotated -90° in the strip ── */
.mvp-script-text {
    font-family: "marydale", cursive;
    font-weight: 900;
    font-size: clamp(19px, 2.5vw, 36px);
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    color: var(--color-black2);
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: flex-start;   /* start of element → bottom of strip after -90° CCW = visual left */
    flex-shrink: 0;   /* don't shrink to content — JS sets width=strip.height for proper rotation */
    /* Rotated -90° by JS after sizing: reads bottom-to-top */
    transform-origin: center center;
}

/* ── SWAP ICON — pinned to visual right (top of strip after -90° text rotation) ── */
.mvp-swap-icon {
    position: absolute;
    top: 0;     /* visual right (opposite end from text, which sits at bottom = visual left) */
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 26px;
}

@media (max-width: 767px) {
    .mvp-swap-icon {
        width: 22px;
        height: 22px;
    }
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    z-index: var(--z-content);
    -webkit-tap-highlight-color: transparent;
}

.mvp-swap-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.mvp-script-char {
    display: inline-block;
    /* clip-path animated by JS: inset(0 100% 0 0) → inset(0 0% 0 0) */
}

/* ── MAIN TEXT ── */
.mvp-main-text {
    position: absolute;
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.4vw, 2.6rem);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    line-height: 1.2;
    letter-spacing: var(--tracking-tight);
    pointer-events: none;
    padding: 40px;
    box-sizing: border-box;
    /* Position + size set by JS */
}

.mvp-main-text .btn {
    pointer-events: auto;
}

.mvp-main-text__inner {
    margin: 0;
    /* Reveal animation handled by TextSwipeReveal utility */
}

/* ── BRAND ELEMENT (animated SVG) ──
   Lives inside .mvp-pinned. Position + size set by JS per viewport.
   Color comes from `currentColor` on the rects so we can tint via CSS.
   z-index sits ABOVE the dashed guide lines (z-indicator = 5) so the
   icon visually wins where it overlaps a line. pointer-events:auto so
   the element blocks hover/click bleed-through to anything behind. */
.mvp-brand-element {
    position: absolute;
    pointer-events: auto;
    z-index: 6;
    color: var(--color-black);
    opacity: 0;          /* fades in via revealAll() */
    will-change: opacity, transform;
}

.mvp-brand-element svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.mvp-brand-bar {
    fill: currentColor;
    transform-box: fill-box;
    transform-origin: center;
}

/* Outline filter: 0.5-unit dilate by default, 1-unit on mobile.
   Switching the filter via CSS lets us keep the same SVG markup but
   render a stroke that reads as ~1 screen px at every render size. */
.mvp-brand-stack {
    filter: url(#mvpBrandStroke);
}
@media (max-width: 767px) {
    .mvp-brand-stack {
        filter: url(#mvpBrandStrokeMobile);
    }
}

.mvp-brand--h1 { animation: mvp-brand-h1 2s   cubic-bezier(.45,0,.55,1) infinite; }
.mvp-brand--h2 { animation: mvp-brand-h2 2.4s cubic-bezier(.45,0,.55,1) .6s infinite; }
.mvp-brand--h3 { animation: mvp-brand-h3 1.8s cubic-bezier(.45,0,.55,1) 1.1s infinite; }
.mvp-brand--v1 { animation: mvp-brand-v1 2.2s cubic-bezier(.45,0,.55,1) .6s infinite; }
.mvp-brand--v2 { animation: mvp-brand-v2 2s   cubic-bezier(.45,0,.55,1) .2s infinite; }
.mvp-brand--v3 { animation: mvp-brand-v3 2.6s cubic-bezier(.45,0,.55,1) 1.1s infinite; }

@keyframes mvp-brand-h1 { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(.70); } }
@keyframes mvp-brand-h2 { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(.72); } }
@keyframes mvp-brand-h3 { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(.65); } }
@keyframes mvp-brand-v1 { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(.68); } }
@keyframes mvp-brand-v2 { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(.70); } }
@keyframes mvp-brand-v3 { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(.75); } }

/* ── GUIDE LINES ── */
.mvp-guide-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-indicator);
}

.mvp-guide {
    position: absolute;
    opacity: 0;
}

/* Horizontal — at polaroid top and bottom + outer lines, full viewport width */
/* Mobile-only horizontal lines around CTA */
.mvp-guide--h-mob-1,
.mvp-guide--h-mob-2,
.mvp-guide--h-mob-3,
.mvp-guide--h-mob-4 {
    display: none;
}

.mvp-guide--h-top,
.mvp-guide--h-bottom,
.mvp-guide--h-top-outer,
.mvp-guide--h-bottom-outer,
.mvp-guide--h-center,
.mvp-guide--h-mob-1,
.mvp-guide--h-mob-2,
.mvp-guide--h-mob-3,
.mvp-guide--h-mob-4 {
    left: 0;
    width: 100vw;
    height: 0;
    border-top: var(--guide-border);
}

/* Vertical inner — polaroid right edge, desktop/tablet only */
.mvp-guide--v-inner-left,
.mvp-guide--v-inner-right {
    width: 0;
    border-left: var(--guide-border);
    /* top, height, left set by JS */
}

/* Vertical — at global pad-x, full viewport height */
.mvp-guide--v-left,
.mvp-guide--v-right {
    top: 0;
    width: 0;
    height: 100vh;
    height: 100lvh;
    border-left: var(--guide-border);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 95%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 95%, transparent 100%);
}

/* ── RESPONSIVE — Small desktop + Tablet + Mobile ── */
@media (max-width: 1199px) {
    .mvp-main-text .mvp-cta {
        display: none;
    }
    .mvp-guide--h-center { display: none; }
}

/* ── Tablet CTA — separate positioned element ── */
.mvp-cta-tablet {
    display: none;
    position: absolute;
    z-index: var(--z-indicator);
    pointer-events: auto;
    /* Position set by JS */
}

@media (max-width: 1199px) {
    .mvp-cta-tablet {
        display: flex;
        justify-content: center;
    }
}

/* ── RESPONSIVE — Mobile ── */
@media (max-width: 767px) {
    .mvp-scroll {
        height: 225lvh;
    }

    .mvp-guide--v-inner-left,
    .mvp-guide--v-inner-right { display: none; }

    .mvp-guide--h-mob-3,
    .mvp-guide--h-mob-4 { display: block; }

    .mvp-main-text {
        padding: 20px;
        font-size: clamp(1.2rem, 5vw, 1.8rem);
        text-align: center;
    }
}