/* 676 Halloween seasonal components (templates/*-halloween.php, rendered by
 * the platform theme's inc/seasonal.php slots). The pack's own stylesheet:
 * enqueued by the platform's seasons mu-plugin from the pack's `stylesheet`
 * key only while the pack is active.
 *
 * Every rule here is scoped under body.tmt-season-halloween, the class the
 * seasons mu-plugin adds while the Halloween pack is active, and styles only
 * markup that exists while it is active: at the default brand nothing here
 * matches anything. Colour is never written as a literal accent: the glows,
 * the hat's tube and the ribbon read the tokens, so a future pack with a
 * different primary gets matching pieces for free. Everything decorative is
 * aria-hidden in the markup, pointer-events none here, absolutely positioned
 * (no layout shift) and still under prefers-reduced-motion. */

/* --- Neon witch's hat on the logo ------------------------------------------
 * Perched on the first digit. The hat is an overlay SVG with the LOGO's own
 * viewBox (1633.99 x 548.05) stretched over the logo's box, so it scales and
 * sits with the artwork at every rendered width: the logo is fluid between
 * the theme's breakpoints (118 / 150 / 180 / 210px masthead, 150 / 110px
 * footer) and px offsets drifted off the digit. Inside the .six76-logo span
 * (already position: relative; its box is the logo's aspect ratio) and the
 * footer link (made relative below; the <img> sets its box). The tube is
 * currentColor = the accent; the band is the logo's own white; the glow is
 * in CSS px so it reads the same at every size. */
body.tmt-season-halloween .six76-hw-hat {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--six76-cyan);
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgb(var(--six76-cyan-rgb) / 0.7))
          drop-shadow(0 0 10px rgb(var(--six76-cyan-rgb) / 0.35));
}

/* Placement in logo units (1634 wide): the hat's 120x90 drawing scaled x4.3
   (~516 units, a third of the logo) with its brim on the first digit's top
   edge. The rotation about the brim is the inner group in the markup. */
body.tmt-season-halloween .six76-hw-hat-place {
  transform: translate(16px, -282px) scale(4.3);
}

body.tmt-season-halloween .six76-hw-hat-band {
  stroke: #f5f6f7;
}

/* Desktop masthead: the top bar is sticky above the masthead (z-40 over
   z-30) and the masthead's padding is only 16px, so the hat's tip, which
   pokes ~20px above the masthead, would be hidden under the bar. One
   placement everywhere matters more than the bars' relative order (they
   never overlap in y, only the hat's overflow does), so the masthead sits
   above the top bar for the season. Still under the announcement bar (50),
   the mobile menu (60) and the cookie banner. */
@media (min-width: 1024px) {
  body.tmt-season-halloween .six76-masthead {
    z-index: 41;
  }
}

/* Footer: the logo is an <img> in a flex link, so the link is the anchor;
   the overlay keeps the artwork's aspect ratio (preserveAspectRatio meet),
   so it sits on the <img> even when the link's min-height centres it. */
body.tmt-season-halloween .six76-footer-logo-link {
  position: relative;
}

body.tmt-season-halloween .six76-hw-hat--footer {
  filter: drop-shadow(0 0 3px rgb(var(--six76-cyan-rgb) / 0.7))
          drop-shadow(0 0 8px rgb(var(--six76-cyan-rgb) / 0.35));
}

/* The logo's own reduced-motion rule keeps the static glow; the hat has no
 * animation of its own, so nothing to stop here. */

/* --- Decorations ------------------------------------------------------------
 * template-parts/seasonal/decorations-halloween.php, slots masthead / hero /
 * band / page. Keyframes and paths are the design canvas's. Everything is
 * absolutely positioned (no layout shift), pointer-events none, below the
 * nav, the announcement bar, the cookie banner and the spin modal in z-order
 * (the masthead pieces sit inside the sticky masthead's own stacking context
 * at z-index -1 / 1; the page bats are z-index 20 under the z-30 masthead),
 * and still under prefers-reduced-motion. Colours: the webs, bats and
 * spiders are greys; the eyes amber; every glow and the hero's warm tint
 * read the accent token. */

@keyframes six76-hw-drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-40px); }
}

@keyframes six76-hw-spider {
  0%, 8% { height: 34px; }
  40%, 58% { height: 150px; }
  92%, 100% { height: 34px; }
}

