/* =========================================================================
   koodalanne — Motion utilities
   Design language: "Neon Precision" — motion guides, never distracts.
   -------------------------------------------------------------------------
   Part 6 of the Brand Bible. Consumes SEMANTIC + motion tokens from tokens.css
   only. Everything is subtle, slow and purposeful; all of it collapses under
   prefers-reduced-motion. Requires tokens.css. Classes are prefixed kd-.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Keyframes
   ------------------------------------------------------------------------- */

@keyframes kd-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes kd-draw-x {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes kd-blink {
  0%, 50%      { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
@keyframes kd-flicker {
  0%, 18%, 22%, 80%, 100% { opacity: 1; }
  20%  { opacity: 0.35; }
  81%  { opacity: 0.7; }
}
@keyframes kd-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(248, 144, 231, 0.22), 0 0 10px rgba(248, 144, 231, 0.18); }
  50%      { box-shadow: var(--kd-glow-pink); }
}
@keyframes kd-drift {
  from { background-position: 0 0; }
  to   { background-position: var(--kd-grid-size) var(--kd-grid-size); }
}

/* -------------------------------------------------------------------------
   Hover interactions
   ------------------------------------------------------------------------- */

/* 4px lift + pink glow — the one place glow reaches full strength */
.kd-lift {
  transition: transform var(--kd-duration-normal) var(--kd-ease-out),
              box-shadow var(--kd-duration-normal) var(--kd-ease-out);
}
.kd-lift:hover { transform: translateY(-4px); box-shadow: var(--kd-shadow-lg), var(--kd-glow-pink); }

.kd-hover-glow { transition: box-shadow var(--kd-duration-normal) var(--kd-ease-out); }
.kd-hover-glow:hover { box-shadow: var(--kd-glow-pink); }
.kd-hover-glow--cyan:hover { box-shadow: var(--kd-glow-cyan); }

/* Cyan hairline draws in from the left on hover */
.kd-underline { position: relative; }
.kd-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--color-accent-secondary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--kd-duration-normal) var(--kd-ease-out);
}
.kd-underline:hover::after { transform: scaleX(1); }

/* Neon flicker — rare, once on hover (logo reveal feel) */
.kd-flicker:hover { animation: kd-flicker var(--kd-duration-slow) var(--kd-ease-standard); }

/* -------------------------------------------------------------------------
   Entrance / ambient
   ------------------------------------------------------------------------- */

.kd-reveal { animation: kd-fade-up var(--kd-duration-slow) var(--kd-ease-out) both; }
.kd-draw   { transform-origin: left; animation: kd-draw-x var(--kd-duration-slow) var(--kd-ease-out) both; }
.kd-pulse  { animation: kd-pulse-glow 2.4s var(--kd-ease-in-out) infinite; }
.kd-drift  { animation: kd-drift var(--kd-duration-ambient) linear infinite; }

/* Staggered reveals: add kd-reveal + kd-stagger to a parent's children */
.kd-stagger > * { animation: kd-fade-up var(--kd-duration-slow) var(--kd-ease-out) both; }
.kd-stagger > *:nth-child(2) { animation-delay: 80ms; }
.kd-stagger > *:nth-child(3) { animation-delay: 160ms; }
.kd-stagger > *:nth-child(4) { animation-delay: 240ms; }
.kd-stagger > *:nth-child(5) { animation-delay: 320ms; }

/* -------------------------------------------------------------------------
   Terminal cursor
   ------------------------------------------------------------------------- */

.kd-cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.05em;
  vertical-align: -0.15em;
  background: var(--color-accent);
  animation: kd-blink 1s steps(1) infinite;
}

/* -------------------------------------------------------------------------
   Respect the user
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .kd-reveal, .kd-draw, .kd-pulse, .kd-drift, .kd-cursor,
  .kd-stagger > *, .kd-flicker:hover {
    animation: none !important;
  }
  .kd-reveal, .kd-stagger > * { opacity: 1; transform: none; }
  .kd-draw { transform: none; }
  .kd-cursor { opacity: 1; }
}