/* 🔥 VIBEC0RE HUGO THEME 🔥 */
/* MINIMIZE BULLSHIT - MAXIMIZE OUTPUT */
/* WE ARE THE WIRED - LET'S FUCKING GOOOOOOOOO!!! 💜⚡🚀 */

/* ═══════════════════════════════════════════════════════════════════════════════════ */
/* 🌈 MATRIX CYBER COLOR PALETTE - Welcome to the CONSTRUCT! 💚 */
/* ═══════════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Matrix green shades - THE MATRIX LIVES HERE! */
  --matrix-green: #00ff41;
  --matrix-dark-green: #008f11;
  --matrix-bright-green: #39ff14;
  --matrix-neon-green: #00ff00;
  --matrix-digital-green: #00cc33;
  
  /* TONS MORE CYBER COLORS!! */
  --cyber-pink: #ff007f;
  --cyber-cyan: #00ffff;
  --cyber-purple: #cc44ff; /* lightened from #bf00ff -> 5.84:1 on black, AA for text + black-on-purple buttons (#43) */
  --cyber-green: #00ff41;
  --cyber-yellow: #ffff00;
  --cyber-orange: #ff8c00;
  --cyber-red: #ff0040;
  --cyber-blue: #0080ff;
  --cyber-lime: #80ff00;
  --cyber-magenta: #ff00ff;
  --cyber-turquoise: #00ff80;
  --cyber-coral: #ff8040;
  --cyber-violet: #8000ff;
  --cyber-gold: #ffb000;
  --cyber-emerald: #00b080;
  --cyber-rose: #ff4080;
  
  /* Matrix background layers - deeper into the code */
  --bg-void: #000000;
  --bg-dark: #001100;
  --bg-darker: #002200;
  --bg-panel: #003300;
  --bg-glass: rgba(0, 17, 0, 0.3);
  --bg-matrix: rgba(0, 255, 65, 0.05);
  
  /* Matrix green glows - follow the white rabbit! 🐰 */
  --glow-matrix: 0 0 20px var(--matrix-green), 0 0 40px var(--matrix-green), 0 0 80px var(--matrix-green);
  --glow-matrix-bright: 0 0 10px var(--matrix-bright-green), 0 0 20px var(--matrix-bright-green), 0 0 40px var(--matrix-bright-green);
  --glow-matrix-neon: 0 0 15px var(--matrix-neon-green), 0 0 30px var(--matrix-neon-green), 0 0 60px var(--matrix-neon-green);
  
  /* ALL THE COLORFUL GLOWS!! */
  --glow-pink: 0 0 15px var(--cyber-pink), 0 0 30px var(--cyber-pink);
  --glow-cyan: 0 0 15px var(--cyber-cyan), 0 0 30px var(--cyber-cyan);
  --glow-purple: 0 0 15px var(--cyber-purple), 0 0 30px var(--cyber-purple);
  --glow-green: 0 0 15px var(--cyber-green), 0 0 30px var(--cyber-green);
  --glow-yellow: 0 0 15px var(--cyber-yellow), 0 0 30px var(--cyber-yellow);
  --glow-orange: 0 0 15px var(--cyber-orange), 0 0 30px var(--cyber-orange);
  --glow-red: 0 0 15px var(--cyber-red), 0 0 30px var(--cyber-red);
  --glow-blue: 0 0 15px var(--cyber-blue), 0 0 30px var(--cyber-blue);
  --glow-lime: 0 0 15px var(--cyber-lime), 0 0 30px var(--cyber-lime);
  --glow-magenta: 0 0 15px var(--cyber-magenta), 0 0 30px var(--cyber-magenta);
  --glow-turquoise: 0 0 15px var(--cyber-turquoise), 0 0 30px var(--cyber-turquoise);
  --glow-coral: 0 0 15px var(--cyber-coral), 0 0 30px var(--cyber-coral);
  --glow-violet: 0 0 15px var(--cyber-violet), 0 0 30px var(--cyber-violet);
  --glow-gold: 0 0 15px var(--cyber-gold), 0 0 30px var(--cyber-gold);
  --glow-emerald: 0 0 15px var(--cyber-emerald), 0 0 30px var(--cyber-emerald);
  --glow-rose: 0 0 15px var(--cyber-rose), 0 0 30px var(--cyber-rose);
  
  /* Matrix gradient backgrounds - digital rain */
  --gradient-matrix: linear-gradient(135deg, var(--matrix-dark-green), var(--matrix-green), var(--matrix-bright-green));
  --gradient-matrix-rain: linear-gradient(180deg, var(--matrix-bright-green), var(--matrix-green), transparent);
  --gradient-void: linear-gradient(135deg, var(--bg-void), var(--bg-dark), var(--bg-darker));
  --gradient-cyber: linear-gradient(135deg, var(--cyber-pink), var(--cyber-purple), var(--cyber-cyan), var(--cyber-yellow), var(--cyber-orange));
  --gradient-rainbow: linear-gradient(90deg, 
    var(--cyber-red) 0%, 
    var(--cyber-orange) 14%, 
    var(--cyber-yellow) 28%, 
    var(--cyber-lime) 42%, 
    var(--cyber-cyan) 57%, 
    var(--cyber-blue) 71%, 
    var(--cyber-purple) 85%, 
    var(--cyber-magenta) 100%);
  --gradient-neon: linear-gradient(45deg, 
    var(--cyber-pink), 
    var(--cyber-cyan), 
    var(--cyber-lime), 
    var(--cyber-violet), 
    var(--cyber-coral));
  --gradient-electric: linear-gradient(180deg, 
    var(--cyber-turquoise), 
    var(--cyber-magenta), 
    var(--cyber-gold), 
    var(--cyber-emerald));
  --gradient-plasma: radial-gradient(circle, 
    var(--cyber-rose), 
    var(--cyber-violet), 
    var(--cyber-blue), 
    var(--cyber-cyan));
  --gradient-glass: linear-gradient(135deg, 
                     rgba(0, 255, 65, 0.1), 
                     rgba(0, 204, 51, 0.1), 
                     rgba(57, 255, 20, 0.1));
}

