/* ==========================================================================
   REELS — the vertical footage feed
   --------------------------------------------------------------------------
   A full-viewport, scroll-snapping column: one clip per screen, the way every
   phone feed works. The page chrome steps aside completely — the site header,
   footer and floating buttons are all hidden — and this file supplies its own
   compact bar so a visitor is never stranded inside the feed.

   The feed is its own scroll container rather than the document, so snapping
   stays predictable on iOS and the bar can sit still above it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PAGE TAKEOVER
   -------------------------------------------------------------------------- */
body.tft-reels-page {
    overflow: hidden;
    background: #000;
    /* Belt and braces: the grain overlay is a fixed pseudo-element. */
    overscroll-behavior: none;
}

body.tft-reels-page .tft-header,
body.tft-reels-page .tft-drawer,
body.tft-reels-page .tft-progress,
body.tft-reels-page .tft-footer,
body.tft-reels-page .tft-float,
body.tft-reels-page .tft-curtain {
    display: none !important;
}

body.tft-reels-page .tft-main {
    padding: 0;
    margin: 0;
}

/* --------------------------------------------------------------------------
   2. SHELL
   -------------------------------------------------------------------------- */
.tft-reels {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #000;
    color: var(--bone-100);
    /* Above the curtain, which is the highest layer the theme otherwise uses. */
    z-index: calc(var(--z-curtain) + 10);
}

/*
 * Top bar and place chips never give up height.
 *
 * The feed below them is a stack of full-height panels, so its intrinsic
 * content height is enormous; left shrinkable, the flex algorithm takes the
 * difference out of these two instead, cropping the logo and slicing the
 * chips in half.
 */
.tft-reels-bar,
.tft-reels-places {
    flex: 0 0 auto;
}

/* Top bar ------------------------------------------------------------------ */
.tft-reels-bar {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-md);
    padding: 0.7rem clamp(0.9rem, 0.5rem + 1.6vw, 1.6rem);
    padding-top: max(0.7rem, env(safe-area-inset-top));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
}

.tft-reels-home img {
    height: 2rem;
    width: auto;
    display: block;
}

.tft-reels-home .tft-logo-name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--bone-100);
}

.tft-reels-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: var(--tr-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-invert-soft);
}

.tft-reels-label svg {
    width: 0.95rem;
    height: 0.95rem;
}

.tft-reels-close {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    color: var(--bone-100);
    background: rgba(255, 255, 255, 0.1);
    transition: background var(--t-fast);
}

.tft-reels-close:hover {
    background: var(--rust-500);
}

.tft-reels-close svg {
    width: 1.05rem;
    height: 1.05rem;
}

/* Place chips -------------------------------------------------------------- */
.tft-reels-places {
    position: relative;
    z-index: 4;
    display: flex;
    gap: 0.45rem;
    padding: 0 clamp(0.9rem, 0.5rem + 1.6vw, 1.6rem) 0.7rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.tft-reels-places::-webkit-scrollbar {
    display: none;
}

.tft-reels-places .tft-filter {
    flex: 0 0 auto;
    border-color: rgba(255, 255, 255, 0.24);
    color: rgba(255, 255, 255, 0.74);
    background: rgba(255, 255, 255, 0.06);
}

.tft-reels-places .tft-filter:hover {
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

.tft-reels-places .tft-filter.is-active {
    background: var(--bone-100);
    border-color: var(--bone-100);
    color: var(--ink-900);
}

/* --------------------------------------------------------------------------
   3. THE SCROLLER
   -------------------------------------------------------------------------- */
.tft-reels-feed {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.tft-reels-feed::-webkit-scrollbar {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .tft-reels-feed {
        scroll-behavior: auto;
    }
}

.tft-reel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
    background: #000;
}

/* --------------------------------------------------------------------------
   4. THE PANEL
   -------------------------------------------------------------------------- */
.tft-reel-stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
}

/*
 * Blurred, over-scaled copy of the cover frame behind the video. Portrait
 * clips fill the panel and never see it; landscape clips letterbox onto it
 * instead of onto bare black, which is what makes a mixed feed hold together.
 */
.tft-reel-fill {
    position: absolute;
    inset: -8%;
    background-size: cover;
    background-position: center;
    filter: blur(38px) saturate(1.15) brightness(0.55);
    transform: scale(1.15);
}

.tft-reel-fill--blank {
    background: radial-gradient(120% 90% at 50% 20%, #1c232c 0%, #0a0d11 70%);
    filter: none;
}

.tft-reel-video {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/*
 * Once the clip is known to be portrait it covers the panel edge to edge.
 * reels.js sets this from the video's own dimensions, so a landscape clip
 * keeps its bars and nothing is ever cropped by guesswork.
 */
.tft-reel.is-portrait .tft-reel-video {
    object-fit: cover;
}

.tft-reel-tap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    border: 0;
    cursor: pointer;
    /* Keeps the caption and the action rail clickable underneath it. */
    z-index: 1;
}

/* Play badge — shown while paused, and briefly on each toggle. */
.tft-reel-state {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    color: #fff;
    background: rgba(10, 13, 17, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out);
    pointer-events: none;
}

.tft-reel.is-paused .tft-reel-state,
.tft-reel.is-flashing .tft-reel-state {
    opacity: 1;
    transform: scale(1);
}

.tft-reel-state svg {
    width: 1.9rem;
    height: 1.9rem;
    display: block;
}

/* Play glyph while paused, pause glyph on the flash that follows a tap. */
.tft-reel-state-play {
    margin-left: 0.15rem;
}

.tft-reel-state-pause,
.tft-reel.is-paused .tft-reel-state-play {
    display: block;
}

.tft-reel-state-play,
.tft-reel.is-paused .tft-reel-state-pause {
    display: none;
}

/* Buffering ---------------------------------------------------------------- */
.tft-reel-spinner {
    position: absolute;
    z-index: 2;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    opacity: 0;
    transition: opacity var(--t-fast);
    pointer-events: none;
}

.tft-reel.is-loading .tft-reel-spinner {
    opacity: 1;
    animation: tft-reel-spin 0.8s linear infinite;
}

@keyframes tft-reel-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tft-reel.is-loading .tft-reel-spinner {
        animation-duration: 2s;
    }
}

/* Progress ----------------------------------------------------------------- */
.tft-reel-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* Above the caption overlay, whose gradient reaches the same bottom edge. */
    z-index: 4;
    height: 3px;
    background: rgba(255, 255, 255, 0.16);
}

