/*
 * css/animations.css
 *
 * All CSS animations are defined here in one place.
 * Separating them from terminal.css means you can tweak timing without
 * accidentally touching layout or colour rules.
 *
 * A CSS animation has two parts:
 *   1. A @keyframes rule that defines what changes over time
 *   2. An animation property on a selector that activates it
 */


/* ── Cursor blink ─────────────────────────────────────────────────────
   This makes the green cursor rectangle switch between fully visible
   and fully invisible, mimicking a real terminal cursor.

   "step-end" is the key here — it means "jump to the end state at the
   end of each step" rather than smoothly interpolating. This gives the
   cursor a hard on/off switch instead of a fade, which is how real
   terminal cursors look. Using "linear" or "ease" would give a fading
   effect that looks wrong for a cursor.
*/
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.cursor {
  animation: blink 1s step-end infinite;
  /* infinite means it loops forever — appropriate for a cursor */
}


/* ── ASCII banner glow ────────────────────────────────────────────────
   text-shadow adds a coloured glow around the ASCII art text.
   The animation alternates between a faint glow and a brighter one,
   creating a "breathing" or pulsing effect.

   "alternate" direction means the animation plays forward, then BACKWARDS,
   then forward again — so it smoothly pulses instead of snapping back
   to the start state at the end of each cycle.
   "ease-in-out" makes it accelerate into and decelerate out of each end,
   which looks more organic than a linear transition.
*/
@keyframes glow-pulse {
  from { text-shadow: 0 0 4px  rgba(133, 232, 157, 0.3); }
  to   { text-shadow: 0 0 14px rgba(133, 232, 157, 0.75); }
}

.banner__art {
  animation: glow-pulse 3s ease-in-out infinite alternate;
}


/* ── Boot line entrance ───────────────────────────────────────────────
   Each boot line starts invisible (opacity: 0, set on .boot__line in
   terminal.css) and fades in while rising 2px from below.

   The translateY(2px) → translateY(0) shift is subtle — just enough
   motion to feel like text being printed, without being distracting.

   "forwards" fill mode is important — it means the element keeps the
   final keyframe state (opacity: 1, translateY: 0) after the animation
   ends, instead of snapping back to opacity: 0. Without "forwards",
   every boot line would disappear the moment its animation finished.

   The actual staggered timing (each line appearing after a delay) is
   handled by JavaScript in boot.js, not here. The CSS just defines what
   the animation looks like — JS controls when each line's animation starts.
*/
@keyframes boot-fadein {
  from {
    opacity:   0;
    transform: translateY(2px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

.boot__line {
  opacity:   0;   /* start hidden; the animation changes this to 1 */
  animation: boot-fadein 0.15s ease forwards;
}


/* ── Shell section fade-in ────────────────────────────────────────────
   When boot.js removes the `hidden` attribute from the shell section,
   this animation fires — fading the whole shell in smoothly instead of
   having it pop into existence abruptly.

   The :not([hidden]) selector targets the element only when it does NOT
   have the `hidden` attribute. When `hidden` is present, this rule doesn't
   apply, so the animation only runs at the moment `hidden` is removed.
*/
@keyframes shell-appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.shell:not([hidden]) {
  animation: shell-appear 0.4s ease forwards;
}


/* ── Quick-bar button press ───────────────────────────────────────────
   A quick scale-down gives the button a satisfying "press" feeling.
   Using an animation (rather than just transform on :active) means
   the shrink-and-return plays out even if the user releases the mouse
   very quickly — it completes the full motion regardless.

   The :active pseudo-class applies while the mouse button is held down.
*/
@keyframes btn-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.93); }
  100% { transform: scale(1); }
}

.quickbar__btn:active {
  animation: btn-pop 0.15s ease forwards;
}