/* ANCHOR: component_styles */
/* REUSED: Universal component styles with inheritance */
/* SCALED FOR: Consistent widget appearance across all types */
/* UPDATED COMMENTS: Refactored to modular CSS - widget-specific styles moved to individual folders */

/* ANCHOR: widget_base */
/* REUSED: Base widget styles shared across all widget types */
.widget {
  position: absolute;
  cursor: grab;
  /* CRITICAL: Transform-based positioning and effects */
  will-change: transform;
  /* CRITICAL: Position from top-left corner for accurate boundaries */
  transform-origin: top left;
  /* CRITICAL: Force overflow visible for shadows */
  overflow: visible !important;
  /* UPDATED COMMENTS: CSS transitions for smooth animations */
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ANCHOR: viewport_positioning */
/* CRITICAL: Widget positioning with global offset adjustment */
/* UPDATED COMMENTS: All positioning values extracted to CSS variables for maintainability */
/* REUSED: CSS variables from styles/variables.css for consistent positioning */

/* стикер: левый верхний угол */
.widget-position--sticker {
  top: var(--widget-offset-sticker-top);
  left: var(--widget-offset-sticker-left);
}

/* папка проекты: левый центр */
.widget-position--projects-folder {
  top: var(--widget-offset-projects-folder-top);
  left: var(--widget-offset-projects-folder-left);
}

/* папка фан: нижний правый угол */
.widget-position--fun-folder {
  right: var(--widget-offset-fun-folder-right);
  bottom: var(--widget-offset-fun-folder-bottom);
}

/* резюме: центр-низ */
.widget-position--resume {
  top: var(--widget-offset-resume-top);
  left: var(--widget-offset-resume-left);
}

/* часы: правый верхний угол */
.widget-position--clock {
  top: var(--widget-offset-clock-top);
  right: var(--widget-offset-clock-right);
}

/* телеграм: правая сторона */
.widget-position--telegram {
  right: var(--widget-offset-telegram-right);
  top: var(--widget-offset-telegram-top);
}

/* стикер кота: правая сторона */
.widget-position--cat-sticker {
  right: var(--widget-offset-cat-sticker-right);
  bottom: var(--widget-offset-cat-sticker-bottom);
}

/* ANCHOR: universal_shadow_states */
/* REUSED: Universal shadow states for all widgets - applied to inner containers */
/* CRITICAL: Shadows applied to inner content for proper transform alignment */

/* Universal shadow transitions for inner containers */
.sticker-container,
.document-page,
.clock-face,
.feed-button-container {
  /* CRITICAL: CSS transitions for shadows only - JS handles transforms */
  transition: box-shadow var(--transition-normal);
}

.folder-back {
  /* CRITICAL: CSS transitions for shadows only - JS handles transforms */
  transition: filter var(--transition-normal);
}

/* Sticker widget shadows */
.widget--sticker:hover .sticker-container,
.widget--sticker.widget--hovered .sticker-container {
  box-shadow: 0px 40px 16px rgba(0, 0, 0, 0.02), 0px 22px 14px rgba(0, 0, 0, 0.08), 0px 10px 10px rgba(0, 0, 0, 0.12), 0px 3px 6px rgba(0, 0, 0, 0.15);
}

.widget--sticker.widget--pressed .sticker-container {
  box-shadow: 0px 16px 6px rgba(0, 0, 0, 0.02), 0px 9px 5px rgba(0, 0, 0, 0.08), 0px 4px 4px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.15);
}

.widget--sticker.widget--dragging .sticker-container {
  box-shadow: 0px 50px 20px rgba(0, 0, 0, 0.03), 0px 28px 18px rgba(0, 0, 0, 0.10), 0px 12px 12px rgba(0, 0, 0, 0.15), 0px 4px 8px rgba(0, 0, 0, 0.20);
  transition: none !important;
}

/* Resume widget shadows */
.widget--resume:hover .document-page,
.widget--resume.widget--hovered .document-page {
  box-shadow: 0px 40px 16px rgba(0, 0, 0, 0.02), 0px 22px 14px rgba(0, 0, 0, 0.08), 0px 10px 10px rgba(0, 0, 0, 0.12), 0px 3px 6px rgba(0, 0, 0, 0.15);
}

