/**
 * NON-CRITICAL CSS - Loaded asynchronously after initial paint
 * Contains animations, effects, transitions and enhanced styling
 * This file is loaded after critical CSS to prevent render blocking
 */

/* Extended color variables for animations */
:root {
  /* additional color variations */
  --terminal-green-dark: #008f40;
  --terminal-green-bright: #00ff70;
  --terminal-green-glow: rgba(0, 213, 98, 0.4);
  --terminal-amber-dim: #b8941f;
  --terminal-amber-dark: #9c7f0a;
  --terminal-amber-glow: rgba(212, 175, 55, 0.4);
  --terminal-cyan-dim: #0096c7;
  --terminal-cyan-bright: #00c9ff;
  --terminal-purple: #9d4edd;
  --terminal-purple-dim: #7c3aed;
  --terminal-purple-bright: #c084fc;
  --terminal-blue: #0066cc;
  --terminal-red: #dc2626;
  --terminal-gray: #1a1a1a;
  --terminal-mid-gray: #2a2a2a;
  --terminal-light-gray: #404040;
  --terminal-bright-white: #f0f0f0;
  --terminal-dim-white: #d0d0d0;

  /* gradients and effects */
  --ifm-background-gradient: radial-gradient(ellipse at center,
    rgba(0, 255, 65, 0.02) 0%,
    transparent 70%);
  --shadow-depth: 0 8px 32px rgba(0, 0, 0, 0.3);

  /* animation durations */
  --spinner-duration: 2s;
}

/* Button animations and effects */
.button {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px var(--terminal-green-glow);
}

.button:active {
  transform: translateY(1px) scale(0.98);
}

.button::before,
.button::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--terminal-green), transparent);
  transition: all 0.3s ease;
}

.button::before {
  top: 0;
  transform: translateX(-100%);
}

.button::after {
  bottom: 0;
  transform: translateX(100%);
}

.button:hover::before,
.button:hover::after {
  transform: translateX(0);
}

/* Enhanced primary button styles */
.button--primary {
  position: relative;
}

.button--primary::before {
  content: "╭─────────────────────────────────╮";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.button--primary::after {
  content: "╰─────────────────────────────────╯";
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.button--primary:hover::before,
.button--primary:hover::after {
  opacity: 1;
}

.button--primary:hover {
  background-color: var(--terminal-green);
  color: var(--terminal-black);
  text-shadow: 0 0 8px rgba(0, 213, 98, 0.8);
}

/* Enhanced secondary button styles */
.button--secondary::before {
  content: "┌─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─┐";
  color: var(--terminal-cyan-dim);
  opacity: 0;
  transition: all 0.3s ease;
}

.button--secondary::after {
  content: "└─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─┘";
  color: var(--terminal-cyan-dim);
  opacity: 0;
  transition: all 0.3s ease;
}

.button--secondary:hover::before,
.button--secondary:hover::after {
  color: var(--terminal-cyan);
  opacity: 1;
}

.button--secondary:hover {
  color: var(--terminal-cyan-bright);
  text-shadow: 0 0 8px rgba(0, 180, 216, 0.6);
  background-color: rgba(61, 219, 217, 0.1);
}

/* Enhanced navbar animations */
.navbar {
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.95) 0%,
    var(--terminal-black) 50%,
    rgba(0, 0, 0, 0.95) 100%
  );
  border-bottom: 3px solid;
  border-image: linear-gradient(90deg, var(--terminal-green), var(--terminal-amber)) 1;
  box-shadow:
    var(--ifm-navbar-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
}

.navbar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--terminal-green),
    var(--terminal-amber),
    var(--terminal-cyan),
    var(--terminal-green)
  );
  box-shadow: 0 0 15px var(--terminal-green-glow);
  animation: terminal-scan 2.5s infinite;
}

@keyframes terminal-scan {
  0%, 100% { opacity: 1; filter: brightness(1); }
  50% { opacity: 0.7; filter: brightness(1.2); }
}

.navbar__title {
  text-shadow: 0 0 10px var(--terminal-amber-glow);
  transition: all 0.3s ease;
}

.navbar__link {
  transition: all 0.3s ease;
  position: relative;
  padding: 0.5rem 1rem;
}

.navbar__link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--terminal-green);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.navbar__link:hover::before {
  width: 80%;
}

.navbar__link:hover {
  color: var(--terminal-green);
  text-shadow: 0 0 12px var(--terminal-green-glow);
  transform: translateY(-1px);
}

