/* ========================================
   HOME.CSS - Homepage-Specific Styles
   ======================================== */

/* ===== AZLE LOGO WATERMARK BACKGROUND ===== */
body::before,
.main-content::before {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 1200px;
  height: 80vh;
  background-image: url('/assets/images/logos/azle-logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.03;
  pointer-events: none;
  z-index: var(--z-index-background);
  filter: grayscale(50%) contrast(1.2);
  mix-blend-mode: screen;
}

/* Spotlight effect overlay */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    transparent 30%,
    rgba(0, 0, 0, 0.4) 70%,
    rgba(0, 0, 0, 0.7) 100%
  );
  pointer-events: none;
  z-index: var(--z-index-background);
}

/* Ensure content is above watermark */
.main-content > *,
.footer {
  position: relative;
  z-index: var(--z-index-content);
}

/* Header z-index is handled in navigation.css */
/* Removed position: relative; as it was overriding the fixed positioning */

/* ===== HYPER-SPECIFIC OVERRIDES ===== */
/* Use this file for ID-specific styling or unique homepage elements */

/* Example: Specific styling for the main stream status card */
#stream-status-card {
  /* Custom styles for this specific element */
}

/* Example: Specific styling for the clips grid */
#clips-grid {
  /* Custom styles */
}

/* If you need to override a component style specifically on the homepage */
/* .home-page .card {
  ...
} */

/* Add any homepage-specific animations, layouts, or overrides here */