/*
 * Shop-the-look video band (includes/site_video_feed.php).
 * One card holds focus in the middle; its neighbours sit back, blurred and
 * scaled down, so the eye stays on whatever is playing.
 */

.video-feed__section {
    --vf-card-width: clamp(190px, 47vw, 264px);
    --vf-step: calc(var(--vf-card-width) + 10px);
    --vf-radius: 16px;
    padding: 44px 0 40px;
    background: #faf7f4;
    overflow: hidden;
}

.video-feed__heading {
    margin-bottom: 26px;
}

.video-feed__subtitle {
    margin: 8px 0 0;
    color: #6c625c;
    font-size: 15px;
}

.video-feed__stage {
    position: relative;
    height: calc(var(--vf-card-width) * 16 / 9);
    max-height: 74vh;
}

.video-feed__track {
    position: absolute;
    inset: 0;
    display: block;
}

.video-feed__card {
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--vf-card-width);
    height: 100%;
    margin-left: calc(var(--vf-card-width) / -2);
    border-radius: var(--vf-radius);
    transform: translate3d(0, 0, 0) scale(0.8);
    transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 520ms ease, filter 520ms ease;
    opacity: 0;
    filter: blur(1.5px);
    pointer-events: none;
    will-change: transform, opacity, filter;
}

/* Set by the script for the one frame in which a card crosses the seam between
   the last clip and the first. Transitions off, so it is put down in its new
   place instead of sliding the whole width of the track to get there — and
   transparent, so the frame after this one fades it in where it landed rather
   than popping it into view. */
.video-feed__card.is-jumping {
    transition: none;
    opacity: 0;
}

.video-feed__card.is-near {
    opacity: 0.92;
    /* Enough to hold the eye on the middle card, light enough that the
       neighbours still read as clothes rather than smears. */
    filter: blur(0.7px);
    transform: translate3d(var(--vf-offset, 0px), 0, 0) scale(0.86);
    pointer-events: auto;
}

.video-feed__card.is-far {
    opacity: 0.5;
    filter: blur(1.3px);
    transform: translate3d(var(--vf-offset, 0px), 0, 0) scale(0.76);
}

.video-feed__card.is-active {
    opacity: 1;
    filter: none;
    transform: translate3d(0, 0, 0) scale(1);
    pointer-events: auto;
    z-index: 2;
}

.video-feed__open {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.video-feed__media {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: var(--vf-radius);
    background: #e7e0d9;
    box-shadow: 0 18px 40px rgba(31, 26, 23, 0.16);
}

.video-feed__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #ded6ce;
}

.video-feed__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin: -27px 0 0 -27px;
    border-radius: 50%;
    background: rgba(23, 20, 18, 0.55);
    color: #fff;
    padding-left: 3px;
    transition: opacity 240ms ease;
}

.video-feed__card.is-active .video-feed__play {
    opacity: 0.82;
}

/* The product chip: image, name and price pulled live from the products table. */
.video-feed__product {
    position: absolute;
    right: 8px;
    bottom: 8px;
    left: 8px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px 7px 7px;
    border-radius: 12px;
    background: rgba(23, 20, 18, 0.82);
    color: #fff;
    text-decoration: none;
    backdrop-filter: blur(6px);
}

.video-feed__product:hover,
.video-feed__product:focus {
    color: #fff;
    background: rgba(23, 20, 18, 0.92);
}

.video-feed__product--img {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    background: #fff;
}

.video-feed__product--text {
    min-width: 0;
    display: block;
}

.video-feed__product--name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
}

.video-feed__product--price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 2px;
    font-size: 13px;
}

.video-feed__product--price del {
    color: #bdb3ab;
    font-size: 12px;
}

.video-feed__product--price strong {
    font-weight: 600;
}

.video-feed__product--price del:empty {
    display: none;
}

.video-feed__nav {
    position: absolute;
    top: 50%;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #1f1a17;
    box-shadow: 0 8px 22px rgba(31, 26, 23, 0.18);
    cursor: pointer;
}

.video-feed__nav--prev {
    left: 4px;
}

.video-feed__nav--next {
    right: 4px;
}

/* On a phone the band is swiped, and arrows would only cover the neighbours. */
@media (max-width: 767px) {
    .video-feed__nav {
        display: none;
    }
}

.video-feed__dots {
    display: flex;
    justify-content: center;
    /* Wide enough that each dot's hit area (below) clears its neighbour's —
       overlapping targets mean a tap near the edge selects the wrong clip. */
    gap: 13px;
    margin-top: 18px;
}

.video-feed__dot {
    position: relative;
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d8cec6;
    cursor: pointer;
    transition: width 240ms ease, background 240ms ease;
}

/* A 7px dot is right to look at and impossible to hit with a thumb. The target
   is an invisible square over it, so the dots stay small and stay tappable. */
.video-feed__dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 19px;
    height: 34px;
    transform: translate(-50%, -50%);
}

.video-feed__dot.is-active {
    width: 18px;
    border-radius: 4px;
    background: #1f1a17;
}

/* --- Full-screen viewer ---------------------------------------------------- */

.video-feed__viewer {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0b0a09;
}

.video-feed__viewer[hidden] {
    display: none;
}

/* The fade is an animation rather than a transition out of opacity: 0, so a
   browser that never runs it (a backgrounded tab, reduced motion) still shows
   the viewer instead of a blank screen. */
.video-feed__viewer.is-open {
    animation: video-feed__fade 240ms ease;
}

@keyframes video-feed__fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Full-bleed on a phone; a phone-shaped window once there is room for one. */
.video-feed__viewer--frame {
    position: relative;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: #000;
    overflow: hidden;
}

@media (min-width: 768px) {
    .video-feed__viewer--frame {
        width: min(100vw, calc(100vh * 9 / 16));
        height: min(100vh, calc(100vw * 16 / 9));
    }
}

.video-feed__viewer--video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.video-feed__viewer--top {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
}

.video-feed__viewer--btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    cursor: pointer;
}

.video-feed__viewer--btn .video-feed__slash {
    opacity: 0;
}

.video-feed__viewer.is-muted .video-feed__viewer--btn .video-feed__slash {
    opacity: 1;
}

.video-feed__viewer.is-muted .video-feed__viewer--btn .video-feed__wave {
    opacity: 0.25;
}

.video-feed__viewer--step {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    cursor: pointer;
}

.video-feed__viewer--step__prev {
    left: 10px;
}

.video-feed__viewer--step__next {
    right: 10px;
}

.video-feed__viewer--product {
    position: absolute;
    right: 12px;
    bottom: 14px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px 8px 8px;
    border-radius: 14px;
    background: rgba(23, 20, 18, 0.86);
    color: #fff;
    text-decoration: none;
}

.video-feed__viewer--product:hover,
.video-feed__viewer--product:focus {
    color: #fff;
    background: rgba(23, 20, 18, 0.95);
}

.video-feed__viewer--product .video-feed__product--img {
    width: 52px;
    height: 52px;
}

.video-feed__viewer--product .video-feed__product--name {
    font-size: 14px;
}

.video-feed__viewer--cta {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}

body.video-feed__locked {
    overflow: hidden;
}

@media (min-width: 768px) {
    .video-feed__section {
        --vf-card-width: clamp(220px, 24vw, 300px);
        padding: 64px 0 60px;
    }

    .video-feed__nav--prev {
        left: 8%;
    }

    .video-feed__nav--next {
        right: 8%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .video-feed__card {
        transition: none;
    }

    .video-feed__viewer.is-open {
        animation: none;
    }
}