/*
 * Seasonal ribbon on the video page: a slim strip at the top of the info card
 * (.tdtv-side-details). Markup + switch: inc/tdtv-seasonal-video.php; the season
 * itself comes from inc/tdtv-seasonal.php (same as the homepage hero).
 *
 * Purely decorative: no pointer events, fixed height (no layout shift), animations
 * touch only transform/opacity so they stay on the compositor.
 */

.tdtv-vd {
    --vd-h: 40px;
    position: relative;
    height: var(--vd-h);
    margin: 0 0 14px;
    pointer-events: none;
    user-select: none;
    contain: layout paint;
    isolation: isolate;
}

/* No box: the scene stands on a hairline that fades out at both ends, like the
   theme's own dividers, with a soft seasonal glow behind it. */
.tdtv-vd::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--vd-line, rgba(255, 255, 255, .14)) 18%, var(--vd-line, rgba(255, 255, 255, .14)) 82%, transparent);
}

.tdtv-vd svg {
    display: block;
    overflow: visible;
}

.tdtv-vd > * {
    position: absolute;
}

/* =================================================================== */
/* Halloween                                                           */
/* =================================================================== */

.tdtv-vd--halloween {
    --vd-line: rgba(255, 150, 70, .28);
    background: radial-gradient(38% 120% at 10% 100%, rgba(255, 128, 40, .16), transparent 70%);
}

.tdtv-vd-ground {
    left: 4px;
    bottom: 1px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.tdtv-vd-pumpkin {
    position: relative;
}

.tdtv-vd-pumpkin__glow {
    position: absolute;
    left: 50%;
    top: 55%;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 170, 70, .45), transparent 65%);
    animation: tdtv-vd-glow 2.8s ease-in-out infinite;
}

.tdtv-vd-pumpkin svg {
    position: relative;
}

.tdtv-vd-candle {
    position: relative;
    padding-top: 12px;
}

.tdtv-vd-candle__flame {
    position: absolute;
    top: 2px;
    left: 1px;
    transform-origin: 50% 100%;
    animation: tdtv-vd-flicker 1.4s ease-in-out infinite alternate;
}

.tdtv-vd-fly {
    inset: 0;
    animation: tdtv-vd-cross 13s linear infinite;
}

.tdtv-vd-fly--2 {
    animation-duration: 17s;
    animation-delay: -8s;
}

.tdtv-vd-bat {
    position: absolute;
    left: -24px;
    top: 9px;
    display: flex;
    align-items: flex-start;
    color: #c9b8e8;
    animation: tdtv-vd-bob 2.2s ease-in-out infinite;
}

.tdtv-vd-fly--2 .tdtv-vd-bat {
    top: 18px;
    color: #a99bc8;
    transform: scale(.8);
    animation-duration: 2.8s;
}

.tdtv-vd-bat__wing {
    animation: tdtv-vd-flap .32s ease-in-out infinite alternate;
}

.tdtv-vd-bat__wing--l {
    transform-origin: 100% 30%;
}

.tdtv-vd-bat__wing--r {
    transform-origin: 0 30%;
}

.tdtv-vd-bat__wing--r svg {
    transform: scaleX(-1);
}

.tdtv-vd-web {
    top: -2px;
    right: 0;
    color: rgba(255, 255, 255, .16);
}

.tdtv-vd-spider {
    top: 0;
    right: 30px;
    width: 16px;
    color: #f0a07a;
    animation: tdtv-vd-dangle 4.2s ease-in-out infinite;
}

.tdtv-vd-spider__thread {
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 1px;
    height: 40px;
    margin-left: -.5px;
    background: rgba(255, 255, 255, .35);
}

.tdtv-vd-spider svg {
    margin-top: -1px;
}

/* =================================================================== */
/* Christmas                                                           */
/* =================================================================== */

.tdtv-vd--christmas {
    --vd-line: rgba(200, 225, 255, .22);
    background: radial-gradient(50% 120% at 50% 100%, rgba(140, 190, 255, .08), transparent 70%);
}

/* Little snowdrift along the bottom edge. */
.tdtv-vd--christmas::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 7px;
    background:
        radial-gradient(circle at 50% 100%, rgba(235, 245, 255, .16) 6px, transparent 6.5px) 0 0 / 22px 7px repeat-x,
        radial-gradient(circle at 50% 100%, rgba(235, 245, 255, .1) 4px, transparent 4.5px) 11px 2px / 22px 5px repeat-x;
}