.widget--resume.widget--pressed .document-page {
  box-shadow: 0px 16px 6px rgba(0, 0, 0, 0.02), 0px 9px 5px rgba(0, 0, 0, 0.08), 0px 4px 4px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.15);
}

.widget--resume.widget--dragging .document-page {
  box-shadow: 0px 50px 20px rgba(0, 0, 0, 0.03), 0px 28px 18px rgba(0, 0, 0, 0.10), 0px 12px 12px rgba(0, 0, 0, 0.15), 0px 4px 8px rgba(0, 0, 0, 0.20);
  transition: none !important;
}

/* Clock widget shadows */
.widget--clock:hover .clock-face,
.widget--clock.widget--hovered .clock-face {
  box-shadow: 0px 40px 16px rgba(0, 0, 0, 0.02), 0px 22px 14px rgba(0, 0, 0, 0.08), 0px 10px 10px rgba(0, 0, 0, 0.12), 0px 3px 6px rgba(0, 0, 0, 0.15);
}

.widget--clock.widget--pressed .clock-face {
  box-shadow: 0px 16px 6px rgba(0, 0, 0, 0.02), 0px 9px 5px rgba(0, 0, 0, 0.08), 0px 4px 4px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.15);
}

.widget--clock.widget--dragging .clock-face {
  box-shadow: 0px 50px 20px rgba(0, 0, 0, 0.03), 0px 28px 18px rgba(0, 0, 0, 0.10), 0px 12px 12px rgba(0, 0, 0, 0.15), 0px 4px 8px rgba(0, 0, 0, 0.20);
  transition: none !important;
}

/* Feed button widget shadows */
.widget--feed-button:hover .feed-button-container,
.widget--feed-button.widget--hovered .feed-button-container {
  box-shadow: 0px 40px 16px rgba(0, 0, 0, 0.02), 0px 22px 14px rgba(0, 0, 0, 0.08), 0px 10px 10px rgba(0, 0, 0, 0.12), 0px 3px 6px rgba(0, 0, 0, 0.15);
}

.widget--feed-button.widget--pressed .feed-button-container {
  box-shadow: 0px 16px 6px rgba(0, 0, 0, 0.02), 0px 9px 5px rgba(0, 0, 0, 0.08), 0px 4px 4px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.15);
}

.widget--feed-button.widget--dragging .feed-button-container {
  box-shadow: 0px 50px 20px rgba(0, 0, 0, 0.03), 0px 28px 18px rgba(0, 0, 0, 0.10), 0px 12px 12px rgba(0, 0, 0, 0.15), 0px 4px 8px rgba(0, 0, 0, 0.20);
  transition: none !important;
}

/* Folder widget shadows (uses filter instead of box-shadow) */
/* CRITICAL: Hover and interaction states override base shadow from folder-widget.css */
.widget--folder:hover .folder-back,
.widget--folder.widget--hovered .folder-back {
  filter: drop-shadow(0px 40px 16px rgba(0, 0, 0, 0.02)) drop-shadow(0px 22px 14px rgba(0, 0, 0, 0.08)) drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.12)) drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.15)) !important;
}

.widget--folder.widget--pressed .folder-back {
  filter: drop-shadow(0px 16px 6px rgba(0, 0, 0, 0.02)) drop-shadow(0px 9px 5px rgba(0, 0, 0, 0.08)) drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.12)) drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.15)) !important;
}

.widget--folder.widget--dragging .folder-back {
  filter: drop-shadow(0px 50px 20px rgba(0, 0, 0, 0.03)) drop-shadow(0px 28px 18px rgba(0, 0, 0, 0.10)) drop-shadow(0px 12px 12px rgba(0, 0, 0, 0.15)) drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.20)) !important;
  transition: none !important;
}

/* CRITICAL: Universal font smoothing fix for all text elements */
.widget *,
.widget *::before,
.widget *::after {
  /* UPDATED COMMENTS: Fix font smoothing during transforms across all browsers */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* CRITICAL: Hardware acceleration for stable text rendering */
  backface-visibility: hidden;
}

/* CRITICAL: Hardware acceleration for all transformable elements */
.widget,
.widget > *,
.widget [class*="container"],
.widget [class*="content"],
.widget [class*="title"],
.widget [class*="body"],
.widget [class*="label"],
.widget [class*="text"] {
  /* UPDATED COMMENTS: GPU optimization for smooth transforms */
  transform-style: preserve-3d;
  will-change: transform;
}

