/* ==========================================================
   WHALE OS — Animation System v2.0
   Premium Motion Design · Glassmorphism · 60fps
   ========================================================== */

/* ──────────────────────────────────────────────────────────
   0. REDUCED MOTION — Accessibility first
   ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ──────────────────────────────────────────────────────────
   1. PAGE TRANSITION KEYFRAMES
   ────────────────────────────────────────────────────────── */

@keyframes whale-page-enter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.99);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes whale-page-exit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
    filter: blur(3px);
  }
}

@keyframes whale-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes whale-slide-in-left {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ──────────────────────────────────────────────────────────
   2. ENTRANCE ANIMATIONS
   ────────────────────────────────────────────────────────── */

@keyframes whale-fade-up-soft {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes whale-elastic-in {
  0%   { opacity: 0; transform: scale(0.88) translateY(16px); }
  60%  { opacity: 1; transform: scale(1.03) translateY(-4px); }
  80%  { transform: scale(0.98) translateY(2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes whale-pop-in {
  0%   { opacity: 0; transform: scale(0.7); }
  70%  { transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes whale-reveal-up {
  from {
    opacity: 0;
    transform: translateY(30px);
    clip-path: inset(100% 0 0 0);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes whale-flip-in {
  from {
    opacity: 0;
    transform: perspective(800px) rotateX(-12deg) translateY(20px);
  }
  to {
    opacity: 1;
    transform: perspective(800px) rotateX(0deg) translateY(0);
  }
}

/* ──────────────────────────────────────────────────────────
   3. STAGGER UTILITIES — chain delay for child elements
   ────────────────────────────────────────────────────────── */

.whale-stagger > * { animation: whale-fade-up-soft 0.5s cubic-bezier(0.16,1,0.3,1) both; }
.whale-stagger > *:nth-child(1)  { animation-delay: 0.05s; }
.whale-stagger > *:nth-child(2)  { animation-delay: 0.12s; }
.whale-stagger > *:nth-child(3)  { animation-delay: 0.19s; }
.whale-stagger > *:nth-child(4)  { animation-delay: 0.26s; }
.whale-stagger > *:nth-child(5)  { animation-delay: 0.33s; }
.whale-stagger > *:nth-child(6)  { animation-delay: 0.40s; }
.whale-stagger > *:nth-child(7)  { animation-delay: 0.47s; }
.whale-stagger > *:nth-child(8)  { animation-delay: 0.54s; }
.whale-stagger > *:nth-child(9)  { animation-delay: 0.60s; }
.whale-stagger > *:nth-child(10) { animation-delay: 0.66s; }
.whale-stagger > *:nth-child(n+11) { animation-delay: 0.70s; }

/* Fast stagger (for tables/lists) */
.whale-stagger-fast > * { animation: whale-fade-up-soft 0.35s cubic-bezier(0.16,1,0.3,1) both; }
.whale-stagger-fast > *:nth-child(1)  { animation-delay: 0.02s; }
.whale-stagger-fast > *:nth-child(2)  { animation-delay: 0.06s; }
.whale-stagger-fast > *:nth-child(3)  { animation-delay: 0.10s; }
.whale-stagger-fast > *:nth-child(4)  { animation-delay: 0.14s; }
.whale-stagger-fast > *:nth-child(5)  { animation-delay: 0.18s; }
.whale-stagger-fast > *:nth-child(6)  { animation-delay: 0.22s; }
.whale-stagger-fast > *:nth-child(7)  { animation-delay: 0.26s; }
.whale-stagger-fast > *:nth-child(8)  { animation-delay: 0.30s; }
.whale-stagger-fast > *:nth-child(n+9) { animation-delay: 0.34s; }

/* Elastic stagger (for cards) */
.whale-stagger-elastic > * { animation: whale-elastic-in 0.6s cubic-bezier(0.16,1,0.3,1) both; }
.whale-stagger-elastic > *:nth-child(1)  { animation-delay: 0.05s; }
.whale-stagger-elastic > *:nth-child(2)  { animation-delay: 0.13s; }
.whale-stagger-elastic > *:nth-child(3)  { animation-delay: 0.21s; }
.whale-stagger-elastic > *:nth-child(4)  { animation-delay: 0.29s; }
.whale-stagger-elastic > *:nth-child(5)  { animation-delay: 0.37s; }
.whale-stagger-elastic > *:nth-child(6)  { animation-delay: 0.45s; }
.whale-stagger-elastic > *:nth-child(n+7) { animation-delay: 0.50s; }

/* ──────────────────────────────────────────────────────────
   4. AMBIENT / DECORATIVE ANIMATIONS
   ────────────────────────────────────────────────────────── */

/* Floating — gentle bob up/down */
@keyframes whale-float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-8px) rotate(1deg); }
  66%       { transform: translateY(-4px) rotate(-0.5deg); }
}

/* Slow drift — for large background elements */
@keyframes whale-drift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(8px, -12px) rotate(1.5deg); }
  50%  { transform: translate(-4px, -20px) rotate(0deg); }
  75%  { transform: translate(-10px, -8px) rotate(-1.5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* Gradient shift — background color cycle */
@keyframes whale-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Glow pulse — for accent elements */
@keyframes whale-glow-pulse {
  0%, 100% {
    box-shadow: 0 0 12px rgba(0,93,255,0.15), 0 4px 20px rgba(0,0,0,0.1);
  }
  50% {
    box-shadow: 0 0 28px rgba(0,93,255,0.35), 0 8px 32px rgba(0,93,255,0.15);
  }
}

/* Text glow — for heading elements */
@keyframes whale-text-glow {
  0%, 100% { text-shadow: 0 0 20px rgba(0,93,255,0); }
  50%       { text-shadow: 0 0 20px rgba(0,93,255,0.2); }
}

/* Shimmer — for loading states */
@keyframes whale-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Spin — for loading indicators */
@keyframes whale-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Orbit — for decorative particles */
@keyframes whale-orbit {
  from { transform: rotate(0deg) translateX(var(--orbit-r, 40px)) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(var(--orbit-r, 40px)) rotate(-360deg); }
}

/* Ripple — click effect */
@keyframes whale-ripple-expand {
  from {
    transform: scale(0);
    opacity: 0.5;
  }
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Number count up — triggers via JS adding class */
@keyframes whale-count-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Beam sweep — horizontal light beam */
@keyframes whale-beam {
  0%   { transform: translateX(-150%) skewX(-20deg); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateX(300%) skewX(-20deg); opacity: 0; }
}

/* Bounce in — springy entrance */
@keyframes whale-bounce-in {
  0%   { transform: scale(0.3); opacity: 0; }
  50%  { transform: scale(1.08); opacity: 0.9; }
  70%  { transform: scale(0.96); }
  85%  { transform: scale(1.02); }
  100% { transform: scale(1); opacity: 1; }
}

/* ──────────────────────────────────────────────────────────
   5. PAGE TRANSITION CLASSES
   ────────────────────────────────────────────────────────── */

/* Applied to .view-section when it becomes active */
.view-section.view-animating-in {
  animation: whale-page-enter 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Applied to old section before hiding */
.view-section.view-animating-out {
  animation: whale-page-exit 0.25s cubic-bezier(0.4, 0, 1, 1) both;
  pointer-events: none;
}

/* ──────────────────────────────────────────────────────────
   6. UTILITY ANIMATION CLASSES
   ────────────────────────────────────────────────────────── */

.anim-fade-up {
  animation: whale-fade-up-soft 0.5s cubic-bezier(0.16,1,0.3,1) both;
}
.anim-elastic {
  animation: whale-elastic-in 0.6s cubic-bezier(0.16,1,0.3,1) both;
}
.anim-pop {
  animation: whale-pop-in 0.4s cubic-bezier(0.16,1,0.3,1) both;
}
.anim-float {
  animation: whale-float 4s ease-in-out infinite;
}
.anim-drift {
  animation: whale-drift 8s ease-in-out infinite;
}
.anim-glow {
  animation: whale-glow-pulse 2.5s ease-in-out infinite;
}
.anim-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.03) 25%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.03) 75%
  );
  background-size: 400% 100%;
  animation: whale-shimmer 1.6s infinite;
}
.anim-spin {
  animation: whale-spin 1s linear infinite;
}
.anim-bounce-in {
  animation: whale-bounce-in 0.6s cubic-bezier(0.16,1,0.3,1) both;
}
.anim-flip-in {
  animation: whale-flip-in 0.5s cubic-bezier(0.16,1,0.3,1) both;
}

/* Delay utilities */
.anim-delay-1 { animation-delay: 0.08s; }
.anim-delay-2 { animation-delay: 0.16s; }
.anim-delay-3 { animation-delay: 0.24s; }
.anim-delay-4 { animation-delay: 0.32s; }
.anim-delay-5 { animation-delay: 0.40s; }
.anim-delay-6 { animation-delay: 0.48s; }
.anim-delay-7 { animation-delay: 0.56s; }
.anim-delay-8 { animation-delay: 0.64s; }

/* ──────────────────────────────────────────────────────────
   7. MICRO-INTERACTIONS
   ────────────────────────────────────────────────────────── */

/* Enhanced hover lift with glow */
.hover-lift-glow {
  transition: transform 0.28s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.28s cubic-bezier(0.16,1,0.3,1);
}
.hover-lift-glow:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 16px 40px rgba(0,93,255,0.12), 0 4px 16px rgba(0,0,0,0.08);
}

/* Tilt 3D on hover */
.hover-tilt {
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Click press effect */
.hover-press {
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.hover-press:hover   { transform: translateY(-2px); }
.hover-press:active  { transform: scale(0.96) translateY(0); }

/* Glow on hover */
.hover-glow {
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.hover-glow:hover {
  box-shadow: 0 0 0 2px rgba(0,93,255,0.2), 0 8px 24px rgba(0,93,255,0.12);
  border-color: rgba(0,93,255,0.3) !important;
}

/* Shine sweep on hover */
.hover-shine {
  position: relative;
  overflow: hidden;
}
.hover-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.18) 50%,
    transparent 60%
  );
  transform: skewX(-15deg);
  transition: left 0.5s ease;
  pointer-events: none;
  z-index: 1;
}
.hover-shine:hover::before {
  left: 160%;
}

/* Ripple click effect */
.ripple-host {
  position: relative;
  overflow: hidden;
}
.ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  pointer-events: none;
  animation: whale-ripple-expand 0.6s linear forwards;
  transform-origin: center;
}

/* ──────────────────────────────────────────────────────────
   8. SCROLL-TRIGGERED REVEAL (via IntersectionObserver)
   ────────────────────────────────────────────────────────── */

/* Elements start hidden, JS adds .in-view to trigger */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1),
              transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.reveal-on-scroll.in-view {
  opacity: 1;
  transform: translateY(0);
}
.reveal-on-scroll.anim-delay-1 { transition-delay: 0.08s; }
.reveal-on-scroll.anim-delay-2 { transition-delay: 0.16s; }
.reveal-on-scroll.anim-delay-3 { transition-delay: 0.24s; }
.reveal-on-scroll.anim-delay-4 { transition-delay: 0.32s; }
.reveal-on-scroll.anim-delay-5 { transition-delay: 0.40s; }

/* ──────────────────────────────────────────────────────────
   9. LOADING SCREEN
   ────────────────────────────────────────────────────────── */

#whale-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: var(--bg-primary, #f0f4ff);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

[data-theme="dark"] #whale-loading-screen {
  background: #020410;
}

#whale-loading-screen.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.whale-loader-logo {
  font-size: 64px;
  animation: whale-bounce-in 0.8s cubic-bezier(0.16,1,0.3,1) both,
             whale-float 3s ease-in-out 0.8s infinite;
}

