/**
 * Caly-Quiz IRVE - Theme Enhancements
 * Animated gradients, category icons, enhanced cards, loading states
 * Version 1.0
 *
 * Brand colors:
 *   Primary orange: #F97316, #EA580C
 *   Dark backgrounds: #0f172a, #1e293b
 *   All animations GPU-accelerated (transform, opacity)
 */

/* ============================================
   KEYFRAMES - ANIMATED GRADIENTS
   ============================================ */
@keyframes gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes skeleton-pulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 0.8; }
}

@keyframes float-subtle {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

@keyframes border-glow-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(249, 115, 22, 0.15); }
    50%      { box-shadow: 0 0 18px rgba(249, 115, 22, 0.35); }
}

@keyframes progress-gradient {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@keyframes badge-bounce {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

@keyframes breathe {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.015); opacity: 0.92; }
}

@keyframes slide-up-fade {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes underline-expand {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@keyframes irve-spinner {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================
   A) ANIMATED GRADIENT BACKGROUNDS - TITLE SLIDES
   ============================================ */

/* Default animated gradient for title slides */
.reveal .slides section.title-slide {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient-shift 15s ease infinite;
}

/* Electrical topics - blue/cyan/white */
.gradient-electric,
.reveal .slides section.gradient-electric {
    background: linear-gradient(-45deg, #1e3a8a, #2563eb, #06b6d4, #67e8f9) !important;
    background-size: 400% 400% !important;
    animation: gradient-shift 12s ease infinite !important;
}

/* IRVE brand - orange/yellow/white */
.gradient-irve,
.reveal .slides section.gradient-irve {
    background: linear-gradient(-45deg, #EA580C, #F97316, #FBBF24, #FEF3C7) !important;
    background-size: 400% 400% !important;
    animation: gradient-shift 14s ease infinite !important;
}

/* Safety topics - red/orange/yellow */
.gradient-safety,
.reveal .slides section.gradient-safety {
    background: linear-gradient(-45deg, #dc2626, #ea580c, #f59e0b, #fbbf24) !important;
    background-size: 400% 400% !important;
    animation: gradient-shift 10s ease infinite !important;
}

/* Communication/OCPP - purple/blue/cyan */
.gradient-comm,
.reveal .slides section.gradient-comm {
    background: linear-gradient(-45deg, #7c3aed, #6366f1, #3b82f6, #06b6d4) !important;
    background-size: 400% 400% !important;
    animation: gradient-shift 13s ease infinite !important;
}

/* Maintenance - green/teal/blue */
.gradient-maintenance,
.reveal .slides section.gradient-maintenance {
    background: linear-gradient(-45deg, #059669, #14b8a6, #0ea5e9, #38bdf8) !important;
    background-size: 400% 400% !important;
    animation: gradient-shift 11s ease infinite !important;
}


/* ============================================
   B) ANIMATED CATEGORY ICON CONTAINERS
   ============================================ */

/* Container for animated SVG icons in category headers */
.category-icon-animated {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.category-icon-animated svg {
    width: 32px;
    height: 32px;
}

/* Pulse animation for lightning icons */
@keyframes icon-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.7; transform: scale(1.1); }
}

/* Rotation for gear icons */
@keyframes icon-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Connect animation for plug icons */
@keyframes icon-connect {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-3px); }
    75%      { transform: translateX(3px); }
}

/* Wave animation for signal icons */
@keyframes icon-wave {
    0%, 100% { opacity: 0.4; transform: scale(0.8); }
    50%      { opacity: 1; transform: scale(1); }
}

/* Wrench swing */
@keyframes icon-swing {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(-8deg); }
    75%      { transform: rotate(8deg); }
}

/* Diagnostic pulse for maintenance */
@keyframes icon-diagnostic {
    0%   { stroke-dashoffset: 40; }
    100% { stroke-dashoffset: 0; }
}

/* Certificate shimmer */
@keyframes icon-shimmer {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.3); }
}

/* Car charging animation */
@keyframes icon-charge {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 1; }
}

/* Apply animations to icon classes */
.icon-anim-pulse   { animation: icon-pulse 2s ease-in-out infinite; }
.icon-anim-rotate  { animation: icon-rotate 8s linear infinite; }
.icon-anim-connect { animation: icon-connect 2s ease-in-out infinite; }
.icon-anim-wave    { animation: icon-wave 1.5s ease-in-out infinite; }
.icon-anim-swing   { animation: icon-swing 3s ease-in-out infinite; }
.icon-anim-diag    { animation: icon-diagnostic 2s ease-in-out infinite; }
.icon-anim-shimmer { animation: icon-shimmer 3s ease-in-out infinite; }
.icon-anim-charge  { animation: icon-charge 1.2s ease-in-out infinite; }


/* ============================================
   C) ENHANCED CARD STYLING - COURSE LIST
   ============================================ */

/* Category-colored border glow on hover */
.course-card {
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s ease;
}

.course-card:hover {
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(249, 115, 22, 0.15),
        0 0 20px rgba(249, 115, 22, 0.1);
}

