:root {
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
    --duration-fast: 0.2s;
    --duration-normal: 0.38s;
    --duration-slow: 0.62s;
    --duration-ambient: 22s;
    --stagger-step: 55ms;
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fade-down {
    from {
        opacity: 0;
        transform: translate3d(0, -6px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fade-up-subtle {
    from {
        opacity: 0;
        transform: translate3d(0, 6px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes scale-in {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes ambient-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(1.5%, -1%, 0) scale(1.03); }
}

@keyframes shimmer-line {
    from { background-position: 200% center; }
    to { background-position: -200% center; }
}

/* Ambient background wash */
body::before {
    content: "";
    position: fixed;
    inset: -10%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 50% 40% at 18% 22%, rgba(70, 130, 210, 0.09), transparent 70%),
        radial-gradient(ellipse 45% 35% at 82% 78%, rgba(40, 80, 180, 0.07), transparent 70%);
    animation: ambient-drift var(--duration-ambient) var(--ease-in-out) infinite alternate;
}

/* Page entrance */
.site-chrome,
.main-content {
    opacity: 0;
}

body.is-loaded .site-chrome {
    animation: fade-in var(--duration-slow) var(--ease-out) forwards;
}

body.is-loaded .main-content {
    animation: fade-up-subtle var(--duration-slow) var(--ease-out) 0.16s forwards;
}

/* View panel crossfade */
.view-panel {
    transition:
        opacity var(--duration-normal) var(--ease-out),
        transform var(--duration-normal) var(--ease-out);
}

.view-panel.active {
    opacity: 1;
    transform: translateY(0);
}

.view-panel.view-panel--leaving {
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
}

/* Masonry entrance */
.masonry-card.animate-in {
    animation: fade-up-subtle var(--duration-normal) var(--ease-out) both;
}

/* Focus slide entrance */
.focus-slide.animate-in .focus-slide-media {
    animation: focus-slide-in var(--duration-slow) var(--ease-out) both;
}

@keyframes focus-slide-in {
    from {
        opacity: 0;
        transform: scale(1.04);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Year nav pills */
.year-pill {
    transition:
        color var(--duration-fast) ease,
        border-color var(--duration-fast) ease,
        background var(--duration-fast) ease,
        transform var(--duration-fast) var(--ease-out);
}

.year-pill.animate-in {
    animation: fade-in var(--duration-normal) var(--ease-out) both;
}

.year-pill:hover {
    transform: translateY(-1px);
}

.year-pill.active {
    transform: translateY(-1px);
}

/* Controls */
.view-btn,
.admin-link,
.filter-toggle {
    transition:
        color var(--duration-fast) ease,
        background var(--duration-fast) ease,
        border-color var(--duration-fast) ease,
        box-shadow var(--duration-fast) ease,
        transform var(--duration-fast) var(--ease-out);
}

.view-btn:active,
.admin-link:active,
.filter-toggle:active {
    transform: scale(0.97);
}

.view-btn.active {
    transition:
        color var(--duration-normal) var(--ease-out),
        background var(--duration-normal) var(--ease-out);
}

/* Card hover depth */
.masonry-card-media img {
    transition: transform 0.55s var(--ease-out);
}

.masonry-card:hover .masonry-card-media img {
    transform: scale(1.045);
}

.masonry-card {
    transition:
        border-color var(--duration-fast) ease,
        box-shadow var(--duration-normal) var(--ease-out),
        transform var(--duration-normal) var(--ease-out);
}

.masonry-card:hover {
    transform: translateY(-2px);
}

/* Modal */
.modal-backdrop {
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-out);
}

.modal-backdrop.is-open {
    opacity: 1;
}

.modal-backdrop.is-closing {
    opacity: 0;
}

.modal {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
    transition:
        opacity var(--duration-normal) var(--ease-out),
        transform var(--duration-normal) var(--ease-out);
}

.modal-backdrop.is-open .modal {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.modal-backdrop.is-closing .modal {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
}

.modal-panel-header i.chevron {
    transition: transform var(--duration-normal) var(--ease-out);
}

.modal-header,
.modal-meta,
.modal-description {
    animation: fade-up-subtle var(--duration-normal) var(--ease-out) both;
}

.modal-header { animation-delay: 0.04s; }
.modal-meta { animation-delay: 0.08s; }
.modal-content .modal-panel:nth-of-type(1) { animation-delay: 0.12s; }
.modal-content .modal-panel:nth-of-type(2) { animation-delay: 0.16s; }
.modal-content .modal-panel:nth-of-type(3) { animation-delay: 0.2s; }
.modal-content .modal-panel:nth-of-type(4) { animation-delay: 0.24s; }
.modal-content .modal-description { animation-delay: 0.18s; }

.modal-content .modal-panel {
    animation: fade-up-subtle var(--duration-normal) var(--ease-out) both;
}

/* Empty state */
.empty-state {
    animation: fade-up var(--duration-slow) var(--ease-out) both;
}

.empty-state i {
    animation: scale-in var(--duration-slow) var(--ease-out) 0.15s both;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    body::before {
        animation: none;
    }

    .site-chrome,
    .main-content {
        opacity: 1;
    }
}