/*
 * GIROFLE ANIMATIONS
 * Animations fluides type SaaS premium
 */

/* ==================== KEYFRAMES ==================== */
@keyframes giroFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

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

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

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

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

@keyframes giroScaleOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.95); }
}

@keyframes giroBounceIn {
    0% { opacity: 0; transform: scale(0.85); }
    60% { opacity: 1; transform: scale(1.03); }
    100% { transform: scale(1); }
}

@keyframes giroShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes giroRipple {
    to { transform: scale(4); opacity: 0; }
}

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

@keyframes giroPulseSoft {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.25); }
    50% { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0); }
}

@keyframes giroNavIndicator {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

@keyframes giroTopbarEnter {
    from { opacity: 0; transform: translateY(-100%); }
    to { opacity: 1; transform: translateY(0); }
}

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

@keyframes giroRowHighlight {
    from { background-color: rgba(37, 99, 235, 0.12); }
    to { background-color: transparent; }
}

@keyframes giroPreloaderLogo {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.06); opacity: 0.85; }
}

/* ==================== REVEAL AU SCROLL ==================== */
.giro-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--giro-delay, 0s);
    will-change: opacity, transform;
}

.giro-reveal.giro-reveal-left {
    transform: translateX(-24px);
}

.giro-reveal.giro-reveal-right {
    transform: translateX(24px);
}

.giro-reveal.giro-reveal-scale {
    transform: scale(0.94);
}

