/*
 * SORKISTx Animations CSS
 * Scroll-triggered effects driven by scroll-fx.js via data-fx attributes.
 *
 * Pattern: elements start in their "hidden" state via [data-fx] selectors.
 * scroll-fx.js adds .fx-visible when the element enters the viewport,
 * triggering the transition to the "visible" state.
 *
 * All transitions use transform + opacity only (GPU-accelerated, no layout thrashing).
 * prefers-reduced-motion: all effects collapse to opacity-only transitions.
 */

/* ─── Base: All animated elements start invisible ───────────────────────────── */

[data-fx]:not(.fx-skip) {
  transition-property: opacity, transform, clip-path;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: var(--fx-duration, 0.65s);
  transition-delay:    var(--fx-delay, 0s);
  will-change:         opacity, transform;
}

/* ─── Fade In Up ────────────────────────────────────────────────────────────── */

[data-fx="fade-in-up"]:not(.fx-visible):not(.fx-skip) {
  opacity:   0;
  transform: translateY(40px);
}

[data-fx="fade-in-up"].fx-visible {
  opacity:   1;
  transform: translateY(0);
}

/* ─── Fade In Down ──────────────────────────────────────────────────────────── */

[data-fx="fade-in-down"]:not(.fx-visible):not(.fx-skip) {
  opacity:   0;
  transform: translateY(-40px);
}

[data-fx="fade-in-down"].fx-visible {
  opacity:   1;
  transform: translateY(0);
}

/* ─── Fade In Left (from start — auto-flips in RTL via JS) ─────────────────── */

[data-fx="fade-in-left"]:not(.fx-visible):not(.fx-skip) {
  opacity:   0;
  transform: var(--fx-left-init, translateX(-40px));
}

[data-fx="fade-in-left"].fx-visible {
  opacity:   1;
  transform: translateX(0);
}

/* ─── Fade In Right (from end — auto-flips in RTL via JS) ──────────────────── */

[data-fx="fade-in-right"]:not(.fx-visible):not(.fx-skip) {
  opacity:   0;
  transform: var(--fx-right-init, translateX(40px));
}

[data-fx="fade-in-right"].fx-visible {
  opacity:   1;
  transform: translateX(0);
}

/* ─── Scale In ──────────────────────────────────────────────────────────────── */

[data-fx="scale-in"]:not(.fx-visible):not(.fx-skip) {
  opacity:   0;
  transform: scale(0.85);
}

[data-fx="scale-in"].fx-visible {
  opacity:   1;
  transform: scale(1);
}

/* ─── Reveal (curtain wipe) ─────────────────────────────────────────────────── */

[data-fx="reveal"]:not(.fx-visible):not(.fx-skip) {
  clip-path: inset(0 100% 0 0);
  opacity:   1;
}

/* RTL: reveal from opposite side */
[dir="rtl"] [data-fx="reveal"]:not(.fx-visible):not(.fx-skip) {
  clip-path: inset(0 0 0 100%);
}

[data-fx="reveal"].fx-visible {
  clip-path: inset(0 0% 0 0);
}

/* ─── Stagger ───────────────────────────────────────────────────────────────── */
/*
 * Parent marked data-fx="stagger", children get staggered delays via JS.
 * Children receive inline --fx-delay set by scroll-fx.js.
 */

[data-fx="stagger"] > * {
  opacity:              0;
  transform:            translateY(24px);
  transition-property:  opacity, transform;
  transition-duration:  0.5s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay:     var(--fx-delay, 0s);
}

[data-fx="stagger"].fx-visible > * {
  opacity:   1;
  transform: translateY(0);
}

/* ─── Counter ───────────────────────────────────────────────────────────────── */
/*
 * Elements with data-fx="counter" contain a data-target attribute.
 * scroll-fx.js animates the number from 0 to data-target.
 */

[data-fx="counter"] {
  display:     inline-block;
  font-weight: 800;
  font-size:   clamp(2rem, 5vw, 3.5rem);
  color:       var(--color-primary);
}

/* ─── Parallax ──────────────────────────────────────────────────────────────── */
/*
 * Elements with data-fx="parallax" shift at half the scroll speed.
 * The transform is set inline by scroll-fx.js on scroll events.
 */

[data-fx="parallax"] {
  will-change: transform;
}

/* ─── Sticky Section ────────────────────────────────────────────────────────── */

[data-fx="sticky-section"] {
  position: sticky;
  top:      80px; /* below nav */
}

/* ─── Fade Only (no movement) ───────────────────────────────────────────────── */

[data-fx="fade"]:not(.fx-visible):not(.fx-skip) {
  opacity: 0;
}

[data-fx="fade"].fx-visible {
  opacity: 1;
}

/* ─── Scroll Progress Bar ───────────────────────────────────────────────────── */
/*
 * Rendered by scroll-progress block. Width is set inline by scroll-fx.js.
 */

.scroll-progress-bar {
  position:   fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height:     3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  z-index:    var(--z-toast);
  width:      0%;
  transition: width 0.1s linear;
  transform-origin: inline-start;
}

/* ─── Back to Top Button ────────────────────────────────────────────────────── */

.back-to-top {
  position:       fixed;
  inset-block-end: var(--space-6);
  inset-inline-end: var(--space-6);
  width:          48px;
  height:         48px;
  border-radius:  var(--radius-full);
  background:     var(--color-primary);
  color:          #fff;
  display:        flex;
  align-items:    center;
  justify-content:center;
  box-shadow:     var(--shadow-md);
  cursor:         pointer;
  z-index:        var(--z-nav);
  transition:     var(--transition-smooth);
  opacity:        0;
  transform:      translateY(16px);
  pointer-events: none;
  border:         none;
}

.back-to-top.is-visible {
  opacity:        1;
  transform:      translateY(0);
  pointer-events: auto;
}

.back-to-top:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* ─── Section Hero / Parallax Container ─────────────────────────────────────── */

.hero-parallax {
  position:    relative;
  overflow:    hidden;
}

.hero-parallax__bg {
  position:    absolute;
  inset:       -20% 0;
  background-size:     cover;
  background-position: center;
  will-change: transform;
}

/* ─── Number Counter (count-up animation) ───────────────────────────────────── */

@keyframes count-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.counter-done {
  animation: count-pulse 0.4s ease;
}

/* ─── Page Transition ───────────────────────────────────────────────────────── */

.page-transition-enter {
  opacity:   0;
  transform: translateY(12px);
}

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

/* ─── Prefers Reduced Motion Override ───────────────────────────────────────── */
/*
 * When the user has requested reduced motion:
 * - All data-fx elements skip the movement and show immediately
 * - Only opacity transitions remain (subtle)
 */

@media (prefers-reduced-motion: reduce) {
  [data-fx]:not(.fx-skip) {
    transition-duration: 0.2s !important;
  }

  [data-fx="fade-in-up"]:not(.fx-visible):not(.fx-skip),
  [data-fx="fade-in-down"]:not(.fx-visible):not(.fx-skip),
  [data-fx="fade-in-left"]:not(.fx-visible):not(.fx-skip),
  [data-fx="fade-in-right"]:not(.fx-visible):not(.fx-skip),
  [data-fx="scale-in"]:not(.fx-visible):not(.fx-skip),
  [data-fx="stagger"] > * {
    transform: none !important;
  }

  [data-fx="reveal"]:not(.fx-visible):not(.fx-skip) {
    clip-path: none !important;
    opacity:   0;
  }

  [data-fx="parallax"] {
    transform: none !important;
  }

  .scroll-progress-bar { display: none; }
}