@keyframes six76-hw-sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

@keyframes six76-hw-peek {
  0%, 52% { opacity: 0; transform: scaleY(1); }
  58%, 76% { opacity: 1; transform: scaleY(1); }
  79% { opacity: 1; transform: scaleY(0.08); }
  82%, 91% { opacity: 1; transform: scaleY(1); }
  96%, 100% { opacity: 0; transform: scaleY(1); }
}

@keyframes six76-hw-fly-1 {
  0% { left: -6%; top: 150px; }
  10% { top: 95px; }
  20% { top: 205px; }
  30% { top: 120px; }
  38% { left: 104%; top: 170px; }
  100% { left: 104%; top: 170px; }
}

@keyframes six76-hw-fly-2 {
  0%, 44% { left: 104%; top: 430px; }
  54% { top: 360px; }
  64% { top: 480px; }
  74% { top: 390px; }
  82% { left: -6%; top: 440px; }
  100% { left: -6%; top: 440px; }
}

@keyframes six76-hw-flap {
  from { transform: scaleY(1); }
  to { transform: scaleY(0.5); }
}

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

/* Masthead: cobwebs in the top corners, behind the nav row (z-index -1 in the
   sticky masthead's stacking context) and clipped to the masthead box by
   their wrapper (the masthead is a stacking context above the page, so an
   unclipped 200px web would paint over the ticker and the bars below it);
   spiders on threads in front of the row, deliberately unclipped so they
   can drop below. */
body.tmt-season-halloween .six76-hw-webs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

body.tmt-season-halloween .six76-hw-web {
  position: absolute;
  top: 0;
  width: 200px;
  height: 200px;
  color: #c9d3d6;
  opacity: 0.45;
}

body.tmt-season-halloween .six76-hw-web--left {
  left: 0;
}

body.tmt-season-halloween .six76-hw-web--right {
  right: 0;
  transform: scaleX(-1);
}

body.tmt-season-halloween .six76-hw-spider {
  position: absolute;
  top: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  transform-origin: top center;
  animation: six76-hw-sway 3.2s ease-in-out infinite;
}

body.tmt-season-halloween .six76-hw-spider--left {
  left: 112px;
}

body.tmt-season-halloween .six76-hw-spider--right {
  right: 118px;
  animation-duration: 4.1s;
  animation-delay: 0.6s;
}

body.tmt-season-halloween .six76-hw-thread {
  display: block;
  width: 1px;
  height: 34px;
  background: rgba(201, 211, 214, 0.5);
  animation: six76-hw-spider 13s ease-in-out 1s infinite;
}

body.tmt-season-halloween .six76-hw-spider--right .six76-hw-thread {
  animation-duration: 19s;
  animation-delay: 7s;
}

body.tmt-season-halloween .six76-hw-spider svg {
  display: block;
  width: 22px;
  height: 22px;
  margin-top: -2px;
  fill: #30393c;
  stroke: #4a5559;
  stroke-width: 1.3;
  stroke-linecap: round;
}

body.tmt-season-halloween .six76-hw-spider--right svg {
  width: 18px;
  height: 18px;
}

body.tmt-season-halloween .six76-hw-spider-eye {
  fill: var(--six76-cyan-bright);
  stroke: none;
}

/* Hero: a full-bleed layer under the slide carrying the warm and violet
   radial tints, the fog, the drifting bats and the eyes. The hero wrapper
   (.promotional-banner, Elementor container or the coded section) is the
   containing block. */
body.tmt-season-halloween .promotional-banner {
  position: relative;
}

body.tmt-season-halloween .six76-hw-hero {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(900px 420px at 72% 40%, rgb(var(--six76-cyan-rgb) / 0.1), transparent 70%),
    radial-gradient(700px 400px at 15% 90%, rgba(120, 60, 200, 0.12), transparent 70%);
}

body.tmt-season-halloween .six76-hw-fog {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  background: linear-gradient(to top, rgba(170, 150, 200, 0.14), rgba(170, 150, 200, 0));
}

body.tmt-season-halloween .six76-hw-bat {
  position: absolute;
  fill: #1f2628;
  animation: six76-hw-drift 7s ease-in-out infinite;
}

