/* ==========================================================================
   SCALENT MOTION SYSTEM  v1.0
   Premium animation tokens, scroll reveals, icon behaviours, button states.
   Requires: scalent-design-system.css (loaded first)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. MOTION TOKENS
   -------------------------------------------------------------------------- */
:root {
  --dur-micro:   130ms;
  --dur-icon:    180ms;
  --dur-btn:     200ms;
  --dur-menu:    230ms;
  --dur-modal:   260ms;
  --dur-reveal:  500ms;
  --dur-hero:    700ms;
  --dur-float:   6000ms;

  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:    cubic-bezier(0.34, 1.3, 0.64, 1);

  --reveal-y:    20px;
  --reveal-y-sm: 10px;
}

/* --------------------------------------------------------------------------
   2. REDUCED-MOTION GLOBAL GUARD
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro:  0.01ms;
    --dur-icon:   0.01ms;
    --dur-btn:    0.01ms;
    --dur-menu:   0.01ms;
    --dur-modal:  0.01ms;
    --dur-reveal: 0.01ms;
    --dur-hero:   0.01ms;
    --dur-float:  0.01ms;
  }
  .hero-float,
  .shape-drift,
  .ambient-float {
    animation: none !important;
    transform: none !important;
  }
  .reveal,
  .reveal-up,
  .reveal-fade,
  .stagger-child {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   3. PAGE-LOAD ENTRANCE
   -------------------------------------------------------------------------- */
.nav-entrance {
  animation: nav-enter var(--dur-hero) var(--ease-out-expo) both;
}

.nav-link-item {
  opacity: 0;
  animation: fade-up var(--dur-hero) var(--ease-out-expo) both;
}

/* --------------------------------------------------------------------------
   4. HERO ANIMATIONS
   -------------------------------------------------------------------------- */
.hero-badge {
  opacity: 0;
  animation: scale-pop 0.45s var(--ease-spring) 0.05s both;
}

.hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px);
  filter: blur(4px);
  transition:
    opacity var(--dur-hero) var(--ease-out-expo),
    transform var(--dur-hero) var(--ease-out-expo),
    filter var(--dur-hero) var(--ease-out-expo);
}
.hero-word.word-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Hero Abstract Artwork & Ambient Lenses */
.hero-artwork-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.hero-glass-sculpture {
  position: relative;
  will-change: transform;
  transition: transform 0.8s var(--ease-out-quart);
}

@keyframes hero-artwork-drift {
  0%   { transform: translateY(0px) rotate(0deg) scale(1); }
  33%  { transform: translateY(-12px) rotate(1deg) scale(1.015); }
  66%  { transform: translateY(8px) rotate(-1deg) scale(0.995); }
  100% { transform: translateY(0px) rotate(0deg) scale(1); }
}

.animate-hero-drift {
  animation: hero-artwork-drift 18s ease-in-out infinite;
  will-change: transform;
}

@keyframes ambient-pulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 0.8;  transform: scale(1.08); }
}

.ambient-glow-orb {
  animation: ambient-pulse 14s ease-in-out infinite;
  will-change: opacity, transform;
}
.ambient-glow-orb.orb-2 {
  animation-delay: -5s;
  animation-duration: 18s;
}
.ambient-glow-orb.orb-3 {
  animation-delay: -9s;
  animation-duration: 15s;
}

.hero-sub {
  opacity: 0;
  transform: translateY(var(--reveal-y-sm));
  animation: fade-up var(--dur-hero) var(--ease-out-expo) 0.4s both;
}

.hero-cta {
  opacity: 0;
  transform: translateY(var(--reveal-y-sm));
}
.hero-cta.hero-cta-visible {
  animation: fade-up var(--dur-hero) var(--ease-out-expo) both;
}

.hero-metrics {
  opacity: 0;
  transform: translateY(12px);
  animation: fade-up 0.6s var(--ease-out-expo) 0.72s both;
}

.hero-float {
  animation: hero-float var(--dur-float) ease-in-out infinite;
}

.shape-drift {
  transition: transform 0.8s var(--ease-out-quart);
  will-change: transform;
}

/* --------------------------------------------------------------------------
   5. SCROLL-REVEAL CLASSES
   JS adds .js-loaded to <html>, then adds .is-visible via IntersectionObserver
   -------------------------------------------------------------------------- */
.js-loaded .reveal,
.js-loaded .reveal-up,
.js-loaded .reveal-fade,
.js-loaded .stagger-child {
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition:
    opacity var(--dur-reveal) var(--ease-out-expo),
    transform var(--dur-reveal) var(--ease-out-expo);
}

