/**
 * AИTIИOTE Animated Static Logo Component Stylesheet
 * 
 * Features:
 * - Responsive vector-masked raster noise containers (Wordmark & Square Logomark)
 * - CRT subtle horizontal scanline overlay
 * - High-DPI crisp rendering & ambient glow
 * - Full OS prefers-reduced-motion accessibility compliance
 * - Zero external dependencies
 */

:root {
  --an-static-glow: rgba(255, 255, 255, 0.32);
  --an-static-glow-hover: rgba(255, 255, 255, 0.55);
}

/* ==========================================================
   1. Containers
   ========================================================== */
.an-static-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-decoration: none;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  filter: drop-shadow(0 0 16px var(--an-static-glow));
  transition: filter 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s ease;
  overflow: visible;
  line-height: 0;
}

.an-static-logo:hover {
  filter: drop-shadow(0 0 26px var(--an-static-glow-hover));
}

.an-static-logo:active {
  transform: scale(0.985);
}

/* Full Wordmark (AИTIИOTE: 389.45 x 111.12) */
.an-static-wordmark {
  width: 154px;
  aspect-ratio: 389.45 / 111.12;
  height: auto;
}

/* Square Logomark (-И: 109.06 x 111.12) */
.an-static-logomark {
  width: 52px;
  height: 52px;
  aspect-ratio: 109.06 / 111.12;
}

/* Standalone Card Logomark (with dark backing) */
.an-static-logomark-card {
  width: 80px;
  height: 80px;
  background: #090b10;
  border: 1px solid #1a202c;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
}

/* ==========================================================
   2. SVG & Canvas Elements
   ========================================================== */
.an-static-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.an-static-canvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

/* ==========================================================
   3. CRT Scanline Overlay
   ========================================================== */
.an-static-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3) 0px,
    rgba(0, 0, 0, 0.3) 2px,
    transparent 2px,
    transparent 4px
  );
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.65;
}

/* ==========================================================
   4. Screen Reader Accessibility (.sr-only)
   ========================================================== */
.an-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================
   5. Reduced Motion Accessibility Support
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .an-static-logo {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2)) !important;
    transition: none !important;
    transform: none !important;
  }

  .an-static-scanlines {
    opacity: 0.3 !important;
  }
}