/**
 * WorkDone — TikTok-style video player
 * ---------------------------------------------------------------------------
 * Isolated with the .wd-video namespace so it can be reused anywhere.
 * Everything scales with the width of the player through container queries,
 * which keeps the chrome identical in a 285px column and in fullscreen.
 */

.wd-video {
    /* the panel lives on top of the picture, so the menu keeps the only
       opaque surface (--wd-ink / --wd-accent) of the component */
    --wd-ink: rgb(41, 36, 43);
    --wd-ink-soft: rgba(41, 36, 43, 0.6);
    --wd-accent: var(--wd-purple, #7147CD);
    position: relative;
    width: 100%;
    font-family: 'Montserrat', -apple-system, sans-serif;
    line-height: 1.2;
    -webkit-tap-highlight-color: transparent;
}

.wd-video *,
.wd-video *::before,
.wd-video *::after {
    box-sizing: border-box;
}

/* ---------------------------------------------------------------- stage -- */

.wd-video__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 20px;
    overflow: hidden;
    background: #191322;
    isolation: isolate;
    container-type: inline-size;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.wd-video__el {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: #191322;
}

/* --------------------------------------------------------------- poster -- */

.wd-video__poster {
    position: absolute;
    inset: 0;
    z-index: 2;
    /* clicks go through to the video: native controls must stay usable */
    pointer-events: none;
    background-image: url("data:image/webp;base64,UklGRhwBAABXRUJQVlA4IBABAAAQBwCdASoYACsAPu1mr1EppSQiqrgKATAdiWIAnS//BaGwtxDXWABZTm4HJAlZghpVNyNpB2fx/FwuPZ7Wf0fyoAD+3q/1z4ARruBrErTRdcKlZ2ILvLN0Cpdzs8/GmEyA8Qwjzf+dstLcdRE/Uik/YEkhVLEuZ/Q00BEKeowO43sh6zNnHKEFHREGsfm7BSCuXxLCnEvE3umAACuw/BxrEKj2pHxy0sd8N4ozLqD6XU7dNfdraCK9v0zPrqFG/D01VSvbtk6EAIliehtyPj3kPBUowyH27gRDXMzBU7GIFR8spafUlh/BRvJW2LB+hk8lsfuWuMr0u3Q0hb5v+xHxirgfY4BbZUcbiKs11gAAAA==");
    background-size: cover;
    background-position: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.wd-video__poster picture,
.wd-video__poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.wd-video:not(.is-postering) .wd-video__poster {
    opacity: 0;
    visibility: hidden;
}

/* ------------------------------------------------ tiktok style overlay -- */

/* Above the centred play button: the quality menu lives in here and must never
   be covered by it. Still below the spinner / toast / error overlay. */
.wd-video__chrome {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    color: #fff;
    transition: opacity 0.35s ease;
}

/* readability scrims, painted below the caption and the rail */
.wd-video__chrome::before,
.wd-video__chrome::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
}

.wd-video__chrome::before {
    top: 0;
    height: 26%;
    background: linear-gradient(180deg, rgba(16, 10, 24, 0.6), rgba(16, 10, 24, 0));
}

.wd-video__chrome::after {
    bottom: 0;
    height: 62%;
    background: linear-gradient(0deg, rgba(16, 10, 24, 0.86) 0%, rgba(16, 10, 24, 0.52) 32%, rgba(16, 10, 24, 0) 100%);
}

.wd-video__top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
    padding: 4.2cqw 4.2cqw 0;
}

.wd-video__brand {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    text-shadow: 0 0.08em 0.4em rgba(12, 6, 20, 0.5);
}

.wd-video__brand-name {
    font-size: 14px;
    font-size: clamp(13px, 5.4cqw, 34px);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.wd-video__brand-sub {
    font-size: 10px;
    font-size: clamp(10px, 3.6cqw, 23px);
    font-weight: 500;
    opacity: 0.95;
}

.wd-video__dots {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 6cqw;
    height: 6cqw;
    min-width: 14px;
    min-height: 14px;
    opacity: 0.9;
    filter: drop-shadow(0 1px 3px rgba(12, 6, 20, 0.5));
}

.wd-video__dots svg {
    width: 100%;
    height: 100%;
}

/* bottom block: caption + reactions + control panel */
.wd-video__bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    /* The panel stops growing where its buttons stop growing (11.2cqw = 48px
       at a 428px player). Everything below is capped at that same point: the
       round buttons freeze there anyway, and letting only the labels, the
       paddings and the gaps keep scaling made "Авто" grow out of its own box
       and run over the fullscreen button on a big screen. */
    gap: min(3.2cqw, 14px);
    padding: 0 min(3.2cqw, 14px) min(3.2cqw, 14px);
}

.wd-video__meta {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3.4cqw;
    padding: 0 0.6cqw;
}

