/**
 * UI Enhancements 2026 - Premium Visual Polish
 *
 * Enhances UI to Awwwards/Linear quality level while maintaining
 * the warm sun / silver night theme identity.
 *
 * Focus Areas:
 * - Unified button system (fixes 4+ inconsistent implementations)
 * - Kinetic typography (2026 trend)
 * - Spring-physics micro-interactions
 * - Pixel-perfect polish (shadows, spacing, alignment)
 * - Enhanced glassmorphism and depth
 *
 * Created: January 28, 2026
 */

/* ============================================
   1. UNIFIED BUTTON SYSTEM
   Consolidates all button variants into one consistent system
   ============================================ */

/* Base Button - All buttons inherit from this */
.btn,
.btn-cta,
.btn-cta-primary,
.btn-cta-secondary,
.hero-command,
button:not(.theme-toggle):not(.nav-toggle) {
  /* Reset inconsistencies */
  all: unset;

  /* Unified structure */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  /* Consistent sizing - exactly 12px 24px everywhere */
  padding: 12px 24px !important;
  min-height: 44px !important; /* Touch target */

  /* Unified radius - 8px across all buttons */
  border-radius: 8px !important;

  /* Typography */
  font-family: var(--font-body) !important;
  font-size: 0.9375rem !important; /* 15px */
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  /* Interaction */
  cursor: pointer !important;
  user-select: none !important;
  position: relative !important;

  /* Spring physics transition */
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;

  /* Smooth transform origin */
  transform-origin: center !important;
  will-change: transform, box-shadow !important;
}

/* Primary CTA - Warm gradient (light mode) / Blue gradient (dark mode) */
.btn-cta-primary,
.btn-primary,
button[type="submit"] {
  background: var(--accent-button-bg) !important;
  color: var(--accent-button-text) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;

  /* Unified shadow - soft glow */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 4px 12px rgba(212, 146, 63, 0.15) !important;
}

[data-theme="dark"] .btn-cta-primary,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] button[type="submit"] {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 4px 16px rgba(140, 182, 255, 0.2) !important;
}