.whale-loader-bar-wrap {
  width: 160px;
  height: 3px;
  background: rgba(0,93,255,0.12);
  border-radius: 99px;
  overflow: hidden;
}
.whale-loader-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #005dff, #00e5ff);
  border-radius: 99px;
  transition: width 0.4s cubic-bezier(0.16,1,0.3,1);
  animation: whale-shimmer 1.5s infinite;
  background-size: 400% 100%;
}

.whale-loader-text {
  font-size: 13px;
  color: var(--text-muted, #8d9ab1);
  font-family: var(--font-body, 'Cairo', sans-serif);
  animation: whale-fade-up-soft 0.6s 0.3s ease both;
  letter-spacing: 0.02em;
}

/* ──────────────────────────────────────────────────────────
   10. SCROLL PROGRESS INDICATOR
   ────────────────────────────────────────────────────────── */

#whale-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9999;
  background: transparent;
  pointer-events: none;
}

#whale-scroll-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #005dff 0%, #00e5ff 50%, #7c3aed 100%);
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px rgba(0,93,255,0.4);
}

/* ──────────────────────────────────────────────────────────
   11. AMBIENT BACKGROUND PARTICLES
   ────────────────────────────────────────────────────────── */

#whale-ambient-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

/* ──────────────────────────────────────────────────────────
   12. BEAM EFFECT ON ACTIVE NAV ITEM
   ────────────────────────────────────────────────────────── */