.wd-video__caption {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    min-width: 0;
    text-shadow: 0 0.08em 0.4em rgba(12, 6, 20, 0.55);
}

.wd-video__handle {
    font-size: 12px;
    font-size: clamp(11px, 4.4cqw, 28px);
    font-weight: 700;
}

.wd-video__caption-text {
    font-size: 10px;
    font-size: clamp(10px, 3.8cqw, 24px);
    font-weight: 500;
    opacity: 0.96;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.wd-video__rail {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6.2cqw;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: auto;
}

.wd-video__action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font: inherit;
    cursor: default;
    text-shadow: 0 0.08em 0.4em rgba(12, 6, 20, 0.5);
}

.wd-video__action svg {
    width: 10.4cqw;
    height: 10.4cqw;
    min-width: 27px;
    min-height: 27px;
    filter: drop-shadow(0 1px 4px rgba(12, 6, 20, 0.45));
}

.wd-video__action-count {
    font-size: 13px;
    font-size: clamp(12px, 4.4cqw, 28px);
    font-weight: 600;
}

button.wd-video__action {
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

button.wd-video__action:hover {
    transform: scale(1.07);
}

button.wd-video__action:active {
    transform: scale(0.94);
}

.wd-video__action.is-liked svg {
    filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.9));
}

.wd-video__action.is-liked .wd-video__action-count {
    font-weight: 700;
}

.wd-video__action.is-liked {
    animation: wd-video-pop 0.35s ease;
}

/* ------------------------------------------------------- control panel -- */

.wd-video__controls {
    position: relative;
    z-index: 2;
    pointer-events: auto;
    padding: 0;
    color: #fff;
    text-shadow: 0 0.08em 0.4em rgba(12, 6, 20, 0.55);
}

/* seek bar */
.wd-video__timeline {
    position: relative;
    display: flex;
    align-items: center;
    height: 6.6cqw;
    min-height: 18px;
    margin: 0 0 1cqw;
    padding: 0;
    cursor: pointer;
    touch-action: none;
}

.wd-video__track {
    position: relative;
    width: 100%;
    height: 5px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.34);
    transition: height 0.15s ease, background-color 0.15s ease;
}

.wd-video__timeline:hover .wd-video__track,
.wd-video__timeline:focus-visible .wd-video__track {
    height: 7px;
    background: rgba(255, 255, 255, 0.44);
}

.wd-video__buffer,
.wd-video__fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: inherit;
}

.wd-video__buffer {
    width: 0;
    background: rgba(255, 255, 255, 0.48);
}

.wd-video__fill {
    width: 0;
    background: #fff;
}

.wd-video__thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(12, 6, 20, 0.5);
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease;
}

.wd-video__timeline:hover .wd-video__thumb,
.wd-video__timeline:focus-visible .wd-video__thumb,
.wd-video.is-scrubbing .wd-video__thumb,
.wd-video.is-seeking .wd-video__thumb {
    transform: translate(-50%, -50%) scale(1.15);
}

.wd-video__tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    transform: translateX(-50%);
    padding: 4px 9px;
    border-radius: 8px;
    background: var(--wd-ink);
    color: #fff;
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.wd-video.is-scrubbing .wd-video__tooltip {
    opacity: 1;
    visibility: visible;
}

/* rows of buttons */
.wd-video__bar {
    display: flex;
    align-items: center;
    gap: min(1.4cqw, 6px);
}

.wd-video__spacer {
    flex: 1 1 auto;
}

.wd-video__btn {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 11.2cqw;
    height: 11.2cqw;
    min-width: 28px;
    min-height: 28px;
    max-width: 48px;
    max-height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.wd-video__btn svg {
    width: 55%;
    height: 55%;
}

.wd-video__btn:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.wd-video__btn:active {
    transform: scale(0.93);
}

.wd-video__time {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.25em;
    padding: 0 min(0.4cqw, 2px);
    font-size: 11px;
    font-size: clamp(11px, 3.8cqw, 16px);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.94);
    white-space: nowrap;
}

.wd-video__volume {
    position: relative;
    display: flex;
    align-items: center;
}

/* The slider needs room: in the narrow section column only the mute toggle is
   shown (exactly like the reference), in fullscreen it slides out on hover. */
.wd-video__volume-slider {
    display: none;
}

@container (min-width: 420px) {
    .wd-video__volume-slider {
        display: block;
        width: 0;
        overflow: hidden;
        opacity: 0;
        transition: width 0.22s ease, opacity 0.22s ease;
    }

    .wd-video__volume:hover .wd-video__volume-slider,
    .wd-video__volume:focus-within .wd-video__volume-slider {
        width: 58px;
        opacity: 1;
    }
}

