/* ============================================
   NEXiiO — Motion System — Brilliant but Restrained
   GSAP + Lenis + CSS fallbacks
   ============================================ */

/* Base reveal — CSS fallback before JS boots */
.reveal,
[data-reveal] {
  --reveal-y: 18px;
  --reveal-delay: 0ms;
  opacity: 1;
  transform: none;
}
html.js-loading .reveal,
html.js-loading [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-y));
}
html.js-loading [data-reveal="fade"] { transform: none; }
html.js-loading [data-reveal="rise"] { --reveal-y: 24px; }
html.js-loading [data-reveal="blur"] { filter: blur(8px); transform: translateY(14px) scale(.98); }
html.js-loading [data-reveal="scale"] { transform: translateY(12px) scale(.96); }

.reveal.is-in,
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity var(--dur-slow) var(--ease-spring),
              transform var(--dur-slow) var(--ease-spring),
              filter var(--dur-slow) var(--ease-spring);
  transition-delay: var(--reveal-delay);
}

/* Stagger children */
[data-stagger] > * {
  --reveal-y: 14px;
}
html.js-loading [data-stagger] > * {
  opacity: 0;
  transform: translateY(var(--reveal-y));
}
html.js-loading [data-stagger].is-in > * {
  opacity: 1;
  transform: none;
  transition: opacity 640ms var(--ease-spring), transform 720ms var(--ease-spring);
}
html.js-loading [data-stagger].is-in > *:nth-child(1){transition-delay: 0ms}
html.js-loading [data-stagger].is-in > *:nth-child(2){transition-delay: 80ms}
html.js-loading [data-stagger].is-in > *:nth-child(3){transition-delay: 160ms}
html.js-loading [data-stagger].is-in > *:nth-child(4){transition-delay: 240ms}
html.js-loading [data-stagger].is-in > *:nth-child(5){transition-delay: 320ms}
html.js-loading [data-stagger].is-in > *:nth-child(6){transition-delay: 400ms}

/* Parallax helper */
[data-speed] { will-change: transform; }

/* Magnetic button */
.btn-magnetic {
  position: relative;
  will-change: transform;
  transition: transform var(--dur-fast) var(--ease-out);
}

/* Hover lift — GPU only */
.hover-lift {
  transition: transform 520ms var(--ease-spring), box-shadow 420ms var(--ease-out);
  will-change: transform;
}
.hover-lift:hover {
  transform: translateY(-6px);
}

/* Image zoom on card hover */
.card-zoom img {
  transition: transform 700ms var(--ease-spring);
  will-change: transform;
}
.card-zoom:hover img { transform: scale(1.06); }

/* Header morph */
.site-header {
  transition: background-color 360ms var(--ease-out),
              box-shadow 360ms var(--ease-out),
              backdrop-filter 360ms var(--ease-out),
              border-color 360ms var(--ease-out);
}

/* Hero ken-burns — removed: scale(1.06) cropped image on both sides in RTL/mobile */

/* Shimmer for loading */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer {
  background: linear-gradient(90deg, var(--surface-muted) 25%, #fff 50%, var(--surface-muted) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}

/* Lenis smooth scroll class */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* Progress bar */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  transform-origin: right center;
  transform: scaleX(0);
  z-index: 10000;
  pointer-events: none;
}

/* Focus ring elegant */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Reduced motion */
@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;
  }
  html.js-loading .reveal,
  html.js-loading [data-reveal],
  html.js-loading [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .hover-lift:hover { transform: none !important; }
  .card-zoom:hover img { transform: none !important; }
}