/* ============================================================
   BEINC — Our Story
   Two sections: "How It Started" (text + perspective carousel)
   and "Our Founder" (image + text + sliding CTA button).
   ============================================================ */




/* ============================================================
   STACKING — covers brand-cube's pinned cube during the curtain.

   .our-story sections sit ABOVE the brand-cube fixed canvas
   (z:3) and cards (z:5) so as our-story enters the viewport via
   normal scroll, its opaque cream background progressively
   covers the cube (which the brand-cube JS holds at viewport
   centre via Leg D). No overlap, no negative margin — purely
   stacking + scroll. The previous section ends at its natural
   end; our-story rises into view from below at scroll rate
   while the cube stays still — = real parallax.
   ============================================================ */
.our-story {
    position: relative;
    z-index: 6;
}


/* ============================================================
   REVEAL — initial hidden states (cleared by JS reveal module)
   Prevents FOUC: paint goes straight to the hidden state, then
   the GSAP timeline animates each piece in.
   If JS fails, the safety branch in our-story-section.js
   forces opacity:1 on these targets so the section stays usable.
   ============================================================ */
.our-story__asterisk,
.our-story__eyebrow > span,
.our-story__heading,
.our-story__body,
.our-story__carousel-wrap,
.our-story__founder-image,
.our-story__founder-heading,
.our-story__founder-subheading,
.our-story__founder-body p,
.our-story__cta-line,
.our-story__cta-btn-wrap {
    opacity: 0;
}