.js-loaded .reveal-fade {
  transform: none;
}

.reveal.is-visible,
.reveal-up.is-visible,
.reveal-fade.is-visible,
.stagger-child.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.stagger-child {
  transition-delay: calc(var(--stagger-i, 0) * 80ms);
}

.js-loaded .section-label {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.4s var(--ease-out-expo),
    transform 0.4s var(--ease-out-expo);
}
.section-label.is-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* --------------------------------------------------------------------------
   6. CARD INTERACTIONS
   -------------------------------------------------------------------------- */
.hairline-card {
  transition:
    transform var(--dur-btn) var(--ease-out-expo),
    border-color var(--dur-btn) var(--ease-in-out),
    box-shadow var(--dur-btn) var(--ease-out-expo);
  will-change: transform;
}
.hairline-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    0 12px 30px -6px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
}
.hairline-card:active {
  transform: translateY(-1px);
  transition-duration: var(--dur-micro);
}

.card-icon {
  transition: transform var(--dur-btn) var(--ease-out-expo);
}
.hairline-card:hover .card-icon {
  transform: scale(1.08) translateY(-1px);
  transition-timing-function: var(--ease-spring);
}

/* --------------------------------------------------------------------------
   7. BUTTON SYSTEM
   -------------------------------------------------------------------------- */
.btn-arrow-icon {
  transition: transform var(--dur-icon) var(--ease-out-expo);
  display: inline-block;
}
a:hover .btn-arrow-icon,
button:hover .btn-arrow-icon,
a:focus-visible .btn-arrow-icon,
button:focus-visible .btn-arrow-icon {
  transform: translateX(3px);
}

.btn-ext-icon {
  transition: transform var(--dur-icon) var(--ease-out-expo);
  display: inline-block;
}
a:hover .btn-ext-icon,
button:hover .btn-ext-icon {
  transform: translate(2px, -2px);
}

.btn-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.8;
}

.btn-success {
  background: var(--scalent-emerald) !important;
  transition: background var(--dur-btn) var(--ease-in-out) !important;
}

.spin-loader {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

button:disabled,
a[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   8. ANIMATED ICONS
   -------------------------------------------------------------------------- */

/* 8b. Hamburger to Close morph */
.menu-bar {
  transform-origin: center;
  transition:
    transform var(--dur-menu) var(--ease-in-out),
    opacity   var(--dur-menu) var(--ease-in-out);
}
.icon-menu.menu-open .bar-top { transform: translateY(6px) rotate(45deg);   }
.icon-menu.menu-open .bar-mid { opacity: 0; transform: scaleX(0);           }
.icon-menu.menu-open .bar-bot { transform: translateY(-6px) rotate(-45deg); }

/* 8c. Chevron rotate */
.chevron-icon {
  transition: transform var(--dur-icon) var(--ease-in-out);
  display: inline-block;
}
.chevron-icon.open {
  transform: rotate(180deg);
}

/* 8d. Chart bars rise on scroll enter */
.chart-bar {
  transform-origin: bottom center;
  transform: scaleY(0);
  transition: transform 0.55s var(--ease-out-expo);
}
.chart-bar.is-visible { transform: scaleY(1); }
.chart-bar:nth-child(1) { transition-delay: 0ms;   }
.chart-bar:nth-child(2) { transition-delay: 60ms;  }
.chart-bar:nth-child(3) { transition-delay: 120ms; }
.chart-bar:nth-child(4) { transition-delay: 180ms; }

/* 8e. Layers icon */
.layers-icon .layer-a { transition: transform 0.3s var(--ease-out-expo) 0ms;   }
.layers-icon .layer-b { transition: transform 0.3s var(--ease-out-expo) 60ms;  }
.layers-icon .layer-c { transition: transform 0.3s var(--ease-out-expo) 120ms; }
.layers-icon:hover .layer-a { transform: translateY(-2px); }
.layers-icon:hover .layer-b { transform: translateY(0);    }
.layers-icon:hover .layer-c { transform: translateY(2px);  }

/* 8f. Code brackets nudge */
.code-icon .bracket-left  { transition: transform var(--dur-icon) var(--ease-out-expo); }
.code-icon .bracket-right { transition: transform var(--dur-icon) var(--ease-out-expo); }
.code-icon:hover .bracket-left  { transform: translateX(-2px); }
.code-icon:hover .bracket-right { transform: translateX(2px);  }

/* 8g. Settings gear */
.settings-icon {
  display: inline-block;
  transition: transform 0.5s var(--ease-in-out);
}
.settings-icon:hover,
.settings-icon:focus-visible,
.settings-icon.active {
  transform: rotate(45deg);
}

/* 8h. Upload arrow nudge */
.upload-icon .upload-arrow {
  transition: transform var(--dur-icon) var(--ease-out-expo);
}
.upload-icon:hover .upload-arrow,
.upload-icon.uploading .upload-arrow {
  transform: translateY(-2px);
}

/* 8i. Check-circle draw */
.check-draw {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  transition: stroke-dashoffset 0.4s var(--ease-out-expo);
}
.check-draw.drawn {
  stroke-dashoffset: 0;
}

/* 8j. Clock pending pulse */
.clock-pending {
  animation: clock-tick 1.8s ease-in-out infinite;
}

/* 8k. Shield stroke reveal */
.shield-draw {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transition: stroke-dashoffset 0.6s var(--ease-out-expo) 0.1s;
}
.shield-draw.drawn {
  stroke-dashoffset: 0;
}

/* 8l. Bell ring (JS adds .bell-ring) */
.bell-icon {
  display: inline-block;
  transform-origin: top center;
}
.bell-icon.bell-ring {
  animation: bell-ring 0.5s var(--ease-spring) 1;
}

/* 8m. Plus to X */
.plus-icon {
  display: inline-block;
  transition: transform var(--dur-menu) var(--ease-in-out);
}
.plus-icon.plus-open {
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   9. NAVIGATION
   -------------------------------------------------------------------------- */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  background: var(--scalent-indigo-light);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-btn) var(--ease-out-expo);
  border-radius: 2px;
}
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}