.tft-reel-progress-bar {
    display: block;
    height: 100%;
    width: 0;
    background: var(--gold-400);
    transform-origin: left center;
}

/* --------------------------------------------------------------------------
   5. OVERLAYS
   -------------------------------------------------------------------------- */
/*
 * The gradient runs the full width of the panel, including behind the action
 * rail — it is the thing that makes white icons legible over a bright frame,
 * and stopping it short of the rail left a hard vertical seam down the shot.
 * The rail is cleared with padding instead, so only the text is inset.
 */
.tft-reel-overlay {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    /*
     * The top padding is what gives the gradient its height, and on a phone it
     * has to reach past the top of the action rail — which stands taller than
     * the caption — or the sound button ends up the one icon with no scrim
     * under it. Stops are weighted low so the extra height stays subtle.
     */
    padding: 9rem clamp(1rem, 0.6rem + 1.8vw, 1.9rem) clamp(1.4rem, 1rem + 2vw, 2.2rem);
    padding-right: calc(clamp(1rem, 0.6rem + 1.8vw, 1.9rem) + 4.75rem);
    padding-bottom: max(clamp(1.4rem, 1rem + 2vw, 2.2rem), calc(env(safe-area-inset-bottom) + 1.4rem));
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.52) 32%, rgba(0, 0, 0, 0.22) 62%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

.tft-reel-overlay a,
.tft-reel-overlay button {
    pointer-events: auto;
}

