/* =========================================================
   CRT FOCUS-IN OVERLAY ANIMATION
   Page load time effect: full-screen blur-to-focus transition
   ========================================================= */

/* Keyframe: Blur to Clear Focus (Backdrop Filter variant) */
@keyframes crt-focus-in {
  0% {
    backdrop-filter: blur(16px) brightness(1.5) contrast(1.3);
    opacity: 0.95;
  }
  40% {
    backdrop-filter: blur(8px) brightness(1.25) contrast(1.15);
    opacity: 0.75;
  }
  75% {
    backdrop-filter: blur(2px) brightness(1.05) contrast(1.02);
    opacity: 0.3;
  }
  100% {
    backdrop-filter: blur(0) brightness(1) contrast(1);
    opacity: 0;
  }
}

/* Keyframe: Fade-in fallback (for browsers without backdrop-filter support) */
@keyframes crt-focus-in-fallback {
  0% {
    background: rgba(0, 0, 0, 0.85);
    opacity: 1;
  }
  50% {
    background: rgba(0, 0, 0, 0.4);
    opacity: 0.6;
  }
  100% {
    background: rgba(0, 0, 0, 0);
    opacity: 0;
  }
}

/* Overlay pseudo-element: Positioned on top of body::after (z-index 9999) */
html::before {
  content: "";
  position: fixed;
  z-index: 10000;
  inset: 0;
  pointer-events: none;
  background: transparent;

  /* Primary: Use backdrop-filter for realistic blur effect */
  backdrop-filter: blur(16px) brightness(1.5) contrast(1.3);

  /* Animation: Auto-play on page load */
  animation: crt-focus-in 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* Fallback: For browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(1px)) {
  html::before {
    backdrop-filter: none;
    background: rgba(0, 0, 0, 0.85);
    animation: crt-focus-in-fallback 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  }
}

/* Accessibility: Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  html::before {
    animation: none;
    display: none;
  }
}