/**
 * Window Animations & Stylings
 */

/* ============================================
   MOBILE TOUCH SCROLLING FIX
   Ensures smooth momentum scrolling on iOS/Android
   ============================================ */

.window-content {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

/* ============================================
   GENIE EFFECT - macOS-style minimize/restore animation
   Uses iOS-style fly animation (translate + scale + opacity)
   No trapezoid warp, no clip-path - clean scale to dock icon
   ============================================ */

/* Minimize animation class */
.window.genie-minimize {
  pointer-events: none;
  will-change: translate, scale, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Two animations: shrink + fly-out (same as iOS but adapted for macOS) */
  animation: 
    macos-shrink-out var(--duration-shrink) var(--curve-ios-close) forwards,
    macos-fly-out var(--duration-fly-out) var(--curve-fly-out) forwards;
    transform-origin: center center;
}

/* Restore animation class */
.window.genie-restore {
    pointer-events: none;
    will-change: translate, scale, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Two animations: fly-in (quick) + expand */
    animation: 
    macos-fly-in var(--duration-fly-in) var(--curve-fly-in) forwards,
    macos-expand-in var(--duration-expand-macos) var(--curve-ios-open) forwards;
  transform-origin: center center;
}

/* ===== MINIMIZE ANIMATIONS ===== */

/* Shrink animation: scale reduces + fade out */
@keyframes macos-shrink-out {
  0% {
    opacity: 1;
    scale: 1 1;
  }
  30% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    scale: var(--anim-target-scale-x, 0.01) var(--anim-target-scale-y, 0.01);
  }
}

/* Fly-out animation: translates to icon position */
@keyframes macos-fly-out {
  0% {
    translate: 0 0;
  }
  100% {
    translate: var(--anim-translate-x, 0px) var(--anim-translate-y, 0px);
  }
}

/* ===== RESTORE ANIMATIONS ===== */

/* Fly animation: translation completes quickly from icon */
@keyframes macos-fly-in {
  0% {
    translate: var(--anim-translate-x, 0px) var(--anim-translate-y, 0px);
  }
  100% {
    translate: 0 0;
  }
}

/* Expand animation: grows from icon size with opacity fade in */
@keyframes macos-expand-in {
  0% {
    opacity: 0;
    scale: var(--anim-target-scale-x, 0.05) var(--anim-target-scale-y, 0.05);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    scale: 1 1;
  }
}

/* ============================================
   iOS WINDOW ANIMATIONS
   Zoom from/to dock icon position
   Uses CSS custom properties for dynamic transform-origin based on icon position
   ============================================ */

/* Base iOS window state - explicit landing zone to prevent jump after animation */
.window--ios {
  scale: 1;
  translate: 0 0;
  opacity: 1;
}

/* iOS window open animation class */
.window--ios.ios-opening {
  pointer-events: none;
  will-change: translate, scale, opacity, border-radius;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Both run in parallel - fly uses ease-out, expand uses smooth decelerate */
  animation: 
    ios-fly-in var(--duration-fly-in) var(--curve-fly-in) forwards,
    ios-expand-in var(--duration-expand-ios) var(--curve-ios-open) forwards;
  transform-origin: center center;
}

/* iOS window close animation class */
.window--ios.ios-closing {
  pointer-events: none;
  will-change: translate, scale, opacity, border-radius;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Two animations: shrink (faster) + fly-out (delayed start) */
  animation: 
    ios-shrink-out var(--duration-shrink) var(--curve-ios-close) forwards,
    ios-fly-out var(--duration-fly-out) var(--curve-fly-out) forwards;
  transform-origin: center center;
}

/* ===== OPEN ANIMATIONS ===== */

/* Fly animation: translation completes quickly */
@keyframes ios-fly-in {
  0% {
    translate: var(--anim-translate-x, 0px) var(--anim-translate-y, 0px);
  }
  100% {
    translate: 0 0;
  }
}

/* Expand animation: grows alongside fly with quick opacity fade */
@keyframes ios-expand-in {
  0% {
    opacity: 0;
    border-radius: 80px;
    scale: var(--anim-target-scale-x, 0.05) var(--anim-target-scale-y, 0.05);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    scale: 1 1;
  }
}

/* ===== CLOSE ANIMATIONS ===== */

/* Shrink animation: scale accelerates down */
@keyframes ios-shrink-out {
  0% {
    scale: 1 1;
    opacity: 1;
    border-radius: 20px;
  }
  40% {
    opacity: 1;
    border-radius: 60px;
  }
  100% {
    scale: var(--anim-target-scale-x, 0.05) var(--anim-target-scale-y, 0.05);
    opacity: 0;
    border-radius: 80px;
  }
}

/* Fly-out animation: translates to icon position - delayed start handled by wrapper */
@keyframes ios-fly-out {
  0% {
    translate: 0 0;
  }
  100% {
    translate: var(--anim-translate-x, 0px) var(--anim-translate-y, 0px);
  }
}

/* ============================================
   WINDOW STATE TRANSITIONS
   Migrated from window.dart
   ============================================ */

/* Default transitions (drag/resize optimization) */
.window {
  transition:
    box-shadow var(--duration-normal) var(--curve-ease-out),
    transform var(--duration-normal) var(--curve-ease-out),
    border-radius var(--duration-medium) var(--curve-ease-out);
}

/* Animating state (maximize/restore layout shifts) */
.window.animating {
  transition:
    top var(--duration-medium) var(--curve-ease-out),
    left var(--duration-medium) var(--curve-ease-out),
    width var(--duration-medium) var(--curve-ease-out),
    height var(--duration-medium) var(--curve-ease-out),
    border-radius var(--duration-medium) var(--curve-ease-out),
    box-shadow var(--duration-normal) var(--curve-ease-out),
    transform var(--duration-normal) var(--curve-ease-out);
}

/* Viewport resizing (browser resize) */
.window--viewport-resizing {
  transition:
    top var(--duration-normal) var(--curve-ease-out),
    left var(--duration-normal) var(--curve-ease-out),
    width var(--duration-normal) var(--curve-ease-out),
    height var(--duration-normal) var(--curve-ease-out),
    max-height var(--duration-normal) var(--curve-ease-out),
    border-radius var(--duration-normal) var(--curve-ease-out) !important;
}

/* Active state shadow (Strong macOS shadow) */
.window.active {
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.25),
    0 8px 24px rgba(0, 0, 0, 0.4),
    0 24px 64px rgba(0, 0, 0, 0.5),
    0 48px 120px rgba(0, 0, 0, 0.35);
}

/* Inactive state (Dimmed + subtle shadow) */
.window:not(.active) {
  opacity: 0.95;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.2),
    0 8px 32px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.1);
}