/* ─── Synful: motion ─────────────────────────────────────────── */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--t-slow) var(--easing),
    transform var(--t-slow) var(--easing);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-delay="1"].is-visible { transition-delay: 80ms; }
[data-reveal-delay="2"].is-visible { transition-delay: 160ms; }
[data-reveal-delay="3"].is-visible { transition-delay: 240ms; }
[data-reveal-delay="4"].is-visible { transition-delay: 320ms; }

/* hero entrance — runs once on load */
.hero__mark    { animation: fadein-down 1.2s var(--easing) both; }
.hero__title   { animation: fadein-up   1.2s var(--easing) .15s both; }
.hero__tagline { animation: fadein-up   1.2s var(--easing) .35s both; }

@keyframes fadein-up   { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes fadein-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* DEADLY KILLERS accent — slow cyan pulse with a brief RGB-split glitch
   that fires for ~250ms once per cycle. Subtle, not screaming. */
.display .accent {
  animation: glitch-pulse 6s ease-in-out infinite;
  will-change: transform, text-shadow;
}
@keyframes glitch-pulse {
  0%, 100%       { text-shadow: 0 0 18px rgba(0, 229, 255, .25); transform: translate(0, 0); }
  45%            { text-shadow: 0 0 32px rgba(0, 229, 255, .55); transform: translate(0, 0); }
  /* glitch burst */
  90%            { text-shadow: -2px 0 0 rgba(255, 0, 128, .85), 2px 0 0 rgba(0, 255, 247, .85), 0 0 18px rgba(0, 229, 255, .35); transform: translate(-1px, 0); }
  91.5%          { text-shadow:  2px 0 0 rgba(255, 0, 128, .85), -2px 0 0 rgba(0, 255, 247, .85), 0 0 18px rgba(0, 229, 255, .35); transform: translate(1px, 1px); }
  93%            { text-shadow: -1px 0 0 rgba(255, 0, 128, .7),  1px 0 0 rgba(0, 255, 247, .7),  0 0 18px rgba(0, 229, 255, .35); transform: translate(0, -1px); }
  95%            { text-shadow: 0 0 22px rgba(0, 229, 255, .35); transform: translate(0, 0); }
}

/* card hover lifts */
.card:hover { transform: translateY(-2px); }

/* ── Work filter — leave / enter ─────────────────────────────── */

/* Items being filtered out: fade + slight scale down + drop. Quick. */
.cards .card.is-leaving {
  opacity: 0;
  transform: scale(.96) translateY(6px);
  pointer-events: none;
  transition:
    opacity 200ms cubic-bezier(.4, 0, 1, 1),
    transform 200ms cubic-bezier(.4, 0, 1, 1);
}

/* Items entering: stagger-fade up. Stagger delay set inline via --card-stagger. */
@keyframes card-enter {
  from { opacity: 0; transform: scale(.96) translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.cards .card.is-entering {
  animation: card-enter 450ms var(--easing) both;
  animation-delay: calc(var(--card-stagger, 0) * 45ms);
}

/* Pill press feedback: brief border-glow flash to ack the click. */
@keyframes pill-flash {
  0%   { box-shadow: 0 0 0 0 rgba(0, 229, 255, .6); }
  100% { box-shadow: 0 0 0 8px rgba(0, 229, 255, 0); }
}
.filter-pill.is-flashing {
  animation: pill-flash 350ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .cards .card.is-leaving,
  .cards .card.is-entering { animation: none; transition: none; opacity: 1; transform: none; }
  .filter-pill.is-flashing  { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
  .hero__mark, .hero__title, .hero__tagline { animation: none; }
  .display .accent { animation: none; }
}