/* Preview-only theme + seasonal kit for local ECCnew */
:root,
html[data-theme="signal"] {
  --bg: #05060a;
  --bg-2: #08090e;
  --bg-3: #0c0e14;
  --line: #f4f1ea1a;
  --text: #f4f1ea;
  --muted: #9a948c;
  --accent: #f2040c;
  --accent-2: #ff2d2d;
  --cta-top: #ff2a2a;
  --cta-mid: #f2040c;
  --cta-bot: #c4030a;
  --cta-glow: #f2040c;
}
html[data-theme="blueprint"] {
  --bg: #061018;
  --bg-2: #0a1822;
  --bg-3: #102230;
  --line: #9ad8ee22;
  --text: #e8f4fa;
  --muted: #8aa8b6;
  --accent: #2eb5e0;
  --accent-2: #6ed4f5;
  --cta-top: #5ecfff;
  --cta-mid: #2eb5e0;
  --cta-bot: #1a8fb8;
  --cta-glow: #2eb5e0;
}
html[data-theme="steel"] {
  --bg: #0b0d12;
  --bg-2: #12151c;
  --bg-3: #181c26;
  --line: #c5d0dc22;
  --text: #e6eaf0;
  --muted: #8b95a3;
  --accent: #8aa4b8;
  --accent-2: #b7c9d6;
  --cta-top: #b7c9d6;
  --cta-mid: #8aa4b8;
  --cta-bot: #5e7386;
  --cta-glow: #8aa4b8;
}
html[data-theme="paper"] {
  --bg: #f3eee4;
  --bg-2: #ebe4d6;
  --bg-3: #e2d8c6;
  --line: #1c191422;
  --text: #1c1914;
  --muted: #6b6458;
  --accent: #1f4e79;
  --accent-2: #2d6a9f;
  --cta-top: #3a7eb5;
  --cta-mid: #1f4e79;
  --cta-bot: #163a5c;
  --cta-glow: #1f4e79;
}
html, body { background: var(--bg); color: var(--text); }
.cta-primary,
a.cta-primary {
  background: linear-gradient(var(--cta-top) 0%, var(--cta-mid) 55%, var(--cta-bot) 100%) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cta-glow) 50%, transparent),
    0 10px 28px color-mix(in srgb, var(--cta-glow) 28%, transparent),
    0 0 48px color-mix(in srgb, var(--cta-glow) 32%, transparent) !important;
}
.cta-primary:hover,
a.cta-primary:hover {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-2) 60%, transparent),
    0 12px 32px color-mix(in srgb, var(--cta-glow) 36%, transparent),
    0 0 64px color-mix(in srgb, var(--cta-glow) 42%, transparent) !important;
}

#ecc-theme-kit {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 9999;
  width: 228px;
  padding: 12px 12px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-2) 92%, transparent);
  color: var(--text);
  font: 12px/1.35 ui-sans-serif, system-ui, sans-serif;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px #0006;
}
#ecc-theme-kit h4 {
  margin: 0 0 8px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
#ecc-theme-kit .swatches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
#ecc-theme-kit button.swatch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-3);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font: inherit;
}
#ecc-theme-kit button.swatch[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
#ecc-theme-kit .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: 0 0 12px;
}
#ecc-theme-kit select {
  width: 100%;
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--text);
  font: inherit;
}
#ecc-theme-kit .note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 10px;
}

#ecc-season {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  overflow: hidden;
}

#ecc-season .ecc-fall-wrap {
  position: absolute;
  top: -8%;
  pointer-events: none;
  opacity: 0.7;
  animation-name: ecc-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
#ecc-season .ecc-fall-icon,
#ecc-season .ecc-leaf {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
@keyframes ecc-fall {
  0% { transform: translate3d(0, -8vh, 0) rotate(-18deg); opacity: 0; }
  8% { opacity: 0.55; }
  50% { opacity: 0.42; }
  78% { opacity: 0.42; }
  100% { transform: translate3d(var(--dx, 40px), 108vh, 0) rotate(var(--rot, 280deg)); opacity: 0; }
}

