/**
 * Main Stylesheet
 * Causal Atlas - Apple-inspired Design System
 *
 * This file imports all modular stylesheets in the correct order.
 * The architecture follows:
 * 1. Design Tokens (variables)
 * 2. Base/Reset styles
 * 3. Layout utilities
 * 4. Component styles
 */

/* ========================================================================
   DESIGN TOKENS
   All CSS custom properties and design system variables
   ======================================================================== */
@import url('tokens.css');

/* ========================================================================
   BASE & RESET
   CSS reset and foundational element styles
   ======================================================================== */
@import url('base.css');

/* ========================================================================
   LAYOUT UTILITIES
   Grid, flexbox, spacing, and section patterns
   ======================================================================== */
@import url('layout.css');

/* ========================================================================
   COMPONENTS
   Reusable UI components organized by function
   ======================================================================== */
@import url('header.css');
@import url('hero.css');
@import url('buttons.css');
@import url('cards.css');
@import url('foundations.css');
@import url('domains.css');
@import url('domain-chooser.css');
@import url('tools.css');
@import url('tools-explorer.css');
@import url('methods.css');
@import url('pricing.css');
@import url('footer.css');

/* ========================================================================
   PERFORMANCE OPTIMIZATIONS
   CSS containment and will-change hints for better rendering
   ======================================================================== */

/* Apply CSS containment to isolated components */
.foundation-card-3d,
.domain-card,
.foundation-carousel-container,
.domain-cards-container {
  contain: layout paint style;
}

/* Will-change hints for animated elements */
.foundation-card-3d {
  will-change: transform, opacity;
}

.domain-card {
  will-change: transform;
}

.learning-path-popover {
  will-change: transform;
}

.card-nav-arrow {
  will-change: transform, opacity;
}

.hero-background canvas {
  will-change: transform;
}

/* Remove will-change after transition completes */
.foundation-card-3d:not(.animating),
.domain-card:not(.animating),
.learning-path-popover:not(.show),
.card-nav-arrow:not(.visible) {
  will-change: auto;
}

/* ========================================================================
   CUSTOM COMPONENT STYLES
   Project-specific components not in the base system
   ======================================================================== */

/* Carousel Controls */
.carousel-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-xl);
}

.carousel-indicators {
  display: flex;
  gap: var(--space-2);
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  /* OPTIMIZED: Specific properties instead of 'all' */
  transition: width var(--duration-normal) var(--ease-standard),
              background var(--duration-normal) var(--ease-standard);
}

.carousel-dot:hover {
  background: rgba(255, 255, 255, 0.5);
}

.carousel-dot.active {
  width: 24px;
  background: var(--color-white);
}

/* Card Navigation Arrows */
.card-nav-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-popover);

  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(var(--blur-md));
  backdrop-filter: blur(var(--blur-md));

  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  color: var(--color-white);

  cursor: pointer;
  /* OPTIMIZED: Specific properties instead of 'all' */
  transition: background var(--duration-normal) var(--ease-standard),
              border-color var(--duration-normal) var(--ease-standard),
              transform var(--duration-normal) var(--ease-standard),
              opacity var(--duration-normal) var(--ease-standard);
}

.card-nav-arrow:hover {
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(255, 255, 255, 0.2);
}

.card-nav-prev {
  left: var(--space-6);
}

.card-nav-next {
  right: var(--space-6);
}

@media (max-width: 768px) {
  .card-nav-arrow {
    width: 40px;
    height: 40px;
  }

  .card-nav-prev {
    left: var(--space-4);
  }

  .card-nav-next {
    right: var(--space-4);
  }
}

/* Learning Path Popover */
.learning-path-popover {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-popover);

  max-height: 70vh;
  overflow-y: auto;

  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: saturate(180%) blur(var(--blur-xl));
  backdrop-filter: saturate(180%) blur(var(--blur-xl));

  border-top: 1px solid var(--color-grey-200);
  border-top-left-radius: var(--radius-3xl);
  border-top-right-radius: var(--radius-3xl);

  box-shadow: var(--shadow-2xl);

  transform: translateY(100%);
  transition: transform var(--duration-slow) var(--ease-apple-expo);
}

.learning-path-popover.active {
  transform: translateY(0);
}

.learning-path-popover-content {
  padding: var(--space-8) var(--space-6);
  max-width: var(--container-xl);
  margin: 0 auto;
}

.learning-path-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-6);
}

.learning-path-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-grey-900);
}

.learning-path-title svg {
  width: 24px;
  height: 24px;
  color: var(--color-primary-500);
}

.close-learning-path {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-grey-100);
  border: none;
  border-radius: var(--radius-full);
  color: var(--color-grey-700);
  font-size: var(--font-size-2xl);
  cursor: pointer;
  /* OPTIMIZED: Specific properties */
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

.close-learning-path:hover {
  background: var(--color-grey-200);
  color: var(--color-grey-900);
}

.popover-close-top,
.popover-close-bottom {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-1);
  background: var(--color-grey-100);
  border: none;
  border-radius: var(--radius-full);
  color: var(--color-grey-700);
  font-size: var(--font-size-xs);
  cursor: pointer;
  /* OPTIMIZED: Specific properties */
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}

.popover-close-top svg,
.popover-close-bottom svg {
  width: 20px;
  height: 20px;
}

.popover-close-bottom {
  top: auto;
  bottom: var(--space-6);
  right: 50%;
  transform: translateX(50%);
  width: auto;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
}

/* Learning Path Tabs */
.learning-path-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding: var(--space-1);
  background: var(--color-grey-100);
  border-radius: var(--radius-xl);
}

.path-level-tab {
  flex: 1;
  padding: var(--space-3) var(--space-6);
  background: transparent;
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-grey-600);
  cursor: pointer;
  /* OPTIMIZED: Specific properties */
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}

.path-level-tab:hover {
  color: var(--color-grey-900);
}

.path-level-tab.active {
  background: var(--color-white);
  color: var(--color-grey-900);
  box-shadow: var(--shadow-sm);
}

.path-level-tab.locked {
  opacity: var(--opacity-50);
  cursor: not-allowed;
}

/* Upgrade CTA */
.upgrade-cta {
  text-align: center;
  color: var(--color-white);
}

.upgrade-cta-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}

.upgrade-cta h2 {
  font-size: var(--font-size-6xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

.upgrade-cta p {
  font-size: var(--font-size-lg);
  color: rgba(255, 255, 255, 0.8);
  max-width: 700px;
  margin: 0 auto var(--space-6);
}

/* ========================================================================
   UTILITY CLASSES
   Additional utilities specific to this project
   ======================================================================== */

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-white {
  color: var(--color-white);
}

.text-grey {
  color: var(--color-grey-600);
}

.bg-dark {
  background-color: var(--color-grey-900);
}

.bg-light {
  background-color: var(--color-grey-50);
}

.max-w-container {
  max-width: var(--container-xl);
  margin-left: auto;
  margin-right: auto;
}

/* ========================================================================
   PRINT STYLES (additional)
   ======================================================================== */

/* Ensure tutorial overlays and modals are always on top */
.tutorial-overlay,
.domain-chooser-modal {
  z-index: var(--z-notification) !important;
}

@media print {
  .site-header,
  .hero-scroll-indicator,
  .carousel-controls,
  .card-nav-arrow,
  .learning-path-popover,
  .mobile-menu-toggle,
  .tutorial-overlay,
  .domain-chooser-modal {
    display: none !important;
  }
}