/* CRT Monitor Effect */
/* Apply monospace font to everything */
html,
body,
button,
input,
select,
textarea,
div,
p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
a,
li,
ul,
ol {
  font-family: "VT323", "Courier New", Courier, monospace !important;
}

/* Global style that will override any other font settings */
* {
  font-family: "VT323", "Courier New", Courier, monospace !important;
}

/* VT323 renders smaller than typical fonts, so increase base size */
html {
  font-size: 20px;
}

/* ===========================================
   CHROMATIC ABERRATION EFFECT
   RGB color fringing at screen edges like a real CRT
   =========================================== */

/* Red/Magenta channel - shifts outward to top-left */
.chromatic-aberration {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 9993;
}

/* Red fringe - offset toward edges */
.chromatic-aberration::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  
  /* Red/magenta fringing - stronger at corners */
  background:
    /* Top-left corner - red shift */
    radial-gradient(
      ellipse at 0% 0%,
      rgba(255, 0, 50, 0.15) 0%,
      rgba(255, 0, 50, 0.08) 15%,
      transparent 40%
    ),
    /* Top-right corner - red shift */
    radial-gradient(
      ellipse at 100% 0%,
      rgba(255, 0, 50, 0.15) 0%,
      rgba(255, 0, 50, 0.08) 15%,
      transparent 40%
    ),
    /* Bottom-left corner - red shift */
    radial-gradient(
      ellipse at 0% 100%,
      rgba(255, 0, 50, 0.15) 0%,
      rgba(255, 0, 50, 0.08) 15%,
      transparent 40%
    ),
    /* Bottom-right corner - red shift */
    radial-gradient(
      ellipse at 100% 100%,
      rgba(255, 0, 50, 0.15) 0%,
      rgba(255, 0, 50, 0.08) 15%,
      transparent 40%
    ),
    /* Edge fringing - top */
    linear-gradient(
      to bottom,
      rgba(255, 0, 80, 0.08) 0%,
      transparent 12%
    ),
    /* Edge fringing - bottom */
    linear-gradient(
      to top,
      rgba(255, 0, 80, 0.08) 0%,
      transparent 12%
    ),
    /* Edge fringing - left */
    linear-gradient(
      to right,
      rgba(255, 0, 80, 0.06) 0%,
      transparent 10%
    ),
    /* Edge fringing - right */
    linear-gradient(
      to left,
      rgba(255, 0, 80, 0.06) 0%,
      transparent 10%
    );
  
  /* Slight offset to simulate misaligned red channel */
  transform: translate(-2px, -1px);
  mix-blend-mode: screen;
}

/* Cyan/Blue fringe - offset opposite direction */
.chromatic-aberration::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  
  /* Cyan/blue fringing - stronger at corners */
  background:
    /* Top-left corner - cyan shift */
    radial-gradient(
      ellipse at 0% 0%,
      rgba(0, 200, 255, 0.15) 0%,
      rgba(0, 200, 255, 0.08) 15%,
      transparent 40%
    ),
    /* Top-right corner - cyan shift */
    radial-gradient(
      ellipse at 100% 0%,
      rgba(0, 200, 255, 0.15) 0%,
      rgba(0, 200, 255, 0.08) 15%,
      transparent 40%
    ),
    /* Bottom-left corner - cyan shift */
    radial-gradient(
      ellipse at 0% 100%,
      rgba(0, 200, 255, 0.15) 0%,
      rgba(0, 200, 255, 0.08) 15%,
      transparent 40%
    ),
    /* Bottom-right corner - cyan shift */
    radial-gradient(
      ellipse at 100% 100%,
      rgba(0, 200, 255, 0.15) 0%,
      rgba(0, 200, 255, 0.08) 15%,
      transparent 40%
    ),
    /* Edge fringing - top */
    linear-gradient(
      to bottom,
      rgba(0, 220, 255, 0.08) 0%,
      transparent 12%
    ),
    /* Edge fringing - bottom */
    linear-gradient(
      to top,
      rgba(0, 220, 255, 0.08) 0%,
      transparent 12%
    ),
    /* Edge fringing - left */
    linear-gradient(
      to right,
      rgba(0, 220, 255, 0.06) 0%,
      transparent 10%
    ),
    /* Edge fringing - right */
    linear-gradient(
      to left,
      rgba(0, 220, 255, 0.06) 0%,
      transparent 10%
    );
  
  /* Offset opposite to red channel */
  transform: translate(2px, 1px);
  mix-blend-mode: screen;
}

