/* =========================================
   HOME — SECTION 3: "We Craft" sticky scroll reveal
   "We Craft" sits inline next to a vertical odometer
   wheel of the 8 categories — the active one centered
   at full opacity, the previous one faded above it, the
   next one faded below it, ticking as the user scrolls
   (like a clock/date picker, NOT a click counter — no
   buttons here). Both "We Craft" and the wheel items use
   the same plain sans body font, same size/weight, and
   sit on one properly centered baseline. Scattered 1:1
   image tiles reveal around the headline, re-randomized
   (position/image/depth) per category.
   Depth effect: each tile gets a random "depth" (far <->
   near) that drives its scale/blur/shadow/stacking order,
   plus a scroll-linked parallax shift of the image inside
   its frame (see --tile-parallax / updateParallax() in
   home-craft-scroll.js) — near tiles sit larger, sharper,
   and shift more per scroll tick than far ones, which is
   what actually reads as "depth" rather than a flat
   scatter of same-size cards.
   Driven by GSAP ScrollTrigger (pin + snap); a static
   fallback shows category 1 if GSAP/ScrollTrigger
   aren't available.
   ========================================= */

.craft-scroll {
    position: relative;
    z-index: 10;
    border-top: 1px solid var(--border-light);
    /* Tall enough to give the pinned viewport room to step through all
       8 items before releasing: 100vh of physical scroll per step. */
    min-height: 800vh;
}

@media (max-width: 768px) {
    /* The same 800vh (100vh/step) pin distance that works on desktop reads
       as painfully slow / "endless" on phones — touch-scroll flicks cover
       far less distance per gesture than a mouse wheel does, so the exact
       same scroll-height requires noticeably more physical scrolling to
       get through. Shortening each step to 55vh (~440vh total) keeps the
       same pin-and-step mechanic but roughly halves how far you need to
       scroll to reach the last item. */
    .craft-scroll {
        min-height: 440vh;
    }
}

.craft-scroll__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    /* 100dvh (dynamic viewport height) excludes the mobile browser's
       address/toolbar chrome, so the pin doesn't overshoot or leave a gap
       as the chrome shows/hides mid-scroll on phones — falls back to
       100vh above on browsers that don't support dvh yet. */
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.craft-scroll__container {
    position: relative;
    width: min(1400px, 92vw);
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Center headline: "We Craft" + odometer wheel, one row ---- */
.craft-scroll__headline {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
    pointer-events: none;

    /* Plain sans body font, shared by both children below so nothing
       shifts baseline between the static word and the wheel. */
    font-family: var(--font-body);
    font-weight: 500;
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--text-bright);
}

.craft-scroll__static {
    white-space: nowrap;
    /* Swaps between "We Craft" (categories 1-4) and "Shop by" (hubs 5-8) —
       see updatePrefix() in home-craft-scroll.js. Cross-fades on change
       instead of snapping so the switch reads as intentional. */
    transition: opacity 0.2s ease;
}

.craft-scroll__static.is-swapping {
    opacity: 0;
}

/* ---- Odometer wheel ---- */
/* Fixed-height viewport showing exactly 3 rows (prev / active / next);
   overflow hidden crops the rest of the list. */
.craft-scroll__wheel {
    position: relative;
    height: 3.2em;
    overflow: hidden;
    text-align: left;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 32%, #000 68%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 32%, #000 68%, transparent 100%);
}

.craft-scroll__wheel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    /* Each item occupies exactly one row (1.06em) so translateY by
       whole rows lines a given index up dead-center. Row height must
       match .craft-scroll__wheel-item's height below. */
    top: 1.06em; /* centers row 0 in the middle (3-row) viewport */
    transform: translateY(0);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.craft-scroll__wheel-item {
    height: 1.06em;
    line-height: 1.06em;
    white-space: nowrap;
    color: var(--text-dim);
    opacity: 0.25;
    transition: opacity 0.4s ease, color 0.4s ease;
}

.craft-scroll__wheel-item.is-active {
    opacity: 1;
    color: var(--accent-glow);
}

/* Immediate neighbors (prev/next) read slightly less dim than the rest
   of the cropped list, echoing a real odometer/date-picker's falloff. */
.craft-scroll__wheel-item.is-adjacent {
    opacity: 0.45;
    color: var(--text-bright);
}

/* ---- Scattered image tiles ---- */
.craft-scroll__images {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.craft-scroll__panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
}

.craft-scroll__panel.is-active {
    opacity: 1;
    visibility: visible;
}

.craft-scroll__tiles {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Base placement is centered/stacked; home-craft-scroll.js overrides
   --tile-x / --tile-y / --tile-rot / --tile-delay / --tile-size per tile,
   per activation, so the same 4 tiles land somewhere new (with a new
   random image) around the headline each time. --tile-scale / --tile-blur
   / --tile-shadow / --tile-opacity / --tile-z encode that tile's random
   "depth" (see home-craft-scroll.js) so near tiles read larger, sharper,
   more opaque, and stacked above far ones — the actual depth cue, not
   just position. Tiles are always square (width === height) for a 1:1
   image ratio. */
.craft-scroll__tile {
    position: absolute;
    top: calc(50% + var(--tile-y, 0px));
    left: calc(50% + var(--tile-x, 0px));
    width: var(--tile-size, 180px);
    height: var(--tile-size, 180px);
    margin: calc(var(--tile-size, 180px) / -2) 0 0 calc(var(--tile-size, 180px) / -2);
    border-radius: 4px;
    overflow: hidden;
    border: none;
    background: #000;
    z-index: var(--tile-z, 1);
    box-shadow: 0 22px 48px -12px rgba(0, 0, 0, var(--tile-shadow, 0.3));
    filter: blur(var(--tile-blur, 0px));
    opacity: 0;
    transform: translateY(50px) rotate(var(--tile-rot, 0deg)) scale(calc(var(--tile-scale, 1) * 0.85));
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
    transition-delay: var(--tile-delay, 0s);
}

.craft-scroll__panel.is-active .craft-scroll__tile {
    opacity: var(--tile-opacity, 0.9);
    transform: translateY(0) rotate(var(--tile-rot, 0deg)) scale(var(--tile-scale, 1));
}

/* The image itself is oversized (130% height, centered) inside the
   square, overflow-hidden frame above, so the scroll-linked parallax
   shift below (`--tile-parallax`, updated continuously while a panel is
   active — see updateParallax() in home-craft-scroll.js) can move the
   photo inside its frame without ever revealing an edge. `translate` is
   used instead of piling onto `transform` so this shift stays instant/
   scroll-coupled and doesn't inherit the tile's own eased transition. */
.craft-scroll__tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* Show the whole product photo — never crop it. Photos are shot on
       black and the tile background is black, so there is no visible
       letterbox even when an image is not perfectly square. */
    object-fit: contain;
}

@media (max-width: 768px) {
    /* Keep the same pinned scroll-through-8-categories mechanic on
       mobile — just tuned smaller. Tile size is set responsively via
       --tile-size, and the scatter radius (how far tiles spread from the
       centered headline) is computed in home-craft-scroll.js from
       window.innerWidth/innerHeight — no fixed-px override needed here,
       which would otherwise fight the JS value. (The vertical scatter
       radius on mobile was previously too small, so tiles clustered near
       the headline instead of using the full pinned viewport height —
       fixed in randomizeTiles()'s radiusRange, not here.) */
    .craft-scroll__headline {
        gap: 0.35em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .craft-scroll__wheel-list,
    .craft-scroll__wheel-item,
    .craft-scroll__tile,
    .craft-scroll__panel,
    .craft-scroll__static {
        transition: none;
    }
}