body.tmt-season-halloween .six76-hw-bat--hero-1 {
  left: 7%;
  top: 60px;
  width: 34px;
  height: 18px;
  opacity: 0.55;
}

body.tmt-season-halloween .six76-hw-bat--hero-2 {
  left: 11%;
  top: 110px;
  width: 22px;
  height: 12px;
  opacity: 0.45;
  animation-duration: 9s;
}

body.tmt-season-halloween .six76-hw-bat--hero-3 {
  right: 9%;
  top: 48px;
  width: 40px;
  height: 22px;
  opacity: 0.5;
  animation: six76-hw-drift 8s ease-in-out infinite reverse;
}

/* Eyes: amber with ink slit pupils, fading in, one blink, fading out. */
body.tmt-season-halloween .six76-hw-eyes {
  position: absolute;
  opacity: 0;
  transform-origin: center;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(255, 179, 0, 0.85));
  animation: six76-hw-peek 12s ease-in-out 2s infinite;
}

body.tmt-season-halloween .six76-hw-eye {
  fill: #ffb300;
}

body.tmt-season-halloween .six76-hw-pupil {
  fill: #0a0b0c;
}

body.tmt-season-halloween .six76-hw-eyes--hero-1 {
  left: 6%;
  bottom: 36px;
  width: 34px;
  height: 14px;
}

body.tmt-season-halloween .six76-hw-eyes--hero-2 {
  right: 4%;
  top: 120px;
  width: 26px;
  height: 11px;
  animation-duration: 17s;
  animation-delay: 9s;
}

/* Countdown band: the section is the containing block. */
body.tmt-season-halloween .six76-next-draw {
  position: relative;
  overflow: hidden;
}

body.tmt-season-halloween .six76-hw-eyes--band-1 {
  left: 60px;
  bottom: 30px;
  width: 40px;
  height: 16px;
  animation-duration: 14s;
  animation-delay: 5s;
  filter: drop-shadow(0 0 7px rgba(255, 179, 0, 0.85));
}

body.tmt-season-halloween .six76-hw-eyes--band-2 {
  right: 90px;
  top: 40px;
  width: 30px;
  height: 12px;
  animation-duration: 10s;
  animation-delay: 1s;
  filter: drop-shadow(0 0 7px rgba(255, 179, 0, 0.85));
}

/* Page: two bats crossing the full width on wavy paths, printed in the
   footer and positioned against the document, under the sticky masthead
   (z-30), the announcement bar, the cookie banner and the spin modal. The
   root's overflow-x: clip (_theme.css) keeps the offscreen legs from
   widening the page. */
body.tmt-season-halloween .six76-hw-flyer {
  position: absolute;
  left: -6%;
  top: 150px;
  z-index: 20;
  pointer-events: none;
  animation: six76-hw-fly-1 27s linear 3s infinite;
}

body.tmt-season-halloween .six76-hw-flyer--2 {
  left: 104%;
  top: 430px;
  animation: six76-hw-fly-2 41s linear 9s infinite;
}

body.tmt-season-halloween .six76-hw-flyer-bob {
  animation: six76-hw-bob 1.4s ease-in-out infinite;
}

body.tmt-season-halloween .six76-hw-flyer--2 .six76-hw-flyer-bob {
  animation-duration: 1.7s;
}

body.tmt-season-halloween .six76-hw-flyer-bat {
  display: block;
  width: 58px;
  height: 32px;
  fill: #2e3639;
  transform-origin: 50% 40%;
  animation: six76-hw-flap 0.32s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 6px rgb(var(--six76-cyan-rgb) / 0.25));
}

body.tmt-season-halloween .six76-hw-flyer--2 .six76-hw-flyer-bat {
  width: 44px;
  height: 24px;
  animation-duration: 0.28s;
}

body.tmt-season-halloween .six76-hw-bat-eye {
  fill: var(--six76-cyan-bright);
}

