/*
 * Seasonal Halloween decor for the homepage hero (.tdtv-home-intro).
 * Markup: inc/tdtv-halloween.php. Month switch: inc/tdtv-seasonal.php.
 * Lives in the right-hand column above the CTA, so it never covers the copy or the button.
 * Animations touch only transform/opacity on HTML boxes (compositor-friendly).
 */

.tdtv-hw {
    --hw-pad: clamp(24px, 4vw, 52px);
    --hw-accent: var(--tdtv-accent, #f0a07a);
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    contain: layout paint;
}

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

/* ---------- Spiders ---------- */

.tdtv-hw-spider {
    position: absolute;
    top: 0;
    width: 36px;
    height: var(--len);
    color: var(--hw-accent);
    transform-origin: 50% 0;
    animation: tdtv-hw-sway 5.5s ease-in-out infinite alternate;
}

.tdtv-hw-spider__drop {
    position: absolute;
    top: var(--len);
    left: 0;
    --hide: calc(-1 * var(--len) - 44px);
    animation: tdtv-hw-bob 3.6s ease-in-out infinite;
}

.tdtv-hw-spider__thread {
    position: absolute;
    left: 50%;
    bottom: calc(100% - 8px);
    width: 1px;
    height: calc(var(--len) + 160px);
    margin-left: -.5px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .06), rgba(255, 255, 255, .3));
}

.tdtv-hw-spider--1 {
    --len: 58px;
    right: calc(var(--hw-pad) + 26px);
}

.tdtv-hw-spider--2 {
    --len: 92px;
    right: calc(var(--hw-pad) + 168px);
    animation-duration: 6.4s;
    animation-delay: -2s;
}

.tdtv-hw-spider--2 .tdtv-hw-spider__drop {
    animation: tdtv-hw-descend 16s cubic-bezier(.45, .05, .35, 1) infinite;
}

.tdtv-hw-spider--2 svg {
    transform: scale(.85);
}

.tdtv-hw-spider--3 {
    display: none;
    --len: 34px;
    right: calc(var(--hw-pad) + 300px);
    animation-duration: 4.8s;
    animation-delay: -1s;
}

.tdtv-hw-spider--3 .tdtv-hw-spider__drop {
    animation-duration: 4.4s;
    animation-delay: -1.5s;
}

.tdtv-hw-spider--3 svg {
    transform: scale(.7);
}

@keyframes tdtv-hw-sway {
    from { transform: rotate(-3deg); }
    to   { transform: rotate(3deg); }
}

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

/* Climbs out of view, then drops back down on its thread and bounces. */
@keyframes tdtv-hw-descend {
    0%, 8%    { transform: translateY(var(--hide)); }
    24%       { transform: translateY(10px); }
    30%       { transform: translateY(-4px); }
    36%       { transform: translateY(3px); }
    42%       { transform: translateY(0); }
    56%       { transform: translateY(6px); }
    70%       { transform: translateY(0); }
    80%       { transform: translateY(2px); }
    96%, 100% { transform: translateY(var(--hide)); }
}

.tdtv-hw-spider svg {
    width: 36px;
    height: 31px;
}

/* ---------- Bats ---------- */

.tdtv-hw-bat {
    position: absolute;
    top: 30px;
    right: calc(var(--hw-pad) + 96px);
    color: #9b7a80;
    animation: tdtv-hw-fly-1 13s ease-in-out infinite;
}

.tdtv-hw-bat--2 {
    top: 64px;
    right: calc(var(--hw-pad) + 52px);
    color: #7c6670;
    animation-name: tdtv-hw-fly-2;
    animation-duration: 17s;
    animation-delay: -6s;
}

.tdtv-hw-bat__inner {
    display: flex;
    align-items: flex-start;
}

.tdtv-hw-bat--2 .tdtv-hw-bat__inner {
    transform: scale(.72);
}

.tdtv-hw-bat__body {
    position: relative;
    top: -1px;
    margin: 0 -1px;
}

.tdtv-hw-bat__wing {
    display: block;
    width: 16px;
    height: 12px;
    animation: tdtv-hw-flap-l .34s ease-in-out infinite alternate;
}

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

.tdtv-hw-bat__wing--r {
    transform-origin: 0 30%;
    animation-name: tdtv-hw-flap-r;
}

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

.tdtv-hw-bat--2 .tdtv-hw-bat__wing {
    animation-duration: .28s;
}

@keyframes tdtv-hw-flap-l {
    from { transform: rotate(22deg); }
    to   { transform: rotate(-30deg); }
}

@keyframes tdtv-hw-flap-r {
    from { transform: rotate(-22deg); }
    to   { transform: rotate(30deg); }
}

@keyframes tdtv-hw-fly-1 {
    0%, 100% { transform: translate(0, 0); }
    25%      { transform: translate(-70px, 16px); }
    50%      { transform: translate(-128px, -6px); }
    75%      { transform: translate(-48px, -14px); }
}