.nav-btn.active::after,
.tab-item.active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,0.18) 50%,
    transparent 70%
  );
  animation: whale-beam 2s ease-in-out;
  pointer-events: none;
  border-radius: inherit;
}

/* ──────────────────────────────────────────────────────────
   13. CARD ENTRANCE — DNA Cards
   ────────────────────────────────────────────────────────── */

/* KPI / Stat cards get enhanced hover */
.dna-card-kpi,
.dna-stat-card,
.dna-card-payroll {
  position: relative;
  overflow: hidden;
}

/* Light beam sweep on card hover */
.dna-card:hover::before,
.dna-card-kpi:hover::before,
.dna-stat-card:hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.1) 50%,
    transparent 60%
  );
  animation: whale-beam 0.6s ease forwards;
  pointer-events: none;
  z-index: 1;
}

/* Badge pop-in */
.dna-badge {
  animation: whale-pop-in 0.35s cubic-bezier(0.16,1,0.3,1) both;
}

/* Table row stagger */
.dna-table tbody tr {
  animation: whale-fade-up-soft 0.35s cubic-bezier(0.16,1,0.3,1) both;
}
.dna-table tbody tr:nth-child(1)  { animation-delay: 0.02s; }
.dna-table tbody tr:nth-child(2)  { animation-delay: 0.05s; }
.dna-table tbody tr:nth-child(3)  { animation-delay: 0.08s; }
.dna-table tbody tr:nth-child(4)  { animation-delay: 0.11s; }
.dna-table tbody tr:nth-child(5)  { animation-delay: 0.14s; }
.dna-table tbody tr:nth-child(6)  { animation-delay: 0.17s; }
.dna-table tbody tr:nth-child(7)  { animation-delay: 0.20s; }
.dna-table tbody tr:nth-child(8)  { animation-delay: 0.23s; }
.dna-table tbody tr:nth-child(9)  { animation-delay: 0.26s; }
.dna-table tbody tr:nth-child(10) { animation-delay: 0.29s; }
.dna-table tbody tr:nth-child(n+11) { animation-delay: 0.32s; }

