/* ══════════════════════════════════════════════════════════════════════
   Holiday pre-order badge: the dancing turkey that links to /holiday-orders/.
   Used in the home hero and centred in the footer on every page (desktop).
   Seasonal. Switch everything off with HOLIDAY_BADGE_ON in
   includes/holiday_badge.php; this stylesheet then stops loading too.
   ══════════════════════════════════════════════════════════════════════ */
/* Sits right of the hero intro copy. Label on top, turkey strutting
   underneath; hover pops him into a cloud of feathers.
   Seasonal — delete this block with the markup when turkeys are done. */
.turkey-cta {
    display: flex; flex-direction: column; align-items: center; gap: .15rem;
    text-decoration: none; flex-shrink: 0; padding: .25rem .5rem 0;
    border-radius: var(--r-lg); transition: transform .3s var(--ease-spring);
}
.turkey-cta:hover { transform: translateY(-2px); }
/* Solid dark plate behind the words: the hero photo is busy brisket bark,
   so text-shadow alone was not enough to keep this legible. */
.tc-label {
    display: flex; flex-direction: column; align-items: center; line-height: 1.05;
    font-family: var(--font-display); font-weight: 900; font-size: 1.55rem;
    color: #F2C230; text-align: center; white-space: nowrap;
    background: rgba(13,11,8,.82);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 1px solid rgba(242,194,48,.45);
    border-radius: 14px; padding: .55rem 1.1rem .6rem;
    box-shadow: 0 8px 28px rgba(0,0,0,.55);
    transition: border-color .25s var(--ease-out), transform .25s var(--ease-spring);
}
.tc-kicker {
    font-family: var(--font-body); font-weight: 700; font-size: 12px;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--cream); margin-bottom: .3rem;
}
.turkey-cta:hover .tc-label { border-color: #F2C230; transform: scale(1.03); }

/* The turkey dances in place (the motion is in turkey-dance.webp itself). */
.tc-stage { position: relative; width: 132px; height: 115px; display: block; }
.tc-turkey { display: block; width: 111px; height: 115px; }

/* two layers: .tc-walk travels and turns, .tc-bob does the step bounce */
.tc-walk { position: absolute; top: 0; left: 50%; margin-left: -55px; }
.tc-bob  { display: block; }


/* ── the pop ── */
.tc-f {
    position: absolute; top: 50%; left: 50%; width: 19px; height: 48px;
    margin: -24px 0 0 -9px; opacity: 0; pointer-events: none;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.55));
}
.tc-f svg { width: 100%; height: 100%; display: block; }

.turkey-cta.is-popping .tc-walk { animation-play-state: paused; }
.turkey-cta.is-popping .tc-bob  { animation: tc-poof .42s ease-in forwards; }
.turkey-cta.is-popping .tc-f    { animation: tc-burst .62s ease-out var(--t,0ms) forwards; }

@keyframes tc-poof {
    0%   { transform: scale(1)   rotate(0);     opacity: 1; }
    35%  { transform: scale(1.14) rotate(-6deg); opacity: 1; }
    100% { transform: scale(.35) rotate(14deg); opacity: 0; }
}
@keyframes tc-burst {
    0%   { opacity: 0; transform: rotate(var(--a)) translateY(0) rotate(0) scale(.4); }
    12%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) rotate(var(--r)) scale(1); }
}

@media (max-width: 900px) {
    .tc-stage { width: 110px; height: 96px; }
    .tc-turkey { width: 93px; height: 96px; }
    .tc-walk { margin-left: -46px; }
    .tc-label { font-size: 1.25rem; padding: .45rem .9rem .5rem; }
    .tc-kicker { font-size: 11px; }
}

/* Motion-sensitive visitors get a still turkey and no burst. */
@media (prefers-reduced-motion: reduce) {
    .tc-walk, .tc-bob { animation: none !important; }
    .turkey-cta.is-popping .tc-bob { animation: none !important; opacity: 1 !important; transform: none !important; }
    .turkey-cta.is-popping .tc-f   { animation: none !important; opacity: 0 !important; }
}


.tc-kicker, .tc-nb { white-space: nowrap; }

/* "Click here" call-out under the turkey */
.tc-click {
    margin-top: .4rem; padding: .32rem .85rem;
    font-family: var(--font-body); font-weight: 700; font-size: 11px;
    letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
    color: #F2C230; background: rgba(13,11,8,.78);
    border: 1px solid rgba(242,194,48,.55); border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0,0,0,.45);
    transition: background .2s ease, color .2s ease;
}
.turkey-cta:hover .tc-click,
.turkey-cta:focus-visible .tc-click { background: #F2C230; color: #1a1512; }
.turkey-cta.is-popping .tc-click { opacity: 0; transition: opacity .2s ease; }

/* Footer copy: a little smaller, desktop only */
.footer-badge { display: flex; justify-content: center; margin-top: 1.25rem; }
.turkey-cta--footer .tc-label  { font-size: 1.2rem; padding: .45rem .95rem .5rem; }
.turkey-cta--footer .tc-kicker { font-size: 10px; }
.turkey-cta--footer .tc-stage  { width: 106px; height: 92px; }
.turkey-cta--footer .tc-turkey { width: 89px; height: 92px; }
.turkey-cta--footer .tc-walk   { margin-left: -44px; }
@media (max-width: 768px) { .footer-badge { display: none; } }