.navbar__link:hover::after {
  content: " ⠋";
  animation: spinner-frames var(--spinner-duration) linear infinite;
  margin-left: 0.25rem;
}

/* Hero enhanced effects */
.hero {
  background:
    var(--ifm-background-gradient),
    var(--terminal-black);
  border-bottom: 4px solid;
  border-image: linear-gradient(90deg, var(--terminal-green), var(--terminal-amber), var(--terminal-cyan)) 1;
  overflow: hidden;
  box-shadow: inset 0 4px 20px rgba(0, 0, 0, 0.5);
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(0, 255, 65, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(255, 204, 0, 0.02) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
}

.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(
      ellipse at 30% 40%,
      rgba(0, 255, 65, 0.08) 0%,
      transparent 40%
    ),
    radial-gradient(
      ellipse at 70% 60%,
      rgba(255, 204, 0, 0.06) 0%,
      transparent 40%
    );
  pointer-events: none;
  z-index: 1;
}

.hero > .container {
  position: relative;
  z-index: 2;
}

/* Spinner animations */
@keyframes spinner-frames {
  0% { content: "⠋"; }
  10% { content: "⠙"; }
  20% { content: "⠹"; }
  30% { content: "⠸"; }
  40% { content: "⠼"; }
  50% { content: "⠴"; }
  60% { content: "⠦"; }
  70% { content: "⠧"; }
  80% { content: "⠇"; }
  90% { content: "⠏"; }
  100% { content: "⠋"; }
}

.ratatui-spinner-frame {
  animation: spinner-frames var(--spinner-duration) linear infinite;
}

.progress-bar {
  display: inline-block;
  width: 200px;
  height: 4px;
  background: var(--terminal-dark-gray);
  border: 1px solid var(--terminal-border);
  position: relative;
  overflow: hidden;
}

.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    var(--terminal-green),
    transparent
  );
  animation: progress-loading 2s ease-in-out infinite;
}

@keyframes progress-loading {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Card animations and effects */
.card, .terminal-feature {
  background: linear-gradient(145deg, var(--terminal-gray), var(--terminal-dark-gray));
  border: 3px solid var(--terminal-green-dim);
  box-shadow:
    var(--shadow-depth),
    0 0 20px rgba(0, 255, 65, 0.15),
    inset 0 2px 10px rgba(0, 255, 65, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
  margin-bottom: 2rem;
}

.card::before, .terminal-feature::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 3px,
      rgba(0, 255, 65, 0.01) 3px,
      rgba(0, 255, 65, 0.01) 6px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 10px,
      rgba(255, 204, 0, 0.005) 10px,
      rgba(255, 204, 0, 0.005) 20px
    );
  pointer-events: none;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.card:hover, .terminal-feature:hover {
  border-color: var(--terminal-green);
  box-shadow:
    0 16px 48px rgba(0, 255, 65, 0.3),
    0 0 40px var(--terminal-green-glow),
    inset 0 2px 15px rgba(0, 255, 65, 0.1),
    inset 0 1px 0 rgba(0, 0, 0, 0.2);
  transform: translateY(-6px) rotateX(5deg);
}

.card:hover::before, .terminal-feature:hover::before {
  opacity: 0.8;
}

/* CRT scan line effects */
@media (prefers-reduced-motion: no-preference) {
  .crt-effect {
    position: relative;
    overflow: hidden;
  }

  .crt-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      transparent 50%,
      rgba(0, 213, 98, 0.03) 50%
    );
    background-size: 100% 4px;
    pointer-events: none;
    animation: scanlines 0.1s linear infinite;
  }

  @keyframes scanlines {
    0% { transform: translateY(0); }
    100% { transform: translateY(4px); }
  }
}

/* Icon animations */
.terminal-icon {
  animation: icon-pulse 2s infinite;
  transition: all 0.3s ease;
}

@keyframes icon-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Fade in animations */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fade-in 0.6s ease-out;
}

/* Terminal header effects */
.terminal-header {
  position: relative;
  overflow: hidden;
}

.terminal-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.8s ease;
}

.terminal-header:hover::before {
  left: 100%;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus styles for accessibility */
.button:focus-visible,
.navbar__link:focus-visible {
  outline: 2px solid var(--terminal-green);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 213, 98, 0.2);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --terminal-green: #00ff00;
    --terminal-amber: #ffff00;
    --terminal-cyan: #00ffff;
    --terminal-white: #ffffff;
    --terminal-black: #000000;
  }
}