/**
 * =====================================================================================================
 * PORTFOLIO - MAIN CSS ORCHESTRATOR
 * =====================================================================================================
 *
 * Author: Enzo Gaggiotti
 * Description: Main CSS file that orchestrates all modular stylesheets for the portfolio website.
 *              Implements a modern component-based architecture with glassmorphism effects
 *              and comprehensive dark mode design system.
 *
 * Architecture:
 * - Foundation Layer: Variables, base styles, animations
 * - Layout Layer: Header, navigation, structural components
 * - Component Layer: Buttons, cards, interactive elements
 * - Specialized Layer: Contact forms, unique sections
 *
 * Design System: Dark Mode Only
 * Performance: Optimized for modern browsers with fallbacks
 * Last Updated: July 2025
 * =====================================================================================================
 */

/* =====================================================================================================
   FOUNDATION LAYER - Core Styles & Variables
   ===================================================================================================== */
@import url('./modules/variables.css');      /* CSS custom properties and design tokens */
@import url('./modules/base.css');           /* Global styles, resets, typography */
@import url('./modules/animations.css');     /* Keyframes, transitions, scroll animations */

/* =====================================================================================================
   LAYOUT LAYER - Structural Components
   ===================================================================================================== */
@import url('./modules/header.css');         /* Fixed header, navigation, mobile menu */

/* =====================================================================================================
   COMPONENT LAYER - Interactive Elements
   ===================================================================================================== */
@import url('./modules/buttons.css');        /* Glassmorphism buttons, filter controls */
@import url('./modules/cards.css');          /* Project cards, technology showcases */
@import url('./modules/project-actions.css'); /* Project-specific action buttons */

/* =====================================================================================================
   SPECIALIZED LAYER - Unique Components
   ===================================================================================================== */
@import url('./modules/contact.css');        /* Contact forms and social interactions */
@import url('./modules/special-components.css'); /* About section, timeline, hero elements */
@import url('./modules/loader.css');         /* Loader minimaliste */

/* =====================================================================================================
   PRODUCTION OPTIMIZATIONS
   ===================================================================================================== */

/**
 * Critical filter button visibility fix for production environments
 * Ensures filter buttons are always visible regardless of animation state
 */
.filter-btn,
.filter-btn.animate-on-scroll,
.animate-on-scroll .filter-btn {
  opacity: 1 !important;
  transform: translateY(0) !important;
  visibility: visible !important;
  display: inline-flex !important;
}

/**
 * Progressive enhancement for JavaScript-enabled environments
 */
.js-enabled .filter-btn.animate-on-scroll:not(.animate-in) {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

/**
 * Fallback for no-JavaScript environments
 */
.no-js .animate-on-scroll {
  opacity: 1;
  transform: translateY(0);
}

/* =====================================================================================================
   END OF MAIN STYLESHEET
   ===================================================================================================== */