.giro-reveal.giro-visible {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* ==================== PAGE & LAYOUT ==================== */
#view-panel {
    animation: giroFadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.topbar-modern {
    animation: giroTopbarEnter 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.navigation {
    animation: giroSidebarEnter 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.navigation ul li {
    animation: giroSlideInLeft 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.navigation ul li:nth-child(1) { animation-delay: 0.04s; }
.navigation ul li:nth-child(2) { animation-delay: 0.08s; }
.navigation ul li:nth-child(3) { animation-delay: 0.12s; }
.navigation ul li:nth-child(4) { animation-delay: 0.16s; }
.navigation ul li:nth-child(5) { animation-delay: 0.20s; }
.navigation ul li:nth-child(6) { animation-delay: 0.24s; }
.navigation ul li:nth-child(7) { animation-delay: 0.28s; }
.navigation ul li:nth-child(8) { animation-delay: 0.32s; }
.navigation ul li:nth-child(9) { animation-delay: 0.36s; }
.navigation ul li:nth-child(10) { animation-delay: 0.40s; }

.nav-brand {
    animation: giroFadeInDown 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ==================== CARTES & STATS ==================== */
.stat-card-modern,
.data-card,
.admin-card,
.card.modern-card,
.modern-card {
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.stat-card-modern:hover,
.data-card:hover,
.admin-card:hover {
    transform: translateY(-6px) scale(1.01);
}

.stats-grid .stat-card-modern:nth-child(1) { --giro-delay: 0.05s; }
.stats-grid .stat-card-modern:nth-child(2) { --giro-delay: 0.10s; }
.stats-grid .stat-card-modern:nth-child(3) { --giro-delay: 0.15s; }
.stats-grid .stat-card-modern:nth-child(4) { --giro-delay: 0.20s; }
.stats-grid .stat-card-modern:nth-child(5) { --giro-delay: 0.25s; }
.stats-grid .stat-card-modern:nth-child(6) { --giro-delay: 0.30s; }

.stat-card-modern .stat-icon {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.stat-card-modern:hover .stat-icon {
    transform: scale(1.12) rotate(-4deg);
    animation: giroFloat 2s ease-in-out infinite;
}

/* ==================== BOUTONS ==================== */
.btn,
.btn-modern,
.topbar-toggle,
.theme-toggle,
.topbar-notification {
    position: relative;
    overflow: hidden;
    transition:
        transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.25s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.btn:active:not(:disabled),
.btn-modern:active:not(:disabled) {
    transform: scale(0.97);
}

.btn-primary:hover,
.btn-modern.btn-primary:hover {
    animation: giroPulseSoft 1.5s ease infinite;
}

.btn .giro-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    transform: scale(0);
    animation: giroRipple 0.6s ease-out;
    pointer-events: none;
}

/* ==================== FORMULAIRES ==================== */
.form-control,
.form-control-modern,
.topbar-search input {
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease,
        transform 0.2s ease;
}

.form-control:focus,
.form-control-modern:focus {
    transform: translateY(-1px);
}

.form-group,
.form-group-modern,
.form-group-product {
    transition: opacity 0.3s ease;
}

/* ==================== TABLEAUX ==================== */
.table tbody tr,
.modern-table tbody tr {
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.table tbody tr:hover,
.modern-table tbody tr:hover {
    transform: scale(1.005);
}

.table tbody tr.giro-row-new {
    animation: giroRowHighlight 1.2s ease-out;
}

/* ==================== MODALES ==================== */
.modal.fade .modal-dialog {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
    transform: scale(0.92) translateY(20px);
}

.modal.show .modal-dialog {
    transform: scale(1) translateY(0);
}

.modal-backdrop.fade {
    transition: opacity 0.3s ease;
}

.modal-dialog.animate-zoom-in {
    animation: giroBounceIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==================== TOAST & ALERTES ==================== */
.toast {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}

.toast.giro-toast-enter {
    animation: giroSlideInRight 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.toast.giro-toast-exit {
    animation: giroSlideOutRight 0.35s cubic-bezier(0.4, 0, 1, 1) both;
}

.alert,
.alert-modern {
    animation: giroFadeInUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ==================== DROPDOWN ==================== */
.dropdown-menu,
.topbar-dropdown-menu {
    animation: giroScaleIn 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
    transform-origin: top right;
}

.topbar-dropdown.show .topbar-dropdown-menu {
    animation: giroScaleIn 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ==================== SIDEBAR MOBILE ==================== */
.navigation {
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar-overlay {
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.navigation ul li a .icon {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease;
}

.navigation ul li a:hover .icon {
    transform: scale(1.1) rotate(3deg);
}

.navigation ul li.active a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 60%;
    background: white;
    border-radius: 0 4px 4px 0;
    transform: translateY(-50%) scaleY(1);
    animation: giroNavIndicator 0.3s ease;
}

/* ==================== PRELOADER ==================== */
#preloader,
#preloader2 {
    animation: giroFadeIn 0.3s ease;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

#preloader.giro-preloader-out,
#preloader2.giro-preloader-out {
    opacity: 0;
    visibility: hidden;
}

#preloader::after,
#preloader2::after {
    animation: spin 0.7s linear infinite, giroPulseSoft 1.5s ease infinite;
}

/* ==================== BACK TO TOP ==================== */
.back-to-top {
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s ease;
}

.back-to-top.visible {
    animation: giroBounceIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.back-to-top:hover {
    animation: giroFloat 1.5s ease-in-out infinite;
}

/* ==================== SKELETON LOADER ==================== */
.giro-skeleton {
    background: linear-gradient(
        90deg,
        var(--gray-100) 25%,
        var(--gray-200) 50%,
        var(--gray-100) 75%
    );
    background-size: 200% 100%;
    animation: giroShimmer 1.5s ease infinite;
    border-radius: var(--radius-md);
}

[data-theme="dark"] .giro-skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-hover) 25%,
        var(--border-color) 50%,
        var(--bg-hover) 75%
    );
    background-size: 200% 100%;
}

/* ==================== UTILITAIRES ==================== */
.giro-animate-fade-in { animation: giroFadeIn 0.4s ease both; }
.giro-animate-fade-up { animation: giroFadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.giro-animate-slide-right { animation: giroSlideInRight 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
.giro-animate-scale-in { animation: giroScaleIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.giro-animate-bounce-in { animation: giroBounceIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }

.giro-delay-1 { animation-delay: 0.1s; }
.giro-delay-2 { animation-delay: 0.2s; }
.giro-delay-3 { animation-delay: 0.3s; }
.giro-delay-4 { animation-delay: 0.4s; }
.giro-delay-5 { animation-delay: 0.5s; }

/* ==================== PAGE HEADERS ==================== */
.dashboard-header,
.page-header-admin,
.page-header-modern,
.page-header-product,
.page-header-inventory,
.page-header-supplier {
    animation: giroFadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.page-title-admin .page-icon,
.page-title-modern i,
.page-title-product i {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.page-header-admin:hover .page-icon,
.page-title-modern:hover i {
    transform: rotate(-8deg) scale(1.08);
}

/* ==================== DATA TABLES ==================== */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    transition: all 0.2s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    transform: translateY(-2px);
}

/* ==================== COMPTEURS ==================== */
.stat-value.giro-counting,
.giro-counter {
    display: inline-block;
    transition: transform 0.3s ease;
}

.stat-value.giro-count-done {
    animation: giroBounceIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

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

    .giro-reveal {
        opacity: 1;
        transform: none;
    }
}