/* Custom Styles from globals.css */
:root {
  /* Default to Dark Mode Colors */
  --background: #090909;
  --foreground: #f2f2f2;
  --brand-primary: #090909;
  --brand-primary-foreground: #f2f2f2;
  --brand-accent: #c0392b;
  --brand-accent-hover: #e67e22;
  --brand-accent-foreground: #0f0f0f;
  --hero-headline-1: var(--brand-accent);
  --hero-headline-2: currentColor;
  --hero-headline-accent: var(--hero-headline-1);
  --fire-overlay-opacity: 0.1;
  --flame-video-opacity: 0.1;
  --smoke-opacity: 0.06;
  --fire-dynamic-boost: 0;
  --fire-pulse: 0;
  --fire-flicker-speed: 1;
  --fire-drift-speed: 1;
  --surface-1: #141414;
  --surface-2: #0f0f0f;
  --muted: #bdbdbd;
  --divider: #33373d;
  --divider-subtle: rgba(51, 55, 61, 0.55);
}

/* Removed separate .dark class since we are enforcing dark mode */

body {
  /* Dark mode background gradient */
  /* background: #0b0b0b; Removed to allow fixed video background to show */
  color: var(--foreground);
  font-family: ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hero-flame {
  position: absolute;
  inset: -18%;
  pointer-events: none;
  z-index: 0;
  filter: blur(70px) saturate(165%) brightness(1.02);
  transform: translate3d(0, 0, 0);
}

.hero-flame::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(55% 50% at 50% 115%, color-mix(in srgb, var(--brand-accent-hover) 72%, transparent) 0%, transparent 72%),
    radial-gradient(45% 40% at 20% 115%, color-mix(in srgb, var(--brand-accent) 62%, transparent) 0%, transparent 74%),
    radial-gradient(40% 38% at 80% 115%, color-mix(in srgb, var(--brand-accent) 58%, transparent) 0%, transparent 76%),
    radial-gradient(26% 24% at 34% 96%, color-mix(in srgb, var(--brand-accent-hover) 70%, transparent) 0%, transparent 75%),
    radial-gradient(22% 22% at 64% 98%, color-mix(in srgb, var(--brand-accent) 66%, transparent) 0%, transparent 78%);
  opacity: 0.85;
  mix-blend-mode: screen;
  animation: hero-fire-drift 10s ease-in-out infinite alternate, hero-fire-flicker 2.2s ease-in-out infinite;
}

.hero-flame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 70% at 50% 120%, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 45%, transparent 72%);
  mix-blend-mode: multiply;
}

@keyframes hero-fire-drift {
  0% { transform: translate3d(-1.2%, 0.8%, 0) scale(1); }
  100% { transform: translate3d(1.2%, -0.8%, 0) scale(1.04); }
}

@keyframes hero-fire-flicker {
  0%, 100% { filter: blur(70px) saturate(165%) brightness(0.98); }
  35% { filter: blur(72px) saturate(175%) brightness(1.08); }
  70% { filter: blur(68px) saturate(150%) brightness(0.94); }
}

.bg-flame-stack {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -10;
  display: block; /* Always display in dark mode */
}

.bg-flame-base {
  position: absolute;
  inset: 0;
  background: #0b0b0b;
}

.bg-flame-base::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(140% 100% at 50% 80%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 60%, rgba(0, 0, 0, 1) 100%),
    radial-gradient(80% 60% at 50% 115%, rgba(230, 145, 30, 0.05) 0%, transparent 70%);
  filter: blur(0px);
  transform: translate3d(0, 0, 0);
}

.bg-flame-base::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  filter: contrast(130%) brightness(95%);
}

.bg-flame-layer {
  position: absolute;
  inset: -10%;
  opacity: clamp(0, calc(var(--flame-video-opacity) + var(--fire-dynamic-boost) + var(--fire-pulse)), 0.15);
  filter: blur(14px) brightness(0.55) saturate(0.9) contrast(1.12);
  transform: translate3d(0, 0, 0) scale(1.08);
}

.bg-flame-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 45% at 50% 112%, color-mix(in srgb, var(--brand-accent-hover) 70%, transparent) 0%, transparent 70%),
    radial-gradient(55% 40% at 15% 120%, color-mix(in srgb, var(--brand-accent) 62%, transparent) 0%, transparent 72%),
    radial-gradient(45% 35% at 85% 120%, color-mix(in srgb, var(--brand-accent) 58%, transparent) 0%, transparent 74%);
  opacity: 0.9;
  mix-blend-mode: screen;
  animation: bg-flame-drift 14s ease-in-out infinite alternate;
}

.bg-flame-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1.14);
  filter: blur(4px) brightness(0.7) contrast(1.1) saturate(0.9);
  mix-blend-mode: screen;
}

@keyframes bg-flame-drift {
  0% { transform: translate3d(-1.2%, 0.7%, 0) scale(1.02); }
  100% { transform: translate3d(1.2%, -0.7%, 0) scale(1.04); }
}

.bg-smoke {
  position: absolute;
  inset: -16%;
  opacity: clamp(0, calc(var(--smoke-opacity) + (var(--fire-dynamic-boost) * 0.25)), 0.18);
  filter: blur(18px) saturate(105%);
  transform: translate3d(0, 0, 0);
}

.bg-smoke::before,
.bg-smoke::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(22% 18% at 35% 112%, rgba(255, 255, 255, 0.13) 0%, transparent 70%),
    radial-gradient(26% 20% at 62% 118%, rgba(255, 255, 255, 0.1) 0%, transparent 72%),
    radial-gradient(18% 16% at 18% 125%, rgba(255, 255, 255, 0.08) 0%, transparent 74%),
    radial-gradient(20% 18% at 82% 122%, rgba(255, 255, 255, 0.09) 0%, transparent 76%);
  transform: translate3d(0, 0, 0);
  animation: smoke-rise 38s linear infinite;
}

.bg-smoke::after {
  opacity: 0.65;
  animation-duration: 52s;
  animation-delay: -18s;
  transform: translate3d(-2%, 4%, 0);
}

@keyframes smoke-rise {
  0% { transform: translate3d(0, 8%, 0) scale(1.05); }
  100% { transform: translate3d(0, -8%, 0) scale(1.12); }
}

.ui-panel {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)),
    rgba(10, 10, 10, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 0 0 1px rgba(0, 0, 0, 0.35) inset,
    0 18px 50px rgba(0, 0, 0, 0.55);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #525252;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #737373;
}