/* ── Section shells ──────────────────────────────────────── */
/* ──────────────────────────────────────────────────────────────
   Tunable variables — every value below is exposed per-viewport.
   The debug panel in the preview writes to the per-viewport vars
   directly, and @media queries below alias the right one into
   the "active" var that the styles consume.

   Viewports (matches CLAUDE.md project breakpoints):
     desktop  ≥ 1200px
     small    1024 – 1199px   (small desktop / large laptop)
     tablet   768  – 1023px
     mobile   ≤ 767px
─────────────────────────────────────────────────────────────── */
.our-story {

    /* ── DESKTOP (default — ≥ 1200px) ─────────────────────── */
    --os-section-gap-desktop:           0px;
    --os-pad-x-desktop:                 2%;
    --os-gap-eyebrow-heading-desktop:   24px;
    --os-gap-heading-body-desktop:      56px;
    --os-gap-fheading-subheading-desktop: 16px;
    --os-gap-subheading-body-desktop:   56px;
    --os-gap-body-paragraphs-desktop:   16px;
    --os-how-pad-top-desktop:           20vh;
    --os-how-pad-bot-desktop:           12.5vh;
    --os-founder-pad-top-desktop:       12.5vh;
    --os-founder-pad-bot-desktop:       25vh;
    --os-polaroid-pad-r-desktop:        46px;
    --os-polaroid-pad-desktop:          12px;
    --os-polaroid-w-desktop:            460px;
    --os-carousel-col-desktop:          1.2fr;

    /* ── SMALL (1024 – 1199px) — 2-col layout, smaller scale ─ */
    --os-section-gap-small:             0px;
    --os-pad-x-small:                   3%;
    --os-gap-eyebrow-heading-small:     22px;
    --os-gap-heading-body-small:        48px;
    --os-gap-fheading-subheading-small: 15px;
    --os-gap-subheading-body-small:     48px;
    --os-gap-body-paragraphs-small:     15px;
    --os-how-pad-top-small:             13vh;
    --os-how-pad-bot-small:             12vh;
    --os-founder-pad-top-small:         12vh;
    --os-founder-pad-bot-small:         18vh;
    --os-polaroid-pad-r-small:          42px;
    --os-polaroid-pad-small:            11px;
    --os-polaroid-w-small:              320px;
    --os-carousel-col-small:            1fr;

    /* ── TABLET (768 – 1023px) ────────────────────────────── */
    --os-section-gap-tablet:            0px;
    --os-pad-x-tablet:                  4%;
    --os-gap-eyebrow-heading-tablet:    20px;
    --os-gap-heading-body-tablet:       44px;
    --os-gap-fheading-subheading-tablet: 14px;
    --os-gap-subheading-body-tablet:    44px;
    --os-gap-body-paragraphs-tablet:    14px;
    --os-how-pad-top-tablet:            13vh;
    --os-how-pad-bot-tablet:            14vh;
    --os-founder-pad-top-tablet:        14vh;
    --os-founder-pad-bot-tablet:        18vh;
    --os-polaroid-pad-r-tablet:         40px;
    --os-polaroid-pad-tablet:           11px;
    --os-polaroid-w-tablet:             416px;
    --os-carousel-w-tablet:             100%;

    /* ── MOBILE (≤ 767px) ─────────────────────────────────── */
    --os-section-gap-mobile:            0px;
    --os-pad-x-mobile:                  4%;
    --os-gap-eyebrow-heading-mobile:    16px;
    --os-gap-heading-body-mobile:       44px;
    --os-gap-fheading-subheading-mobile: 12px;
    --os-gap-subheading-body-mobile:    44px;
    --os-gap-body-paragraphs-mobile:    14px;
    --os-how-pad-top-mobile:            15vh;
    --os-how-pad-bot-mobile:            10vh;
    --os-founder-pad-top-mobile:        10vh;
    --os-founder-pad-bot-mobile:        20vh;
    --os-polaroid-pad-r-mobile:         32px;
    --os-polaroid-pad-mobile:           10px;
    --os-polaroid-w-mobile:             260px;
    --os-carousel-w-mobile:             100%;

    /* ── ACTIVE VARS — defaults to desktop, swapped by @media ── */
    --os-section-gap:           var(--os-section-gap-desktop);
    --os-pad-x:                 var(--os-pad-x-desktop);
    --os-gap-eyebrow-heading:   var(--os-gap-eyebrow-heading-desktop);
    --os-gap-heading-body:      var(--os-gap-heading-body-desktop);
    --os-gap-fheading-subheading: var(--os-gap-fheading-subheading-desktop);
    --os-gap-subheading-body:   var(--os-gap-subheading-body-desktop);
    --os-gap-body-paragraphs:   var(--os-gap-body-paragraphs-desktop);
    --os-how-pad-top:           var(--os-how-pad-top-desktop);
    --os-how-pad-bot:           var(--os-how-pad-bot-desktop);
    --os-founder-pad-top:       var(--os-founder-pad-top-desktop);
    --os-founder-pad-bot:       var(--os-founder-pad-bot-desktop);
    --os-polaroid-pad-r:        var(--os-polaroid-pad-r-desktop);
    --os-polaroid-pad:          var(--os-polaroid-pad-desktop);
    --os-polaroid-w:            var(--os-polaroid-w-desktop);
    --os-carousel-col:          var(--os-carousel-col-desktop);

    position: relative;
    background: var(--color-white);
    color: var(--color-black2);
    padding-left: var(--os-pad-x);
    padding-right: var(--os-pad-x);
}

/* Per-section vertical padding (uses active var) */
.our-story--how {
    padding-top: var(--os-how-pad-top);
    padding-bottom: var(--os-how-pad-bot);
}

.our-story--founder {
    padding-top: var(--os-founder-pad-top);
    padding-bottom: var(--os-founder-pad-bot);
    margin-top: var(--os-section-gap);
}

.our-story__inner {
    width: 100%;
    margin: 0 auto;
}


/* ============================================================
   1. HOW IT STARTED
   ============================================================ */
.our-story__inner--how {
    display: grid;
    /* minmax(0, 1fr) prevents the carousel's overflowing content
       from forcing its column to expand. The carousel column ratio
       (--os-carousel-col) is per-viewport: desktop & small tier use
       it; tablet & mobile collapse to a single column instead. */
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--os-carousel-col));
    gap: var(--space-9);
    align-items: center;
}

/* Left column ───────── */
.our-story__text {
    display: flex;
    flex-direction: column;
}

/* Individual text gaps (replaces single gap: ...) */
.our-story__text > .our-story__heading { margin-top: var(--os-gap-eyebrow-heading); }
.our-story__text > .our-story__body    { margin-top: var(--os-gap-heading-body); }