/* Phones: one web, one spider, one bat, two eye pairs. */
@media (max-width: 767px) {
  body.tmt-season-halloween .six76-hw-web {
    width: 110px;
    height: 110px;
    opacity: 0.4;
  }

  body.tmt-season-halloween .six76-hw-web--left,
  body.tmt-season-halloween .six76-hw-spider--left,
  body.tmt-season-halloween .six76-hw-bat--hero-2,
  body.tmt-season-halloween .six76-hw-bat--hero-3,
  body.tmt-season-halloween .six76-hw-flyer--2 {
    display: none;
  }

  body.tmt-season-halloween .six76-hw-spider--right {
    right: 58px;
    animation-duration: 3.4s;
    animation-delay: 0s;
  }

  body.tmt-season-halloween .six76-hw-spider--right .six76-hw-thread {
    height: 26px;
    animation: six76-hw-spider-mobile 14s ease-in-out 2s infinite;
  }

  body.tmt-season-halloween .six76-hw-bat--hero-1 {
    left: 14px;
    top: 10px;
    width: 28px;
    height: 15px;
    animation: none;
  }

  body.tmt-season-halloween .six76-hw-fog {
    height: 90px;
  }

  body.tmt-season-halloween .six76-hw-eyes--band-1 {
    left: 18px;
    top: 14px;
    bottom: auto;
    width: 28px;
    height: 12px;
    animation-duration: 12s;
    animation-delay: 3s;
  }

  body.tmt-season-halloween .six76-hw-eyes--band-2 {
    right: 24px;
    bottom: 16px;
    top: auto;
    width: 22px;
    height: 9px;
    animation-duration: 15s;
    animation-delay: 8s;
  }

  body.tmt-season-halloween .six76-hw-flyer {
    left: -14%;
    top: 130px;
    animation: six76-hw-fly-mobile 22s linear 4s infinite;
  }

  body.tmt-season-halloween .six76-hw-flyer-bat {
    width: 40px;
    height: 22px;
  }
}

@keyframes six76-hw-spider-mobile {
  0%, 8% { height: 26px; }
  40%, 58% { height: 96px; }
  92%, 100% { height: 26px; }
}

@keyframes six76-hw-fly-mobile {
  0% { left: -14%; top: 130px; }
  12% { top: 100px; }
  24% { top: 170px; }
  36% { left: 110%; top: 120px; }
  100% { left: 110%; top: 120px; }
}

/* Reduced motion: every animation off. The spiders rest at the top of their
   threads, the eyes stay faded out, the hero bats sit still, and the
   page-crossing bats, which only exist as movement, are hidden. */
@media (prefers-reduced-motion: reduce) {
  body.tmt-season-halloween .six76-hw-spider,
  body.tmt-season-halloween .six76-hw-thread,
  body.tmt-season-halloween .six76-hw-bat,
  body.tmt-season-halloween .six76-hw-eyes,
  body.tmt-season-halloween .six76-hw-flyer,
  body.tmt-season-halloween .six76-hw-flyer-bob,
  body.tmt-season-halloween .six76-hw-flyer-bat {
    animation: none;
  }

  body.tmt-season-halloween .six76-hw-flyer {
    display: none;
  }
}

/* --- Commerce touches -------------------------------------------------------
 * template-parts/seasonal/touches-halloween.php. Text in these is Orbitron
 * (the sans face) on purpose: the display face is for headings only. */

@keyframes six76-hw-ember {
  0%, 100% { filter: drop-shadow(0 0 4px rgb(var(--six76-cyan-rgb) / 0.5)); }
  30% { filter: drop-shadow(0 0 10px rgb(var(--six76-cyan-bright-rgb) / 0.95)); }
  48% { filter: drop-shadow(0 0 6px rgb(var(--six76-cyan-rgb) / 0.65)); }
  70% { filter: drop-shadow(0 0 11px rgba(255, 179, 0, 0.9)); }
  84% { filter: drop-shadow(0 0 7px rgb(var(--six76-cyan-light-rgb) / 0.75)); }
}

/* Shared pumpkin artwork colours. */
body.tmt-season-halloween .six76-hw-pumpkin-stem {
  stroke: #7cff3f;
}

body.tmt-season-halloween .six76-hw-pumpkin-body {
  fill: var(--six76-cyan);
}

body.tmt-season-halloween .six76-hw-pumpkin-ridge {
  stroke: var(--six76-cyan-dark);
}

body.tmt-season-halloween .six76-hw-pumpkin-face {
  fill: #0a0b0c;
}

body.tmt-season-halloween .six76-hw-pumpkin-grin {
  stroke: #0a0b0c;
}

body.tmt-season-halloween .six76-hw-pumpkin-icon-body {
  fill: currentColor;
}

