/* TestimonialFilmReelBackground
   Diagonal, continuously-scrolling "film reel" strips built from real (approved)
   patient testimonial photos. Decorative background layer only - always sits
   behind foreground content via the .tfr-overlay + container z-index. Photos are
   clickable through to their full testimonial (see .tfr-frame pointer-events). */

.tfr-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
    /* White canvas + thin black outline, like the rest of the site, instead of the
       dark cinematic backdrop this started as. The overlay wash below and the hero
       copy's text colors (set per-page, e.g. switch-to-weight-loss-agents.php's
       .wla-story / reel_widget.php's .tr-story) both flip to dark-on-light to match. */
    background: #fff;
    border: 2px solid #000;
    box-sizing: border-box;
}

.tfr-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    /* Light wash (was a dark gradient) - mutes the reel photos enough for DARK hero
       text to read on top of a white canvas, same purpose as before, inverted tone. */
    background: linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.6) 45%, rgba(255,255,255,.85) 100%);
    opacity: .8;
    pointer-events: none; /* let clicks fall through to .tfr-frame links beneath it */
}

/* The belt is rotated ONCE, oversized well past the viewport on every side, so its
   corners always cover the container regardless of angle. Individual reels are just
   plain (unrotated) flex columns inside it - this is what fixes the black-triangle
   gaps/cutoff at the edges: previously each reel rotated itself individually and
   fell short of the corners at typical hero heights.
   Sizing math: for a centered rectangle W'xH' rotated by angle a to fully cover an
   axis-aligned WxH box, you need W' >= W*cos(a) + H*sin(a) and, critically,
   H' >= W*sin(a) + H*cos(a) - that second one scales with W (not H), so on a wide,
   short hero (common on desktop) the required H' can be several hundred percent of
   the section's own height. 240% was only safe up to roughly a 3:1 width:height
   hero; 500%/240% below comfortably covers ultra-wide monitors too. Also no gap
   between lanes - a visible empty channel the full belt height reads as a long
   diagonal "line" rather than film. */
.tfr-belt {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 240%;
    height: 500%;
    transform: translate3d(-50%, -50%, 0) rotate(var(--tfr-angle, -30deg));
    transform-origin: center center;
    display: flex;
    /* Wide enough that each frame's sprocket strip on the lane-facing edge has visible
       dark background behind it, not another lane's photo edge butted right up against
       it - at 4px the two edges touched directly and one strip effectively disappeared
       against the neighboring photo (reported 2026-07-03: "holes only on one edge"). */
    gap: 10px;
    z-index: 1;
}

.tfr-reel {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.tfr-track {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* align-items defaults to "stretch" - without this, each frame stretches to the
       full (wide) lane width while its fixed-size photo stays put on the left,
       leaving a big black dead zone to the right of every photo. Center instead. */
    align-items: center;
    gap: 5px;
    animation: tfr-scroll-up var(--tfr-speed, 50s) linear infinite;
    animation-delay: var(--tfr-delay, 0s);
    will-change: transform;
}

.tfr-reel[data-dir="down"] .tfr-track {
    animation-name: tfr-scroll-down;
}

/* Freeze the whole row while a tooltip in it is open, otherwise the link inside is a
   moving target - hovering/focusing any frame (or its popped-out tooltip, still a DOM
   descendant of the track) counts here since :hover bubbles up through ancestors. */
.tfr-track:hover,
.tfr-track:focus-within {
    animation-play-state: paused;
}

@keyframes tfr-scroll-up {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, -50%, 0); }
}

@keyframes tfr-scroll-down {
    from { transform: translate3d(0, -50%, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

.tfr-frame {
    flex: 0 0 auto;
    position: relative;
    background: #000;
    border: 6px solid #121110;
    border-radius: 3px;
    padding: 11px 15px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.05);
    pointer-events: auto; /* the only clickable island inside the otherwise inert background */
    cursor: pointer;
}

/* Sprocket holes run along the two edges PARALLEL to the direction of travel (each
   reel scrolls vertically), same as a real filmstrip's perforated rails run along
   its length, not across each individual frame. */
.tfr-frame::before,
.tfr-frame::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 9px;
    background-image: radial-gradient(circle, #000 44%, transparent 46%);
    background-size: 9px 18px;
    background-repeat: repeat-y;
    background-position: center 5px;
    opacity: .7;
}

.tfr-frame::before { left: 0; }
.tfr-frame::after { right: 0; }

.tfr-frame a {
    /* The public thumbnail endpoint returns variable aspect ratios (e.g. 56x100,
       74x100), not a padded 100x100 square - fix the visible window to a set size
       and object-fit:cover on the img crops each photo to fill it completely. */
    display: block;
    position: relative;
    width: 200px;
    height: 240px;
    overflow: hidden;
    border-radius: 2px;
}

.tfr-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(.15) sepia(.12) contrast(1.05);
    opacity: .82;
    transition: opacity .15s ease;
}

.tfr-frame:hover img,
.tfr-frame:focus-within img {
    opacity: 1;
}

/* Hover popout - appended to <body> by JS (testimonial-film-reel-background.js), NOT
   nested inside .tfr-frame. Every ancestor in the reel (.tfr-reel, .tfr-bg) uses
   overflow:hidden for the endless-scroll masking effect, which was clipping the top of a
   nested tooltip - its padding/title rendered outside the visible clip area (looked like
   missing margins, reported 2026-07-03). Living in <body> and positioned via
   getBoundingClientRect() sidesteps that entirely, so no counter-rotation is needed either
   (it's not inside the rotated belt/frame ancestry any more).
   position:absolute (not fixed) + scrollX/Y-adjusted coordinates (see the JS) - this
   tooltip tracks a point in scrollable page content, not the viewport, so it needs
   document-relative positioning. Fixed positioning was the actual bug behind the
   "tooltip shows up in a random spot on the page" report (2026-07-03). */
.tfr-tooltip {
    position: absolute;
    width: 220px;
    background: #fff;
    color: #1c1c1c;
    border-radius: 10px;
    padding: 13px 15px;
    font-size: .82rem;
    line-height: 1.45;
    box-shadow: 0 12px 32px rgba(0,0,0,.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, visibility .15s ease;
    pointer-events: none;
    text-align: left;
    z-index: 60;
}

.tfr-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
}

.tfr-tooltip .tfr-title {
    display: block;
    margin-bottom: 4px;
    font-size: .88rem;
    color: #10202E;
}

.tfr-tooltip .tfr-cta {
    display: block;
    margin-top: 8px;
    font-weight: 700;
    font-size: .76rem;
    letter-spacing: .01em;
    color: #F0584C;
}

/* Static fallback for prefers-reduced-motion: freeze frame, no motion at all */
.tfr-bg.tfr-static .tfr-track {
    animation: none !important;
    transform: translate3d(0, -18%, 0);
}

@media (prefers-reduced-motion: reduce) {
    .tfr-track {
        animation: none !important;
        transform: translate3d(0, -18%, 0);
    }
}

/* Mobile: fewer, smaller, calmer strips (reel count itself is also reduced in JS) */
@media (max-width: 768px) {
    .tfr-reel:nth-child(n+4) {
        display: none;
    }
    .tfr-frame {
        border-width: 4px;
        padding: 7px 9px;
    }
    .tfr-frame a {
        width: 115px;
        height: 140px;
    }
    .tfr-tooltip {
        display: none; /* hover has no meaning on touch; tap navigates straight through */
    }
    .tfr-overlay {
        opacity: .78;
    }
}