.our-story__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    font-size: 16px;
    color: var(--color-black2);
    letter-spacing: var(--tracking-body);
}

.our-story__asterisk {
    width: 18px;
    height: 18px;
    display: block;
    animation: ourStoryAsteriskSpin 8s linear infinite;
    transform-origin: 50% 50%;
}

@keyframes ourStoryAsteriskSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.our-story__heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    font-size: clamp(36px, 4.6vw, 60px);
    line-height: 1.05;
}

.our-story__body {
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-body);
    line-height: var(--leading-relaxed);
    max-width: 38ch;
}

/* Right column — perspective carousel ───────── */
.our-story__carousel-wrap {
    position: relative;
    width: 100%;
}

.our-story__carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    perspective: 1400px;
    perspective-origin: 100% 50%;
    /* Reserve vertical space matching the rotated track */
    padding-block: var(--space-5);
}

.our-story__carousel-track {
    display: flex;
    gap: var(--space-5);
    transform: rotateY(-22deg);
    transform-style: preserve-3d;
    transform-origin: 100% 50%;
    will-change: transform;
}

/* Side fade gradients ───────── */
.our-story__carousel::before,
.our-story__carousel::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 18%;
    pointer-events: none;
    z-index: 2;
}

.our-story__carousel::before {
    left: 0;
    background: linear-gradient(to right, var(--color-white) 0%, rgba(255, 251, 240, 0) 100%);
}

.our-story__carousel::after {
    right: 0;
    background: linear-gradient(to left, var(--color-white) 0%, rgba(255, 251, 240, 0) 100%);
}

/* Polaroid ───────── */
.polaroid {
    flex: 0 0 auto;
    width: var(--os-polaroid-w);
    /* Wider-than-tall ratio — keeps height moderate while width grows */
    aspect-ratio: 9 / 5;
    background: #262626;
    /* Right-thick frame (the polaroid looks rotated 90° clockwise) */
    padding: var(--os-polaroid-pad) var(--os-polaroid-pad-r) var(--os-polaroid-pad) var(--os-polaroid-pad);
    border-radius: 2px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    box-sizing: border-box;
    /* GPU-composite each polaroid so the perspective rotation doesn't
       re-rasterize the layer every frame — kills the pixelated edges. */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.polaroid__media {
    position: relative;
    width: 100%;
    height: 100%;
    background: #0a0a0a;
    overflow: hidden;
    /* Force own compositing layer for crisp media rendering during
       the parent's perspective transform. */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.polaroid__media img,
.polaroid__media video {
    /* Slight overscan (101%) hides the 1-2px subpixel cracks where the
       dark .polaroid__media background bleeds through during perspective
       rasterization. */
    width: 101%;
    height: 101%;
    margin: -0.5%;
    object-fit: cover;
    display: block;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


/* ============================================================
   2. OUR FOUNDER
   ============================================================ */
.our-story--founder .our-story__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-9);
}

.our-story__founder-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-9);
    align-items: stretch;
}

.our-story__founder-image-col {
    position: relative;
}

.our-story__founder-image-wrap {
    width: 100%;
    height: 100%;
    /* Clip the founder image's reveal-scale (transform: scale(1.12)) so
       it can't push past the wrap and create horizontal page overflow. */
    overflow: clip;
}

.our-story__founder-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius);
    display: block;
}

.our-story__founder-text-col {
    display: flex;
    flex-direction: column;
}

/* Individual text gaps */
.our-story__founder-text-col > .our-story__founder-subheading { margin-top: var(--os-gap-fheading-subheading); }
.our-story__founder-text-col > .our-story__founder-body       { margin-top: var(--os-gap-subheading-body); }

.our-story__founder-heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    font-size: clamp(36px, 4.6vw, 60px);
    line-height: 1.05;
}

.our-story__founder-subheading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: 16px;
    letter-spacing: var(--tracking-tight);
    color: var(--color-black2);
}

.our-story__founder-body {
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-body);
    line-height: var(--leading-relaxed);
}