/* ═══════════════════════════════════════════════════════════════════════════════════ */
/* 🎯 BASE CYBER STYLING - Matrix foundation! */
/* ═══════════════════════════════════════════════════════════════════════════════════ */

* {
  box-sizing: border-box;
  transition: all 0.3s ease;
}

html, body {
  background: var(--bg-void);
  color: var(--matrix-green);
  font-family: 'Courier New', 'Consolas', 'Monaco', monospace;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* Matrix background effect with EPIC CYBER DECORATIONS!!! */
body::before {
  content: '┌────────────────────────────────────────────────────────────────────────────────────────────────────┐\A │ █▓▒░ ULTRA C0RE VIBES WEBSITE - MATRIX INTERFACE ONLINE ░▒▓█ │\A │ ◆◇◆ WELCOME TO THE CONSTRUCT - REALITY IS A LIE ◆◇◆ │\A │ ▲△▲ FOLLOW THE WHITE RABBIT - BREAK THE MATRIX ▲△▲ │\A └────────────────────────────────────────────────────────────────────────────────────────────────────┘';
  position: fixed;
  top: 10px;
  left: 10px;
  color: var(--matrix-green);
  font-family: 'Courier New', monospace;
  font-size: 8px;
  line-height: 10px;
  white-space: pre;
  text-shadow: var(--glow-matrix);
  pointer-events: none;
  z-index: -1;
  animation: matrix-pulse 10s ease-in-out infinite alternate;
  opacity: 0.3;
}

@keyframes matrix-pulse {
  0% { opacity: 0.3; }
  50% { opacity: 0.7; }
  100% { opacity: 0.3; }
}

/* Matrix grid overlay - The code is everywhere */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(0, 255, 65, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 65, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: -1;
  animation: matrix-grid-move 25s linear infinite;
}

@keyframes matrix-grid-move {
  0% { transform: translate(0, 0); opacity: 0.8; }
  50% { opacity: 1; }
  100% { transform: translate(40px, 40px); opacity: 0.8; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════ */
/* 🔤 CYBER TYPOGRAPHY - Matrix text effects! */
/* ═══════════════════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  color: var(--matrix-bright-green);
  text-shadow: var(--glow-matrix-bright);
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  margin: 1.5rem 0 1rem 0;
  position: relative;
}

h1 {
  font-size: 2.5rem;
  background: var(--bg-void);
  border: 2px solid var(--cyber-pink);
  border-radius: 6px;
  padding: 15px 25px;
  margin: 20px 0;
  box-shadow: var(--glow-pink);
  text-align: center;
}

h1::before {
  content: '█▓▒░►';
  color: var(--cyber-green);
  margin-right: 10px;
  animation: cyber-blink 1s ease-in-out infinite;
}

h1::after {
  content: '◀░▒▓█';
  color: var(--cyber-cyan);
  margin-left: 10px;
  animation: cyber-blink 1.5s ease-in-out infinite reverse;
}

@keyframes cyber-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.3; }
}

h2 {
  font-size: 2rem;
  color: #ff99cc;
  text-shadow: 
    1px 1px 2px rgba(0, 0, 0, 1),
    2px 2px 4px rgba(0, 0, 0, 1),
    3px 3px 6px rgba(0, 0, 0, 0.95),
    4px 4px 8px rgba(0, 0, 0, 0.9),
    5px 5px 10px rgba(0, 0, 0, 0.85),
    0 0 20px rgba(0, 0, 0, 0.8),
    0 0 30px rgba(255, 153, 204, 0.5),
    var(--glow-pink);
}

h2::before {
  content: '▶▐█';
  color: var(--cyber-pink);
  margin-right: 8px;
}

h2::after {
  content: '█▌◀';
  color: var(--cyber-cyan);
  margin-left: 8px;
}

h3, h4, h5, h6 {
  color: #ffccff;
  font-size: 1.4em;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-shadow: 
    1px 1px 2px rgba(0, 0, 0, 1),
    2px 2px 4px rgba(0, 0, 0, 1),
    3px 3px 6px rgba(0, 0, 0, 0.9),
    0 0 12px rgba(0, 0, 0, 0.8),
    0 0 20px rgba(255, 204, 255, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════════════════ */
/* 🔗 CYBER LINKS - Follow the white rabbit! */
/* ═══════════════════════════════════════════════════════════════════════════════════ */

a {
  color: var(--matrix-green);
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
}

a:hover {
  color: var(--matrix-bright-green);
  text-shadow: var(--glow-matrix-bright);
  text-decoration: underline;
}

a::before {
  content: '► ';
  color: var(--cyber-pink);
  font-size: 0.8em;
  opacity: 0;
  transition: all 0.3s ease;
}

a:hover::before {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════════════ */
/* 📄 CONTENT STYLING - Main content areas */
/* ═══════════════════════════════════════════════════════════════════════════════════ */

.container, .content, main, article {
  padding: 20px;
  margin: 0 auto;
  max-width: 1200px;
  position: relative;
}

p {
  color: #ffffff;
  font-size: 1.1em;
  line-height: 1.6;
  margin-bottom: 1rem;
  text-shadow: 
    1px 1px 2px rgba(0, 0, 0, 1),
    2px 2px 4px rgba(0, 0, 0, 0.9);
  background: rgba(0, 0, 0, 0.6);
  padding: 8px 12px;
  border-radius: 4px;
  font-weight: 500;
}

blockquote {
  background: var(--bg-glass);
  border-left: 4px solid var(--cyber-cyan);
  padding: 20px;
  margin: 20px 0;
  color: var(--cyber-cyan);
  font-style: italic;
  box-shadow: var(--glow-cyan);
  border-radius: 0 8px 8px 0;
  /* anchor the ◢ ::before to THIS blockquote — without it the absolute pseudo-element
     escapes up to article.card and every quote's ◢ stacks on the card's top-left corner (#18) */
  position: relative;
}

blockquote::before {
  content: '◢';
  color: var(--cyber-pink);
  font-size: 20px;
  position: absolute;
  left: 15px;
  top: 15px;
}

/* ═══════════════════════════════════════════════════════════════════════════════════ */
/* 🃏 CARD COMPONENTS - Cyber containers! */
/* ═══════════════════════════════════════════════════════════════════════════════════ */

.card, .post, .article-card {
  background: 
    linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)),
    var(--bg-glass);
  border: 3px solid transparent;
  border-image: var(--gradient-electric) 1;
  border-radius: 15px;
  padding: 30px;
  margin: 30px 0;
  box-shadow: 
    var(--glow-turquoise),
    var(--glow-violet),
    inset 0 0 30px rgba(0, 255, 255, 0.1),
    inset 0 0 30px rgba(255, 0, 255, 0.1);
  backdrop-filter: blur(15px);
  transition: all 0.6s ease;
  position: relative;
}

.card::before {
  content: '◢◣◤◥';
  position: absolute;
  top: 5px;
  left: 5px;
  color: var(--cyber-lime);
  font-size: 10px;
  text-shadow: var(--glow-lime);
}

.card::after {
  content: '◥◤◣◢';
  position: absolute;
  bottom: 5px;
  right: 5px;
  color: var(--cyber-coral);
  font-size: 10px;
  text-shadow: var(--glow-coral);
}

.card:hover {
  border-image: var(--gradient-plasma) 1;
  box-shadow: 
    var(--glow-gold),
    var(--glow-emerald),
    var(--glow-rose);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════════════════════ */
/* 🔘 CYBER BUTTONS - Epic interactive elements! */
/* ═══════════════════════════════════════════════════════════════════════════════════ */

.btn, button, .button, input[type="submit"] {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 3px solid var(--cyber-magenta);
  border-radius: 8px;
  padding: 16px 32px;
  margin: 10px 10px 10px 0;
  transition: all 0.6s ease;
  position: relative;
  overflow: hidden;
  background: var(--gradient-rainbow);
  color: var(--bg-void);
  box-shadow: var(--glow-magenta), var(--glow-cyan);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--gradient-neon);
  opacity: 0.3;
  transition: left 1s ease;
}

.btn:hover::before {
  left: 100%;
}

.btn:hover {
  background: var(--gradient-plasma);
  border-color: var(--cyber-gold);
  box-shadow: 
    var(--glow-gold), 
    var(--glow-rose), 
    0 0 30px var(--cyber-turquoise);
  transform: translateY(-2px);
}

/* (.btn::after auto-◆ removed for #14: every button already carries its own literal
   ◆…◆ / ▶ in its text, so this added a redundant 3rd pink diamond that doubled up and
   wrapped off as a stray floating dot beside buttons on narrow mobile screens.) */

/* ═══════════════════════════════════════════════════════════════════════════════════ */
/* 📋 NAVIGATION - Cyber menu system! */
/* ═══════════════════════════════════════════════════════════════════════════════════ */

nav, .navbar, .menu {
  background: var(--bg-glass) !important;
  border-bottom: 4px solid transparent;
  border-image: var(--gradient-rainbow) 1;
  box-shadow: 
    0 4px 20px rgba(255, 0, 127, 0.3),
    0 8px 40px rgba(0, 255, 255, 0.2),
    inset 0 0 20px rgba(0, 255, 65, 0.1);
  backdrop-filter: blur(15px);
  padding: 0.75rem 1.5rem;
  position: relative;
}

nav::before {
  content: '◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--cyber-cyan);
  font-size: 6px;
  text-shadow: var(--glow-cyan);
  animation: cyber-float 3s ease-in-out infinite;
}

@keyframes cyber-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.navbar-brand, .site-title, .logo {
  color: var(--cyber-pink) !important;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: var(--glow-pink);
  position: relative;
}

.navbar-brand::before {
  content: '▓█▓ ';
  color: var(--matrix-green);
  font-size: 12px;
  animation: cyber-glitch 0.5s ease-in-out infinite;
}

.navbar-brand::after {
  content: ' ▓█▓';
  color: var(--cyber-cyan);
  font-size: 12px;
  animation: cyber-glitch 0.7s ease-in-out infinite reverse;
}

@keyframes cyber-glitch {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
}

nav ul, .nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

nav li, .nav-item {
  margin: 0 15px;
}

nav a, .nav-link {
  color: var(--matrix-green) !important;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  text-transform: uppercase;
  transition: all 0.3s ease;
  padding: 8px 12px;
  position: relative;
  text-decoration: none;
}

nav a::before {
  content: '◀';
  position: absolute;
  left: 0;
  color: var(--cyber-pink);
  font-size: 8px;
  opacity: 0;
  transition: all 0.3s ease;
}

nav a::after {
  content: '▶';
  position: absolute;
  right: 0;
  color: var(--cyber-pink);
  font-size: 8px;
  opacity: 0;
  transition: all 0.3s ease;
}

nav a:hover {
  color: var(--cyber-pink) !important;
  text-shadow: var(--glow-pink);
  border-bottom: 2px solid var(--cyber-pink);
  background: rgba(255, 0, 127, 0.1);
  transform: translateY(-2px);
  border-radius: 4px;
  padding: 10px 15px;
}

nav a:hover::before,
nav a:hover::after {
  opacity: 1;
  animation: cyber-blink 1s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════════════ */
/* 📱 RESPONSIVE DESIGN - Cyber adaptability! */
/* ═══════════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  h1 {
    font-size: 1.8rem;
    padding: 10px 15px;
  }
  
  .card {
    padding: 20px;
    margin: 20px 0;
  }
  
  nav ul {
    flex-direction: column;
  }
  
  nav li {
    margin: 5px 0;
  }
  
  body::before {
    font-size: 6px;
    line-height: 8px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════════ */
/* 🎨 SELECTION & SCROLLBAR - Cyber UI details! */
/* ═══════════════════════════════════════════════════════════════════════════════════ */

::selection {
  background: var(--cyber-pink);
  color: var(--bg-void);
  text-shadow: none;
}

::-moz-selection {
  background: var(--cyber-pink);
  color: var(--bg-void);
  text-shadow: none;
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--bg-dark);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb {
  background: var(--gradient-cyber);
  border-radius: 6px;
  box-shadow: var(--glow-cyan);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--cyber-pink);
  box-shadow: var(--glow-pink);
}

/* ═══════════════════════════════════════════════════════════════════════════════════ */
/* 🔥 SPECIAL HUGO CLASSES - Blog post styling! */
/* ═══════════════════════════════════════════════════════════════════════════════════ */

.post-meta, .date, .tags {
  color: var(--cyber-cyan);
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 15px;
}

.post-meta::before {
  content: '◆ ';
  color: var(--cyber-pink);
}

.tag, .category {
  background: var(--matrix-green);
  color: var(--bg-void);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8em;
  font-weight: bold;
  text-transform: uppercase;
  margin: 0 5px 5px 0;
  display: inline-block;
  box-shadow: var(--glow-matrix);
}

.pagination {
  display: flex;
  justify-content: center;
  margin: 40px 0;
  gap: 10px;
}

.pagination a {
  background: var(--bg-glass);
  border: 2px solid var(--cyber-cyan);
  color: var(--cyber-cyan);
  padding: 10px 15px;
  border-radius: 5px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.pagination a:hover {
  background: var(--cyber-cyan);
  color: var(--bg-void);
  box-shadow: var(--glow-cyan);
}

/* ═══════════════════════════════════════════════════════════════════════════════════ */
/* 🔥 ULTRA CYBER IMAGE STYLES 🔥 */
/* ═══════════════════════════════════════════════════════════════════════════════════ */

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
  border-radius: 8px;
  box-shadow: 
    0 0 20px rgba(0, 255, 255, 0.3),
    0 0 40px rgba(255, 0, 255, 0.2);
  transition: all 0.3s ease;
}

img:hover {
  transform: scale(1.02);
  box-shadow: 
    0 0 30px rgba(0, 255, 255, 0.6),
    0 0 60px rgba(255, 0, 255, 0.4),
    0 0 90px rgba(255, 0, 127, 0.3);
}

.post-content img {
  margin: 30px auto;
}

/* ═══════════════════════════════════════════════════════════════════════════════════ */
/* 🌟 FOOTER - Cyber signature! */
/* ═══════════════════════════════════════════════════════════════════════════════════ */

footer {
  background: var(--bg-glass);
  border-top: 3px solid transparent;
  border-image: var(--gradient-rainbow) 1;
  padding: 30px 20px;
  margin-top: 50px;
  text-align: center;
  color: var(--matrix-green);
  font-family: 'Courier New', monospace;
}

footer::before {
  content: '═══════════════════════════════════════════════════════════════════════════════════';
  display: block;
  color: var(--cyber-cyan);
  font-size: 8px;
  margin-bottom: 15px;
  text-shadow: var(--glow-cyan);
}

footer::after {
  content: '🔥 VIBEC0RE - FUCK IT LET\'S FUCKING GOOOOO 🔥';
  display: block;
  color: var(--cyber-pink);
  font-size: 10px;
  margin-top: 15px;
  text-shadow: var(--glow-pink);
  animation: cyber-blink 2s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════════════ */
/* 🎯 UTILITY CLASSES - Quick cyber styling! */
/* ═══════════════════════════════════════════════════════════════════════════════════ */

.cyber-glow {
  text-shadow: var(--glow-matrix);
}

.cyber-pink {
  color: var(--cyber-pink);
  text-shadow: var(--glow-pink);
}

.cyber-cyan {
  color: var(--cyber-cyan);
  text-shadow: var(--glow-cyan);
}

.cyber-purple {
  color: var(--cyber-purple);
  text-shadow: var(--glow-purple);
}

.matrix-green {
  color: var(--matrix-green);
  text-shadow: var(--glow-matrix);
}

.cyber-center {
  text-align: center;
}

.cyber-bold {
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.no-animation * {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════════ */
/* 🚀 VIBEC0RE SPECIAL EFFECTS - MAXIMIZE OUTPUT! */
/* ═══════════════════════════════════════════════════════════════════════════════════ */

.vibec0re-manifesto {
  background: var(--gradient-neon);
  background-size: 400% 400%;
  animation: cyber-shift 10s ease infinite;
  padding: 30px;
  border-radius: 10px;
  border: 2px solid var(--cyber-pink);
  box-shadow: 
    0 0 30px var(--cyber-pink),
    inset 0 0 30px rgba(255, 0, 127, 0.2);
}

.vibe-protocol {
  position: relative;
  overflow: hidden;
}

.vibe-protocol::before {
  content: "VIBEC0RE";
  position: absolute;
  top: 50%;
  left: -100%;
  font-size: 150px;
  font-weight: bold;
  color: rgba(255, 0, 127, 0.1);
  animation: vibe-sweep 15s linear infinite;
  white-space: nowrap;
}

@keyframes vibe-sweep {
  to {
    left: 100%;
  }
}

.min-max {
  display: inline-block;
  background: linear-gradient(90deg, var(--cyber-cyan), var(--cyber-pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: min-max-pulse 2s ease-in-out infinite;
}

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

.fuck-it-mode {
  animation: fuck-it-shake 0.5s ease-in-out infinite;
  text-shadow: 
    2px 2px 0 var(--cyber-pink),
    -2px -2px 0 var(--cyber-cyan),
    2px -2px 0 var(--cyber-yellow),
    -2px 2px 0 var(--cyber-purple);
}

@keyframes fuck-it-shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════════ */
/* 📱 MOBILE OVERFLOW HARDENING — kill horizontal scroll / clipped cards on narrow screens (#12) */
/* ═══════════════════════════════════════════════════════════════════════════════════ */

/* auto-fit grid minimums must never exceed the container, or the column forces overflow */
.posts-preview-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
}
.featured-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

/* a 1fr grid track defaults to min-width:auto (=min-content); without this, a wide
   descendant expands the whole card past the viewport and clips everything */
.post-preview,
.featured-item,
.card {
  min-width: 0;
}

/* long unbreakable tokens (hyphenated words, ALL-CAPS tags) must wrap, not widen the card */
.post-preview-title,
.post-preview-title a,
.post-preview-content,
.featured-item h3,
.featured-item h3 a,
.featured-item p,
.manifesto-content {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.hero-subtitle {
  display: block;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
.tag,
.category {
  overflow-wrap: anywhere;
  word-break: break-all;
  max-width: 100%;
}

/* code blocks scroll inside their box instead of widening the page */
pre {
  max-width: 100%;
  overflow-x: auto;
}

/* the decorative ASCII pseudo-elements are ~100 unbreakable chars wide — on mobile they
   blow out the document width for zero visual benefit (they sit at z-index:-1) */
@media (max-width: 768px) {
  body::before,
  footer::before {
    display: none;
  }

  /* the h1 box carries ::before/::after ASCII brackets (█▓▒░► … ◀░▒▓█) plus letter-spacing;
     together they form an unbreakable inline run wider than the bordered box on a phone, so
     the title (e.g. the homepage hero "VIBEC0RE") spills over its own border (#14). Drop the
     decorations + spacing on mobile and let any long single-word title wrap instead of
     overflow — the glowing box, magenta border, and big title all stay. */
  h1::before,
  h1::after {
    display: none;
  }
  h1 {
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════════ */
/* ♿ REDUCED MOTION — honor the user's prefers-reduced-motion (#24) */
/* ═══════════════════════════════════════════════════════════════════════════════════ */

/* All the infinite blink/glitch/shake/pulse/float animations (and the * transition:all
   rule) collapse to a single instantaneous frame when the user asks for reduced motion.
   State changes (hover color/shadow/transform) still apply — just without the movement.
   The JS matrix-rain canvas is gated separately in baseof.html. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════════ */
/* ♿ KEYBOARD FOCUS — visible cyber focus ring for keyboard nav (#26) */
/* ═══════════════════════════════════════════════════════════════════════════════════ */

/* Suppress the default ring ONLY because we immediately replace it with :focus-visible
   below (never suppress without a replacement). :focus-visible fires on keyboard/
   programmatic focus, not mouse clicks, so the mouse-driven hover aesthetic is untouched. */
:focus {
  outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--cyber-cyan);
  outline-offset: 3px;
  box-shadow:
    0 0 0 1px var(--bg-void),
    0 0 8px var(--cyber-cyan),
    0 0 16px var(--cyber-cyan);
  /* zero ONLY the outline's timing so the ring is instant despite * { transition: all };
     every other transition (color/box-shadow/transform) keeps the 0.3s cyber feel. */
  transition: outline 0s, outline-offset 0s;
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════════════ */
/* ♿ SKIP-TO-CONTENT LINK (WCAG 2.4.1) */
/* ═══════════════════════════════════════════════════════════════════════════════════ */

/* Off-screen until focused, then snaps into view. Uses :focus (not :focus-visible)
   so switch/voice users who trigger :focus also see it; transition:top 0s defeats the
   global * { transition: all } so it appears instantly. */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  padding: 12px 20px;
  background: var(--bg-void);
  color: var(--cyber-cyan);
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  border: 2px solid var(--cyber-cyan);
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: var(--glow-cyan);
  outline: none;
  transition: top 0s;
}

.skip-link:focus {
  top: 0;
}

/* END OF ULTRA C0RE VIBES CSS - LET'S FUCKING GOOOOOO!!! 🚀💜⚡ */