.mobile-nav-drawer {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height var(--dur-modal) var(--ease-out-expo),
    opacity    var(--dur-menu)  var(--ease-in-out);
}
.mobile-nav-drawer.open {
  max-height: 520px;
  opacity: 1;
}

.dropdown-menu {
  transform-origin: top center;
  animation: dropdown-enter var(--dur-menu) var(--ease-out-expo) both;
}

/* --------------------------------------------------------------------------
   10. MODAL & DRAWER CLOSE ANIMATION SUPPORT
   -------------------------------------------------------------------------- */
.scalent-modal-card {
  animation: modal-enter var(--dur-modal) var(--ease-out-expo) both;
}

dialog.scalent-dialog.closing::backdrop {
  animation: fade-out var(--dur-modal) var(--ease-in-out) both;
}
dialog.scalent-dialog.closing .scalent-modal-card {
  animation: modal-exit var(--dur-modal) var(--ease-in-out) both;
}

.scalent-drawer-panel.closing {
  animation: drawer-exit 0.22s var(--ease-in-out) both;
}
.scalent-drawer-backdrop.closing {
  animation: fade-out 0.22s var(--ease-in-out) both;
}

/* --------------------------------------------------------------------------
   11. TOAST
   -------------------------------------------------------------------------- */
@keyframes scalent-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

.scalent-toast.dismissing {
  animation: toast-exit 0.2s var(--ease-in-out) both;
}

/* --------------------------------------------------------------------------
   12. SKELETON SHIMMER
   -------------------------------------------------------------------------- */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.09) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: var(--scalent-radius-md);
}

/* --------------------------------------------------------------------------
   13. PROGRESS BAR
   -------------------------------------------------------------------------- */
.progress-bar-fill {
  transition: width 0.6s var(--ease-out-expo);
  border-radius: inherit;
}

/* --------------------------------------------------------------------------
   14. TAB TRANSITIONS
   -------------------------------------------------------------------------- */
.tab-panel {
  animation: fade-up 0.25s var(--ease-out-expo) both;
}

/* --------------------------------------------------------------------------
   15. ADMIN SIDEBAR
   -------------------------------------------------------------------------- */
.sidebar-panel {
  transition:
    width   var(--dur-modal) var(--ease-out-expo),
    opacity var(--dur-menu)  var(--ease-in-out);
}
.sidebar-panel.collapsed {
  width: 64px;
}
.sidebar-label {
  transition:
    opacity   var(--dur-btn) var(--ease-in-out),
    transform var(--dur-btn) var(--ease-out-expo);
}
.sidebar-panel.collapsed .sidebar-label {
  opacity: 0;
  transform: translateX(-8px);
}

/* --------------------------------------------------------------------------
   16. TIMELINE / WORKFLOW STEPS
   -------------------------------------------------------------------------- */
.timeline-step {
  transition:
    border-color var(--dur-btn) var(--ease-in-out),
    background   var(--dur-btn) var(--ease-in-out),
    box-shadow   var(--dur-btn) var(--ease-out-expo);
}
.timeline-step.step-active {
  border-color: var(--scalent-indigo-light);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}
