/* ANCHOR: base_styles */
/* REUSED: Foundation styles for all components */
/* SCALED FOR: Performance optimization with contain property */

/* ANCHOR: css_variables */
/* UPDATED: Shared background for desktop canvas only */
:root {
  --app-bg: #1E1E1E;
  --app-bg-size: 100% 100%;
  --app-bg-position: center bottom;
  --app-bg-repeat: no-repeat;
}

html {
  width: 100%;
  /* CRITICAL: iOS Safari edge-to-edge height */
  /* UPDATED COMMENTS: -webkit-fill-available for Safari, 100% fallback */
  height: -webkit-fill-available;
  height: 100%;
  /* Match viewport-test: ensure document can extend to full visual viewport */
  min-height: 100vh;
  min-height: 100lvh;
  margin: 0;
  /* CRITICAL: NO padding by default - iOS Safari fix in responsive.css handles it */
  /* UPDATED COMMENTS: Padding moved to @supports rule for iOS Safari only */
  padding: 0;
  /* Match viewport-test: allow full visual overflow */
  overflow: visible;
  overscroll-behavior: none;
  position: relative;
  box-sizing: border-box;
}

/* CRITICAL: Hide scrollbar globally (custom scroll hidden on html root) */
html {
  scrollbar-width: none; /* Firefox */
}

html::-webkit-scrollbar {
  width: 0;
  height: 0;
}

body {
  font-family: var(--font-family-primary);
  width: 100%;
  /* Match viewport-test: full viewport height */
  min-height: 100vh;
  min-height: 100lvh;
  margin: 0;
  /* CRITICAL: NO padding - html handles safe-area padding */
  /* UPDATED COMMENTS: Prevents double padding with html element */
  padding: 0;
  /* Match viewport-test: allow full visual overflow */
  overflow: visible;
  overscroll-behavior: none;
  user-select: none;
  color: var(--color-primary);
  position: relative;
  box-sizing: border-box;
  /* CRITICAL: Flexbox for proper layout */
  display: flex;
  flex-direction: column;
}

/* CRITICAL: Hide all content until the app is fully loaded */
body:not(.loaded) > *:not(#loading-indicator):not(script) {
  display: none !important;
}

/* ANCHOR: mountain_overlay */
/* UPDATED COMMENTS: Mountains removed from body - now on workspace-container */
body::before {
  display: none;
}

body.page-mode {
  /* CRITICAL: Let document handle scroll to avoid iOS frames */
  overflow: visible !important;
  /* iOS Safari: Prevent white bounce/frames in page mode */
  background: var(--page-bg);
  /* CRITICAL: NO padding - content inside (.project-page, .fun-gallery) handles safe-area */
  /* UPDATED COMMENTS: Removed padding to prevent double safe-area spacing */
  padding: 0;
}

body.page-mode::before {
  opacity: 0 !important;
}

/* ANCHOR: desktop_canvas */
/* UPDATED COMMENTS: Fullscreen canvas container with perfect flexbox centering */
/* CRITICAL: Fixed background layer behind all content */
/* SCALED FOR: Background scrolls with canvas on mobile */
/* iOS Safari: Full viewport including safe-areas (notch/home indicator) with viewport-fit=cover */
/* UPDATED COMMENTS: Solid background-color required for viewport-fit=cover compatibility */
.desktop-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* CRITICAL: Overflow must be visible */
  overflow: visible;
  touch-action: auto;
  cursor: default;
  overscroll-behavior: none;
  z-index: 2; /* CRITICAL: Above background, below page content in page mode */
  /* CRITICAL: Perfect flexbox centering */
  display: flex;
  align-items: center;
  justify-content: center;
  /* UPDATED COMMENTS: Ensure flexbox works properly */
  flex-direction: column;
  background: var(--app-bg);
  background-size: var(--app-bg-size);
  background-position: var(--app-bg-position);
  background-repeat: var(--app-bg-repeat);
}

.desktop-canvas.is-panning {
  touch-action: none;
  cursor: default;
}

/* CRITICAL: Hide scrollbars on canvas while keeping scroll/pan */
.desktop-canvas {
  scrollbar-width: none; /* Firefox */
}

.desktop-canvas::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* CRITICAL: Minimum sizes only on desktop */
@media (min-width: 1101px) {
  .desktop-canvas {
    min-width: 1100px;
    min-height: 720px;
  }
}

/* CRITICAL: Allow horizontal scroll on small screens for desktop canvas */
@media (max-width: 1100px) {
  html,
  body {
    /* Match viewport-test: allow body to handle scrolling */
    overflow: visible;
    height: auto;
  }

  .desktop-canvas {
    position: relative;
    overflow: visible;
    /* Fixed viewport height so both axes scroll inside the canvas */
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    /* Ensure top-left alignment on small screens */
    align-items: flex-start;
    justify-content: flex-start;
  }
}

/* CRITICAL: In page mode, hide desktop canvas entirely */
body.page-mode .desktop-canvas {
  display: none !important;
}

/* ANCHOR: canvas_mountain_overlay */
/* CRITICAL: Mountains removed from desktop-canvas - now on workspace-container */
.desktop-canvas::before {
  display: none;
}

