/* ============================================================
   rock different, babe 🤘 — animations (V2)
   Every animation lives inside prefers-reduced-motion: no-preference.
   If someone asks for calm, they get calm.
   ============================================================ */

/* Scroll-reveal base state applies only when JS is running (html.js)
   so content is never hidden without the observer to reveal it. */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  html.js .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* ---------- Hero: CRT terminal ---------- */
  .hero-terminal::after {
    content: "";
    position: absolute;
    inset: -0.5rem;
    pointer-events: none;
    background: repeating-linear-gradient(
      to bottom,
      rgba(0, 255, 65, 0.03) 0px,
      rgba(0, 255, 65, 0.03) 1px,
      transparent 1px,
      transparent 3px
    );
  }
  .hero-terminal span {
    animation: crt-flicker 4s infinite;
  }
  @keyframes crt-flicker {
    0%, 100% { opacity: 1; }
    92% { opacity: 1; }
    93% { opacity: 0.82; }
    94% { opacity: 1; }
    97% { opacity: 0.94; }
    98% { opacity: 1; }
  }

  /* ---------- Hero: headline glitch on hover ---------- */
  .hero h1:hover {
    animation: glitch 0.3s ease;
  }
  @keyframes glitch {
    0% { transform: skewX(0); text-shadow: none; }
    25% { transform: skewX(-2deg); text-shadow: -3px 0 var(--pink), 3px 0 var(--green); }
    50% { transform: skewX(1.5deg); text-shadow: 3px 0 var(--orange), -3px 0 var(--pink); }
    75% { transform: skewX(-0.8deg); text-shadow: -2px 0 var(--green), 2px 0 var(--orange); }
    100% { transform: skewX(0); text-shadow: none; }
  }

  /* ---------- Hero: the sacred sign rocks ---------- */
  .emoji-hero {
    animation: rock-sign 3.5s ease-in-out infinite;
    transform-origin: 50% 80%;
  }
  @keyframes rock-sign {
    0%, 100% { transform: rotate(-3.5deg); }
    50% { transform: rotate(3.5deg); }
  }

  /* ---------- Story card border pulse (once, not looped) ---------- */
  .story-card:hover {
    animation: border-pulse 0.6s ease 1;
  }
  @keyframes border-pulse {
    0% { border-color: var(--line); }
    40% { border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink); }
    100% { border-color: var(--pink); box-shadow: none; }
  }

  /* ---------- Featured image grain drift ---------- */
  .featured-image::before {
    content: "";
    position: absolute;
    inset: -50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.14'/%3E%3C/svg%3E");
    animation: grain-drift 9s linear infinite;
  }
  @keyframes grain-drift {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-4%, 3%); }
    50% { transform: translate(3%, -4%); }
    75% { transform: translate(-2%, -2%); }
    100% { transform: translate(0, 0); }
  }

  /* ---------- Blinking cursor ---------- */
  .cursor-blink {
    animation: blink 1s steps(1) infinite;
  }
  @keyframes blink {
    50% { opacity: 0; }
  }

  /* ---------- 404 slow rock ---------- */
  .emoji-404 {
    animation: rock-sign 5s ease-in-out infinite;
    transform-origin: 50% 80%;
  }

  /* ---------- Podcast waveform wave on hover ---------- */
  .episode-card:hover .waveform rect {
    animation: wave 1.1s ease-in-out infinite;
  }
  .waveform rect:nth-child(odd) { animation-delay: 0s; }
  .waveform rect:nth-child(even) { animation-delay: 0.28s; }
  .waveform rect:nth-child(3n) { animation-delay: 0.55s; }
  @keyframes wave {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.45); }
  }

  /* ---------- Nav logo emoji available for a little life ---------- */
  .nav-logo:hover .emoji {
    animation: rock-sign 1.2s ease-in-out infinite;
    transform-origin: 50% 80%;
  }
}

/* Fallback outside reduced-motion guard: terminal text visible if no JS/animation */
html:not(.js) .hero-terminal span { opacity: 1; }