.timeline-step.step-complete {
  border-color: var(--scalent-emerald-border);
}

.timeline-line-fill {
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 0.5s var(--ease-out-expo);
}
.timeline-line-fill.filled {
  transform: scaleY(1);
}

/* --------------------------------------------------------------------------
   17. KEYFRAMES
   -------------------------------------------------------------------------- */
@keyframes nav-enter {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(var(--reveal-y, 18px)); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scale-pop {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes hero-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%       { transform: translateY(-7px) rotate(0.5deg); }
  66%       { transform: translateY(-4px) rotate(-0.3deg); }
}

@keyframes modal-enter {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes modal-exit {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to   { opacity: 0; transform: scale(0.96) translateY(6px); }
}

@keyframes drawer-exit {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}

@keyframes dropdown-enter {
  from { opacity: 0; transform: scale(0.96) translateY(-6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes toast-exit {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to   { opacity: 0; transform: translateX(12px) scale(0.95); }
}

@keyframes fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

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

@keyframes clock-tick {
  0%, 100% { transform: rotate(0); }
  25%       { transform: rotate(6deg); }
  75%       { transform: rotate(-6deg); }
}

@keyframes bell-ring {
  0%   { transform: rotate(0); }
  20%  { transform: rotate(12deg); }
  40%  { transform: rotate(-10deg); }
  60%  { transform: rotate(8deg); }
  80%  { transform: rotate(-6deg); }
  100% { transform: rotate(0); }
}

/* --------------------------------------------------------------------------
   18. INTERFACE ICONS RESPONSE STATES (Hover, Focus, Upload, Tab, Action)
   -------------------------------------------------------------------------- */
.interactive-icon,
.card-icon-box {
  transition:
    transform var(--dur-btn) var(--ease-spring),
    color var(--dur-icon) var(--ease-in-out),
    border-color var(--dur-icon) var(--ease-in-out),
    box-shadow var(--dur-btn) var(--ease-out-expo);
  will-change: transform;
}

.interactive-icon:hover,
.card-icon-box:hover,
.hairline-card:hover .card-icon-box {
  transform: scale(1.1) translateY(-2px);
  color: #a5b4fc;
  border-color: rgba(165, 180, 252, 0.45);
  box-shadow: 0 0 16px -2px rgba(99, 102, 241, 0.35);
}

.interactive-icon:focus-visible,
button:focus-visible .interactive-icon {
  transform: scale(1.08);
  outline: none;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.45);
}

/* File Upload Drag & Drop Response */
.dropzone-pulse {
  border: 2px dashed rgba(99, 102, 241, 0.35);
  transition:
    border-color var(--dur-btn) var(--ease-in-out),
    background-color var(--dur-btn) var(--ease-in-out),
    transform var(--dur-btn) var(--ease-spring);
}
.dropzone-pulse.drag-over {
  border-color: #818cf8 !important;
  background-color: rgba(99, 102, 241, 0.1) !important;
  transform: scale(1.015);
}
.dropzone-pulse.drag-over .upload-arrow-bounce {
  animation: upload-arrow-bounce 0.8s ease-in-out infinite;
}

@keyframes upload-arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* Tab Panel Transition */
.tab-panel-enter {
  animation: tab-enter 0.28s var(--ease-out-expo) both;
}

@keyframes tab-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   19. ACTION FEEDBACK: ERROR SHAKE & SUCCESS TICK
   -------------------------------------------------------------------------- */
@keyframes shake-feedback {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.shake-feedback {
  animation: shake-feedback 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  box-shadow: 0 0 0 2px rgba(244, 63, 94, 0.5) !important;
  border-color: rgba(244, 63, 94, 0.8) !important;
}

/* Smooth Dialog Backdrop Blur */
dialog.scalent-dialog::backdrop {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(11, 15, 25, 0.75);
}

/* Success Checkmark Circle Pop */
.check-success-badge {
  animation: scale-pop 0.4s var(--ease-spring) both;
}

/* --------------------------------------------------------------------------
   20. UTILITIES
   -------------------------------------------------------------------------- */
.will-animate {
  will-change: transform, opacity;
}

.reveal-placeholder {
  min-height: 1px;
}

/* --------------------------------------------------------------------------
   21. ACCESSIBILITY & PREFERS-REDUCED-MOTION (Modern Web Guidance Compliant)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  
  .reveal,
  .hero-word,
  .hero-sub,
  .nav-enter-active,
  .timeline-step,
  .workspace-layer {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .animate-hero-drift,
  .ambient-glow-orb,
  .hero-glass-sculpture,
  .tab-icon-hover,
  .action-icon-pop {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }
}