/* Seasonal layer only; the date gate in template.original.html disables it after 04.11.2026. */
.cc-halloween-strip { display: none; }

html.cc-halloween .cc-halloween-strip {
  display: block;
  position: relative;
  z-index: 5;
  overflow: hidden;
  border-bottom: 1px solid rgba(229, 140, 76, .3);
  background:
    radial-gradient(ellipse 38% 155% at 50% 170%, rgba(189, 86, 38, .24), transparent 75%),
    linear-gradient(100deg, #111b21, #202128 51%, #111b21);
  color: #f5ece3;
}

.cc-halloween-strip-inner {
  width: min(100% - 40px, 1200px);
  min-height: 45px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  position: relative;
  font-family: 'DM Sans', sans-serif;
}

.cc-halloween-strip-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 30%;
  pointer-events: none;
  transform: skew(-15deg);
  background: linear-gradient(90deg, transparent, rgba(246, 164, 102, .065), transparent);
  animation: cc-halloween-glimmer 9s ease-in-out infinite;
}

.cc-halloween-kicker {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .16em;
  color: #e5ad7b;
  white-space: nowrap;
}

.cc-halloween-divider { width: 1px; height: 17px; background: #a8795b; opacity: .7; }
.cc-halloween-promo { display: inline-flex; align-items: center; gap: 12px; }
.cc-halloween-copy { font-size: 11px; font-weight: 500; letter-spacing: .035em; color: #e3d9d0; }
.cc-halloween-code {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  color: #f9d2aa;
  border: 1px solid rgba(226, 150, 93, .45);
  padding: 4px 8px;
  border-radius: 3px;
  background: rgba(222, 125, 73, .1);
  white-space: nowrap;
}
.cc-halloween-date { font-size: 10px; font-weight: 700; color: #bda998; letter-spacing: .08em; white-space: nowrap; }

.cc-halloween-moon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border-radius: 50%;
  box-shadow: inset 5px -2px 0 0 #e8b37f;
  transform: rotate(15deg);
}

.cc-halloween-bat { width: 27px; height: 14px; color: #c38965; opacity: .66; display: inline-flex; flex: 0 0 27px; }
.cc-halloween-bat svg { height: 100%; width: 100%; fill: currentColor; }
.cc-halloween-bat-one { animation: cc-halloween-flight 6.5s ease-in-out infinite alternate; }
.cc-halloween-bat-two { animation: cc-halloween-flight 8s ease-in-out -3s infinite alternate-reverse; transform: scale(.76); }

html.cc-halloween[data-theme="dark"] .hero::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 38% 50% at 98% 14%, rgba(188, 81, 37, .21), transparent 83%),
    radial-gradient(ellipse 28% 43% at 74% 100%, rgba(215, 112, 44, .10), transparent 85%);
  animation: cc-halloween-ember 9s ease-in-out infinite alternate;
}

html.cc-halloween[data-theme="dark"] .hero h1 em { color: #e4aa76; }
html.cc-halloween[data-theme="dark"] .hero-copy .eyebrow { color: #dfb389; }

@keyframes cc-halloween-flight {
  0% { translate: -5px 3px; rotate: -7deg; opacity: .43; }
  50% { translate: 3px -3px; rotate: 3deg; opacity: .8; }
  100% { translate: 8px 2px; rotate: 8deg; opacity: .56; }
}

@keyframes cc-halloween-glimmer {
  0%, 12% { left: -40%; opacity: 0; }
  45% { opacity: 1; }
  80%, 100% { left: 115%; opacity: 0; }
}

@keyframes cc-halloween-ember {
  from { opacity: .6; }
  to { opacity: 1; }
}

@media (max-width: 720px) {
  .cc-halloween-strip-inner { min-height: 48px; width: calc(100% - 24px); gap: 9px; }
  .cc-halloween-kicker { font-size: 13px; letter-spacing: .1em; }
  .cc-halloween-promo { flex-direction: column; align-items: flex-start; gap: 2px; }
  .cc-halloween-copy { font-size: 10px; line-height: 1.2; white-space: nowrap; }
  .cc-halloween-code { padding: 1px 5px; font-size: 9px; }
  .cc-halloween-date, .cc-halloween-bat-two, .cc-halloween-divider { display: none; }
  .cc-halloween-moon { flex-basis: 13px; width: 13px; height: 13px; }
  .cc-halloween-bat-one { display: none; }
}

@media (max-width: 380px) {
  .cc-halloween-strip-inner { gap: 7px; }
  .cc-halloween-copy { font-size: 9px; }
  .cc-halloween-bat-one { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-halloween-strip *,
  html.cc-halloween .hero::before { animation: none !important; }
}