.wd-video__volume-slider input[type='range'] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 58px;
    height: 4px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 3px;
    outline: none;
    background: linear-gradient(90deg, #fff var(--wd-volume, 100%), rgba(255, 255, 255, 0.34) 0);
    cursor: pointer;
}

.wd-video__volume-slider input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    border: 0;
    box-shadow: 0 1px 5px rgba(12, 6, 20, 0.45);
    cursor: pointer;
}

.wd-video__volume-slider input[type='range']::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    border: 0;
    box-shadow: 0 1px 5px rgba(12, 6, 20, 0.45);
    cursor: pointer;
}

.wd-video__volume.is-muted + .wd-video__volume-slider {
    opacity: 0.4;
}

/* quality chooser */
.wd-video__quality {
    position: relative;
    flex: 0 0 auto;
}

.wd-video__btn--quality {
    /* a text button, so it must be free to size itself: the shared 48px cap of
       .wd-video__btn is what pushed the label out of the box */
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 0 min(2.8cqw, 12px);
    height: 11.2cqw;
    max-height: 40px;
    min-height: 28px;
    font-size: 11px;
    font-size: clamp(11px, 3.7cqw, 16px);
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 50px;
    background: none;
}

.wd-video__btn--quality[aria-expanded='true'] {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.wd-video__menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    z-index: 12;
    min-width: 164px;
    max-width: 226px;
    padding: 7px;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(28, 18, 48, 0.28);
    color: var(--wd-ink);
    text-align: left;
}

.wd-video__menu[hidden] {
    display: none;
}

.wd-video__menu-title {
    padding: 4px 9px 7px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wd-ink-soft);
}

.wd-video__menu-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 100%;
    padding: 6px 9px 6px 20px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.16s ease;
}

.wd-video__menu-item:hover {
    background: rgba(113, 71, 205, 0.09);
}

.wd-video__menu-item.is-active {
    background: rgba(113, 71, 205, 0.13);
}

.wd-video__menu-item.is-active::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 8px;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--wd-accent);
}

.wd-video__menu-label {
    font-size: 12.5px;
    font-weight: 700;
}

.wd-video__menu-hint {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--wd-ink-soft);
}

/* ------------------------------------------------------- player states -- */

/* one icon at a time inside every button */
.wd-video__icon-pause,
.wd-video__icon-volume-off,
.wd-video__icon-fs-exit {
    display: none;
}

.wd-video.is-playing .wd-video__icon-pause {
    display: block;
}

.wd-video.is-playing .wd-video__icon-play-sm {
    display: none;
}

.wd-video.is-muted .wd-video__icon-volume-on {
    display: none;
}

.wd-video.is-muted .wd-video__icon-volume-off {
    display: block;
}

.wd-video.is-fullscreen .wd-video__icon-fs-enter {
    display: none;
}

.wd-video.is-fullscreen .wd-video__icon-fs-exit {
    display: block;
}

.wd-video__big-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 25cqw;
    height: 25cqw;
    min-width: 58px;
    min-height: 58px;
    max-width: 112px;
    max-height: 112px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: var(--wd-accent);
    cursor: pointer;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 clamp(5px, 2.4cqw, 14px) rgba(255, 255, 255, 0.26), 0 4px 18px rgba(20, 12, 34, 0.3);
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s ease, background-color 0.2s ease;
}

.wd-video__big-play:hover {
    background: #fff;
    transform: translate(-50%, -50%) scale(1.06);
}

/* the play glyph keeps its own tight viewBox, so centring the svg centres the
   triangle itself — no margin hacks that push it off the middle */
.wd-video__big-play svg {
    width: 40%;
    height: 40%;
}

.wd-video__icon-replay {
    display: none;
}

.wd-video__big-play .wd-video__icon-replay {
    width: 44%;
    height: 44%;
}

/* the play glyph has a taller viewBox than the pause bars: match their
   optical weight inside the small control-bar button */
.wd-video__btn .wd-video__icon-play-sm {
    width: 42%;
    height: 42%;
}

.wd-video.is-playing .wd-video__big-play,
.wd-video.is-loading .wd-video__big-play,
.wd-video.is-error .wd-video__big-play {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(0.92);
    pointer-events: none;
}

.wd-video.is-ended .wd-video__big-play {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

.wd-video.is-ended .wd-video__icon-play {
    display: none;
}

.wd-video.is-ended .wd-video__icon-replay {
    display: block;
}

.wd-video__spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 6;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    animation: wd-video-spin 0.8s linear infinite;
    pointer-events: none;
}

.wd-video.is-loading .wd-video__spinner {
    opacity: 1;
    visibility: visible;
}

.wd-video__toast {
    position: absolute;
    top: 4cqw;
    left: 3.6cqw;
    right: 3.6cqw;
    z-index: 7;
    padding: 1.6cqw 2.4cqw;
    border-radius: 10px;
    background: rgba(16, 10, 24, 0.76);
    color: #fff;
    font-size: 10px;
    font-size: clamp(10px, 3.5cqw, 23px);
    font-weight: 600;
    text-align: center;
    text-shadow: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    pointer-events: none;
}

