/* Fallback background color */
    body.login-page-body {
      background-color: #1a0a00;
    }

    /* ── Torch flicker overlay ─────────────────────────────────── */
    .torch-glow {
      position: fixed;
      border-radius: 50%;
      pointer-events: none;
      z-index: 0;
      will-change: opacity, transform;
      animation: torch-flicker 2.2s ease-in-out infinite alternate;
    }
    .torch-left {
      width: 120px; height: 120px;
      left: 8%; top: 30%;
      background: radial-gradient(ellipse at center, rgba(255,140,0,0.35) 0%, transparent 70%);
      animation-delay: 0s;
      animation-duration: 1.9s;
    }
    .torch-right {
      width: 120px; height: 120px;
      right: 8%; top: 30%;
      background: radial-gradient(ellipse at center, rgba(255,140,0,0.35) 0%, transparent 70%);
      animation-delay: -0.7s;
      animation-duration: 2.3s;
    }
    .torch-top {
      width: 80px; height: 80px;
      left: 50%; top: 10%;
      transform: translateX(-50%);
      background: radial-gradient(ellipse at center, rgba(255,160,30,0.25) 0%, transparent 70%);
      animation-delay: -1.3s;
      animation-duration: 1.7s;
    }

    @keyframes torch-flicker {
      0%   { opacity: 0.7; transform: scale(1.0); }
      15%  { opacity: 0.9; transform: scale(1.05); }
      30%  { opacity: 0.6; transform: scale(0.97); }
      45%  { opacity: 1.0; transform: scale(1.08); }
      60%  { opacity: 0.75; transform: scale(1.02); }
      75%  { opacity: 0.85; transform: scale(0.98); }
      100% { opacity: 0.8; transform: scale(1.04); }
    }

    /* torch-top needs translateX preserved during flicker animation */
    .torch-top {
      animation-name: torch-flicker-centered;
    }
    @keyframes torch-flicker-centered {
      0%   { opacity: 0.7; transform: translateX(-50%) scale(1.0); }
      15%  { opacity: 0.9; transform: translateX(-50%) scale(1.05); }
      30%  { opacity: 0.6; transform: translateX(-50%) scale(0.97); }
      45%  { opacity: 1.0; transform: translateX(-50%) scale(1.08); }
      60%  { opacity: 0.75; transform: translateX(-50%) scale(1.02); }
      75%  { opacity: 0.85; transform: translateX(-50%) scale(0.98); }
      100% { opacity: 0.8; transform: translateX(-50%) scale(1.04); }
    }

    /* ── Cloud layers ────────────────────────────────────────────── */
    .cloud-layer {
      position: fixed;
      pointer-events: none;
      z-index: 0;
      will-change: transform;
      opacity: 0;
      animation: cloud-drift linear infinite, cloud-fade 4s ease-in forwards;
    }
    .cloud-1 {
      width: 300px; height: 80px;
      top: 8%;
      background: radial-gradient(ellipse 150px 40px at 50% 50%, rgba(180,190,210,0.18) 0%, transparent 70%);
      animation-duration: 90s, 4s;
      animation-delay: 0s, 0s;
      right: -300px;
    }
    .cloud-2 {
      width: 450px; height: 100px;
      top: 15%;
      background: radial-gradient(ellipse 220px 50px at 50% 50%, rgba(160,175,200,0.14) 0%, transparent 70%);
      animation-duration: 120s, 4s;
      animation-delay: -35s, 0s;
      right: -450px;
    }
    .cloud-3 {
      width: 250px; height: 70px;
      top: 5%;
      background: radial-gradient(ellipse 120px 35px at 50% 50%, rgba(200,205,220,0.12) 0%, transparent 70%);
      animation-duration: 75s, 4s;
      animation-delay: -55s, 0s;
      right: -250px;
    }
    .cloud-4 {
      width: 380px; height: 90px;
      top: 20%;
      background: radial-gradient(ellipse 180px 45px at 50% 50%, rgba(150,165,190,0.10) 0%, transparent 70%);
      animation-duration: 105s, 4s;
      animation-delay: -20s, 0s;
      right: -380px;
    }

    @keyframes cloud-drift {
      0%   { transform: translateX(0); }
      100% { transform: translateX(calc(-100vw - 500px)); }
    }
    @keyframes cloud-fade {
      0%   { opacity: 0; }
      100% { opacity: 1; }
    }

/* ── Video Background ──────────────────────────────────────── */
#bg-video {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  pointer-events: none;
}

/* Gradient overlay for readability */
.bg-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.20) 40%,
    rgba(0,0,0,0.50) 100%
  );
  z-index: -1;
  pointer-events: none;
}

/* Mobile: hide video, show static background */
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
  #bg-video { display: none; }
}