/* Body paragraph spacing */
.our-story__founder-body > p + p {
    margin-top: var(--os-gap-body-paragraphs);
}


/* ── CTA Row (button + full-vw dashed line) ─────────────── */
.our-story__cta-row {
    position: relative;
    width: 100%;
    min-height: 64px;
    display: flex;
    align-items: center;
}

/* Full-viewport-width dashed line — ignores section padding */
.our-story__cta-line {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    border-top: 1px dashed var(--color-greyish);
    pointer-events: none;
}

.our-story__cta-btn-wrap {
    position: relative;
    z-index: 1;
    will-change: transform;
}

/* Button + arrow container ───────── */
.our-story__cta-btn {
    display: inline-flex;
    align-items: stretch;
    text-decoration: none;
    line-height: 1;
}

.our-story__cta-text {
    background: var(--color-black2);
    color: var(--color-white);
    padding: 18px 36px;
    border-radius: var(--radius);
    border: 1px dashed transparent;
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    transition: background var(--duration-fast) var(--ease-gentle),
                color var(--duration-fast) var(--ease-gentle),
                border-color var(--duration-fast) var(--ease-gentle);
}

.our-story__cta-arrow {
    background: var(--color-white);
    border: 1px dashed var(--color-greyish);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 18px 18px;
    /* Overlap the button's right rounded corners so no gap shows */
    margin-left: calc(-1 * var(--radius));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--duration-fast) var(--ease-gentle),
                border-color var(--duration-fast) var(--ease-gentle);
}

.our-story__cta-arrow svg {
    width: 14px;
    height: auto;
    display: block;
}

.our-story__cta-arrow .arrow-path {
    fill: var(--color-black2);
    transition: fill var(--duration-fast) var(--ease-gentle);
}

/* HOVER ───────── */
.our-story__cta-btn:hover .our-story__cta-text {
    background: var(--color-white);
    color: var(--color-black2);
    border-color: var(--color-greyish);
}

.our-story__cta-btn:hover .our-story__cta-arrow {
    background: var(--color-black2);
    border-color: var(--color-black2);
}

.our-story__cta-btn:hover .our-story__cta-arrow .arrow-path {
    fill: var(--color-white);
}


/* ============================================================
   PREVIEW PLACEHOLDERS
   ============================================================ */
.os-placeholder {
    min-height: 100vh;
    background: var(--color-black2);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-xl);
    letter-spacing: var(--tracking-tight);
}


/* ============================================================
   RESPONSIVE — Small (1024 – 1199px)
   Same 2-column layout as desktop, just smaller scale.
   This block must come BEFORE tablet/mobile so its values are
   overridden by them at narrower viewports.
   ============================================================ */
@media (max-width: 1199px) {

    .our-story {
        --os-section-gap:           var(--os-section-gap-small);
        --os-pad-x:                 var(--os-pad-x-small);
        --os-gap-eyebrow-heading:   var(--os-gap-eyebrow-heading-small);
        --os-gap-heading-body:      var(--os-gap-heading-body-small);
        --os-gap-fheading-subheading: var(--os-gap-fheading-subheading-small);
        --os-gap-subheading-body:   var(--os-gap-subheading-body-small);
        --os-gap-body-paragraphs:   var(--os-gap-body-paragraphs-small);
        --os-how-pad-top:           var(--os-how-pad-top-small);
        --os-how-pad-bot:           var(--os-how-pad-bot-small);
        --os-founder-pad-top:       var(--os-founder-pad-top-small);
        --os-founder-pad-bot:       var(--os-founder-pad-bot-small);
        --os-polaroid-pad-r:        var(--os-polaroid-pad-r-small);
        --os-polaroid-pad:          var(--os-polaroid-pad-small);
        --os-polaroid-w:            var(--os-polaroid-w-small);
        --os-carousel-col:          var(--os-carousel-col-small);
    }
}


/* ============================================================
   RESPONSIVE — Tablet (768–1023px)
   ============================================================ */
