/* ==============================================================================
   UNOAuth Halloween Theme — Agency-Grade Spooky Edition
   Architected according to high-end-visual-design & design-spells principles.
   Color Palette: OLED Obsidian (#040406), Spectral Pumpkin Amber (#ff6b00),
   Ectoplasmic Violet (#9d4edd), and Sinister Blood Crimson (#dc2626).
   ============================================================================== */

:root.halloween-theme,
html.halloween-theme,
body.halloween-theme {
  --halloween-bg: #040406;
  --halloween-surface: #0a0810;
  --halloween-pumpkin: #ff6b00;
  --halloween-pumpkin-glow: rgba(255, 107, 0, 0.38);
  --halloween-amber: #ff9500;
  --halloween-violet: #9d4edd;
  --halloween-violet-glow: rgba(157, 78, 221, 0.32);
  --halloween-crimson: #dc2626;

  /* Overwrite UnoAuth Base Tokens */
  --bg-base: #040406;
  --bg-subtle: #08060d;
  --bg-card: rgba(16, 12, 24, 0.82);
  --bg-card-hover: rgba(26, 18, 38, 0.92);
  --bg-elevated: rgba(30, 20, 44, 0.88);
  --bg-glass: rgba(12, 9, 18, 0.85);

  --brand-blue: #ff6b00;
  --brand-blue-hover: #ff5100;
  --brand-blue-glow: rgba(255, 107, 0, 0.36);

  --accent-security: #ff9500;
  --accent-purple: #c084fc;
  --accent-crimson: #ef4444;

  --border-hairline: rgba(255, 120, 0, 0.12);
  --border-hover: rgba(255, 140, 0, 0.28);
  --border-active: rgba(255, 107, 0, 0.55);
}

/* --------------------------------------------------------------------------
   Background Ambient Mesh & Eerie Fog
   -------------------------------------------------------------------------- */
html.halloween-theme body {
  background-color: #040406 !important;
  color: #f5f5f7 !important;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(255, 107, 0, 0.14), transparent),
    radial-gradient(ellipse 60% 40% at 85% 60%, rgba(157, 78, 221, 0.08), transparent),
    radial-gradient(ellipse 60% 40% at 15% 40%, rgba(220, 38, 38, 0.06), transparent);
  background-attachment: fixed;
}

html.halloween-theme #ambient-glow {
  background: radial-gradient(circle 650px at var(--mouse-x, 50vw) var(--mouse-y, 40vh), rgba(255, 107, 0, 0.18), rgba(157, 78, 221, 0.08), transparent 70%) !important;
  opacity: 0.85 !important;
}

/* --------------------------------------------------------------------------
   Double-Bezel Hardware Cards (Doppelrand) with Pumpkin Hairline
   -------------------------------------------------------------------------- */
html.halloween-theme .rounded-3xl,
html.halloween-theme .rounded-2xl,
html.halloween-theme .app-card,
html.halloween-theme .card-glass,
html.halloween-theme [class*="bg-[#0e0e16]"],
html.halloween-theme [class*="bg-[#0d0d14]"],
html.halloween-theme [class*="bg-[#0c0c12]"] {
  background: linear-gradient(180deg, rgba(16, 12, 26, 0.92) 0%, rgba(10, 8, 16, 0.96) 100%) !important;
  border-color: rgba(255, 115, 0, 0.15) !important;
  box-shadow:
    0 0 0 1px rgba(255, 107, 0, 0.08),
    0 16px 40px -12px rgba(0, 0, 0, 0.7),
    0 0 35px -10px rgba(255, 107, 0, 0.08) !important;
}

html.halloween-theme .rounded-3xl:hover,
html.halloween-theme .rounded-2xl:hover {
  border-color: rgba(255, 140, 0, 0.28) !important;
  box-shadow:
    0 0 0 1px rgba(255, 140, 0, 0.18),
    0 20px 45px -10px rgba(0, 0, 0, 0.8),
    0 0 45px -5px rgba(255, 107, 0, 0.16) !important;
}