/* Reduce chromatic aberration on mobile */
@media (max-width: 768px) {
  .chromatic-aberration::before {
    opacity: 0.4;
    transform: translate(-1px, -0.5px);
  }
  
  .chromatic-aberration::after {
    opacity: 0.4;
    transform: translate(1px, 0.5px);
  }
}

/* ===========================================
   CRT SCREEN CURVATURE EFFECT
   Creates the illusion of a curved CRT screen
   =========================================== */

/* Main curvature overlay - creates the curved screen illusion */
.screen-curvature {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 9992;
  
  /* Curved edge shadow - creates the "bulging inward" illusion */
  box-shadow:
    /* Main curved edge darkening */
    inset 0 0 100px 40px rgba(0, 0, 0, 0.4),
    /* Stronger corners */
    inset 0 0 200px 80px rgba(0, 0, 0, 0.15);
  
  /* Subtle curved border to reinforce the shape */
  border-radius: 8px;
}

/* Curved highlight reflection - simulates glass surface */
.screen-curvature::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  
  /* Subtle top-left highlight like light hitting curved glass */
  background: 
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.01) 15%,
      transparent 40%
    );
  
  border-radius: 8px;
}

/* Edge curvature shadows - enhances the curved screen edges */
.screen-curvature::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  
  /* Gradient that curves inward from all edges */
  background:
    /* Top edge */
    linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, transparent 8%),
    /* Bottom edge */
    linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, transparent 8%),
    /* Left edge */
    linear-gradient(to right, rgba(0, 0, 0, 0.25) 0%, transparent 6%),
    /* Right edge */
    linear-gradient(to left, rgba(0, 0, 0, 0.25) 0%, transparent 6%);
  
  border-radius: 8px;
}

/* Corner shadows - CRT screens are darker at corners */
.corner-shadows {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 9991;
  
  background:
    /* Top-left corner */
    radial-gradient(
      ellipse at 0% 0%,
      rgba(0, 0, 0, 0.35) 0%,
      transparent 25%
    ),
    /* Top-right corner */
    radial-gradient(
      ellipse at 100% 0%,
      rgba(0, 0, 0, 0.35) 0%,
      transparent 25%
    ),
    /* Bottom-left corner */
    radial-gradient(
      ellipse at 0% 100%,
      rgba(0, 0, 0, 0.4) 0%,
      transparent 25%
    ),
    /* Bottom-right corner */
    radial-gradient(
      ellipse at 100% 100%,
      rgba(0, 0, 0, 0.4) 0%,
      transparent 25%
    );
}

/* Main body styles */
html {
  background-color: #000000;
}

body {
  background-color: #121212;
  color: #00b7ff; /* Sky blue text */
  position: relative;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  animation: turn-on 1.2s ease-in;
  background-image: 
    /* Subtle phosphor glow */
    radial-gradient(
      ellipse at center,
      rgba(0, 183, 255, 0.08) 0%,
      rgba(0, 0, 0, 0) 60%
    ),
    /* Screen interlacing effect */
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.11) 0px,
      rgba(0, 0, 0, 0.11) 1px,
      rgba(0, 0, 0, 0) 1px,
      rgba(0, 0, 0, 0) 2px
    );
}



/* CRT scanlines effect - placed after barrel distortion */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
  background-size: 100% 3px;
  pointer-events: none;
  z-index: 1002;
  animation: scanline 10s linear infinite;
  opacity: 0.8;
}

/* Moving scanline (the bright horizontal line) */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 183, 255, 0.2) 40%,
    rgba(0, 183, 255, 0.4) 50%,
    rgba(0, 183, 255, 0.2) 60%,
    rgba(0, 0, 0, 0) 100%
  );
  z-index: 1005;
  pointer-events: none;
  animation: scan 8s linear infinite;
}

@keyframes scan {
  0% {
    top: -5px;
  }
  75% {
    top: 100%;
  }
  100% {
    top: 100%;
  }
}

@keyframes scanline {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}

/* CRT glow effect */
.crt-glow {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 183, 255, 0.15) 0%,
    rgba(0, 183, 255, 0.05) 40%,
    rgba(0, 0, 0, 0.1) 100%
  );
  pointer-events: none;
  z-index: 1003;
  opacity: 0.8;
  animation: crt-glow 2s ease-in-out infinite alternate;
}

@keyframes crt-glow {
  from {
    opacity: 0.7;
  }
  to {
    opacity: 0.9;
  }
}

/* Links */
a {
  color: #00b7ff;
  text-decoration: none;
  border-bottom: 1px solid #00b7ff;
}

a:hover {
  color: #87ceeb;
  border-bottom: 1px dashed #87ceeb;
}

