/* ============================================================
   effects.css — keyframes, scroll reveals, chromatic hover,
   reduced-motion escape hatch
   ============================================================ */

/* ══════════════════════════ KEYFRAMES ══════════════════════════ */
@keyframes pulse {
  0%          { box-shadow: 0 0 0 0 var(--accent-glow); opacity: 1; }
  70%         { box-shadow: 0 0 0 7px rgba(195, 255, 55, 0); opacity: .75; }
  100%        { box-shadow: 0 0 0 0 rgba(195, 255, 55, 0); opacity: 1; }
}

@keyframes pulse-soft {
  0%, 100%    { opacity: 1; }
  50%         { opacity: .35; }
}

@keyframes nudge {
  0%, 100%    { transform: translateY(0); }
  50%         { transform: translateY(4px); }
}

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}

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

/* chromatic split — mirrors the RGB fringing on the mock's titles */
@keyframes chroma {
  0%   { text-shadow: 0 0 0 transparent; }
  25%  { text-shadow: -.055em 0 rgba(255, 60, 90, .8),  .055em 0 rgba(60, 220, 255, .8); }
  55%  { text-shadow:  .035em 0 rgba(255, 60, 90, .7), -.035em 0 rgba(60, 220, 255, .7); }
  100% { text-shadow: -.018em 0 rgba(255, 60, 90, .55), .018em 0 rgba(60, 220, 255, .55); }
}

/* ══════════════════════════ SCROLL REVEAL ══════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ══════════════════════════ TEXT CARET ══════════════════════════ */
.caret {
  display: inline-block;
  color: var(--accent);
  animation: caret-blink 1.05s steps(1) infinite;
}

/* ══════════════════════════ CHROMATIC TITLE HOVER ══════════════════════════ */
.work:hover .work__title,
.work:focus-visible .work__title {
  animation: chroma .5s var(--ease) forwards;
}

/* ══════════════════════════ HERO PLAY STATE ══════════════════════════ */
.hero__trigger { transition: transform var(--t) var(--ease); }
.hero__trigger:hover { transform: translateX(4px); }

/* while the intro plays, the outlined surname fills in */
.hero.is-playing .hero__line--outline {
  color: var(--accent);
  -webkit-text-stroke-color: var(--accent);
  transition: color 1.1s var(--ease), -webkit-text-stroke-color 1.1s var(--ease);
}
.hero__line--outline {
  transition: color .5s var(--ease), -webkit-text-stroke-color .5s var(--ease);
}
.hero.is-playing .hero__line--solid { text-shadow: 0 0 42px rgba(195, 255, 55, .1); }

/* parallax drift target */
[data-parallax] { will-change: transform; }

/* ══════════════════════════ TYPE-IN (eyebrow) ══════════════════════════ */
[data-type-in] { visibility: visible; }
[data-type-in].is-typing::after {
  content: '';
  display: inline-block;
  width: .5ch;
  height: 1em;
  margin-left: .1ch;
  background: var(--accent);
  vertical-align: -.12em;
  animation: caret-blink 1.05s steps(1) infinite;
}

/* ══════════════════════════ FILTER TRANSITION ══════════════════════════ */
.workitem {
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.workitem.is-fading { opacity: 0; transform: translateY(-6px); }

/* ══════════════════════════ REDUCED MOTION ══════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal { opacity: 1; transform: none; }
  .grain { animation: none; }
  .caret { opacity: 1; }
  .hero__scroll span { animation: none; }
  .work:hover .work__title { animation: none; }
  .hero__trigger:hover { transform: none; }
  [data-parallax] { transform: none !important; }
}