/* Motion system: subtle, enterprise-safe */
:root { 
  --dur: .55s; 
  --ease: cubic-bezier(.22,.61,.36,1); 
}

/* Reveal animations */
.reveal { 
  opacity: 0; 
  transform: translateY(18px); 
  will-change: transform, opacity; 
}

.reveal.is-in { 
  opacity: 1; 
  transform: none; 
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); 
}

/* Animation utilities */
.fade-in { 
  animation: fadeIn var(--dur) var(--ease) both; 
} 

@keyframes fadeIn {
  from { opacity: 0 }
  to { opacity: 1 }
}

.scale-in { 
  animation: scaleIn .5s var(--ease) both; 
} 

@keyframes scaleIn {
  from { opacity: .96; transform: scale(.98) }
  to { opacity: 1; transform: none }
}

.slide-up { 
  animation: slideUp .6s var(--ease) both; 
} 

@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px) }
  to { opacity: 1; transform: none }
}

/* Hero parallax shimmer */
.hero-parallax {
  background:
    radial-gradient(900px 380px at 50% -200px, rgba(10,73,255,.18), transparent 60%),
    linear-gradient(#fff, #f4f7fb 62%);
  position: relative; 
  overflow: hidden;
}

.hero-parallax::after {
  content: ""; 
  position: absolute; 
  inset: -20% -10% auto -10%;
  height: 70%; 
  background: radial-gradient(600px 160px at var(--mx,50%) 0%, rgba(10,73,255,.08), transparent 60%);
  pointer-events: none; 
  transition: transform .2s linear;
}

/* Counters */
.counter { 
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
}

/* Sticky nav shadow on scroll (toggle by JS) */
.site-nav { 
  transition: box-shadow .25s var(--ease), backdrop-filter .25s var(--ease); 
}

.site-nav.is-stuck { 
  box-shadow: 0 6px 24px rgba(7,12,20,.08); 
  backdrop-filter: saturate(120%) blur(6px); 
}

/* FAQ accordion (progressive enhancement) */
.faq-item { 
  border-bottom: 1px solid var(--border); 
}

.faq-q { 
  cursor: pointer; 
  padding: 14px 0; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  user-select: none;
}

.faq-q:hover {
  color: var(--brand-500);
}

.faq-a { 
  max-height: 0; 
  overflow: hidden; 
  transition: max-height .4s var(--ease); 
}

.faq-item.is-open .faq-a { 
  max-height: 480px; 
}

.faq-item.is-open .faq-q span {
  transform: rotate(90deg);
  transition: transform .25s var(--ease);
}

/* Marquee logo rail */
.logo-rail { 
  display: flex; 
  gap: 40px; 
  align-items: center; 
  overflow: hidden; 
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); 
}

.logo-rail > div { 
  display: flex; 
  gap: 40px; 
  animation: rail 18s linear infinite; 
}

@keyframes rail { 
  from { transform: translateX(0) } 
  to { transform: translateX(-50%) } 
}

/* Work grid enhancements */
.work-card {
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  cursor: pointer;
}

.work-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(7,12,20,.15);
}

/* Modal enhancements - work modal styling handled in theme.css */

dialog::backdrop {
  background: rgba(11,18,32,.4);
  backdrop-filter: blur(4px);
}

dialog[open] {
  animation: modalIn .3s var(--ease) both;
}

@keyframes modalIn {
  from { 
    opacity: 0; 
    transform: scale(.95) translateY(20px);
  }
  to { 
    opacity: 1; 
    transform: none;
  }
}

/* Testimonial rotation */
[data-rot] blockquote {
  transition: opacity .5s var(--ease);
}

/* Button loading state */
.btn.is-loading {
  pointer-events: none;
  opacity: .7;
}

.btn.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 12px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin .6s linear infinite;
}

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

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  
  .logo-rail > div {
    animation: none;
  }
  
  .hero-parallax::after {
    display: none;
  }
}

/* Enhanced section backgrounds for depth */
.section-depth {
  background:
    radial-gradient(900px 400px at 15% 10%, rgba(10,73,255,.06), transparent 60%),
    radial-gradient(900px 400px at 85% 0%, rgba(10,73,255,.05), transparent 60%);
}

/* Filter chips for work section */
.filter-chip {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all .2s var(--ease);
  user-select: none;
}

/* Filter chip interactions moved to theme.css for Fortune 500 color scheme */

/* Micro-animations for interactivity */
.interactive {
  transition: transform .15s var(--ease);
}

.interactive:active {
  transform: scale(.98);
}

/* Floating action elements */
.float {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-4px); }
}

/* Page transitions */
.page-enter {
  opacity: 0;
  transform: translateY(20px);
}

.page-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}