/* ==========================================================================
   animations.css
   ==========================================================================
   Transitions, @keyframes, and reveal-animation groundwork only. No color,
   typography, layout, sizing, or spacing lives here — those belong to
   base.css, layout.css, components.css, and responsive.css.

   Every duration/easing value below is a token from base.css. None of them
   are hardcoded, which is what lets base.css's prefers-reduced-motion query
   neutralize everything in this file automatically just by zeroing those
   tokens — no separate reduced-motion rule is added here, since one isn't
   needed (see the note at the bottom of this file).
   ========================================================================== */


/* ==========================================================================
   1. Global transitions
   ==========================================================================
   Most interactive-state transitions (button hover/active, nav link hover,
   card hover, icon button hover) were already correctly implemented in
   components.css, per that file's own phase instructions, which explicitly
   required transition properties to be defined alongside each component's
   visual states. Redeclaring any of that here would be duplicate CSS on
   the same selectors — this section intentionally does not repeat it.

   The one thing genuinely missing at the global level, and left that way
   deliberately rather than patched around: .icon-btn, .mobile-menu-toggle,
   and .back-to-top have a `transition` shorthand already set in
   components.css covering background-color and color, but not transform.
   `transition` is a shorthand — a second rule setting `transition` (or the
   `transition-property` longhand) on the same selector doesn't merge with
   the first, it replaces it outright. Adding a transform transition here
   would either silently break the existing hover-color transition or
   require duplicating it verbatim, both of which this file's rules
   correctly disallow. Flagging this as a real cross-file limitation of how
   the stylesheets were split, not something worked around with a hack.
   ========================================================================== */


/* ==========================================================================
   2. Hero entrance
   Runs automatically on page load — not JavaScript-gated, unlike Scroll
   Reveal below. Subtle: a short fade with a small upward drift, using the
   same fadeUp keyframe defined in section 6.
   ========================================================================== */

.hero__content,
.hero__media {
  animation: fadeUp var(--duration-slow) var(--ease-out-smooth);
}


/* ==========================================================================
   3. Hover animations
   ==========================================================================
   Buttons, navigation links, Project/Skill/Certificate card hover, and
   icon button hover are already fully implemented in components.css (see
   the note in section 1 above) — intentionally not duplicated here.

   Chips are intentionally excluded: they're static, non-clickable labels
   per the locked component spec (Implementation Standards Part 1 and the
   Design Foundation both describe Chip and Skill Badge as non-interactive).
   Giving them a hover animation would visually imply an interaction that
   doesn't exist, which is a worse outcome than leaving this section light.
   ========================================================================== */


/* ==========================================================================
   4. Scroll reveal classes
   ==========================================================================
   Reusable, JS-toggled reveal primitive. Nothing here runs on its own —
   .reveal defines the hidden resting state, .reveal--visible defines the
   end state, and the transition between them only ever fires when
   scrollAnimations.js adds the --visible class to an element. No element
   in the current HTML carries .reveal yet (scrollAnimations.js is still a
   no-op per the locked JS architecture) — this is forward-compatible
   groundwork, ready for that file to use.
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(var(--space-16));
  transition:
    opacity var(--duration-slow) var(--ease-out-smooth),
    transform var(--duration-slow) var(--ease-out-smooth);
}

.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}


/* ==========================================================================
   5. Navigation animations
   ==========================================================================
   Mobile menu open/close and back-to-top appearance. Both elements are
   shown/hidden via the native `hidden` attribute (layout.css handles the
   display toggle via :not([hidden]), deliberately guarded against fighting
   that attribute — see layout.css for why). A plain `transition` cannot
   animate across a display:none boundary, so these use `animation`
   instead, which can: an animation starts fresh from its keyframes the
   moment an element begins rendering, rather than needing to interpolate
   continuously from a prior visible state the way a transition does.
   Functionality (adding/removing the `hidden` attribute) still belongs to
   navigation.js — this only defines what happens visually once it does.
   ========================================================================== */

.nav--mobile:not([hidden]) {
  animation: fadeUp var(--duration-menu) var(--ease-in-out);
}

.back-to-top:not([hidden]) {
  animation: fadeIn var(--duration-moderate) var(--ease-standard);
}


/* ==========================================================================
   6. Keyframes
   ==========================================================================
   Exactly two, both in active use above — fadeUp (Hero entrance, mobile
   menu) and fadeIn (back-to-top). No bounce, spin, or decorative motion.
   The 16px offset reuses an existing spacing token rather than inventing
   a new value for what is, functionally, just a transform distance.
   ========================================================================== */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(var(--space-16));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* ==========================================================================
   Reduced motion
   ==========================================================================
   No rule added here on purpose. Every duration above is a var(--duration-*)
   token, and base.css's prefers-reduced-motion query already zeroes those
   tokens at :root — which silently neutralizes every transition and
   animation in this file (including the keyframe-driven ones, since
   animation-duration inherits the same token). Adding a second
   reduced-motion block here would duplicate base.css's rule for no benefit.
   ========================================================================== */