/* os-v11/animations.css — hyOS v1.1
 * Complete @keyframes library for all OS v1.1 animated elements
 * Springs: card entry, pop, dock, window open/close/minimize
 * Text: shimmer, holograph, iridescent, aurora
 * Jarvis: scan lines, data stream
 * Feedback: ripple, icon bounce, ring pulse, glow pulse
 * References: kinetics.colorion.co, text-effects.colorion.co, Apple macOS 26
 */

/* ──────────────────────────────────────────────────────────────
   Utility: GPU-composited animations only
   (All keyframes use only transform and opacity — no layout props)
   ────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────
   v11-spring-in
   General card / panel spring entry with blur dissolve
   ────────────────────────────────────────────────────────────── */
@keyframes v11-spring-in {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.94);
    filter: blur(6px);
  }
  55% {
    opacity: 1;
    transform: translateY(-3px) scale(1.01);
    filter: blur(0);
  }
  75% {
    transform: scale(0.99) translateY(1px);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

/* ──────────────────────────────────────────────────────────────
   v11-spring-pop
   Micro-interaction pop: scale 0 → overshoot → settle
   ────────────────────────────────────────────────────────────── */
@keyframes v11-spring-pop {
  0% {
    opacity: 0;
    transform: scale(0.60);
    filter: blur(4px);
  }
  40% {
    opacity: 1;
    transform: scale(1.15);
    filter: blur(0);
  }
  65% {
    transform: scale(0.96);
    filter: blur(0);
  }
  80% {
    transform: scale(1.03);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

/* ──────────────────────────────────────────────────────────────
   v11-shimmer
   Diagonal light sweep for shimmer loading / skeleton states
   ────────────────────────────────────────────────────────────── */
@keyframes v11-shimmer {
  0% {
    transform: translateX(-130%) skewX(-12deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateX(240%) skewX(-12deg);
    opacity: 0;
  }
}

/* ──────────────────────────────────────────────────────────────
   v11-glow-pulse
   Breathing glow for live status indicators and active elements
   ────────────────────────────────────────────────────────────── */
@keyframes v11-glow-pulse {
  0%, 100% {
    box-shadow: var(--v11-glow-sm, 0 0 20px rgba(0, 255, 163, 0.12));
    opacity: 0.85;
  }
  50% {
    box-shadow: var(--v11-glow-lg, 0 0 80px rgba(0, 255, 163, 0.28));
    opacity: 1;
  }
}

/* ──────────────────────────────────────────────────────────────
   v11-float
   Gentle floating motion for widgets and status bubbles
   ────────────────────────────────────────────────────────────── */
@keyframes v11-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* ──────────────────────────────────────────────────────────────
   v11-ring-pulse
   Expanding ring animation for live status / notification dots
   ────────────────────────────────────────────────────────────── */
@keyframes v11-ring-pulse {
  0% {
    transform: scale(1);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.6);
    opacity: 0.35;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

/* ──────────────────────────────────────────────────────────────
   v11-ripple
   Touch/click ripple feedback effect
   ────────────────────────────────────────────────────────────── */
@keyframes v11-ripple {
  0% {
    transform: scale(0);
    opacity: 0.50;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

/* ──────────────────────────────────────────────────────────────
   v11-holo-shift
   Holograph gradient text animation (white → purple → pink → blue)
   Maps to text-effects.colorion.co Holograph
   ────────────────────────────────────────────────────────────── */
@keyframes v11-holo-shift {
  0% {
    background-position: 0% center;
    filter: hue-rotate(0deg);
  }
  25% {
    filter: hue-rotate(15deg);
  }
  50% {
    background-position: 150% center;
    filter: hue-rotate(30deg);
  }
  75% {
    filter: hue-rotate(15deg);
  }
  100% {
    background-position: 300% center;
    filter: hue-rotate(0deg);
  }
}

/* ──────────────────────────────────────────────────────────────
   v11-dock-enter
   Dock icon entry spring — slides up with overshoot
   ────────────────────────────────────────────────────────────── */
@keyframes v11-dock-enter {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.88);
    filter: blur(4px);
  }
  55% {
    opacity: 1;
    transform: translateY(-4px) scale(1.02);
    filter: blur(0);
  }
  75% {
    transform: translateY(1px) scale(0.99);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

/* ──────────────────────────────────────────────────────────────
   v11-win-open
   Window open — spring entry with blur dissolve
   ────────────────────────────────────────────────────────────── */
@keyframes v11-win-open {
  0% {
    opacity: 0;
    transform: scale(0.88) translateY(12px);
    filter: blur(8px);
  }
  45% {
    opacity: 1;
    transform: scale(1.02) translateY(-3px);
    filter: blur(0);
  }
  70% {
    transform: scale(0.99) translateY(1px);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

/* ──────────────────────────────────────────────────────────────
   v11-win-close
   Window close — scale + blur exit
   ────────────────────────────────────────────────────────────── */
@keyframes v11-win-close {
  0% {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
  30% {
    transform: scale(1.02);
    filter: blur(2px);
  }
  100% {
    opacity: 0;
    transform: scale(0.84);
    filter: blur(10px);
  }
}

/* ──────────────────────────────────────────────────────────────
   v11-win-minimize
   Genie-style minimize: collapses toward dock
   ────────────────────────────────────────────────────────────── */
@keyframes v11-win-minimize {
  0% {
    transform: none;
    opacity: 1;
    transform-origin: bottom center;
  }
  30% {
    transform: scaleX(0.80) translateY(60px);
    opacity: 0.85;
    transform-origin: bottom center;
  }
  70% {
    transform: scaleX(0.40) scaleY(0.15) translateY(300px);
    opacity: 0.40;
    transform-origin: bottom center;
  }
  100% {
    transform: scaleY(0.02) translateY(400px) scaleX(0.3);
    opacity: 0;
    transform-origin: bottom center;
  }
}

/* ──────────────────────────────────────────────────────────────
   v11-toast-in
   Toast notification slide-in from top-right with overshoot
   ────────────────────────────────────────────────────────────── */
@keyframes v11-toast-in {
  0% {
    transform: translateX(120%) scale(0.9);
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  55% {
    transform: translateX(-4%) scale(1.01);
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

/* ──────────────────────────────────────────────────────────────
   v11-toast-out
   Toast dismissal — slide right with fade
   ────────────────────────────────────────────────────────────── */
@keyframes v11-toast-out {
  0% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: translateX(110%) scale(0.92);
    opacity: 0;
  }
}

/* ──────────────────────────────────────────────────────────────
   v11-stagger-up
   List item stagger animation — used with animation-delay per item
   ────────────────────────────────────────────────────────────── */
@keyframes v11-stagger-up {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* ──────────────────────────────────────────────────────────────
   v11-spotlight-in
   Spotlight/search box entry from top center
   ────────────────────────────────────────────────────────────── */
@keyframes v11-spotlight-in {
  0% {
    opacity: 0;
    transform: translateY(-28px) scale(0.92);
    filter: blur(8px);
  }
  50% {
    opacity: 1;
    transform: translateY(4px) scale(1.01);
    filter: blur(0);
  }
  75% {
    transform: translateY(-1px) scale(0.995);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

/* ──────────────────────────────────────────────────────────────
   v11-spotlight-out
   Spotlight close — scale down and blur out upward
   ────────────────────────────────────────────────────────────── */
@keyframes v11-spotlight-out {
  0% {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px) scale(0.92);
    filter: blur(6px);
  }
}

/* ──────────────────────────────────────────────────────────────
   v11-icon-bounce
   App icon press feedback: compress then overshoot
   ────────────────────────────────────────────────────────────── */
@keyframes v11-icon-bounce {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.85);
  }
  60% {
    transform: scale(1.12);
  }
  80% {
    transform: scale(0.97);
  }
  100% {
    transform: scale(1);
  }
}

/* ──────────────────────────────────────────────────────────────
   v11-iridescent
   Hue-rotate cycle for special highlight elements (iridescent glass)
   ────────────────────────────────────────────────────────────── */
@keyframes v11-iridescent {
  0% {
    filter: hue-rotate(0deg) brightness(1);
  }
  25% {
    filter: hue-rotate(60deg) brightness(1.08);
  }
  50% {
    filter: hue-rotate(120deg) brightness(1.12);
  }
  75% {
    filter: hue-rotate(240deg) brightness(1.06);
  }
  100% {
    filter: hue-rotate(360deg) brightness(1);
  }
}

/* ──────────────────────────────────────────────────────────────
   v11-scan
   Horizontal scan line animation for Jarvis mode panels
   ────────────────────────────────────────────────────────────── */
@keyframes v11-scan {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  5% {
    opacity: 0.80;
  }
  95% {
    opacity: 0.80;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}

/* ──────────────────────────────────────────────────────────────
   v11-data-stream
   Vertical data stream for Jarvis mode sidebar panels
   ────────────────────────────────────────────────────────────── */
@keyframes v11-data-stream {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  3% {
    opacity: 0.60;
  }
  97% {
    opacity: 0.60;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

/* ──────────────────────────────────────────────────────────────
   Orb background animations (referenced from background.css)
   Defined here for a single @keyframes source of truth
   ────────────────────────────────────────────────────────────── */
@keyframes v11-orb-1 {
  0% {
    transform: translate(0%, 0%) scale(1);
    opacity: 0.90;
  }
  20% {
    transform: translate(3%, -4%) scale(1.06);
    opacity: 1;
  }
  40% {
    transform: translate(-5%, 3%) scale(0.96);
    opacity: 0.85;
  }
  60% {
    transform: translate(4%, 5%) scale(1.04);
    opacity: 0.95;
  }
  80% {
    transform: translate(-3%, -2%) scale(1.08);
    opacity: 0.88;
  }
  100% {
    transform: translate(5%, -5%) scale(0.94);
    opacity: 0.92;
  }
}

@keyframes v11-orb-2 {
  0% {
    transform: translate(0%, 0%) scale(1);
    opacity: 0.88;
  }
  15% {
    transform: translate(-4%, 3%) scale(1.05);
    opacity: 1;
  }
  35% {
    transform: translate(5%, -5%) scale(0.95);
    opacity: 0.80;
  }
  55% {
    transform: translate(-3%, -4%) scale(1.07);
    opacity: 0.94;
  }
  75% {
    transform: translate(4%, 4%) scale(0.98);
    opacity: 0.86;
  }
  100% {
    transform: translate(-5%, 2%) scale(1.03);
    opacity: 0.90;
  }
}

/* ──────────────────────────────────────────────────────────────
   Reduced Motion: Disable all OS animations
   ────────────────────────────────────────────────────────────── */