@keyframes tdtv-hw-fly-2 {
    0%, 100% { transform: translate(0, 0); }
    30%      { transform: translate(-90px, -18px); }
    60%      { transform: translate(-30px, 12px); }
    80%      { transform: translate(14px, -8px); }
}

/* ---------- Ground: pumpkins + candles sitting on the CTA ---------- */

.tdtv-hw-ground {
    position: absolute;
    right: calc(var(--hw-pad) + 10px);
    bottom: calc(var(--hw-pad) + 56px);
    width: 226px;
    height: 70px;
}

.tdtv-hw-ground::before {
    content: '';
    position: absolute;
    left: -20px;
    right: -20px;
    bottom: -14px;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 150, 80, .16), rgba(255, 150, 80, 0));
}

.tdtv-hw-ground > * {
    position: absolute;
    bottom: 0;
}

.tdtv-hw-candle--tall  { left: 4px; }
.tdtv-hw-pumpkin--big  { left: 30px; }
.tdtv-hw-candle--short { left: 116px; }
.tdtv-hw-pumpkin--small { left: 140px; }
.tdtv-hw-candle--mid   { left: 204px; }

.tdtv-hw-pumpkin--small svg {
    width: 56px;
    height: 48px;
}

.tdtv-hw-pumpkin__glow {
    position: absolute;
    inset: -22px -30px -10px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 140, 60, .3), rgba(255, 140, 60, 0));
    animation: tdtv-hw-glow 2.6s ease-in-out infinite alternate;
}

.tdtv-hw-pumpkin--small .tdtv-hw-pumpkin__glow {
    animation-duration: 2.1s;
    animation-delay: -.8s;
}

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

.tdtv-hw-candle {
    width: 18px;
}

.tdtv-hw-candle__body {
    position: relative;
}

.tdtv-hw-flame {
    position: absolute;
    left: 3px;
    bottom: calc(100% - 4px);
    width: 12px;
    height: 20px;
    transform-origin: 50% 90%;
    animation: tdtv-hw-flicker 1.3s ease-in-out infinite;
}

.tdtv-hw-halo {
    position: absolute;
    left: -19px;
    bottom: calc(100% - 22px);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 190, 110, .32), rgba(255, 190, 110, 0));
    animation: tdtv-hw-glow 1.7s ease-in-out infinite alternate;
}

.tdtv-hw-candle--short .tdtv-hw-flame { animation-duration: 1.1s; animation-delay: -.4s; }
.tdtv-hw-candle--short .tdtv-hw-halo  { animation-duration: 1.4s; animation-delay: -.6s; }
.tdtv-hw-candle--mid .tdtv-hw-flame   { animation-duration: 1.55s; animation-delay: -.9s; }
.tdtv-hw-candle--mid .tdtv-hw-halo    { animation-duration: 2s; animation-delay: -.3s; }

@keyframes tdtv-hw-flicker {
    0%, 100% { transform: rotate(-2deg) scale(1, 1); }
    25%      { transform: rotate(2.5deg) scale(.94, 1.08); }
    50%      { transform: rotate(-1deg) scale(1.04, .94); }
    75%      { transform: rotate(3deg) scale(.96, 1.05); }
}

@keyframes tdtv-hw-glow {
    0%   { opacity: .65; }
    40%  { opacity: 1; }
    55%  { opacity: .8; }
    100% { opacity: .95; }
}

/* ---------- Responsive ---------- */

@media (min-width: 1440px) {
    .tdtv-hw-spider--3 {
        display: block;
    }
}

/*
 * Phones: the hero stacks (copy, then a full-width CTA). The modifier class makes
 * room: a taller top strip for spiders/bats, and a gap above the CTA where the
 * pumpkins and candles sit.
 */
@media (max-width: 768px) {
    .tdtv-home-intro.tdtv-home-intro--decor {
        padding-top: 78px;
        gap: 92px;
    }

    .tdtv-hw {
        --hw-pad: 20px;
    }

    .tdtv-hw-spider svg {
        width: 30px;
        height: 26px;
    }

    .tdtv-hw-spider--1 {
        --len: 16px;
        right: 18px;
    }

    .tdtv-hw-spider--2 {
        --len: 38px;
        right: 88px;
    }

    .tdtv-hw-spider--3 {
        display: block;
        --len: 6px;
        right: 146px;
    }

    .tdtv-hw-bat {
        top: 16px;
        right: 118px;
    }

    .tdtv-hw-bat--2 {
        top: 42px;
        right: 40px;
    }

    .tdtv-hw-ground {
        right: auto;
        left: 50%;
        bottom: 80px;
        margin-left: -113px;
        transform: scale(.9);
        transform-origin: 50% 100%;
    }
}

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