/* ==========================================================================
   eesier design system — ANIMATIONS
   --------------------------------------------------------------------------
   Shared @keyframes for the system. Component-specific keyframes live in
   their component CSS file (e.g. ph-section sky animations, gmail-thread
   message reveals). Anything reused by 2+ components belongs here.
   ========================================================================== */


/* GRADIENT SHIFT — used by .e-text-gradient. */

@keyframes e-gradient-shift {
    0%   { background-position: 0%   center; }
    50%  { background-position: 100% center; }
    100% { background-position: 0%   center; }
}


/* FADE IN — generic fade-from-below entrance. */

@keyframes e-fade-in-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* TICKER LEFT — horizontal scroll for language tickers, logo strips, etc. */

@keyframes e-ticker-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}


/* TICKER RIGHT */

@keyframes e-ticker-right {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}


/* PULSE — subtle scale + opacity, for live-activity dots. */

@keyframes e-pulse {
    0%, 100% { transform: scale(1);    opacity: 1;   }
    50%      { transform: scale(1.08); opacity: 0.6; }
}


/* SPIN — for loading icons / gears. */

@keyframes e-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}


/* REDUCED MOTION — honor the user's preference. Component-level animations
   should also reduce themselves; this is the universal escape hatch. */

@media (prefers-reduced-motion: reduce) {

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

}