.wd-video__toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.wd-video__error {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: none;
    place-items: center;
    padding: 24px;
    background: rgba(16, 10, 24, 0.78);
    color: #fff;
    text-align: center;
}

.wd-video.is-error .wd-video__error {
    display: grid;
}

.wd-video__error-text {
    font-size: 12px;
    font-size: clamp(12px, 4cqw, 26px);
    font-weight: 600;
}

.wd-video__retry {
    margin-top: 10px;
    padding: 8px 18px;
    border: 0;
    border-radius: 50px;
    background: #fff;
    color: var(--wd-ink);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
}

.wd-video__retry:hover {
    background: #f1ecff;
}

/* --------------------------------------------------------- interaction -- */

.wd-video button:focus-visible,
.wd-video [role='slider']:focus-visible,
.wd-video input:focus-visible {
    outline: 2px solid var(--wd-accent);
    outline-offset: 2px;
}

.wd-video__controls button:focus-visible,
.wd-video__controls [role='slider']:focus-visible,
.wd-video__controls input:focus-visible {
    outline-color: #fff;
}

.wd-video__stage:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -3px;
}

/* -------------------------------------------------------- fullscreen -- */

/* Fullscreen is for the picture. The brand bar with the dots, the likes, the
   comments, the shares and the caption are decoration borrowed from the poster
   in the section - they step aside for good here, on every device, and the top
   scrim goes with them because there is nothing left to read against it. Only
   the control panel stays, and that one still hides itself after a few idle
   seconds (see .is-idle below). Each selector gets its own rule: a selector the
   browser does not know invalidates the whole comma list. */
.wd-video.is-fullscreen .wd-video__top,
.wd-video.is-fullscreen .wd-video__meta,
.wd-video.is-fullscreen .wd-video__chrome::before {
    display: none;
}

.wd-video:fullscreen .wd-video__top,
.wd-video:fullscreen .wd-video__meta,
.wd-video:fullscreen .wd-video__chrome::before {
    display: none;
}

/* One selector per rule, on purpose: a selector the browser does not know
   invalidates the whole comma list it sits in, and Firefox has no
   :-webkit-full-screen. Sharing a list with it silently dropped both of the
   rules below, so the stage kept its 9/16 aspect ratio at the full viewport
   width and the video was painted zoomed into the top left corner with the
   whole chrome pushed off screen.
   The layout is driven by the .is-fullscreen class the script toggles, which
   works in every browser; the pseudo-class is a second, independent path that
   also covers the first paint and the no-script case. */

.wd-video.is-fullscreen {
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    background: #0d0715;
}

.wd-video:fullscreen {
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    background: #0d0715;
}

.wd-video.is-fullscreen .wd-video__stage {
    width: min(100vw, calc(100vh * 9 / 16));
    height: min(100vh, calc(100vw * 16 / 9));
    border-radius: 0;
}

.wd-video:fullscreen .wd-video__stage {
    width: min(100vw, calc(100vh * 9 / 16));
    height: min(100vh, calc(100vw * 16 / 9));
    border-radius: 0;
}

/* Fullscreen only, and only while the video really runs (the script decides):
   the brand, the rail, the caption and the panel fade away after a few seconds
   without a single interaction, so the picture is all that is left. A tap, the
   mouse, a key or a pause brings everything straight back.
   The fade is the chrome's own opacity, which is why every child has to lose
   its pointer events explicitly — the chrome hands them back to each
   interactive element, and an invisible button must not stay clickable. */
.wd-video.is-idle {
    cursor: none;
}

.wd-video.is-idle .wd-video__chrome,
.wd-video.is-idle .wd-video__chrome * {
    pointer-events: none;
}

.wd-video.is-idle .wd-video__chrome {
    opacity: 0;
}

/* The <video> can also be fullscreened on its own — native controls, the
   context menu, or the old WebKit fallback. Letterbox it instead of cropping
   the portrait frame into a landscape screen. */
.wd-video__el:fullscreen {
    object-fit: contain;
    background: #0d0715;
}

/* -------------------------------------------------------------- motion -- */

@keyframes wd-video-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes wd-video-pop {
    0% {
        transform: scale(1);
    }
    45% {
        transform: scale(1.22);
    }
    100% {
        transform: scale(1);
    }
}

@media (hover: none) {
    .wd-video__volume-slider {
        display: none;
    }

    .wd-video__timeline {
        height: 6cqw;
    }

    /* no hover on touch screens: keep the grip visible */
    .wd-video__thumb {
        transform: translate(-50%, -50%) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wd-video *,
    .wd-video *::before,
    .wd-video *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}