/* Secondary/Outline Buttons */
.btn-cta-secondary,
.btn-secondary,
.hero-command {
  background: var(--bg-card) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-subtle) !important;
  backdrop-filter: blur(12px) !important;

  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .btn-cta-secondary,
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .hero-command {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Hover States - Unified behavior with spring bounce */
@media (hover: hover) {
  .btn:hover,
  .btn-cta:hover,
  .btn-cta-primary:hover,
  .btn-cta-secondary:hover,
  .hero-command:hover,
  button:not(.theme-toggle):not(.nav-toggle):hover {
    /* Spring bounce up + scale */
    transform: translateY(-2px) scale(1.02) !important;
  }

  .btn-cta-primary:hover,
  .btn-primary:hover,
  button[type="submit"]:hover {
    box-shadow:
      0 4px 8px rgba(0, 0, 0, 0.08),
      0 8px 24px rgba(212, 146, 63, 0.25) !important;
  }

  [data-theme="dark"] .btn-cta-primary:hover,
  [data-theme="dark"] .btn-primary:hover,
  [data-theme="dark"] button[type="submit"]:hover {
    box-shadow:
      0 4px 8px rgba(0, 0, 0, 0.4),
      0 8px 32px rgba(140, 182, 255, 0.3) !important;
  }

  .btn-cta-secondary:hover,
  .btn-secondary:hover,
  .hero-command:hover {
    background: color-mix(in srgb, var(--bg-card) 90%, var(--accent) 10%) !important;
    border-color: var(--accent-primary) !important;
    box-shadow:
      0 4px 8px rgba(0, 0, 0, 0.06),
      0 8px 20px rgba(212, 146, 63, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  }

  [data-theme="dark"] .btn-cta-secondary:hover,
  [data-theme="dark"] .btn-secondary:hover,
  [data-theme="dark"] .hero-command:hover {
    box-shadow:
      0 4px 8px rgba(0, 0, 0, 0.3),
      0 8px 24px rgba(140, 182, 255, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  }
}

/* Active/Pressed States - Unified behavior */
.btn:active,
.btn-cta:active,
.btn-cta-primary:active,
.btn-cta-secondary:active,
.hero-command:active,
button:not(.theme-toggle):not(.nav-toggle):active {
  transform: translateY(1px) scale(0.98) !important;
  transition-duration: 0.1s !important;
}

/* Focus States - Unified keyboard navigation */
.btn:focus-visible,
.btn-cta:focus-visible,
.btn-cta-primary:focus-visible,
.btn-cta-secondary:focus-visible,
.hero-command:focus-visible,
button:not(.theme-toggle):not(.nav-toggle):focus-visible {
  outline: 2px solid var(--accent-primary) !important;
  outline-offset: 2px !important;
}

[data-theme="dark"] .btn:focus-visible,
[data-theme="dark"] .btn-cta:focus-visible,
[data-theme="dark"] .btn-cta-primary:focus-visible,
[data-theme="dark"] .btn-cta-secondary:focus-visible,
[data-theme="dark"] .hero-command:focus-visible,
[data-theme="dark"] button:not(.theme-toggle):not(.nav-toggle):focus-visible {
  outline: 3px solid var(--accent) !important;
  outline-offset: 2px !important;
}

/* Disabled States */
.btn:disabled,
.btn-cta:disabled,
button:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  transform: none !important;
  pointer-events: none !important;
}


/* ============================================
   2. KINETIC TYPOGRAPHY (2026 Trend)
   Headlines that respond to scroll and interaction
   ============================================ */

/* Hero Title - Kinetic animation on page load */
.hero-title,
.hero-terminal-title,
h1.hero-title {
  /* Enable transform animations */
  transform-style: preserve-3d !important;

  /* Smooth kinetic movement */
  animation: heroKineticEntry 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;

  /* Add subtle parallax on scroll (set via JS) */
  transform: translateY(calc(var(--scroll-progress, 0) * -20px)) !important;
}

@keyframes heroKineticEntry {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    filter: blur(10px);
  }
  50% {
    opacity: 0.5;
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Typed word - spring bounce on change */
.hero-typed-word {
  display: inline-block !important;
  animation: typeWordBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes typeWordBounce {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.9);
  }
  50% {
    transform: translateY(-2px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Section headings - animate on scroll into view */
.section-title,
h2.section-heading,
.heading-primary {
  /* Smooth fade-in with slide */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.section-title.in-view,
h2.section-heading.in-view,
.heading-primary.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Add micro-movement on hover for interactive headings */
@media (hover: hover) {
  .section-title:hover,
  h2.section-heading:hover,
  .heading-primary:hover {
    transform: translateY(-2px);
    transition-duration: 0.2s;
  }
}


/* ============================================
   3. ENHANCED MICRO-INTERACTIONS
   Delightful spring-physics responses
   ============================================ */

/* Card hover - 3D lift with spring bounce */
.case-study-card,
.work-card,
.timeline-item,
.testimonial-card,
.ux-bite-card {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@media (hover: hover) {
  .case-study-card:hover,
  .work-card:hover,
  .timeline-item:hover,
  .testimonial-card:hover,
  .ux-bite-card:hover {
    /* Spring lift with subtle 3D rotation */
    transform: translateY(-8px) translateZ(20px) scale(1.01) !important;

    /* Enhanced shadow on hover */
    box-shadow:
      0 12px 40px rgba(0, 0, 0, 0.08),
      0 4px 12px rgba(0, 0, 0, 0.04),
      inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  }

  [data-theme="dark"] .case-study-card:hover,
  [data-theme="dark"] .work-card:hover,
  [data-theme="dark"] .timeline-item:hover,
  [data-theme="dark"] .testimonial-card:hover,
  [data-theme="dark"] .ux-bite-card:hover {
    box-shadow:
      0 12px 48px rgba(0, 0, 0, 0.4),
      0 4px 16px rgba(140, 182, 255, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  }
}

/* Links - smooth underline expansion */
a:not(.btn):not(.btn-cta):not(.hero-command):not(.nav-link) {
  position: relative;
  text-decoration: none !important;
}

a:not(.btn):not(.btn-cta):not(.hero-command):not(.nav-link)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 2px;
  background: var(--accent-primary);
  transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (hover: hover) {
  a:not(.btn):not(.btn-cta):not(.hero-command):not(.nav-link):hover::after {
    width: 100%;
  }
}

[data-theme="dark"] a:not(.btn):not(.btn-cta):not(.hero-command):not(.nav-link)::after {
  background: var(--accent);
}

/* Nav links - spring bounce on hover */
.nav-link,
.floating-navbar a {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.25s ease !important;
}

@media (hover: hover) {
  .nav-link:hover,
  .floating-navbar a:hover {
    transform: translateY(-1px) scale(1.05) !important;
  }
}

/* Input focus - glow effect */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  transition: border-color 0.3s ease,
              box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent-primary) !important;
  box-shadow:
    0 0 0 3px rgba(212, 146, 63, 0.1),
    0 4px 12px rgba(212, 146, 63, 0.15) !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: var(--accent) !important;
  box-shadow:
    0 0 0 3px rgba(140, 182, 255, 0.15),
    0 4px 16px rgba(140, 182, 255, 0.2) !important;
}


/* ============================================
   4. PIXEL-PERFECT POLISH
   Fixes alignment, spacing, shadow consistency
   ============================================ */

/* Standardized border radius (only 5 values) */
.btn, button { border-radius: 8px !important; }
.card, .work-card, .case-study-card { border-radius: 16px !important; }
.modal, .dialog { border-radius: 24px !important; }
.avatar, .profile-image { border-radius: 50% !important; }
.pill, .badge, .tag { border-radius: 999px !important; }

/* Standardized shadows (design system tokens only) */
.shadow-sm {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.shadow-md {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.shadow-lg {
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="dark"] .shadow-sm {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .shadow-md {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.4),
    0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .shadow-lg {
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.6),
    0 4px 8px rgba(0, 0, 0, 0.5) !important;
}

/* Perfect alignment - optical centering */
.btn svg,
.button svg,
button svg {
  /* Optical alignment for icons */
  position: relative;
  top: -0.5px; /* Compensate for visual weight */
}

/* Consistent section spacing */
section {
  padding-top: clamp(64px, 10vw, 120px) !important;
  padding-bottom: clamp(64px, 10vw, 120px) !important;
}

/* Card padding consistency */
.card,
.work-card,
.case-study-card,
.testimonial-card {
  padding: 28px !important; /* Exactly 28px everywhere */
}

@media (max-width: 768px) {
  .card,
  .work-card,
  .case-study-card,
  .testimonial-card {
    padding: 20px !important; /* Exactly 20px on mobile */
  }
}


/* ============================================
   5. ADVANCED GLASSMORPHISM & DEPTH (2026)
   Enhanced layering and sophisticated blur
   ============================================ */

/* Enhanced glass effect - more depth */
.glass,
.floating-navbar,
.hero-terminal-card,
.modal-content {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  border: 1px solid var(--glass-border) !important;

  /* Subtle inner glow for depth */
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 20px rgba(255, 255, 255, 0.03) !important;
}

[data-theme="dark"] .glass,
[data-theme="dark"] .floating-navbar,
[data-theme="dark"] .hero-terminal-card,
[data-theme="dark"] .modal-content {
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;

  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 20px rgba(140, 182, 255, 0.05) !important;
}

/* Layered depth - z-axis awareness */
.layer-1 { transform: translateZ(10px); }
.layer-2 { transform: translateZ(20px); }
.layer-3 { transform: translateZ(30px); }
.layer-4 { transform: translateZ(40px); }

/* 3D context for layering */
.has-depth {
  transform-style: preserve-3d !important;
  perspective: 1000px !important;
}

/* Light source interaction on hover */
@media (hover: hover) {
  .glass:hover,
  .hero-terminal-card:hover {
    /* Simulate light hitting surface */
    box-shadow:
      0 12px 48px rgba(0, 0, 0, 0.12),
      inset 0 2px 0 rgba(255, 255, 255, 0.15),
      inset -20px -20px 40px rgba(255, 255, 255, 0.02),
      inset 20px 20px 40px rgba(212, 146, 63, 0.03) !important;

    transition: box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  [data-theme="dark"] .glass:hover,
  [data-theme="dark"] .hero-terminal-card:hover {
    box-shadow:
      0 12px 56px rgba(0, 0, 0, 0.6),
      inset 0 2px 0 rgba(255, 255, 255, 0.08),
      inset -20px -20px 40px rgba(255, 255, 255, 0.02),
      inset 20px 20px 40px rgba(140, 182, 255, 0.08) !important;
  }
}


/* ============================================
   6. MAGNETIC CTA EFFECT (Premium Detail)
   Buttons subtly follow cursor on proximity
   ============================================ */

.btn-cta-primary,
.btn-primary {
  /* Magnetic offset (set via JS) */
  transform: translate(
    var(--cta-magnet-x, 0px),
    var(--cta-magnet-y, 0px)
  ) !important;

  /* Smooth magnetic pull */
  transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

@media (hover: hover) {
  .btn-cta-primary:hover,
  .btn-primary:hover {
    /* Add scale on top of magnetic movement */
    transform: translate(
      var(--cta-magnet-x, 0px),
      var(--cta-magnet-y, 0px)
    ) scale(1.02) translateY(-2px) !important;
  }
}


/* ============================================
   7. LOADING & SKELETON STATES
   Progressive content loading with shimmer
   ============================================ */

/* Skeleton screen shimmer */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-1) 0%,
    var(--surface-2) 50%,
    var(--surface-1) 100%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}

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

/* Loading spinner with spring bounce */
.loading-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--surface-2);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spinnerRotate 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

@keyframes spinnerRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

[data-theme="dark"] .loading-spinner {
  border-color: var(--surface-2);
  border-top-color: var(--accent);
}


/* ============================================
   8. ACCESSIBILITY ENHANCEMENTS
   Enhanced focus states and reduced motion
   ============================================ */

/* High-contrast focus indicators */
*:focus-visible {
  outline: 2px solid var(--accent-primary) !important;
  outline-offset: 2px !important;
  transition: outline-offset 0.2s ease !important;
}

[data-theme="dark"] *:focus-visible {
  outline: 3px solid var(--accent) !important;
}

/* Skip link enhancement */
.skip-link:focus {
  transform: translateY(0) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero-title {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .skeleton {
    animation: none !important;
  }
}


/* ============================================
   9. PRINT STYLES
   Optimized for clean printing
   ============================================ */

@media print {
  /* Hide interactive elements */
  .btn, button, .nav, .floating-navbar,
  .theme-toggle, .scroll-to-top {
    display: none !important;
  }

  /* Remove shadows and effects */
  * {
    box-shadow: none !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    animation: none !important;
    transition: none !important;
  }

  /* Ensure readability */
  body {
    background: white !important;
    color: black !important;
  }

  /* Page breaks */
  section {
    page-break-inside: avoid;
  }
}


/* ============================================
   10. PERFORMANCE OPTIMIZATIONS
   GPU acceleration and render optimization
   ============================================ */

/* GPU acceleration for animated elements */
.hero-title,
.btn,
.case-study-card,
.work-card,
.floating-navbar {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Contain layout reflows */
.card,
.case-study-card,
.work-card {
  contain: layout style paint;
}

/* Optimize images */
img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Smooth scroll with GPU */
html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}