/**
 * CRT Effects - Terminal Visual Aesthetics
 * 
 * Visual effects that create the retro CRT/terminal look:
 * - Scanlines overlay
 * - Vignette darkening
 * - Phosphor glow on text
 * - Blinking cursor
 * - Selection styling
 * 
 * @package flavor
 */

/* ==========================================================================
   CRT SCANLINES
   Fixed overlay with repeating horizontal lines.
   iOS Safari clips position:fixed to the safe area — edge fades
   (below) disguise this by darkening the top/bottom transitions.
   ========================================================================== */

#crt-scanlines {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  z-index: 1000;
}

/* ==========================================================================
   VIGNETTE EFFECT
   Radial gradient darkening the edges — classic CRT look.
   ========================================================================== */

#crt-vignette {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(0, 0, 0, 0.5) 100%
  );
  pointer-events: none;
  z-index: 999;
}

/* ==========================================================================
   EDGE FADES
   Smooth gradients at top/bottom that disguise the iOS safe area
   boundary where scanlines are clipped. Makes it look like natural
   CRT edge darkening rather than a hard cutoff.
   ========================================================================== */

#crt-fade-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(
    to bottom,
    rgba(13, 18, 13, 0.9) 0%,
    rgba(13, 18, 13, 0.5) 20%,
    rgba(13, 18, 13, 0.2) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 998;
}

#crt-fade-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(
    to top,
    rgba(13, 18, 13, 0.9) 0%,
    rgba(13, 18, 13, 0.5) 20%,
    rgba(13, 18, 13, 0.2) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 998;
}

/* ==========================================================================
   PHOSPHOR GLOW - TEXT
   Simulates the phosphor glow of CRT text with text-shadow.
   Applied to headings, links, and bright text elements.
   ========================================================================== */

/* Primary headlines - strong glow */
.wp-block-post-title,
h1,
.site-title a,
.entry-title a {
  text-shadow: 
    0 0 20px rgba(157, 255, 32, 0.4),
    0 0 40px rgba(157, 255, 32, 0.2);
}

/* Secondary headings - medium glow */
h2, h3 {
  text-shadow: 0 0 30px rgba(157, 255, 32, 0.3);
}

/* Body text - subtle glow */
p,
.wp-block-paragraph {
  text-shadow: 0 0 30px rgba(107, 140, 90, 0.2);
}

/* Links - interactive glow */
a {
  text-shadow: 0 0 10px rgba(157, 255, 32, 0.3);
  transition: text-shadow 0.2s ease;
}

a:hover,
a:focus {
  text-shadow: 0 0 15px rgba(157, 255, 32, 0.6);
}

/* ==========================================================================
   BLINKING CURSOR - AUTO-INSERTED
   Animated terminal cursor using ::after pseudo-elements.
   Automatically appears after site title and main headings.
   ========================================================================== */

/* Cursor keyframe animation */
@keyframes cursor-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Site title cursor - REMOVED per feedback */
/* Cursor is now ONLY on the .headline via .cursor class */

/* Manual cursor class - for use in content */
.cursor {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  background: var(--wp--preset--color--bright, #9DFF20);
  margin-left: 4px;
  vertical-align: text-bottom;
  animation: cursor-blink 1s step-end infinite;
  box-shadow: 0 0 10px rgba(157, 255, 32, 0.5);
}

/* ==========================================================================
   PULSE ANIMATION
   Subtle breathing effect for status indicators and accents.
   ========================================================================== */

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Status indicator dot */
.status-dot {
  width: 6px;
  height: 6px;
  background: var(--wp--preset--color--bright, #9DFF20);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(157, 255, 32, 0.6);
  animation: pulse 2s ease-in-out infinite;
}

/* ==========================================================================
   TEXT SELECTION
   Custom selection colors matching the terminal aesthetic.
   Bright green background with dark text.
   ========================================================================== */

::selection {
  background: var(--wp--preset--color--bright, #9DFF20);
  color: var(--wp--preset--color--bg, #0d120d);
}

::-moz-selection {
  background: var(--wp--preset--color--bright, #9DFF20);
  color: var(--wp--preset--color--bg, #0d120d);
}

/* ==========================================================================
   CODE BLOCKS - TERMINAL STYLE
   Phosphor glow on inline code and code blocks.
   ========================================================================== */

code,
.wp-block-code,
pre {
  text-shadow: none; /* Remove inherited glow for readability */
}

/* Inline code glow */
:not(pre) > code {
  background: rgba(157, 255, 32, 0.1);
  box-shadow: 0 0 10px rgba(157, 255, 32, 0.1);
}

/* Code block left border glow */
pre,
.wp-block-code {
  border-left: 3px solid var(--wp--preset--color--bright, #9DFF20);
  box-shadow: -3px 0 15px rgba(157, 255, 32, 0.2);
}

/* ==========================================================================
   BUTTONS & INTERACTIVE ELEMENTS
   Glow effects on hover for buttons and form elements.
   ========================================================================== */

button:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
input[type="submit"]:hover {
  box-shadow: 0 0 20px rgba(157, 255, 32, 0.5);
}

/* Form focus glow */
input:focus,
textarea:focus,
select:focus {
  box-shadow: 0 0 10px rgba(157, 255, 32, 0.2);
  outline-color: var(--wp--preset--color--bright, #9DFF20);
}

/* ==========================================================================
   ERROR STATE
   Red glow for error messages and 404 pages.
   ========================================================================== */

.error-code,
.wp-block-query-no-results {
  text-shadow: 0 0 30px rgba(255, 107, 107, 0.4);
}

/* ==========================================================================
   LISTS - DOTTED BORDERS
   Terminal-style dotted separators for list items.
   ========================================================================== */

.wp-block-latest-posts li,
.wp-block-categories li {
  border-bottom: 1px dotted var(--wp--preset--color--dim, #3d5a30);
}

.wp-block-latest-posts li:last-child,
.wp-block-categories li:last-child {
  border-bottom: none;
}

/* ==========================================================================
   BLOCKQUOTES
   Dimmed terminal style for quoted text.
   ========================================================================== */

blockquote,
.wp-block-quote {
  border-left-color: var(--wp--preset--color--dim, #3d5a30);
  text-shadow: none;
  opacity: 0.8;
}

/* ==========================================================================
   ACCESSIBILITY - REDUCED MOTION
   Disable animations for users who prefer reduced motion.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .cursor {
    animation: none;
    opacity: 1;
  }
  
  .status-dot {
    animation: none;
  }
  
  * {
    transition: none !important;
  }
}