/* ------------------------------------------------------------------
   Site-wide animation primitives.
   Classes are prefixed anim-*, kept separate from styling classes.
   Elements start in their "pre-reveal" state; JS toggles .is-visible
   when the element intersects the viewport.
   ------------------------------------------------------------------ */

:root {
    --anim-duration: 600ms;
    --anim-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
    --anim-distance: 40px;
}

/* Utility: clip the horizontal axis on an outer container so slide-in
   animations (translate off-screen) don't produce a horizontal scrollbar. */
.anim-clip-x {
    overflow-x: clip;
}
@supports not (overflow-x: clip) {
    .anim-clip-x { overflow-x: hidden; }
}

/* Base transition shared by all anim-* classes */
.anim-fade-in,
.anim-fade-up,
.anim-fade-down,
.anim-fade-left,
.anim-fade-right,
.anim-scale-in,
.anim-zoom-in,
.anim-blur-in {
    opacity: 0;
    transition:
        opacity var(--anim-duration) var(--anim-easing),
        transform var(--anim-duration) var(--anim-easing),
        filter var(--anim-duration) var(--anim-easing);
    will-change: opacity, transform;
}

/* Pre-reveal transforms */
.anim-fade-up    { transform: translate3d(0, var(--anim-distance), 0); }
.anim-fade-down  { transform: translate3d(0, calc(var(--anim-distance) * -1), 0); }
.anim-fade-left  { transform: translate3d(calc(var(--anim-distance) * -1), 0, 0); }
.anim-fade-right { transform: translate3d(var(--anim-distance), 0, 0); }
.anim-scale-in   { transform: scale(0.92); }
.anim-zoom-in    { transform: scale(0.75); }
.anim-blur-in    { filter: blur(12px); }

/* Revealed state — one rule for every anim */
.anim-fade-in.is-visible,
.anim-fade-up.is-visible,
.anim-fade-down.is-visible,
.anim-fade-left.is-visible,
.anim-fade-right.is-visible,
.anim-scale-in.is-visible,
.anim-zoom-in.is-visible,
.anim-blur-in.is-visible {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Staggered delay modifiers — combine with any anim class */
.anim-delay-1 { transition-delay: 100ms; }
.anim-delay-2 { transition-delay: 200ms; }
.anim-delay-3 { transition-delay: 300ms; }
.anim-delay-4 { transition-delay: 400ms; }
.anim-delay-5 { transition-delay: 500ms; }
.anim-delay-6 { transition-delay: 600ms; }

/* Speed modifiers */
.anim-fast { --anim-duration: 400ms; }
.anim-slow { --anim-duration: 1000ms; }

/* Auto-stagger children when parent carries anim-stagger */
.anim-stagger > * {
    transition-delay: 0ms;
}
.anim-stagger > *:nth-child(1) { transition-delay: 60ms; }
.anim-stagger > *:nth-child(2) { transition-delay: 140ms; }
.anim-stagger > *:nth-child(3) { transition-delay: 220ms; }
.anim-stagger > *:nth-child(4) { transition-delay: 300ms; }
.anim-stagger > *:nth-child(5) { transition-delay: 380ms; }
.anim-stagger > *:nth-child(6) { transition-delay: 460ms; }
.anim-stagger > *:nth-child(7) { transition-delay: 540ms; }
.anim-stagger > *:nth-child(8) { transition-delay: 620ms; }

/* Hover micro-interactions — opt-in via anim-hover-* */
.anim-hover-lift {
    transition: transform 350ms var(--anim-easing), box-shadow 350ms var(--anim-easing);
}
.anim-hover-lift:hover {
    transform: translateY(-6px);
}
.anim-hover-zoom { overflow: hidden; }
.anim-hover-zoom > img,
.anim-hover-zoom > picture > img {
    transition: transform 600ms var(--anim-easing);
}
.anim-hover-zoom:hover > img,
.anim-hover-zoom:hover > picture > img {
    transform: scale(1.06);
}

/* Drawer stagger — children of an open side-drawer slide + fade in.
   Unlike the reveal classes, this re-fires every time .active is added
   to the parent (sidebar_nav-js), so the menu animates on every open. */
.anim-drawer-item {
    opacity: 0;
    transform: translateX(20px);
    transition:
        opacity 450ms var(--anim-easing),
        transform 450ms var(--anim-easing);
}
.sidebar_nav-js.active .anim-drawer-item {
    opacity: 1;
    transform: none;
}
.sidebar_nav-js.active .anim-drawer-item:nth-of-type(1) { transition-delay: 150ms; }
.sidebar_nav-js.active .anim-drawer-item:nth-of-type(2) { transition-delay: 250ms; }
.sidebar_nav-js.active .anim-drawer-item:nth-of-type(3) { transition-delay: 350ms; }
.sidebar_nav-js.active .anim-drawer-item:nth-of-type(4) { transition-delay: 450ms; }

.sidebar_nav-js .aside_list > li {
    opacity: 0;
    transform: translateX(16px);
    transition:
        opacity 400ms var(--anim-easing),
        transform 400ms var(--anim-easing);
}
.sidebar_nav-js.active .aside_list > li {
    opacity: 1;
    transform: none;
}
.sidebar_nav-js.active .aside_list > li:nth-child(1) { transition-delay: 260ms; }
.sidebar_nav-js.active .aside_list > li:nth-child(2) { transition-delay: 320ms; }
.sidebar_nav-js.active .aside_list > li:nth-child(3) { transition-delay: 380ms; }
.sidebar_nav-js.active .aside_list > li:nth-child(4) { transition-delay: 440ms; }
.sidebar_nav-js.active .aside_list > li:nth-child(5) { transition-delay: 500ms; }
.sidebar_nav-js.active .aside_list > li:nth-child(6) { transition-delay: 560ms; }
.sidebar_nav-js.active .aside_list > li:nth-child(7) { transition-delay: 620ms; }
.sidebar_nav-js.active .aside_list > li:nth-child(8) { transition-delay: 680ms; }

/* Looping subtle float — useful for decorative icons */
.anim-float {
    animation: anim-float 4s ease-in-out infinite;
}
@keyframes anim-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* Respect user preference */
@media (prefers-reduced-motion: reduce) {
    .anim-fade-in,
    .anim-fade-up,
    .anim-fade-down,
    .anim-fade-left,
    .anim-fade-right,
    .anim-scale-in,
    .anim-zoom-in,
    .anim-blur-in {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
    .anim-float,
    .anim-hover-lift,
    .anim-hover-zoom > img {
        animation: none !important;
        transition: none !important;
    }
}
/*# sourceMappingURL=animations.css.map */