/* =========================================================
   PERFORMANCE OPTIMIZATIONS
   Ultra-optimized CSS for maximum performance
   ========================================================= */

/* === CRITICAL CSS VARIABLES === */
:root {
  --gpu-hack: translateZ(0);
  --animation-timing: cubic-bezier(0.4, 0, 0.2, 1);
  --frame-throttle: 16.67ms; /* 60 FPS target */
}

/* === CARD LAYERS STYLING === */
.auto-card-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #1d212c, #0f121a);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  font-size: 14px;
  font-weight: 600;
  color: #94a3b8;
  text-align: center;
  padding: 10px;
}

.auto-card-output {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 11, 18, 0.95);
  border: 2px solid var(--out-border, #60a5fa);
  border-radius: 16px;
  font-size: 13px;
  font-weight: 600;
  color: #fefce8;
  text-align: center;
  padding: 8px;
  clip-path: inset(0 0 0 var(--clip-left, 100%));
  transform: var(--gpu-hack);
  will-change: clip-path;
  contain: layout style paint;
}

/* === REDUCED MOTION SUPPORT === */
@media (prefers-reduced-motion: reduce) {
  .auto-marquee-active,
  .lane-track.ready,
  .card-line {
    animation: none !important;
  }

  .dust-pixel {
    animation: none !important;
    opacity: 0.3;
  }

  .auto-card-face,
  .auto-card-glyphs,
  .auto-card-output {
    transition: none !important;
  }

  .ascii-content {
    animation: none !important;
  }
}

/* === HIGH PERFORMANCE MODE === */
@media (min-width: 1920px) {
  /* Use CSS containment for large screens */
  .auto-viewport,
  .scanner-container,
  .laser-stage {
    contain: strict;
  }
}

/* === LAYER PROMOTION === */
.auto-laser,
.laser-beam,
.scanner-laser,
.auto-card,
.card-shell {
  transform: var(--gpu-hack);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* === OPTIMIZED SHADOWS === */
@supports (filter: drop-shadow(0 0 0 black)) {
  .card-wrapper,
  .auto-card {
    box-shadow: none;
    filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.45));
  }
}

/* === FONT LOADING OPTIMIZATION === */
.ascii-content,
.auto-card-glyphs {
  font-display: swap;
}

/* === PAINT OPTIMIZATION === */
.auto-segment,
.track-segment {
  contain: layout;
}

/* === COMPOSITE LAYER HINTS === */
.auto-marquee-active::before,
.lane-track.ready::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  transform: var(--gpu-hack);
  will-change: transform;
}

/* === SCROLL PERFORMANCE === */
.auto-viewport {
  scroll-behavior: auto; /* Avoid smooth scroll lag */
  overscroll-behavior: contain;
}

/* === REDUCE REPAINTS === */
.auto-card[data-word]::after {
  content: attr(data-word);
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* === BATCH STYLE UPDATES === */
.optimized-clip {
  --clip-left: 0%;
  --clip-right: 0%;
  --clip-top: 0%;
  --clip-bottom: 0%;
}

/* === MOBILE: Animation hidden, static image shown instead === */
@media (max-width: 768px) {
  /* Animation is hidden on mobile via HTML (hidden md:block) */
  /* Static hero image is shown instead */
}

/* === Z-INDEX OPTIMIZATION === */
.auto-hero {
  isolation: isolate; /* Create new stacking context */
}

/* === ANIMATION PERFORMANCE === */
@keyframes optimized-marquee {
  from {
    transform: translate3d(calc(var(--seg-width, 800px) * -1), 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

/* Replace old animation with optimized version */
.auto-marquee-active {
  animation-name: optimized-marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* === VISIBILITY OPTIMIZATION === */
.auto-card:not(:hover) {
  pointer-events: none;
}

/* === BATCH DOM UPDATES === */
.batch-update {
  will-change: transform, opacity, clip-path;
}

/* === INTERSECTION OBSERVER STATES === */
.marquee-paused {
  animation-play-state: paused !important;
}

.marquee-running {
  animation-play-state: running !important;
}

/* === DEBUG MODE === */
.perf-debug {
  position: fixed;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.8);
  color: #0f0;
  padding: 10px;
  font-family: monospace;
  font-size: 12px;
  z-index: 9999;
  display: none;
}

.perf-debug.active {
  display: block;
}

/* Debug visualization removed - see backup files for debug version */