/* ==========================================================================
   Materia M3 — Motion
   Page-level transitions, ripple keyframes, fades, and entrance animations
   driven by the M3 motion tokens (easing + duration).
   ========================================================================== */

/* ----- Ripple (used by JS-driven ripple in <button>, .m3-ripple, etc.) ---- */
@keyframes m3-ripple-expand {
    0%   { transform: scale(0);   opacity: var(--md-sys-state-pressed-state-layer-opacity); }
    100% { transform: scale(2.5); opacity: 0; }
}

/* ----- Fade in (used on first paint) ----- */
@keyframes m3-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ----- Slide up (entrance for cards / list items) ----- */
@keyframes m3-slide-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ----- Slide down (used for nav drawer entry from top) ----- */
@keyframes m3-slide-down {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ----- Slide right (drawer entry) ----- */
@keyframes m3-slide-right {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

/* ----- Slide left (FAB / snackbar entry) ----- */
@keyframes m3-slide-left {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* ----- Scale in (FAB entry, dialog entry) ----- */
@keyframes m3-scale-in {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

/* ----- Container transform (M3 emphasized) ----- */
@keyframes m3-container-transform-in {
    from { opacity: 0; transform: scale(0.92) translateY(16px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* ----- Indeterminate progress (linear) ----- */
@keyframes m3-progress-linear-indeterminate-1 {
    0%   { left: -35%;  right: 100%; }
    60%  { left: 100%;  right: -90%; }
    100% { left: 100%;  right: -90%; }
}
@keyframes m3-progress-linear-indeterminate-2 {
    0%   { left: -200%; right: 100%; }
    60%  { left: 107%;  right: -8%; }
    100% { left: 107%;  right: -8%; }
}

/* ----- Indeterminate progress (circular) ----- */
@keyframes m3-progress-circular-rotate {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes m3-progress-circular-dash {
    0%   { stroke-dasharray: 1, 200;   stroke-dashoffset: 0; }
    50%  { stroke-dasharray: 100, 200; stroke-dashoffset: -15; }
    100% { stroke-dasharray: 100, 200; stroke-dashoffset: -125; }
}

/* ----- Skeleton shimmer (loading placeholders) ----- */
@keyframes m3-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ----- Page entry — applied to <main> on load ----- */
.m3-page-enter {
    animation: m3-container-transform-in
        var(--md-sys-motion-duration-medium4)
        var(--md-sys-motion-easing-emphasized-decelerate)
        both;
}

/* ----- Stagger helpers ----- */
.m3-stagger > * {
    animation: m3-slide-up
        var(--md-sys-motion-duration-medium2)
        var(--md-sys-motion-easing-emphasized-decelerate)
        both;
}
.m3-stagger > *:nth-child(1)  { animation-delay:   0ms; }
.m3-stagger > *:nth-child(2)  { animation-delay:  40ms; }
.m3-stagger > *:nth-child(3)  { animation-delay:  80ms; }
.m3-stagger > *:nth-child(4)  { animation-delay: 120ms; }
.m3-stagger > *:nth-child(5)  { animation-delay: 160ms; }
.m3-stagger > *:nth-child(6)  { animation-delay: 200ms; }
.m3-stagger > *:nth-child(7)  { animation-delay: 240ms; }
.m3-stagger > *:nth-child(8)  { animation-delay: 280ms; }
.m3-stagger > *:nth-child(9)  { animation-delay: 320ms; }
.m3-stagger > *:nth-child(10) { animation-delay: 360ms; }