@media (max-width: 1023px) {

    /* Swap active vars to tablet values */
    .our-story {
        --os-section-gap:           var(--os-section-gap-tablet);
        --os-pad-x:                 var(--os-pad-x-tablet);
        --os-gap-eyebrow-heading:   var(--os-gap-eyebrow-heading-tablet);
        --os-gap-heading-body:      var(--os-gap-heading-body-tablet);
        --os-gap-fheading-subheading: var(--os-gap-fheading-subheading-tablet);
        --os-gap-subheading-body:   var(--os-gap-subheading-body-tablet);
        --os-gap-body-paragraphs:   var(--os-gap-body-paragraphs-tablet);
        --os-how-pad-top:           var(--os-how-pad-top-tablet);
        --os-how-pad-bot:           var(--os-how-pad-bot-tablet);
        --os-founder-pad-top:       var(--os-founder-pad-top-tablet);
        --os-founder-pad-bot:       var(--os-founder-pad-bot-tablet);
        --os-polaroid-pad-r:        var(--os-polaroid-pad-r-tablet);
        --os-polaroid-pad:          var(--os-polaroid-pad-tablet);
        --os-polaroid-w:            var(--os-polaroid-w-tablet);
    }

    /* HOW IT STARTED ─ stack to single column, text-aligned center */
    .our-story__inner--how {
        /* minmax(0, 1fr) prevents the carousel content from forcing
           the column to expand beyond the viewport */
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-9);
        text-align: center;
    }

    .our-story__text {
        align-items: center;
    }

    .our-story__body {
        max-width: 52ch;
    }

    /* Carousel width on tablet */
    .our-story__carousel-wrap {
        width: var(--os-carousel-w-tablet);
        margin-inline: auto;
    }


    /* OUR FOUNDER ─ image stays in left column at 50/50, sticky behaviour */
    .our-story__founder-cols {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .our-story__founder-image-col {
        align-self: stretch;
    }

    .our-story__founder-image-wrap {
        position: sticky;
        top: var(--pad-top-nav);
        aspect-ratio: 1 / 1;
        height: auto;
    }
}


/* ============================================================
   RESPONSIVE — Mobile (481 – 767px)
   ============================================================ */
@media (max-width: 767px) {

    /* Swap active vars to mobile values */
    .our-story {
        --os-section-gap:           var(--os-section-gap-mobile);
        --os-pad-x:                 var(--os-pad-x-mobile);
        --os-gap-eyebrow-heading:   var(--os-gap-eyebrow-heading-mobile);
        --os-gap-heading-body:      var(--os-gap-heading-body-mobile);
        --os-gap-fheading-subheading: var(--os-gap-fheading-subheading-mobile);
        --os-gap-subheading-body:   var(--os-gap-subheading-body-mobile);
        --os-gap-body-paragraphs:   var(--os-gap-body-paragraphs-mobile);
        --os-how-pad-top:           var(--os-how-pad-top-mobile);
        --os-how-pad-bot:           var(--os-how-pad-bot-mobile);
        --os-founder-pad-top:       var(--os-founder-pad-top-mobile);
        --os-founder-pad-bot:       var(--os-founder-pad-bot-mobile);
        --os-polaroid-pad-r:        var(--os-polaroid-pad-r-mobile);
        --os-polaroid-pad:          var(--os-polaroid-pad-mobile);
        --os-polaroid-w:            var(--os-polaroid-w-mobile);
    }

    /* HOW IT STARTED ─ already stacked, keep centered */
    .our-story__inner--how {
        gap: var(--space-7);
    }

    .our-story__heading {
        font-size: clamp(32px, 9vw, 44px);
    }

    /* Carousel width on mobile */
    .our-story__carousel-wrap {
        width: var(--os-carousel-w-mobile);
        margin-inline: auto;
    }


    /* OUR FOUNDER ─ everything stacks */
    .our-story__founder-cols {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-6);
    }

    .our-story__founder-image-col {
        align-self: auto;
    }

    .our-story__founder-image-wrap {
        position: static;
        aspect-ratio: 16 / 10;
        height: auto;
    }

    .our-story__founder-heading {
        font-size: clamp(32px, 9vw, 44px);
    }

    .our-story__cta-text {
        padding: 16px 26px;
        font-size: 15px;
    }
}