/* ============================================
   macOS Animations CSS
   Ultra-Premium Animation System
   ============================================ */

/* Smooth Universal Transitions */
* {
  -webkit-font-smoothing: antialiased;
}

/* ============ WINDOW ANIMATIONS ============ */

/* Genie Effect (Minimize) */
@keyframes genieMinimize {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    opacity: 1;
    transform: scale(1);
  }
  100% {
    clip-path: polygon(40% 100%, 60% 100%, 55% 100%, 45% 100%);
    opacity: 0.3;
    transform: scale(0.2) translateY(200%);
  }
}

@keyframes genieUnminimize {
  0% {
    clip-path: polygon(40% 100%, 60% 100%, 55% 100%, 45% 100%);
    opacity: 0.3;
    transform: scale(0.2) translateY(200%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Scale effect for window focus */
@keyframes windowFocusPulse {
  0% { box-shadow: var(--shadow-window); }
  50% { box-shadow: 0 25px 80px 8px rgba(0, 0, 0, 0.35), 0 0 0 0.5px rgba(0, 0, 0, 0.15); }
  100% { box-shadow: var(--shadow-window); }
}

/* Window shake for error */
@keyframes windowShake {
  0%, 100% { transform: translateX(0); }
  10%, 50%, 90% { transform: translateX(-6px); }
  30%, 70% { transform: translateX(6px); }
}

.window-shake {
  animation: windowShake 0.4s ease;
}

/* ============ DOCK ANIMATIONS ============ */

/* Dock magnification smooth transition */
.dock-item {
  transition: margin 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dock appear animation */
@keyframes dockAppear {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(30px) scale(0.95);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    filter: blur(0);
  }
}

#dock {
  animation: dockAppear 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

/* ============ MENU ANIMATIONS ============ */

@keyframes menuSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px) scaleY(0.95);
    transform-origin: top;
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    filter: blur(0);
  }
}

/* ============ CURSOR EFFECTS ============ */

/* Ripple click effect */
@keyframes clickRipple {
  0% {
    width: 0;
    height: 0;
    opacity: 0.5;
  }
  100% {
    width: 40px;
    height: 40px;
    opacity: 0;
  }
}

/* ============ LOADING ANIMATIONS ============ */

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

.loading-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--separator-color);
  border-top-color: var(--accent-color);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ============ DESKTOP ANIMATIONS ============ */

@keyframes desktopFadeIn {
  from {
    opacity: 0;
    filter: blur(12px) brightness(1.3);
    transform: scale(1.02);
  }
  to {
    opacity: 1;
    filter: blur(0) brightness(1);
    transform: scale(1);
  }
}

#desktop {
  animation: desktopFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

/* ============ NOTIFICATION ANIMATIONS ============ */

@keyframes notificationSlideIn {
  from {
    opacity: 0;
    transform: translateX(100%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes notificationSlideOut {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(100%) scale(0.9);
  }
}

.notification {
  animation: notificationSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.notification.dismissing {
  animation: notificationSlideOut 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* ============ HOVER EFFECTS ============ */

/* Subtle scale on interactive elements */
.interactive-hover {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.interactive-hover:hover {
  transform: scale(1.02);
}

.interactive-hover:active {
  transform: scale(0.98);
}

/* ============ SELECTION ============ */

::selection {
  background: rgba(0, 122, 255, 0.25);
  color: inherit;
}

/* ============ SMOOTH SCROLLING ============ */

.smooth-scroll {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* ============ GLASSMORPHISM EFFECTS ============ */

.glass {
  background: var(--vibrancy-bg);
  backdrop-filter: blur(60px) saturate(200%);
  -webkit-backdrop-filter: blur(60px) saturate(200%);
}

.glass-dark {
  background: var(--vibrancy-dark);
  backdrop-filter: blur(60px) saturate(200%);
  -webkit-backdrop-filter: blur(60px) saturate(200%);
}

/* ============ TRANSITION CLASSES ============ */

.transition-all {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.transition-transform {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.transition-opacity {
  transition: opacity 0.2s ease;
}

/* ============ GPU ACCELERATION ============ */
.macos-window,
#dock,
#launchpad,
#spotlight,
#control-center,
#notification-center {
  will-change: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* ============ BRIGHTNESS OVERLAY ============ */
#brightness-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  pointer-events: none;
  z-index: 99998;
  opacity: 0;
  transition: opacity 0.3s ease;
}