/* Coon Claw Club — Christmas (added Nov 2026)
   Two parts:
   1. Home-page promos that point visitors to the Christmas page
      (red bar at the top, "Christmas" menu link, holiday band under the ticker).
   2. The Christmas page itself (christmas.html).
   AFTER THE HOLIDAYS: delete the marked blocks in index.html. This file can stay. */

:root {
  --x-red: #c0392b;
  --x-red-hi: #d04434;
  --x-red-deep: #8f1f17;
  --x-pine: #173627;
  --x-pine-deep: #0f2219;
}

/* ===================== 1. HOME-PAGE PROMOS ===================== */

/* Red announcement bar */
.xmas-bar {
  display: block; background: var(--x-red); color: #fff; text-decoration: none;
  font-size: .92rem; line-height: 1.35;
}
.xmas-bar .wrap {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  padding-block: 10px; text-align: center;
}
.xmas-bar strong { font-weight: 700; }
.xmas-bar-go {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: #fff; color: var(--x-red-deep); font-weight: 700; font-size: .82rem;
  padding: 5px 12px; border-radius: 999px; transition: transform .15s ease;
}
.xmas-bar:hover .xmas-bar-go { transform: translateX(3px); }
.xmas-bar-flake { display: inline-block; animation: x-spin 6s linear infinite; }
@keyframes x-spin { to { transform: rotate(360deg); } }

