/* ============================================================
   BEINC — Homepage Hero Section (Section CSS)
   Parallax shrink effect on scroll
   Depends on: global.css
   ============================================================ */

.page-content {
    position: relative;
    z-index: auto;             /* no stacking context — lets our-work-section (z:55) rise above Moises (z:50) */
    background: var(--color-black2);
}

/* Wrapper keeps the hero pinned while scrolling */
.hero-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100lvh; /* large viewport height — covers Safari toolbar area */
    z-index: 0;
}

.hero-section {
    height: 100vh;
    height: 100lvh;
    position: relative;
    overflow: clip; /* clip — no BFC, iOS momentum scroll safe */
    background: var(--color-black2);
    will-change: transform, border-radius;
    transform-origin: center center;
}

@media (max-width: 767px) {
    .hero-section {
        will-change: auto; /* no GSAP animation on mobile — remove compositing hint */
    }
}

.hero-video {
    position: absolute;
    object-fit: cover;
    background: var(--color-black2); /* fallback when video can't play (Low Power Mode) */
    transition: top 0.6s var(--ease-primary),
                left 0.6s var(--ease-primary),
                width 0.6s var(--ease-primary),
                height 0.6s var(--ease-primary);
    /* Default: contracted. JS sets expanded on click. */
    /* Position set by JS to match nav guide lines */
}

.hero-video.is-expanded {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* ── VIDEO TOGGLE BUTTON ── */
.hero-video-toggle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    width: 56px;
    height: 56px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--color-black2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    transition: transform 0.3s ease, opacity 0.3s ease, border-color 0.3s ease, color 0.4s ease;
}

/* ── DARK BACKGROUND VARIANT — white icon ── */
.hero-video-toggle.is-on-dark {
    color: var(--color-white);
}

.hero-video-toggle:hover {
    transform: translate(-50%, -50%) scale(1.15);
    border-color: currentColor;
}

.hero-video-toggle svg {
    width: 20px;
    height: 20px;
    pointer-events: none; /* let the button handle all clicks, not individual SVG paths */
}

@media (max-width: 767px) {
    .hero-video-toggle {
        width: 40px;
        height: 40px;
        border-color: currentColor;
    }
    .hero-video-toggle svg {
        width: 14px;
        height: 14px;
    }
}

/* ── ICON ROTATION ANIMATION ── */
/* Each arrow group rotates 180° around its own diagonal midpoint.
   This perfectly morphs outward (expand) arrows into inward (contract) arrows. */
.hero-video-toggle__tl {
    transform-origin: 4px 4px;
    transition: transform 0.6s var(--ease-primary);
}
.hero-video-toggle__br {
    transform-origin: 13px 13px;
    transition: transform 0.6s var(--ease-primary);
}

/* Default: expand state (video starts contracted, arrows point outward) */
.hero-video-toggle__tl { transform: rotate(0deg); }
.hero-video-toggle__br { transform: rotate(0deg); }

/* When expanded → contract icon: arrows rotate inward */
.hero-section.video-expanded .hero-video-toggle__tl { transform: rotate(-180deg); }
.hero-section.video-expanded .hero-video-toggle__br { transform: rotate(-180deg); }