/* ============================
   SBMDSS Animations System
   Entrance animations scoped to html.interactive
   to prevent double-play on Blazor Server SSR → Interactive switch
   ============================ */

/* ===== KEYFRAMES (always defined) ===== */

@keyframes pageEnter {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

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

@keyframes headerSlide {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes tableRowIn {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes cardBounce {
    from { opacity: 0; transform: scale(0.85) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes chipPop {
    from { opacity: 0; transform: scale(0.7); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes stepSlide {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes stepSlideBack {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes counterPop {
    from { opacity: 0; transform: translateY(10px) scale(0.8); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes breadcrumbSlide {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes successPop {
    from { opacity: 0; transform: scale(0) rotate(-45deg); }
    60% { transform: scale(1.2) rotate(0deg); }
    to { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes snackbarSlide {
    from { opacity: 0; transform: translateY(20px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes menuDrop {
    from { opacity: 0; transform: translateY(-8px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tooltipFade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(35, 46, 80, 0.2); }
    50% { box-shadow: 0 0 0 8px rgba(35, 46, 80, 0); }
}

@keyframes skeletonPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes emptyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes iconSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* ===== ENTRANCE ANIMATIONS (only after interactive mode) ===== */

html.interactive .page-enter { animation: pageEnter 0.35s ease-out both; }
html.interactive .fade-in { animation: fadeIn 0.4s ease-out both; }
html.interactive .slide-up { animation: slideUp 0.4s ease-out both; }
html.interactive .slide-in-left { animation: slideInLeft 0.35s ease-out both; }
html.interactive .scale-in { animation: scaleIn 0.3s ease-out both; }
html.interactive .header-animate { animation: headerSlide 0.5s ease-out both; }
html.interactive .card-bounce { animation: cardBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
html.interactive .chip-appear { animation: chipPop 0.25s ease-out both; }
html.interactive .step-transition { animation: stepSlide 0.35s ease-out both; }
html.interactive .step-transition-back { animation: stepSlideBack 0.35s ease-out both; }
html.interactive .counter-animate { animation: counterPop 0.4s ease-out both; }
html.interactive .success-check { animation: successPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
html.interactive .pulse-glow { animation: pulseGlow 2s ease-in-out infinite; }
html.interactive .icon-spin { animation: iconSpin 1s linear infinite; }
html.interactive .empty-state-float { animation: emptyFloat 3s ease-in-out infinite; }

/* Staggered children */
html.interactive .stagger-children > * {
    opacity: 0;
    animation: slideUp 0.35s ease-out forwards;
}
html.interactive .stagger-children > *:nth-child(1) { animation-delay: 0.04s; }
html.interactive .stagger-children > *:nth-child(2) { animation-delay: 0.08s; }
html.interactive .stagger-children > *:nth-child(3) { animation-delay: 0.12s; }
html.interactive .stagger-children > *:nth-child(4) { animation-delay: 0.16s; }
html.interactive .stagger-children > *:nth-child(5) { animation-delay: 0.20s; }
html.interactive .stagger-children > *:nth-child(6) { animation-delay: 0.24s; }
html.interactive .stagger-children > *:nth-child(7) { animation-delay: 0.28s; }
html.interactive .stagger-children > *:nth-child(8) { animation-delay: 0.32s; }

/* Table row stagger */
html.interactive .table-animate .mud-table-body .mud-table-row {
    animation: tableRowIn 0.3s ease-out both;
}
html.interactive .table-animate .mud-table-body .mud-table-row:nth-child(1) { animation-delay: 0.02s; }
html.interactive .table-animate .mud-table-body .mud-table-row:nth-child(2) { animation-delay: 0.04s; }
html.interactive .table-animate .mud-table-body .mud-table-row:nth-child(3) { animation-delay: 0.06s; }
html.interactive .table-animate .mud-table-body .mud-table-row:nth-child(4) { animation-delay: 0.08s; }
html.interactive .table-animate .mud-table-body .mud-table-row:nth-child(5) { animation-delay: 0.10s; }
html.interactive .table-animate .mud-table-body .mud-table-row:nth-child(6) { animation-delay: 0.12s; }
html.interactive .table-animate .mud-table-body .mud-table-row:nth-child(7) { animation-delay: 0.14s; }
html.interactive .table-animate .mud-table-body .mud-table-row:nth-child(8) { animation-delay: 0.16s; }
html.interactive .table-animate .mud-table-body .mud-table-row:nth-child(9) { animation-delay: 0.18s; }
html.interactive .table-animate .mud-table-body .mud-table-row:nth-child(10) { animation-delay: 0.20s; }

/* Skeleton shimmer */
html.interactive .skeleton-animate .mud-skeleton {
    animation: skeletonPulse 1.5s ease-in-out infinite;
}

/* Breadcrumb */
html.interactive .mud-breadcrumbs {
    animation: breadcrumbSlide 0.3s ease-out both;
}

/* Snackbar */
html.interactive .mud-snackbar {
    animation: snackbarSlide 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}

/* Tooltip */
html.interactive .mud-tooltip {
    animation: tooltipFade 0.15s ease-out;
}

/* Menu dropdown */
html.interactive .mud-popover-open .mud-list {
    animation: menuDrop 0.2s ease-out both;
}


/* --- Page header --- */
.page-header {
    padding: 20px 0 16px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.page-header-title {
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    line-height: 1.3 !important;
}

.page-header-subtitle {
    color: var(--mud-palette-text-secondary) !important;
    margin-top: 2px;
}

.page-header-icon {
    color: var(--mud-palette-text-secondary) !important;
    opacity: 0.6;
}


/* ===== TRANSITIONS (always active, no double-play issue) ===== */

/* Stat card hover */
.stat-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: default;
}
.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

/* Button press */
.btn-press {
    transition: transform 0.15s ease;
}
.btn-press:active {
    transform: scale(0.95);
}

/* Hover lift for cards */
.hover-lift {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Tab indicator smooth */
.mud-tabs .mud-tab-slider {
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Drawer smooth transition */
.mud-drawer {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.mud-drawer-content {
    transition: opacity 0.2s ease;
}

/* Theme transition — disabled, causes desync between elements (tables, selects lag behind background) */

/* Theme toggle button */
.theme-toggle-btn {
    transition: transform 0.2s ease !important;
}
.theme-toggle-btn:active {
    transform: scale(0.85);
}

/* Profile button */
.profile-btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.profile-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.15);
}
.profile-btn:active {
    transform: scale(0.95);
}

/* Interactive elements color transitions */
.mud-button-root, .mud-icon-button, .mud-chip, .mud-nav-link {
    transition: background-color 0.2s ease,
                color 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.2s ease !important;
}

/* AppBar shadow */
.mud-appbar {
    transition: box-shadow 0.3s ease !important;
}

/* Dialog overlay */
.mud-overlay {
    transition: opacity 0.3s ease !important;
}

/* Input focus glow */
.mud-input-outlined:focus-within .mud-input-outlined-border {
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-shadow: 0 0 0 2px rgba(35, 46, 80, 0.15);
}

/* Progress bar fill */
.mud-progress-linear .mud-progress-linear-bar {
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}