/* ──────────────────────────────────────────────────────────
   14. TOAST — Enhanced animations
   ────────────────────────────────────────────────────────── */

.dna-toast {
  animation: whale-slide-in-left 0.4s cubic-bezier(0.16,1,0.3,1) both,
             whale-glow-pulse 3s 0.5s ease-in-out infinite;
}

/* ──────────────────────────────────────────────────────────
   15. SIDEBAR ACTIVE ITEM GLOW
   ────────────────────────────────────────────────────────── */

.sidebar-nav-item.active,
.sidebar-item.active {
  animation: whale-glow-pulse 3s ease-in-out infinite;
}

/* ──────────────────────────────────────────────────────────
   16. DIALOG — Enhanced entrance
   ────────────────────────────────────────────────────────── */

.dna-dialog {
  animation: whale-elastic-in 0.45s cubic-bezier(0.16,1,0.3,1) both;
}

.dna-dialog-overlay {
  animation: whale-fade-up-soft 0.25s ease both;
}

/* ──────────────────────────────────────────────────────────
   17. STEP DOT — Active pulse ring
   ────────────────────────────────────────────────────────── */

@keyframes whale-ring-pulse {
  0% { box-shadow: 0 0 0 0 rgba(0,93,255,0.4); }
  70% { box-shadow: 0 0 0 10px rgba(0,93,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,93,255,0); }
}

