/* ==========================================================================
   Animations — all @keyframes in one file
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* Parthenon hero — "walking toward the temple" approach on page load         */
/* -------------------------------------------------------------------------- */
@keyframes parthenon-approach {
    from {
        transform: scale(1.15);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* -------------------------------------------------------------------------- */
/* Foil shimmer — background-position sweep across the card face              */
/* -------------------------------------------------------------------------- */
@keyframes foil-shimmer {
    0%   { background-position: 200% 200%; }
    30%  { background-position:  50%  50%; }
    60%  { background-position: -50% -50%; }
    100% { background-position: 200% 200%; }
}

/* -------------------------------------------------------------------------- */
/* Skeleton loading pulse                                                       */
/* -------------------------------------------------------------------------- */
@keyframes skeleton-pulse {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

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

/* -------------------------------------------------------------------------- */
/* Slide up (for filter results reload, toasts, modals)                        */
/* -------------------------------------------------------------------------- */
@keyframes slide-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------------------------- */
/* Slide down (dropdown menus)                                                  */
/* -------------------------------------------------------------------------- */
@keyframes slide-down {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------------------------- */
/* Spin (loading indicator)                                                     */
/* -------------------------------------------------------------------------- */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* -------------------------------------------------------------------------- */
/* Badge pulse (e.g. cart item count update)                                    */
/* -------------------------------------------------------------------------- */
@keyframes badge-pulse {
    0%  { transform: scale(1); }
    40% { transform: scale(1.3); }
    70% { transform: scale(0.95); }
    100%{ transform: scale(1); }
}

/* -------------------------------------------------------------------------- */
/* Gold shimmer (decorative text / headings)                                    */
/* -------------------------------------------------------------------------- */
@keyframes gold-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

/* -------------------------------------------------------------------------- */
/* Cartouche shimmer — gold sweep across the oval logo housing                 */
/* -------------------------------------------------------------------------- */
@keyframes cartouche-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

/* -------------------------------------------------------------------------- */
/* Dust drift — floating gold motes in the museum frame                        */
/* Split into movement + opacity so both animate cleanly without CSS conflicts  */
/* -------------------------------------------------------------------------- */

/* Dust motes — respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .dust-mote { animation: none !important; display: none; }
}

/* Movement — gentle drift upward with a lazy horizontal sway */
@keyframes dust-drift {
    0%   { transform: translateY(0)      translateX(0); }
    30%  { transform: translateY(-30px)  translateX(6px); }
    60%  { transform: translateY(-65px)  translateX(-5px); }
    100% { transform: translateY(-120px) translateX(3px); }
}

/* Opacity — fade in, linger, fade out separately so both can animate cleanly */
@keyframes dust-fade {
    0%   { opacity: 0; }
    12%  { opacity: 1; }
    75%  { opacity: 0.7; }
    100% { opacity: 0; }
}

/* -------------------------------------------------------------------------- */
/* Archway cross — threshold element expands horizontally to frame a doorway   */
/* -------------------------------------------------------------------------- */
@keyframes archway-cross {
    from { transform: scaleX(0); opacity: 0; }
    50%  { opacity: 1; }
    to   { transform: scaleX(1); opacity: 0; }
}

/* -------------------------------------------------------------------------- */
/* Museum cornice scale-in — horizontal gold bar grows from center             */
/* -------------------------------------------------------------------------- */
@keyframes cornice-reveal {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* -------------------------------------------------------------------------- */
/* Pillar rise — foundation stones ascend from below                           */
/* -------------------------------------------------------------------------- */
@keyframes pillar-rise {
    from { transform: translateY(80px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* -------------------------------------------------------------------------- */
/* Reduced motion — disable all animations for users who prefer it             */
/* -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:   0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration:  0.01ms !important;
    }
}