/* Smooth image zoom on hover */
.course-card .course-thumb {
    overflow: hidden;
}

.course-card .course-thumb .initials {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.course-card:hover .course-thumb .initials {
    transform: scale(1.12);
}

.course-card .course-thumb::before {
    transition: opacity 0.4s ease;
}

.course-card:hover .course-thumb::before {
    opacity: 0.7;
}

/* Badge animation for "Nouveau" courses */
.badge-new {
    animation: badge-bounce 2s ease-in-out infinite;
    will-change: transform;
}

/* Completion progress bar with gradient fill */
.course-progress-bar {
    width: 100%;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.course-progress-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, #F97316, #FBBF24, #F97316);
    background-size: 200% 100%;
    animation: progress-gradient 3s linear infinite;
    transition: width 0.5s ease;
}

/* Category-specific border glow colors */
.course-card[data-category*="fondamentaux"]:hover,
.course-card[data-category*="Fondamentaux"]:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.08), 0 0 20px rgba(249, 115, 22, 0.2);
}

.course-card[data-category*="technique"]:hover,
.course-card[data-category*="Technique"]:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.08), 0 0 20px rgba(37, 99, 235, 0.2);
}

.course-card[data-category*="communication"]:hover,
.course-card[data-category*="Communication"]:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.08), 0 0 20px rgba(124, 58, 237, 0.2);
}

.course-card[data-category*="maintenance"]:hover,
.course-card[data-category*="Maintenance"]:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.08), 0 0 20px rgba(5, 150, 105, 0.2);
}

.course-card[data-category*="reglementation"]:hover,
.course-card[data-category*="glementation"]:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.08), 0 0 20px rgba(220, 38, 38, 0.15);
}

/* Habilec category cards - enhanced hover */
.hab-category-card {
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hab-category-card:hover {
    box-shadow:
        0 12px 40px rgba(249, 115, 22, 0.2),
        0 0 0 1px rgba(249, 115, 22, 0.1);
}

/* Habilec course card enhanced hover */
.hab-course-card {
    transition:
        transform 0.2s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.hab-course-card:hover {
    box-shadow:
        0 8px 25px rgba(249, 115, 22, 0.2),
        0 0 15px rgba(249, 115, 22, 0.08);
}


/* ============================================
   D) HEADER / NAVIGATION ENHANCEMENTS
   ============================================ */

/* Subtle gradient underline on active nav items */
.hab-nav-item.active {
    position: relative;
}

.hab-nav-item.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    border-radius: 1px;
    animation: underline-expand 0.3s ease forwards;
    transform-origin: center;
}

/* Logo breathing animation */
.hab-logo-badge {
    animation: breathe 4s ease-in-out infinite;
    will-change: transform, opacity;
}

/* Home screen logo subtle animation */
#home-screen header .logo {
    transition: transform 0.3s ease;
}

#home-screen header .logo:hover {
    transform: scale(1.02);
}

/* Scroll-triggered header background change */
.catalog-toolbar {
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.catalog-toolbar.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Hero badge enhanced glow */
.hero-badge {
    transition: transform 0.2s ease;
}

.hero-badge:hover {
    transform: translateY(-1px);
}

/* Home stat cards entrance animation */
.home-stat {
    animation: slide-up-fade 0.4s ease forwards;
    opacity: 0;
}

.home-stat:nth-child(1) { animation-delay: 0.05s; }
.home-stat:nth-child(2) { animation-delay: 0.1s; }
.home-stat:nth-child(3) { animation-delay: 0.15s; }
.home-stat:nth-child(4) { animation-delay: 0.2s; }

/* Category chips entrance animation */
.home-cat-chip {
    animation: slide-up-fade 0.35s ease forwards;
    opacity: 0;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.home-cat-chip:nth-child(1) { animation-delay: 0.05s; }
.home-cat-chip:nth-child(2) { animation-delay: 0.08s; }
.home-cat-chip:nth-child(3) { animation-delay: 0.11s; }
.home-cat-chip:nth-child(4) { animation-delay: 0.14s; }
.home-cat-chip:nth-child(5) { animation-delay: 0.17s; }
.home-cat-chip:nth-child(6) { animation-delay: 0.2s; }
.home-cat-chip:nth-child(7) { animation-delay: 0.23s; }
.home-cat-chip:nth-child(8) { animation-delay: 0.26s; }

/* Action cards entrance animation */
.action-card {
    animation: slide-up-fade 0.4s ease forwards;
    opacity: 0;
}

.action-card:nth-child(1) { animation-delay: 0.06s; }
.action-card:nth-child(2) { animation-delay: 0.12s; }
.action-card:nth-child(3) { animation-delay: 0.18s; }
.action-card:nth-child(4) { animation-delay: 0.24s; }


/* ============================================
   E) LOADING STATES
   ============================================ */

/* Skeleton loading card */
.skeleton-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.skeleton-thumb {
    height: 110px;
    background: #f3f4f6;
    position: relative;
    overflow: hidden;
}

.skeleton-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: shimmer 1.5s ease-in-out infinite;
    will-change: transform;
}

.skeleton-body {
    padding: 1rem;
}

.skeleton-line {
    height: 12px;
    border-radius: 6px;
    background: #f3f4f6;
    margin-bottom: 0.75rem;
    position: relative;
    overflow: hidden;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    animation: shimmer 1.5s ease-in-out infinite;
    will-change: transform;
}

.skeleton-line.short  { width: 60%; }
.skeleton-line.medium { width: 80%; }
.skeleton-line.full   { width: 100%; }
.skeleton-line.tiny   { width: 40%; height: 10px; }

/* Shimmer animation for loading cards */
.shimmer-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(249, 115, 22, 0.04) 25%,
        rgba(249, 115, 22, 0.08) 50%,
        rgba(249, 115, 22, 0.04) 75%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2s ease-in-out infinite;
    pointer-events: none;
    will-change: transform;
}