/* --------------------------------------------------------------------------
   Glow Buttons (Button-in-Button & Nested Island CTAs)
   -------------------------------------------------------------------------- */
html.halloween-theme .btn-apple-glow,
html.halloween-theme .btn-primary,
html.halloween-theme .btn-apple-primary,
html.halloween-theme .nav-glass .btn-apple-primary,
html.halloween-theme #btn-open-register,
html.halloween-theme #btn-mobile-open-register,
html.halloween-theme .btn-choose-plan[data-plan="pro"],
html.halloween-theme a[href*="#pricing"].btn-apple-primary,
html.halloween-theme button.btn-apple-primary {
  background: linear-gradient(135deg, #ff7a00 0%, #ff5500 50%, #e04400 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.2) inset,
    0 8px 24px -4px rgba(255, 85, 0, 0.65),
    0 0 24px 0 rgba(255, 122, 0, 0.45) !important;
  transition: all 400ms cubic-bezier(0.32, 0.72, 0, 1) !important;
}

html.halloween-theme .btn-apple-glow:hover,
html.halloween-theme .btn-primary:hover,
html.halloween-theme .btn-apple-primary:hover,
html.halloween-theme .nav-glass .btn-apple-primary:hover,
html.halloween-theme #btn-open-register:hover,
html.halloween-theme #btn-mobile-open-register:hover,
html.halloween-theme .btn-choose-plan[data-plan="pro"]:hover,
html.halloween-theme a[href*="#pricing"].btn-apple-primary:hover,
html.halloween-theme button.btn-apple-primary:hover {
  background: linear-gradient(135deg, #ff8c1a 0%, #ff6414 50%, #f04e0a 100%) !important;
  transform: translateY(-1.5px) scale(1.02) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.3) inset,
    0 12px 32px -4px rgba(255, 85, 0, 0.8),
    0 0 35px 6px rgba(255, 140, 26, 0.55) !important;
}

html.halloween-theme .btn-apple-glow:active,
html.halloween-theme .btn-primary:active,
html.halloween-theme .btn-apple-primary:active,
html.halloween-theme .nav-glass .btn-apple-primary:active,
html.halloween-theme #btn-open-register:active,
html.halloween-theme #btn-mobile-open-register:active,
html.halloween-theme .btn-choose-plan[data-plan="pro"]:active,
html.halloween-theme a[href*="#pricing"].btn-apple-primary:active,
html.halloween-theme button.btn-apple-primary:active {
  transform: translateY(0.5px) scale(0.985) !important;
}

/* --------------------------------------------------------------------------
   Navigation Glass Capsule (Halloween Glow)
   -------------------------------------------------------------------------- */
html.halloween-theme .nav-glass,
html.halloween-theme header nav {
  background: rgba(14, 10, 22, 0.75) !important;
  border-color: rgba(255, 115, 0, 0.22) !important;
  box-shadow:
    0 0 0 1px rgba(255, 107, 0, 0.1) inset,
    0 12px 35px -8px rgba(0, 0, 0, 0.6),
    0 0 30px -5px rgba(255, 107, 0, 0.15) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
}

/* --------------------------------------------------------------------------
   Jack-o'-Lantern Candle Flicker Animation & Glow Elements
   -------------------------------------------------------------------------- */
@keyframes pumpkin-flicker {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(255, 107, 0, 0.8)) drop-shadow(0 0 16px rgba(255, 150, 0, 0.4));
    opacity: 1;
  }
  25% {
    filter: drop-shadow(0 0 5px rgba(255, 85, 0, 0.6)) drop-shadow(0 0 12px rgba(255, 120, 0, 0.3));
    opacity: 0.92;
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(255, 130, 0, 0.95)) drop-shadow(0 0 22px rgba(255, 170, 0, 0.5));
    opacity: 1;
  }
  75% {
    filter: drop-shadow(0 0 7px rgba(255, 95, 0, 0.7)) drop-shadow(0 0 14px rgba(255, 130, 0, 0.35));
    opacity: 0.95;
  }
}