#ecc-season .ecc-fall-wrap.ecc-ghost {
  opacity: 0.45;
  animation-name: ecc-fall-ghost;
}
@keyframes ecc-fall-ghost {
  0% { transform: translate3d(0, -8vh, 0) rotate(-8deg); opacity: 0; }
  10% { opacity: 0.38; }
  50% { opacity: 0.32; }
  100% { transform: translate3d(var(--dx, 30px), 108vh, 0) rotate(var(--rot, 40deg)); opacity: 0; }
}

#ecc-season .ecc-pumpkin-icon {
  filter: drop-shadow(0 0 5px rgba(244, 144, 12, 0.38));
}

#ecc-season .ecc-light-string {
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: 4px;
  height: 22px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
  border-top: 1px solid rgba(196, 160, 80, 0.32);
  padding-top: 6px;
}
#ecc-season .ecc-bulb {
  width: 7px;
  height: 10px;
  border-radius: 50% 50% 40% 40%;
  box-shadow: 0 0 6px currentColor;
  animation-name: ecc-bulb-blink;
  animation-duration: 2.2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes ecc-bulb-blink {
  0%, 100% { opacity: 0.42; filter: brightness(0.8); }
  50% { opacity: 0.92; filter: brightness(1.35); }
}

#ecc-season .ecc-frost-edge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42px;
  pointer-events: none;
  background:
    radial-gradient(ellipse 8px 5px at 12% 80%, rgba(230, 244, 255, 0.35), transparent 70%),
    radial-gradient(ellipse 6px 4px at 28% 90%, rgba(210, 232, 255, 0.28), transparent 70%),
    radial-gradient(ellipse 7px 4px at 47% 78%, rgba(230, 244, 255, 0.3), transparent 70%),
    radial-gradient(ellipse 5px 3px at 63% 88%, rgba(200, 228, 255, 0.26), transparent 70%),
    radial-gradient(ellipse 8px 5px at 81% 82%, rgba(230, 244, 255, 0.32), transparent 70%),
    radial-gradient(ellipse 6px 4px at 93% 92%, rgba(210, 232, 255, 0.24), transparent 70%),
    linear-gradient(to top, rgba(210, 230, 255, 0.2), rgba(210, 230, 255, 0.07) 45%, transparent);
}


#ecc-season .ecc-vine-overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 21%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
#ecc-season .ecc-vine-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  pointer-events: none;
}
#ecc-season .ecc-vine-stem {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation-name: ecc-vine-grow;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-duration: 6s;
}
@keyframes ecc-vine-grow {
  to { stroke-dashoffset: 0; }
}
#ecc-season .ecc-vine-leaf,
#ecc-season .ecc-vine-flower {
  position: absolute;
  display: block;
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 90%;
  will-change: transform, opacity;
  animation-name: ecc-vine-sprout, ecc-vine-sway;
  animation-duration: 0.9s, 5.6s;
  animation-timing-function: cubic-bezier(0.22, 1.15, 0.36, 1), ease-in-out;
  animation-fill-mode: forwards, none;
  animation-iteration-count: 1, infinite;
}
#ecc-season .ecc-vine-flower {
  animation-name: ecc-vine-bloom, ecc-vine-sway;
}
#ecc-season .ecc-vine-leaf svg,
#ecc-season .ecc-vine-flower svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
@keyframes ecc-vine-sprout {
  0% { opacity: 0; transform: scale(0.12) rotate(-16deg); }
  100% { opacity: 0.55; transform: scale(1) rotate(var(--vine-rot, -4deg)); }
}
@keyframes ecc-vine-bloom {
  0% { opacity: 0; transform: scale(0) rotate(-10deg); }
  72% { opacity: 0.62; transform: scale(1.14) rotate(4deg); }
  100% { opacity: 0.58; transform: scale(1) rotate(var(--vine-rot, 0deg)); }
}
@keyframes ecc-vine-sway {
  0%, 100% { transform: scale(1) rotate(var(--vine-rot, -5deg)); }
  50% { transform: scale(1) rotate(var(--sway-to, 6deg)); }
}
#ecc-season .ecc-fall-wrap {
  z-index: 1;
}