/* CRITICAL: Widgets inside canvas are hidden during loading */
.desktop-canvas .workspace-container {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in, visibility 0.5s ease-in;
}

/* CRITICAL: Show workspace after loading is complete */
body.loaded .desktop-canvas .workspace-container {
  opacity: 1;
  visibility: visible;
}

/* ANCHOR: workspace_container */
/* REUSED: Centralized workspace wrapper for all widgets */
/* SCALED FOR: Gradient background on workspace for proper sizing */
/* UPDATED COMMENTS: Dimensions controlled by CSS only (no inline JS sizing) */
.workspace-container {
  /* CRITICAL: Flex item properties for proper centering */
  flex-shrink: 0;
  position: relative;
  width: 100%;
  height: 100%;
  /* CRITICAL: Solid black background to match the rest of the dark desktop surfaces */
  background-color: var(--app-bg);
  background-image: none;
  background-size: 0 0;
  background-position: center;
  background-repeat: no-repeat;
  /* CRITICAL: Internal coordinate system for widgets */
  overflow: visible;
  overscroll-behavior: none;
  /* CRITICAL: Force dimensions and remove any padding/margin */
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  /* CRITICAL: NO z-index - it creates stacking context and blocks mix-blend-mode */
}

/* ANCHOR: workspace_mountain_overlay */
/* CRITICAL: Mountains at bottom of workspace-container, full workspace width */
/* UPDATED COMMENTS: Background positioned relative to workspace, not viewport */
/* CRITICAL: No z-index - positioned behind widgets by DOM order */
.workspace-container::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-image: url('../assets/images/bg-mountains.svg');
  background-position: bottom center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease-in;
}

/* ANCHOR: workspace_texture_dots */
/* REUSED: Subtle dot texture that stays visible on the dark desktop background */
/* UPDATED COMMENTS: Lighter dots used so the texture remains readable on #1E1E1E */
.workspace-container {
  background-image:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.02) 1.5px, transparent 1.5px);
  background-size: 16px 16px;
  background-position: 0 0;
  background-repeat: repeat;
}

/* CRITICAL: Top/bottom fade overlay above mountains, below widgets */
.workspace-container::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: none;
  background-size: 0 0;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* CRITICAL: Show mountains after loading */
body.loaded .workspace-container::before {
  opacity: 0.3;
}

/* Ensure widgets stay above background overlays */
.workspace-container .widget-wrapper {
  z-index: 2;
}

/* ANCHOR: mobile_canvas_adaptation */
/* UPDATED COMMENTS: Mobile canvas with touch pan/scroll */
/* SCALED FOR: Touch navigation on mobile devices */
@media (max-width: 768px) {
  .desktop-canvas {
    /* CRITICAL: Change to relative so container expands with content */
    position: relative;
    /* Match viewport-test: allow body scroll, no nested scroll container */
    overflow: visible;
    /* CRITICAL: Align content to top-left for natural scroll start */
    align-items: flex-start;
    justify-content: flex-start;
    /* SCALED FOR: Hardware-accelerated scrolling */
    will-change: scroll-position;
    /* CRITICAL: Full edge-to-edge - NO padding, background extends under notch */
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
  }
  
  /* CRITICAL: In page mode, desktop canvas is hidden */
  
  .workspace-container {
    /* CRITICAL: No padding - full edge-to-edge layout */
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-width: 1100px;
    min-height: 900px;
    /* Ensure widgets are visible on iOS even if body.loaded is missing */
    opacity: 1;
    visibility: visible;
  }

  /* CRITICAL: Mobile-only top/bottom gradient */
  .workspace-container::after {
    background-image:
      linear-gradient(to bottom, rgba(var(--color-mobile-edge-fade-rgb), 1) 0%, rgba(var(--color-mobile-edge-fade-rgb), 0) 28%),
      linear-gradient(to top, rgba(var(--color-mobile-edge-fade-rgb), 1) 0%, rgba(var(--color-mobile-edge-fade-rgb), 0) 28%);
    background-size:
      100% 20vh,
      100% 20vh;
    background-position:
      top center,
      bottom center;
    background-repeat:
      no-repeat,
      no-repeat;
  }
}

/* ANCHOR: loading_system */
/* UPDATED COMMENTS: Full-screen loading overlay with solid dark background */
/* CRITICAL: Covers entire viewport during initial load, stays visible until JS hides it */
.loading-indicator {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 100lvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  z-index: 9999;
  background: var(--app-bg);
}

.loading-indicator::before {
  content: '';
  width: 24px;
  height: 24px;
  margin-bottom: 16px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: rgba(255, 255, 255, 0.95);
  animation: loading-spin 0.8s linear infinite;
}

.loading-indicator p {
  /* CRITICAL: System font for instant display without loading custom fonts */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  font-size: 14px;
  font-weight: 400;
  margin: 0;
  letter-spacing: 0.5px;
}

@keyframes loading-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ANCHOR: modal_system */
/* UPDATED COMMENTS: Modal styles moved to contact-modal.css for specificity */
/* CRITICAL FIX: Removed conflicting background that caused flash */

/* ANCHOR: utility_classes */
/* REUSED: Common utility classes for rapid development */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.no-scroll {
  overflow: hidden;
}

.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}