.tft-reel-place {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

.tft-reel-place svg {
    width: 0.85rem;
    height: 0.85rem;
}

.tft-reel-title {
    margin: 0.65rem 0 0;
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: 500;
    line-height: var(--lh-snug);
    color: #fff;
    font-variation-settings: var(--wonk-on);
    text-wrap: balance;
}

.tft-reel-caption {
    margin: 0.5rem 0 0;
    max-width: 42ch;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
}

.tft-reel-cta {
    margin-top: 1rem;
}

/* Action rail -------------------------------------------------------------- */
.tft-reel-rail {
    position: absolute;
    z-index: 3;
    right: clamp(0.7rem, 0.4rem + 1vw, 1.1rem);
    bottom: clamp(1.4rem, 1rem + 2vw, 2.2rem);
    bottom: max(clamp(1.4rem, 1rem + 2vw, 2.2rem), calc(env(safe-area-inset-bottom) + 1.4rem));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
}

.tft-reel-action {
    display: grid;
    place-items: center;
    width: 2.85rem;
    height: 2.85rem;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(10, 13, 17, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
    transition: background var(--t-fast), transform var(--t-fast);
}

.tft-reel-action:hover {
    background: var(--rust-500);
    transform: scale(1.07);
}

.tft-reel-action svg {
    width: 1.2rem;
    height: 1.2rem;
}

/* Sound button swaps its glyph with the global mute state. */
.tft-reel-action-off {
    display: none;
}

.tft-reels.is-muted .tft-reel-action-on {
    display: none;
}

.tft-reels.is-muted .tft-reel-action-off {
    display: block;
}

/* Volume ------------------------------------------------------------------- */
.tft-reel-sound {
    position: relative;
    display: flex;
    align-items: center;
}

/*
 * Hidden on touch: phones have hardware volume keys, and a 3px track is a
 * poor drag target next to a thumb already resting on the feed.
 */
.tft-reel-volume {
    display: none;
}

.tft-reel-volume-input {
    /* --vol is written by reels.js, and paints the filled part of the track. */
    --vol: 100%;

    width: 100%;
    height: 1.15rem;
    margin: 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.tft-reel-volume-input:focus-visible {
    outline: 2px solid var(--gold-400);
    outline-offset: 3px;
    border-radius: var(--r-pill);
}

/* Track — WebKit and Firefox need the rules written out separately. */
.tft-reel-volume-input::-webkit-slider-runnable-track {
    height: 3px;
    border-radius: var(--r-pill);
    background: linear-gradient(
        to right,
        var(--gold-400) 0 var(--vol),
        rgba(255, 255, 255, 0.25) var(--vol) 100%
    );
}

.tft-reel-volume-input::-moz-range-track {
    height: 3px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.25);
}

.tft-reel-volume-input::-moz-range-progress {
    height: 3px;
    border-radius: var(--r-pill);
    background: var(--gold-400);
}

.tft-reel-volume-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0.85rem;
    height: 0.85rem;
    margin-top: calc((0.85rem - 3px) / -2);
    border: 0;
    border-radius: 50%;
    background: var(--bone-100);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    transition: transform var(--t-fast);
}

.tft-reel-volume-input::-moz-range-thumb {
    width: 0.85rem;
    height: 0.85rem;
    border: 0;
    border-radius: 50%;
    background: var(--bone-100);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.tft-reel-volume-input:hover::-webkit-slider-thumb,
.tft-reel-volume-input:active::-webkit-slider-thumb {
    transform: scale(1.15);
}

.tft-reel-index {
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: var(--tr-label);
    color: rgba(255, 255, 255, 0.55);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   6. END CARD
   -------------------------------------------------------------------------- */
.tft-reel--end {
    background: radial-gradient(120% 90% at 50% 15%, #1c232c 0%, #0a0d11 68%);
    text-align: center;
}

.tft-reel-end-inner {
    max-width: 34rem;
    padding: var(--sp-xl) var(--gutter);
}

.tft-reel--end h2 {
    color: #fff;
    margin-top: 0.75rem;
}

.tft-reel-end-text {
    margin-top: 1.1rem;
    color: var(--c-text-invert-soft);
}

.tft-reel-end-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1.9rem;
}

.tft-reel-end-links {
    margin-top: 1.9rem;
    display: flex;
    gap: 0.7rem;
    justify-content: center;
    font-size: var(--fs-micro);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--c-text-invert-faint);
}

.tft-reel-end-links a {
    color: var(--c-text-invert-soft);
}

.tft-reel-end-links a:hover {
    color: var(--gold-400);
}

/* --------------------------------------------------------------------------
   7. STEPPERS, HINT, TOAST
   -------------------------------------------------------------------------- */
.tft-reels-steps {
    position: absolute;
    right: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: none;
    flex-direction: column;
    gap: 0.6rem;
}

.tft-reels-step {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff;
    background: rgba(10, 13, 17, 0.45);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
}

.tft-reels-step:hover {
    background: var(--rust-500);
    border-color: var(--rust-500);
}

.tft-reels-step[disabled] {
    opacity: 0.3;
    cursor: default;
}

.tft-reels-step svg {
    width: 1.15rem;
    height: 1.15rem;
}

.tft-reels-hint {
    position: absolute;
    left: 50%;
    bottom: 1.1rem;
    transform: translateX(-50%);
    z-index: 5;
    margin: 0;
    padding: 0.45em 1em;
    border-radius: var(--r-pill);
    font-size: var(--fs-micro);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(10, 13, 17, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: opacity var(--t-mid);
    pointer-events: none;
}

.tft-reels-hint.is-gone {
    opacity: 0;
}

.tft-reels-toast {
    position: absolute;
    left: 50%;
    bottom: 4.5rem;
    transform: translate(-50%, 0.5rem);
    z-index: 6;
    padding: 0.5em 1.1em;
    border-radius: var(--r-pill);
    font-size: var(--fs-micro);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--ink-900);
    background: var(--bone-100);
    opacity: 0;
    transition: opacity var(--t-mid), transform var(--t-mid);
    pointer-events: none;
}

.tft-reels-toast.is-shown {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* --------------------------------------------------------------------------
   8. DESKTOP — the feed becomes a phone on a dark stage
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
    .tft-reels {
        background: radial-gradient(90% 70% at 50% 0%, #12171e 0%, #050708 75%);
    }

    .tft-reels-steps {
        display: flex;
    }

    .tft-reel {
        padding-block: 1.25rem;
    }

    .tft-reel-stage {
        width: auto;
        max-width: min(28rem, 44vh);
        aspect-ratio: 9 / 16;
        height: 100%;
        border-radius: var(--r-lg, 1.25rem);
        box-shadow: 0 40px 90px rgba(0, 0, 0, 0.65);
    }

    .tft-reel-progress,
    .tft-reel-overlay,
    .tft-reel-rail {
        /* Track the phone frame rather than the full-width panel. */
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(28rem, 44vh);
        max-width: 100%;
    }

    .tft-reel-progress {
        bottom: 1.25rem;
        border-bottom-left-radius: var(--r-lg, 1.25rem);
        border-bottom-right-radius: var(--r-lg, 1.25rem);
        overflow: hidden;
    }

    .tft-reel-overlay {
        bottom: 1.25rem;
        border-bottom-left-radius: var(--r-lg, 1.25rem);
        border-bottom-right-radius: var(--r-lg, 1.25rem);
        /* The rail moves outside the frame here, so the caption gets it back. */
        padding-right: clamp(1rem, 0.6rem + 1.8vw, 1.9rem);
        /* ...and with no rail to cover, the gradient goes back to the caption. */
        padding-top: 4.5rem;
    }

    .tft-reel-rail {
        /* Outside the frame, to the right of it. */
        left: auto;
        right: calc(50% - min(14rem, 22vh) - 4rem);
        transform: none;
        width: auto;
        bottom: 2.5rem;
    }

    /*
     * The volume slider unfurls rightward out of the sound button, into the
     * empty stage beside the frame. It carries no left margin on purpose —
     * a gap there would break :hover as the pointer crossed it, and the pill
     * closing under the cursor is maddening.
     */
    .tft-reel-volume {
        display: block;
        position: absolute;
        left: 100%;
        top: 50%;
        z-index: 1;
        width: 0;
        padding: 0;
        overflow: hidden;
        border-radius: var(--r-pill);
        background: rgba(10, 13, 17, 0.62);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        opacity: 0;
        transform: translateY(-50%);
        transition:
            width var(--t-mid) var(--ease-out),
            padding var(--t-mid) var(--ease-out),
            opacity var(--t-fast) var(--ease-out);
    }

    .tft-reel-sound:hover .tft-reel-volume,
    .tft-reel-sound:focus-within .tft-reel-volume {
        width: 7rem;
        padding: 0.6rem 0.9rem;
        opacity: 1;
    }

    .tft-reel--end {
        background: none;
    }
}

@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
    .tft-reel-volume {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   9. EMPTY STATE
   -------------------------------------------------------------------------- */
.tft-reels--empty {
    display: grid;
    place-items: center;
    text-align: center;
    background: radial-gradient(120% 90% at 50% 15%, #1c232c 0%, #0a0d11 68%);
}

.tft-reels-empty-inner {
    max-width: 32rem;
    padding: var(--gutter);
}

.tft-reels-empty-icon {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    color: var(--gold-400);
    background: rgba(255, 255, 255, 0.07);
}

.tft-reels-empty-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.tft-reels--empty h1 {
    color: #fff;
    font-size: var(--fs-h3);
}

.tft-reels--empty p {
    margin: 1rem 0 2rem;
    color: var(--c-text-invert-soft);
}

/* --------------------------------------------------------------------------
   10. NO JAVASCRIPT
   --------------------------------------------------------------------------
   Without JS nothing attaches a source, so give every clip its own controls
   and let the browser load them normally.
   -------------------------------------------------------------------------- */
.no-js .tft-reel-tap,
.no-js .tft-reel-state,
.no-js .tft-reel-spinner,
.no-js .tft-reels-steps,
.no-js .tft-reels-hint,
.no-js .tft-reel-progress,
.no-js [data-reel-video],
.no-js [data-reel-mute] {
    display: none;
}

.no-js .tft-reels-feed {
    scroll-snap-type: none;
}

.no-js .tft-reel {
    height: auto;
    min-height: 100%;
}