body.tmt-season-halloween .six76-hw-pumpkin-icon-face {
  fill: #0a0b0c;
}

/* Hero pill: orange outline, pumpkin icon, before FEATURED COMPETITION.
   Geometry-matched to the badge beside it (.six76-hero-badge,
   .six76-hero-badge-el .elementor-heading-title), Orbitron like the canvas. */
body.tmt-season-halloween .six76-hw-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--six76-cyan);
  border-radius: 9999px;
  background: rgb(var(--six76-cyan-rgb) / 0.12);
  color: var(--six76-cyan-bright);
  font-family: Orbitron, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 0 14px rgb(var(--six76-cyan-rgb) / 0.35);
}

body.tmt-season-halloween .six76-hw-pill .six76-hw-pumpkin-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* On the Elementor slide the badge is a heading widget; the pill is
   prepended to the widget's content, so the widget container lays the two
   out as the flags row does. */
body.tmt-season-halloween .six76-hero-badge-el .elementor-widget-container {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
}

/* Card ribbon: notched end, top-left over the image, per-competition flag. */
body.tmt-season-halloween .six76-hw-ribbon {
  position: absolute;
  top: 18px;
  left: -6px;
  z-index: 2;
  padding: 5px 12px 5px 14px;
  background: var(--six76-cyan);
  color: #0a0b0c;
  font-family: Orbitron, sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%);
  box-shadow: 0 0 12px rgb(var(--six76-cyan-rgb) / 0.6);
  pointer-events: none;
}

/* Jack-o'-lantern marker on the leading edge of every accent sold bar: the
   track's overflow becomes visible and the fill positioned so the marker
   can ride its right edge (the card fill is already absolute). */
body.tmt-season-halloween .six76-card-progress,
body.tmt-season-halloween .six76-hero-progress-track,
body.tmt-season-halloween .six76-progress-track {
  overflow: visible;
}

body.tmt-season-halloween .six76-hero-progress-fill,
body.tmt-season-halloween .six76-progress-fill {
  position: relative;
}

body.tmt-season-halloween .six76-hw-marker {
  position: absolute;
  right: -8px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-52%);
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgb(var(--six76-cyan-rgb) / 0.7));
  animation: six76-hw-ember 2.6s ease-in-out infinite;
}

body.tmt-season-halloween .six76-hw-marker--hero {
  right: -10px;
  width: 20px;
  height: 20px;
}

/* The five staggers: d1 is the base 0s, written out so the cycle reads as
   five distinct values rather than four overrides and a fall-through. */
body.tmt-season-halloween .six76-hw-marker--d1 { animation-delay: 0s; }
body.tmt-season-halloween .six76-hw-marker--d2 { animation-delay: 0.9s; }
body.tmt-season-halloween .six76-hw-marker--d3 { animation-delay: 1.7s; }
body.tmt-season-halloween .six76-hw-marker--d4 { animation-delay: 0.4s; }
body.tmt-season-halloween .six76-hw-marker--d5 { animation-delay: 2.1s; }

/* A sold-out bar is magenta, not accent: no pumpkin on it. */
body.tmt-season-halloween .six76-hero-progress.is-sold-out .six76-hw-marker {
  display: none;
}

/* Basket badge: the count becomes a 30px pumpkin (28 on phones) with the
   count in ink on top. The span keeps .cart-contents-count for the fragment. */
body.tmt-season-halloween .six76-season-basket-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 0 10px rgb(var(--six76-cyan-rgb) / 0.5));
}

body.tmt-season-halloween .six76-hw-basket-pumpkin {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

body.tmt-season-halloween .six76-hw-basket-count {
  position: relative;
  margin-top: 4px;
  color: #0a0b0c;
  font-family: Orbitron, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 767px) {
  body.tmt-season-halloween .six76-season-basket-badge {
    width: 28px;
    height: 28px;
  }

  body.tmt-season-halloween .six76-hw-basket-count {
    font-size: 0.6875rem;
  }
}

/* RECENT WINS ticker label: the pumpkin icon in place of the live dot. */
body.tmt-season-halloween .six76-hw-ticker-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--six76-cyan);
}

@media (prefers-reduced-motion: reduce) {
  body.tmt-season-halloween .six76-hw-marker {
    animation: none;
  }
}