.tdtv-vd-wire {
    top: 0;
    left: 0;
    width: 100%;
    height: 14px;
}

.tdtv-vd-bulbs {
    inset: 0;
}

.tdtv-vd-bulb {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 6px;
    height: 9px;
    margin-left: -3px;
    border-radius: 40% 40% 50% 50% / 30% 30% 70% 70%;
    background: var(--c);
    box-shadow: 0 0 8px 1px var(--c);
    animation: tdtv-vd-twinkle 1.8s ease-in-out infinite alternate;
}

.tdtv-vd-bulb::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 1.5px;
    width: 3px;
    height: 3px;
    border-radius: 1px;
    background: #4a5a4e;
}

.tdtv-vd-bulb--1 { animation-delay: -.6s; animation-duration: 2.2s; }
.tdtv-vd-bulb--2 { animation-delay: -1.2s; animation-duration: 1.5s; }

.tdtv-vd-flake {
    top: 0;
    left: var(--x);
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background: #fff;
    opacity: 0;
    animation: tdtv-vd-fall var(--d) linear var(--dl) infinite;
}

.tdtv-vd-flake--1  { --x: 6%;  --s: 3px; --d: 4.6s; --dl: -1s; }
.tdtv-vd-flake--2  { --x: 15%; --s: 2px; --d: 5.4s; --dl: -3s; }
.tdtv-vd-flake--3  { --x: 24%; --s: 3px; --d: 4.2s; --dl: -2s; }
.tdtv-vd-flake--4  { --x: 35%; --s: 2px; --d: 6s;   --dl: -4.5s; }
.tdtv-vd-flake--5  { --x: 46%; --s: 3px; --d: 5s;   --dl: -.5s; }
.tdtv-vd-flake--6  { --x: 57%; --s: 2px; --d: 4.4s; --dl: -3.6s; }
.tdtv-vd-flake--7  { --x: 66%; --s: 3px; --d: 5.8s; --dl: -2.4s; }
.tdtv-vd-flake--8  { --x: 76%; --s: 2px; --d: 4.8s; --dl: -1.6s; }
.tdtv-vd-flake--9  { --x: 85%; --s: 3px; --d: 5.2s; --dl: -4s; }
.tdtv-vd-flake--10 { --x: 93%; --s: 2px; --d: 4s;   --dl: -.2s; }

.tdtv-vd-star {
    right: 4px;
    bottom: 7px;
    animation: tdtv-vd-starpulse 3s ease-in-out infinite;
}

/* =================================================================== */
/* Studio (normal months)                                              */
/* =================================================================== */

.tdtv-vd--studio {
    --vd-line: rgba(255, 255, 255, .12);
    background:
        radial-gradient(30% 110% at 6% 60%, rgba(255, 59, 92, .1), transparent 70%),
        radial-gradient(30% 110% at 96% 60%, rgba(38, 212, 255, .09), transparent 70%);
}

.tdtv-vd-glasses {
    left: 2px;
    top: 50%;
    margin-top: -9px;
    transform-origin: 50% 60%;
    animation: tdtv-vd-tilt 5s ease-in-out infinite;
}

.tdtv-vd-beam {
    left: 54px;
    right: 40px;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    border-radius: 2px;
    background: rgba(255, 59, 92, .45);
    box-shadow: 0 3px 0 rgba(38, 212, 255, .4); /* the cyan half of the anaglyph */
}

.tdtv-vd-beam__shine {
    position: absolute;
    inset: -1px 0 -4px;
    overflow: hidden;
    opacity: .7;
}

.tdtv-vd-beam__shine::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 14%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
    transform: translateX(-100%);
    animation: tdtv-vd-shine 4.5s ease-in-out infinite;
}

.tdtv-vd-spark {
    top: 50%;
    color: #ffdd95;
    opacity: 0;
    animation: tdtv-vd-spark 3.2s ease-in-out infinite;
}