/* UPDATED COMMENTS: Widget states - no shadows on wrapper, handled by inner content */
.widget:hover,
.widget.widget--hovered {
  /* CRITICAL: No shadow on wrapper - applied to inner content for proper transform alignment */
}

.widget.widget--pressed {
  /* UPDATED COMMENTS: No shadow on wrapper - applied to inner content */
}

.widget.widget--dragging {
  cursor: grabbing;
  z-index: var(--z-modal);
  /* CRITICAL: Disable transitions during drag for immediate response */
  transition: none !important;
  /* UPDATED COMMENTS: No shadow on wrapper - applied to inner content */
}

/* UPDATED COMMENTS: Widget initialized - ready for JS animations */
.widget.widget--initialized {
  /* CRITICAL: JS animations handle all transforms - no CSS transitions needed */
}

/* ANCHOR: widget_imports */
/* UPDATED COMMENTS: Widget-specific styles are now imported from individual CSS files */
/* Import widget styles in HTML or through build process:
 * - js/widgets/sticker/sticker-widget.css
 * - js/widgets/resume/resume-widget.css  
 * - js/widgets/clock/clock-widget.css
 * - js/widgets/folder/folder-widget.css
 * - js/widgets/cat/cat-widget.css
 * - js/widgets/feed-button/feed-button-widget.css
 */
/* Cat Sticker widget shadows */
.cat-sticker-container {
  /* CRITICAL: CSS transitions for shadows only - JS handles transforms */
  transition: box-shadow var(--transition-normal);
}

.widget--cat-sticker:hover .cat-sticker-container,
.widget--cat-sticker.widget--hovered .cat-sticker-container {
  box-shadow: 
    0px 40px 16px rgba(0, 0, 0, 0.02), 
    0px 22px 14px rgba(0, 0, 0, 0.08), 
    0px 10px 10px rgba(0, 0, 0, 0.12), 
    0px 3px 6px rgba(0, 0, 0, 0.15) !important;
}

.widget--cat-sticker.widget--pressed .cat-sticker-container {
  box-shadow: 
    0px 16px 6px rgba(0, 0, 0, 0.02), 
    0px 9px 5px rgba(0, 0, 0, 0.08), 
    0px 4px 4px rgba(0, 0, 0, 0.12), 
    0px 1px 2px rgba(0, 0, 0, 0.15) !important;
}

.widget--cat-sticker.widget--dragging .cat-sticker-container {
  box-shadow: 
    0px 50px 20px rgba(0, 0, 0, 0.03), 
    0px 28px 18px rgba(0, 0, 0, 0.10), 
    0px 12px 12px rgba(0, 0, 0, 0.15), 
    0px 4px 8px rgba(0, 0, 0, 0.20) !important;
  transition: none !important;
}
/* Telegram widget shadows */
.telegram-container {
  /* CRITICAL: CSS transitions for shadows only - JS handles transforms */
  transition: box-shadow var(--transition-normal);
}

.widget--telegram:hover .telegram-container,
.widget--telegram.widget--hovered .telegram-container {
  box-shadow: 
    0px 40px 16px rgba(0, 0, 0, 0.02), 
    0px 22px 14px rgba(0, 0, 0, 0.08), 
    0px 10px 10px rgba(0, 0, 0, 0.12), 
    0px 3px 6px rgba(0, 0, 0, 0.15) !important;
}

.widget--telegram.widget--pressed .telegram-container {
  box-shadow: 
    0px 16px 6px rgba(0, 0, 0, 0.02), 
    0px 9px 5px rgba(0, 0, 0, 0.08), 
    0px 4px 4px rgba(0, 0, 0, 0.12), 
    0px 1px 2px rgba(0, 0, 0, 0.15) !important;
}

.widget--telegram.widget--dragging .telegram-container {
  box-shadow: 
    0px 50px 20px rgba(0, 0, 0, 0.03), 
    0px 28px 18px rgba(0, 0, 0, 0.10), 
    0px 12px 12px rgba(0, 0, 0, 0.15), 
    0px 4px 8px rgba(0, 0, 0, 0.20) !important;
  transition: none !important;
}