/* ═══════════════════════════════════════════════════════
   animations.css — terminal aesthetics, modern motion
   ═══════════════════════════════════════════════════════ */

/* ── Dot grid placeholder removed — hero now uses background image ── */

/* ── CRT scanlines ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 3px,
    rgba(0, 0, 0, 0.035) 3px,
    rgba(0, 0, 0, 0.035) 4px
  );
  pointer-events: none;
  z-index: 9000;
}

/* ── Vignette ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 55%,
    rgba(0, 0, 0, 0.5) 100%
  );
  pointer-events: none;
  z-index: 9001;
}

/* ── Phosphor glow on site title ── */
.site-title a {
  position: relative;
  display: inline-block;
  text-shadow: 0 0 18px rgba(172, 190, 255, 0.25);
  transition: text-shadow 0.3s ease, opacity 0.2s;
}

.site-title a:hover {
  opacity: 1 !important;
  text-shadow: 0 0 30px rgba(172, 190, 255, 0.55);
}

/* ── Glitch effect on title hover ── */
.site-title a::before,
.site-title a::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: inherit;
  opacity: 0;
  pointer-events: none;
}

.site-title a:hover::before,
.site-title a.glitch::before {
  opacity: 0.8;
  color: #ff2d78;
  clip-path: polygon(0 10%, 100% 10%, 100% 42%, 0 42%);
  animation: glitch-a 0.38s steps(3, end) both;
}

.site-title a:hover::after,
.site-title a.glitch::after {
  opacity: 0.8;
  color: #00e0ff;
  clip-path: polygon(0 60%, 100% 60%, 100% 90%, 0 90%);
  animation: glitch-b 0.38s steps(3, end) both;
}

@keyframes glitch-a {
  0%   { transform: translateX(-4px) skewX(1deg); }
  30%  { transform: translateX(3px); }
  60%  { transform: translateX(-2px) skewX(-0.5deg); }
  100% { transform: translateX(0); opacity: 0; }
}

@keyframes glitch-b {
  0%   { transform: translateX(4px) skewX(-1deg); }
  30%  { transform: translateX(-3px); }
  60%  { transform: translateX(2px) skewX(0.5deg); }
  100% { transform: translateX(0); opacity: 0; }
}

/* ── ASCII scrolling belt ── */
.ascii-belt-track {
  display: flex;
  white-space: nowrap;
  animation: belt-scroll 32s linear infinite;
}

.ascii-belt-text {
  flex-shrink: 0;
  white-space: nowrap;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
}

@keyframes belt-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Glitch flash on the belt */
.ascii-belt {
  overflow: hidden;
  animation: belt-glitch 8s steps(1) infinite;
}