.tdtv-vd-spark--1 { left: 22%; margin-top: -15px; }
.tdtv-vd-spark--2 { left: 41%; margin-top: 4px;  color: #ff8fb0; animation-delay: -.8s; }
.tdtv-vd-spark--3 { left: 60%; margin-top: -14px; color: #8fe6ff; animation-delay: -1.6s; }
.tdtv-vd-spark--4 { left: 77%; margin-top: 5px;  animation-delay: -2.4s; }

.tdtv-vd-cubewrap {
    right: 6px;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    perspective: 160px;
}

.tdtv-vd-cube {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    animation: tdtv-vd-spin 9s linear infinite;
}

.tdtv-vd-cube__face {
    position: absolute;
    inset: 0;
    border: 1.5px solid #f0a07a;
    border-radius: 2px;
    background: rgba(240, 160, 122, .1);
}

.tdtv-vd-cube__face--front  { transform: translateZ(9px); }
.tdtv-vd-cube__face--back   { transform: rotateY(180deg) translateZ(9px); }
.tdtv-vd-cube__face--left   { transform: rotateY(-90deg) translateZ(9px); }
.tdtv-vd-cube__face--right  { transform: rotateY(90deg) translateZ(9px); }
.tdtv-vd-cube__face--top    { transform: rotateX(90deg) translateZ(9px); background-color: rgba(255, 111, 156, .18); }
.tdtv-vd-cube__face--bottom { transform: rotateX(-90deg) translateZ(9px); }

/* =================================================================== */
/* Keyframes                                                           */
/* =================================================================== */

@keyframes tdtv-vd-glow {
    0%, 100% { opacity: .55; transform: scale(.92); }
    50%      { opacity: 1;   transform: scale(1.06); }
}

@keyframes tdtv-vd-flicker {
    0%   { transform: scale(1, 1) rotate(-3deg); opacity: .9; }
    50%  { transform: scale(.92, 1.08) rotate(2deg); opacity: 1; }
    100% { transform: scale(1.04, .94) rotate(-1deg); opacity: .85; }
}

/* The fly layer spans the ribbon, so 100% of its own width = the ribbon's width. */
@keyframes tdtv-vd-cross {
    0%   { transform: translateX(0);    opacity: 0; }
    6%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { transform: translateX(calc(100% + 48px)); opacity: 0; }
}

@keyframes tdtv-vd-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

@keyframes tdtv-vd-flap {
    from { transform: rotate(-26deg) scaleY(.75); }
    to   { transform: rotate(14deg) scaleY(1); }
}

.tdtv-vd-bat__wing--r {
    animation-name: tdtv-vd-flap-r;
}

@keyframes tdtv-vd-flap-r {
    from { transform: rotate(26deg) scaleY(.75); }
    to   { transform: rotate(-14deg) scaleY(1); }
}

@keyframes tdtv-vd-dangle {
    0%, 100% { transform: translateY(6px); }
    50%      { transform: translateY(18px); }
}

@keyframes tdtv-vd-twinkle {
    from { opacity: .4; }
    to   { opacity: 1; }
}

@keyframes tdtv-vd-fall {
    0%   { transform: translate(0, -4px); opacity: 0; }
    15%  { opacity: .75; }
    85%  { opacity: .6; }
    100% { transform: translate(6px, 40px); opacity: 0; }
}

@keyframes tdtv-vd-starpulse {
    0%, 100% { transform: scale(.9) rotate(0deg); opacity: .8; }
    50%      { transform: scale(1.15) rotate(18deg); opacity: 1; }
}

@keyframes tdtv-vd-tilt {
    0%, 100% { transform: rotate(-4deg); }
    50%      { transform: rotate(4deg) translateY(-1px); }
}

@keyframes tdtv-vd-shine {
    0%   { transform: translateX(-100%); }
    70%, 100% { transform: translateX(460%); }
}

@keyframes tdtv-vd-spark {
    0%, 100% { transform: scale(.3) rotate(0deg); opacity: 0; }
    40%      { transform: scale(1) rotate(45deg); opacity: 1; }
    70%      { transform: scale(.6) rotate(90deg); opacity: .4; }
}

@keyframes tdtv-vd-spin {
    from { transform: rotateX(-22deg) rotateY(0deg); }
    to   { transform: rotateX(-22deg) rotateY(360deg); }
}

/* =================================================================== */
/* Mobile + accessibility                                              */
/* =================================================================== */

@media (max-width: 767px) {
    .tdtv-vd {
        --vd-h: 36px;
        margin-bottom: 12px;
    }

    .tdtv-vd-ground {
        left: 2px;
        transform: scale(.88);
        transform-origin: 0 100%;
    }

    .tdtv-vd-beam {
        left: 50px;
        right: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tdtv-vd *,
    .tdtv-vd *::before {
        animation: none !important;
    }

    .tdtv-vd-fly--1 { transform: translateX(45%); }
    .tdtv-vd-fly--2 { transform: translateX(68%); }
    .tdtv-vd-spider { transform: translateY(10px); }
    .tdtv-vd-spark { opacity: .8; }
    .tdtv-vd-flake { opacity: .5; transform: translateY(18px); }
}