/* IRVE Branded Spinner */
.irve-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem;
}

.irve-spinner-ring {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid rgba(249, 115, 22, 0.15);
    border-top-color: #F97316;
    animation: irve-spinner 0.8s linear infinite;
    will-change: transform;
}

.irve-spinner-text {
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Skeleton loading grid - generates multiple skeleton cards */
.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.5rem;
    padding: 0 1.5rem 3rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Full-page loading overlay */
.loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(245, 245, 245, 0.9);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.loading-overlay.active {
    opacity: 1;
    pointer-events: auto;
}


/* ============================================
   F) ENHANCED HOVER STATES & MICRO-INTERACTIONS
   ============================================ */

/* Home section titles - subtle entrance */
.home-section-title {
    animation: slide-up-fade 0.4s ease forwards;
    opacity: 0;
    animation-delay: 0.02s;
}

/* Catalog quick filter tags - smoother hover */
.cat-tab {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.cat-tab:hover {
    transform: translateY(-1px);
}

.cat-tab.active {
    transform: translateY(0);
}

/* Dropdown menu - smoother entrance */
.dropdown-menu {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced focus ring for interactive elements */
.course-card:focus-visible,
.hab-category-card:focus-visible,
.cat-tab:focus-visible {
    outline: 2px solid #F97316;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.15);
}


/* ============================================
   G) DARK MODE INTEGRATION (for dark sections)
   ============================================ */

/* Reveal.js title slides with dark backgrounds need white text */
.reveal .slides section.title-slide,
.reveal .slides section.gradient-electric,
.reveal .slides section.gradient-irve,
.reveal .slides section.gradient-safety,
.reveal .slides section.gradient-comm,
.reveal .slides section.gradient-maintenance {
    color: #ffffff;
}

.reveal .slides section.title-slide h1,
.reveal .slides section.title-slide h2,
.reveal .slides section.title-slide h3,
.reveal .slides section.title-slide p,
.reveal .slides section.gradient-electric h1,
.reveal .slides section.gradient-electric h2,
.reveal .slides section.gradient-electric h3,
.reveal .slides section.gradient-electric p,
.reveal .slides section.gradient-irve h1,
.reveal .slides section.gradient-irve h2,
.reveal .slides section.gradient-irve h3,
.reveal .slides section.gradient-irve p,
.reveal .slides section.gradient-safety h1,
.reveal .slides section.gradient-safety h2,
.reveal .slides section.gradient-safety h3,
.reveal .slides section.gradient-safety p,
.reveal .slides section.gradient-comm h1,
.reveal .slides section.gradient-comm h2,
.reveal .slides section.gradient-comm h3,
.reveal .slides section.gradient-comm p,
.reveal .slides section.gradient-maintenance h1,
.reveal .slides section.gradient-maintenance h2,
.reveal .slides section.gradient-maintenance h3,
.reveal .slides section.gradient-maintenance p {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}


/* ============================================
   H) ACCESSIBILITY - REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .reveal .slides section.title-slide,
    .reveal .slides section.gradient-electric,
    .reveal .slides section.gradient-irve,
    .reveal .slides section.gradient-safety,
    .reveal .slides section.gradient-comm,
    .reveal .slides section.gradient-maintenance {
        animation: none !important;
        background-size: 100% 100% !important;
    }

    .badge-new,
    .hab-logo-badge,
    .home-stat,
    .home-cat-chip,
    .action-card,
    .home-section-title,
    .category-icon-animated svg,
    .icon-anim-pulse,
    .icon-anim-rotate,
    .icon-anim-connect,
    .icon-anim-wave,
    .icon-anim-swing,
    .icon-anim-diag,
    .icon-anim-shimmer,
    .icon-anim-charge {
        animation: none !important;
        opacity: 1 !important;
    }

    .skeleton-thumb::after,
    .skeleton-line::after,
    .shimmer-overlay {
        animation: none !important;
    }

    .course-progress-fill {
        animation: none !important;
    }

    .irve-spinner-ring {
        animation: irve-spinner 1.5s linear infinite !important;
    }

    .course-card,
    .hab-category-card,
    .hab-course-card,
    .cat-tab,
    .home-cat-chip {
        transition-duration: 0.01ms !important;
    }
}