/* Holiday band under the ticker */
.xmas-promo {
  position: relative; overflow: hidden; color: #ecebe2;
  background:
    radial-gradient(120% 90% at 80% 0%, #2f5a41 0%, transparent 60%),
    radial-gradient(80% 80% at 0% 100%, #3a1512 0%, transparent 65%),
    linear-gradient(180deg, var(--x-pine) 0%, var(--x-pine-deep) 100%);
}
.xmas-promo-snow, .xmas-promo-snow::after {
  position: absolute; inset: -100% 0 0; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 20px 30px, #fff 50%, transparent 52%),
    radial-gradient(3px 3px at 90px 120px, #fff 50%, transparent 52%),
    radial-gradient(2px 2px at 160px 60px, rgba(255,255,255,.8) 50%, transparent 52%),
    radial-gradient(3px 3px at 220px 170px, #fff 50%, transparent 52%),
    radial-gradient(2px 2px at 280px 20px, rgba(255,255,255,.7) 50%, transparent 52%),
    radial-gradient(2.5px 2.5px at 50px 200px, #fff 50%, transparent 52%);
  background-size: 300px 240px;
  animation: x-fall 14s linear infinite;
  opacity: .8;
}
.xmas-promo-snow::after {
  content: ""; inset: 0; background-size: 220px 180px; animation-duration: 9s; opacity: .55;
  background-position: 60px 40px;
}
@keyframes x-fall { to { transform: translateY(50%); } }

.xmas-promo-inner {
  position: relative; display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: center;
  padding-block: 64px;
}
.xmas-promo .eyebrow { color: var(--moss-brass); }
.xmas-promo h2 span { color: #fff; }
.xmas-promo .section-sub { color: color-mix(in srgb, #ecebe2 78%, transparent); max-width: 46ch; }
.btn-xmas {
  margin-top: 26px; background: var(--x-red); color: #fff;
  box-shadow: 0 12px 30px -10px rgba(192,57,43,.8);
}
.btn-xmas:hover { background: var(--x-red-hi); }
.xmas-promo-paw {
  position: relative; justify-self: center; width: min(190px, 60%);
  animation: x-bob 3.2s ease-in-out infinite;
  filter: drop-shadow(0 20px 24px rgba(0,0,0,.45));
}
.xmas-promo-paw img { width: 100%; height: auto; }
.xmas-promo-bubble {
  position: absolute; left: 62%; top: -8px; white-space: nowrap; background: #fff; color: var(--x-red-deep);
  font: 800 1rem/1 var(--f-display); padding: 9px 13px; border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,.3);
}
.xmas-promo-bubble::after {
  content: ""; position: absolute; left: 10px; bottom: -8px;
  border: 9px solid transparent; border-top-color: #fff; border-bottom: 0;
}
@keyframes x-bob {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-14px) rotate(6deg); }
}

@media (max-width: 720px) {
  .xmas-bar-more { display: none; }
  .xmas-promo-inner { grid-template-columns: 1fr; gap: 8px; padding-block: 48px; }
  .xmas-promo-paw { order: -1; justify-self: start; width: 120px; margin-left: 8px; }
}

/* ===================== 2. THE CHRISTMAS PAGE ===================== */

body.xmas-page { background: var(--x-pine-deep); color: #ecebe2; }

.x-stage {
  position: relative; min-height: calc(100svh - 64px); overflow: hidden; isolation: isolate;
  background:
    radial-gradient(120% 70% at 75% 0%, #2f5a41 0%, transparent 62%),
    radial-gradient(90% 60% at 10% 100%, #3a1512 0%, transparent 65%),
    linear-gradient(180deg, var(--x-pine) 0%, #122a1f 60%, var(--x-pine-deep) 100%);
}
#snow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.x-drift { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.x-paw {
  position: absolute; left: 0; top: 0; width: clamp(110px, 15vw, 170px);
  pointer-events: auto; cursor: pointer; border: 0; padding: 0; background: none;
  will-change: transform; filter: drop-shadow(0 18px 22px rgba(0,0,0,.45));
}
.x-paw img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.x-bubble {
  position: absolute; left: 62%; top: -12px; width: max-content; max-width: 210px; line-height: 1.15;
  background: #fff; color: var(--x-red-deep); font: 800 1.15rem/1.15 var(--f-display);
  padding: 10px 14px; border-radius: 18px; box-shadow: 0 8px 20px rgba(0,0,0,.3);
  transform: scale(0); transform-origin: 0 100%; transition: transform .18s cubic-bezier(.3,1.6,.6,1);
}
.x-bubble::after {
  content: ""; position: absolute; left: 10px; bottom: -8px;
  border: 9px solid transparent; border-top-color: #fff; border-bottom: 0;
}
.x-bubble.on { transform: scale(1); }
.x-bubble.flip { left: auto; right: 62%; transform-origin: 100% 100%; }
.x-bubble.flip::after { left: auto; right: 10px; }

.x-inner { position: relative; z-index: 2; padding-block: clamp(48px, 8vw, 104px) 64px; }
.x-stage .eyebrow { color: var(--moss-brass); }
.x-stage h1 { max-width: 11ch; color: #ecebe2; }
.x-stage h1 em { font-style: normal; color: #fff; text-shadow: 0 0 30px rgba(255,255,255,.25); }
.x-sub { margin-top: 22px; max-width: 40ch; font-size: 1.15rem; color: #b9bcb2; }

.x-controls { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; align-items: center; }
.btn-red { background: var(--x-red); color: #fff; box-shadow: 0 10px 30px -8px rgba(192,57,43,.7); }
.btn-red:hover { background: var(--x-red-hi); }
.btn-red[aria-pressed="true"] { background: var(--moss-brass); color: #17140c; box-shadow: none; }
.x-stage .btn-ghost:disabled { opacity: .45; cursor: not-allowed; }
.x-eq { display: inline-flex; gap: 3px; align-items: flex-end; height: 14px; }
.x-eq i { width: 3px; background: currentColor; height: 4px; border-radius: 1px; }
[aria-pressed="true"] .x-eq i { animation: x-eq .9s ease-in-out infinite; }
[aria-pressed="true"] .x-eq i:nth-child(2) { animation-delay: .2s; }
[aria-pressed="true"] .x-eq i:nth-child(3) { animation-delay: .4s; }
@keyframes x-eq { 50% { height: 14px; } }
.x-vol { display: flex; align-items: center; gap: 10px; font: 500 .74rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: #b9bcb2; }
.x-vol input { width: 120px; accent-color: var(--moss-brass); }

.x-card {
  margin-top: 52px; display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; max-width: 640px;
  background: rgba(10,14,12,.55); border: 1px solid rgba(207,171,102,.3); border-radius: 10px; padding: 18px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.x-thumb { width: 110px; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; background: #16201b; display: grid; place-items: center; }
.x-thumb img { width: 100%; height: 100%; object-fit: contain; }
.x-ref { font: 500 .72rem/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--moss-brass); }
.x-card h2 { font-size: 1.6rem; margin: 4px 0 6px; }
.x-price { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.x-price b { font-family: var(--f-display); font-size: 1.7rem; color: #fff; }
.x-price span { color: #b9bcb2; font-size: .92rem; }
.x-card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.x-card-actions .btn { min-height: 44px; padding: 0 18px; font-size: .95rem; }

.x-fine { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .9rem; color: #b9bcb2; max-width: 760px; }
.x-fine strong { color: #ecebe2; font-weight: 600; }

.x-foot { background: #0b1712; color: #9da29d; font-size: .88rem; }
.x-foot .wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-block: 22px; }
.x-foot a { color: #c9cbc2; }

@media (max-width: 600px) {
  .x-card { grid-template-columns: 1fr; }
  .x-thumb { width: 120px; }
  .x-paw { width: 92px; }
  .x-bubble { font-size: .95rem; padding: 8px 11px; }
  .x-vol input { width: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .xmas-bar-flake, .xmas-promo-snow, .xmas-promo-snow::after, .xmas-promo-paw { animation: none; }
  [aria-pressed="true"] .x-eq i { animation: none; height: 10px; }
}