/*
 * ATROTON Cyber-Scanline — standalone stylesheet
 * ==============================================
 *
 * Ported from clients/web/src/styles/globals.css (`.cyber-scanline`
 * used across UnlockScreen, SetupScreen, AdminPanel, MfaEnrollScreen,
 * MfaVerifyScreen) so atroton.com's public surfaces share the same
 * visual signature as the authenticated app.
 *
 * Usage — add one <div> inside the page body:
 *   <div class="atroton-scanline" aria-hidden="true"></div>
 *
 * The sweep line is a 1px horizontal gradient that travels from the
 * top to the bottom of the viewport on a 10s loop, overlaid with a
 * faint CRT scanline texture. Both effects respect
 * `prefers-reduced-motion: reduce` (WCAG 2.2 SC 2.3.3) — motion is
 * disabled for users with vestibular disorders.
 *
 * Animation timing scales in seconds, not px/vh, so the pace feels
 * consistent across viewport sizes (the line always takes 10s to
 * traverse the viewport regardless of screen height). pointer-events
 * are disabled so the overlay never intercepts clicks.
 */

@keyframes atroton-scanline-sweep {
  0%   { top: -2px; }
  100% { top: 100%; }
}

@keyframes atroton-scanline-glow-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.7; }
}

.atroton-scanline {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

/* Horizontal sweeping line — top to bottom. */
.atroton-scanline::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    #00e5ff 15%,
    #00e5ff 50%,
    #00e5ff 85%,
    transparent 100%
  );
  box-shadow:
    0 0 8px 2px rgba(0, 229, 255, 0.4),
    0 0 20px 4px rgba(0, 229, 255, 0.15);
  animation:
    atroton-scanline-sweep 10s linear infinite,
    atroton-scanline-glow-pulse 3s ease-in-out infinite;
}

/* Faint CRT texture layered across the viewport. */
.atroton-scanline::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(255, 255, 255, 0.015) 3px,
    rgba(255, 255, 255, 0.015) 4px
  );
}

@media (prefers-reduced-motion: reduce) {
  .atroton-scanline::before,
  .atroton-scanline::after {
    animation: none !important;
  }
  .atroton-scanline::before {
    /* Park the line off-screen so no static glow sits permanently on
       the page — reduced-motion should be a subtractive experience. */
    top: -2px;
  }
}