@keyframes spectral-pulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(255, 107, 0, 0.3), inset 0 0 10px rgba(255, 107, 0, 0.15);
  }
  50% {
    box-shadow: 0 0 28px rgba(255, 107, 0, 0.65), inset 0 0 18px rgba(255, 107, 0, 0.35);
  }
}

.pumpkin-glowing {
  animation: pumpkin-flicker 3s infinite ease-in-out;
}

.spectral-card-glow {
  animation: spectral-pulse 4s infinite ease-in-out;
}

/* --------------------------------------------------------------------------
   Halloween Badges, Eyebrows & Status Indicators
   -------------------------------------------------------------------------- */
html.halloween-theme .text-accent-security,
html.halloween-theme .text-brand-blue {
  color: #ff9500 !important;
}

html.halloween-theme .bg-brand-blue {
  background-color: #ff6b00 !important;
}

html.halloween-theme .border-brand-blue {
  border-color: #ff6b00 !important;
}

html.halloween-theme .bg-accent-security {
  background-color: #ff9500 !important;
  box-shadow: 0 0 12px rgba(255, 149, 0, 0.6) !important;
}

html.halloween-theme #sys-status-dot,
html.halloween-theme #kpi-system-status span.rounded-full {
  background-color: #ff8c00 !important;
  box-shadow: 0 0 10px #ff8c00, 0 0 20px rgba(255, 140, 0, 0.6) !important;
}


/* --------------------------------------------------------------------------
   Corner Spiderwebs (Pure SVG Delicate Hairlines)
   -------------------------------------------------------------------------- */
.halloween-corner-web {
  position: fixed;
  width: 140px;
  height: 140px;
  pointer-events: none;
  z-index: 45;
  opacity: 0.45;
  transition: opacity 500ms ease;
}

.halloween-corner-web.left {
  top: 0;
  left: 0;
}

.halloween-corner-web.right {
  top: 0;
  right: 0;
  transform: scaleX(-1);
}

/* --------------------------------------------------------------------------
   Halloween Flying Bat Animation (Design Spells micro-interaction)
   -------------------------------------------------------------------------- */
.halloween-bat {
  position: fixed;
  pointer-events: none;
  z-index: 40;
  opacity: 0.75;
  will-change: transform;
}

@keyframes bat-wing-flap {
  0%, 100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.4);
  }
}

.halloween-bat svg path {
  animation: bat-wing-flap 240ms infinite ease-in-out;
  transform-origin: center;
}

/* --------------------------------------------------------------------------
   Halloween Embers Canvas Overlay
   -------------------------------------------------------------------------- */
#halloween-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 25;
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   Halloween Interactive Control Card in Admin Panel
   -------------------------------------------------------------------------- */
.halloween-admin-card {
  background: linear-gradient(135deg, rgba(26, 16, 40, 0.95) 0%, rgba(14, 10, 22, 0.98) 100%) !important;
  border: 1px solid rgba(255, 107, 0, 0.3) !important;
  box-shadow:
    0 0 0 1px rgba(255, 107, 0, 0.15) inset,
    0 16px 40px -12px rgba(0, 0, 0, 0.8),
    0 0 35px -5px rgba(255, 107, 0, 0.2) !important;
}

.halloween-toggle-switch:checked + div {
  background-color: #ff6b00 !important;
  box-shadow: 0 0 16px rgba(255, 107, 0, 0.65);
}

/* --------------------------------------------------------------------------
   Custom Scrollbar (Halloween Amber)
   -------------------------------------------------------------------------- */
html.halloween-theme ::-webkit-scrollbar-thumb {
  background: rgba(255, 107, 0, 0.3) !important;
  border-radius: 9999px;
}

html.halloween-theme ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 107, 0, 0.6) !important;
}