/* CRT flicker animation */
@keyframes flicker {
  0% {
    opacity: 0.97;
  }
  1% {
    opacity: 0.97;
  }
  1.1% {
    opacity: 0.93;
  }
  1.2% {
    opacity: 0.97;
  }
  1.5% {
    opacity: 0.97;
  }
  2.5% {
    opacity: 0.99;
  }
  3% {
    opacity: 0.97;
  }
  5% {
    opacity: 0.97;
  }
  5.1% {
    opacity: 0.94;
  }
  5.2% {
    opacity: 0.97;
  }
  10% {
    opacity: 0.97;
  }
  10.1% {
    opacity: 0.93;
  }
  10.2% {
    opacity: 0.97;
  }
  20% {
    opacity: 0.97;
  }
  20.1% {
    opacity: 0.93;
  }
  20.2% {
    opacity: 0.97;
  }
  30% {
    opacity: 0.97;
  }
  30.1% {
    opacity: 0.93;
  }
  30.2% {
    opacity: 0.97;
  }
  40% {
    opacity: 0.97;
  }
  40.1% {
    opacity: 0.94;
  }
  40.2% {
    opacity: 0.97;
  }
  50% {
    opacity: 0.97;
  }
  50.1% {
    opacity: 0.93;
  }
  50.2% {
    opacity: 0.97;
  }
  50.3% {
    opacity: 0.93;
  }
  50.4% {
    opacity: 0.97;
  }
  60% {
    opacity: 0.97;
  }
  60.1% {
    opacity: 0.94;
  }
  60.2% {
    opacity: 0.97;
  }
  70% {
    opacity: 0.97;
  }
  70.1% {
    opacity: 0.93;
  }
  70.2% {
    opacity: 0.97;
  }
  80% {
    opacity: 0.97;
  }
  80.1% {
    opacity: 0.94;
  }
  80.2% {
    opacity: 0.97;
  }
  90% {
    opacity: 0.97;
  }
  90.1% {
    opacity: 0.93;
  }
  90.2% {
    opacity: 0.97;
  }
  100% {
    opacity: 0.97;
  }
}

/* CRT geometric distortion effects */
@keyframes distort {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(1.005, 1.002);
  }
  50% {
    transform: scale(1, 1.005);
  }
  75% {
    transform: scale(0.998, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}



/* FIXED Navigation dropdown styles */
.nav-item {
  position: relative;
}

/* Main nav link styling */
.nav-item > a {
  display: block;
  padding: 4px 8px;
  text-decoration: none;
}

/* Position the dropdown precisely */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background-color: #121212;
  border: 1px solid #00b7ff;
  padding: 8px;
  z-index: 100;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);

  /* Initially hidden */
  display: none;
}

/* Show dropdown when hovering over the nav item or the dropdown itself */
.nav-item:hover .dropdown-menu,
.dropdown-menu:hover {
  display: block;
}

/* Style the links inside dropdown */
.dropdown-menu a {
  display: block;
  padding: 6px 8px;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.dropdown-menu a:hover {
  background-color: transparent;
  border-bottom: 1px solid #00b7ff;
  padding-left: 12px;
}

/* Code block styles */
pre {
  background-color: #1e1e1e;
  border: 1px solid #00b7ff;
  padding: 1rem;
  overflow-x: auto;
  margin: 1rem 0;
  font-family: "VT323", "Courier New", Courier, monospace !important;
}

code {
  font-family: "VT323", "Courier New", Courier, monospace !important;
}

/* Border styles */
.border-orange {
  border-color: #00b7ff !important;
}

.border-b {
  border-color: #00b7ff !important;
}

.border-t {
  border-color: #00b7ff !important;
}

.border-orange-600 {
  border-color: #00b7ff !important;
}

/* Override Tailwind font classes */
.font-sans,
.font-serif,
.prose,
.prose-lg,
.prose-xl,
.prose-2xl {
  font-family: "VT323", "Courier New", Courier, monospace !important;
}

/* Override Tailwind for all text elements */
.text-sm,
.text-base,
.text-lg,
.text-xl,
.text-2xl,
.text-3xl,
.text-4xl {
  font-family: "VT323", "Courier New", Courier, monospace !important;
}

/* ===========================================
   ADSL-STYLE CHUNKED IMAGE LOADING
   Nostalgic top-to-bottom progressive reveal
   =========================================== */

/* Initial state: image hidden via clip-path */
.adsl-load {
  clip-path: inset(0 0 100% 0);
  transition: none;
}

/* Final state after animation completes */
.adsl-load.adsl-loaded {
  clip-path: inset(0 0 0 0);
}