@keyframes belt-glitch {
  0%, 87%  { filter: none; }
  88%      { filter: drop-shadow(4px 0 0 #ff2d78) drop-shadow(-4px 0 0 #00e0ff); opacity: 1; }
  89%      { filter: none; transform: skewX(0.4deg); }
  90%      { filter: drop-shadow(-3px 0 0 #ff2d78); transform: none; }
  91%, 100%{ filter: none; }
}

/* ── Typewriter cursor ── */
.tw-cursor {
  display: inline-block;
  width: 2px;
  height: 0.85em;
  background: var(--accent);
  margin-left: 3px;
  vertical-align: -0.05em;
  animation: cur-blink 1s step-end infinite;
}

@keyframes cur-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Blinking _ on active nav link ── */
nav a.active::after {
  content: '_';
  margin-left: 1px;
  animation: cur-blink 1s step-end infinite;
}


/* ── Terminal prompt prefix on section headers ── */
.section-header h2::before {
  content: '> ';
  opacity: 0.4;
  color: var(--ink-dim);
}

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity  0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger for featured cards */
.featured-grid .featured-card.reveal:nth-child(2) { transition-delay: 0.09s; }
.featured-grid .featured-card.reveal:nth-child(3) { transition-delay: 0.18s; }
.featured-grid .featured-card.reveal:nth-child(4) { transition-delay: 0.27s; }
.featured-grid .featured-card.reveal:nth-child(5) { transition-delay: 0.36s; }

/* Stagger for post cards */
.posts-list .post-card.reveal:nth-child(2) { transition-delay: 0.1s; }
.posts-list .post-card.reveal:nth-child(3) { transition-delay: 0.2s; }

/* ── Enhanced glow on card hover ── */
.featured-card:hover {
  box-shadow:
    0 0 0 1px rgba(172, 190, 255, 0.25),
    0 12px 36px rgba(0, 0, 0, 0.55);
}

.post-card:hover {
  box-shadow:
    0 0 0 1px rgba(172, 190, 255, 0.18),
    0 8px 28px rgba(0, 0, 0, 0.45);
}

/* ── Work showcase reveal ── */
.work-showcase.reveal {
  transition-delay: 0.05s;
}

/* ═══════════════════════════════════════════════
   PAGE GLITCH — full-screen distortion effect
   ═══════════════════════════════════════════════ */

/* Filter chaos on html element */
@keyframes page-glitch-filter {
  0%   { filter: none; }
  8%   { filter: hue-rotate(90deg) saturate(5) brightness(1.4); }
  16%  { filter: hue-rotate(-90deg) contrast(2.5) brightness(0.8); }
  24%  { filter: saturate(0) brightness(0.5); }
  32%  { filter: hue-rotate(180deg) saturate(4) brightness(1.2); }
  40%  { filter: none; }
  58%  { filter: none; }
  64%  { filter: hue-rotate(45deg) contrast(2) brightness(1.3); }
  72%  { filter: hue-rotate(-45deg) saturate(3); }
  80%  { filter: none; }
  100% { filter: none; }
}

html.page-glitch {
  animation: page-glitch-filter 0.65s steps(1, end) forwards;
}

/* Color channel split overlay */
.glitch-vfx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9500;
  overflow: hidden;
}

.glitch-vfx::before,
.glitch-vfx::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  mix-blend-mode: screen;
}

@keyframes vfx-red {
  0%   { opacity: 0; }
  8%   { opacity: 1; background: rgba(255,20,80,0.4);  clip-path: inset(12% 0 58% 0); transform: translateX(12px); }
  16%  { opacity: 1; background: rgba(255,20,80,0.4);  clip-path: inset(62% 0 6%  0); transform: translateX(-12px); }
  24%  { opacity: 1; background: rgba(255,20,80,0.3);  clip-path: inset(32% 0 28% 0); transform: translateX(7px); }
  32%  { opacity: 0; }
  58%  { opacity: 0; }
  64%  { opacity: 1; background: rgba(255,20,80,0.35); clip-path: inset(4%  0 72% 0); transform: translateX(-9px); }
  72%  { opacity: 1; background: rgba(255,20,80,0.35); clip-path: inset(74% 0 4%  0); transform: translateX(9px); }
  80%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes vfx-cyan {
  0%   { opacity: 0; }
  8%   { opacity: 1; background: rgba(0,220,255,0.4);  clip-path: inset(12% 0 58% 0); transform: translateX(-12px); }
  16%  { opacity: 1; background: rgba(0,220,255,0.4);  clip-path: inset(62% 0 6%  0); transform: translateX(12px); }
  24%  { opacity: 1; background: rgba(0,220,255,0.3);  clip-path: inset(32% 0 28% 0); transform: translateX(-7px); }
  32%  { opacity: 0; }
  58%  { opacity: 0; }
  64%  { opacity: 1; background: rgba(0,220,255,0.35); clip-path: inset(4%  0 72% 0); transform: translateX(9px); }
  72%  { opacity: 1; background: rgba(0,220,255,0.35); clip-path: inset(74% 0 4%  0); transform: translateX(-9px); }
  80%  { opacity: 0; }
  100% { opacity: 0; }
}

.glitch-vfx.active::before {
  animation: vfx-red  0.65s steps(1, end) forwards;
}
.glitch-vfx.active::after {
  animation: vfx-cyan 0.65s steps(1, end) forwards;
}

/* ── Reduce motion ── */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .site-title a::before,
  .site-title a::after {
    display: none;
  }

  .tw-cursor {
    animation: none;
    opacity: 1;
  }

  html.page-glitch {
    animation: none;
  }

  .glitch-vfx {
    display: none;
  }
}