.dna-step.active .dna-step-dot {
  animation: whale-ring-pulse 1.8s ease-in-out infinite;
}

/* ──────────────────────────────────────────────────────────
   18. SEARCH OVERLAY — enhanced
   ────────────────────────────────────────────────────────── */

.search-overlay.active {
  animation: whale-fade-up-soft 0.3s cubic-bezier(0.16,1,0.3,1) both;
}

.search-overlay .search-container {
  animation: whale-elastic-in 0.4s cubic-bezier(0.16,1,0.3,1) both;
}

/* ──────────────────────────────────────────────────────────
   19. HEADER SCROLL EFFECT
   ────────────────────────────────────────────────────────── */

.header-desktop {
  transition: background 0.3s ease,
              box-shadow 0.3s ease,
              backdrop-filter 0.3s ease;
}

.header-desktop.scrolled {
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  box-shadow: 0 4px 32px rgba(0,0,0,0.08);
}

/* ──────────────────────────────────────────────────────────
   20. NUMBER COUNTER ANIMATION (JS-driven)
   ────────────────────────────────────────────────────────── */

[data-count-to] {
  animation: whale-count-in 0.5s cubic-bezier(0.16,1,0.3,1) both;
}

/* ──────────────────────────────────────────────────────────
   21. SKELETON LOADING PLACEHOLDERS
   ────────────────────────────────────────────────────────── */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--glass-primary-bg, rgba(255,255,255,0.04)) 25%,
    rgba(255,255,255,0.10) 50%,
    var(--glass-primary-bg, rgba(255,255,255,0.04)) 75%
  );
  background-size: 400% 100%;
  animation: whale-shimmer 1.5s infinite;
  border-radius: 8px;
  pointer-events: none;
  user-select: none;
  color: transparent !important;
}

/* ──────────────────────────────────────────────────────────
   22. STATUS INDICATOR — Live dot animation
   ────────────────────────────────────────────────────────── */

@keyframes whale-status-live {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.4); opacity: 0.6; }
}

.dna-emp-status-dot.active {
  animation: whale-status-live 2s ease-in-out infinite;
}

/* ──────────────────────────────────────────────────────────
   23. SECTION HEADER — animated underline
   ────────────────────────────────────────────────────────── */

@keyframes whale-underline-grow {
  from { transform: scaleX(0); transform-origin: right; }
  to   { transform: scaleX(1); transform-origin: right; }
}

.dna-page-title::after {
  content: '';
  display: block;
  height: 3px;
  width: 40px;
  background: linear-gradient(90deg, var(--accent, #005dff), transparent);
  border-radius: 99px;
  margin-top: 6px;
  animation: whale-underline-grow 0.6s cubic-bezier(0.16,1,0.3,1) 0.3s both;
}