/* ------------------------------
   TS3D Scroll Drift
   - progress var: --p (0..1)
   - direction: --dir (-1 left, +1 right)
------------------------------ */


.ts3d-drift {
  /* default direction: right */
  --dir: 1;

  /* internal progress: set by JS */
  --p: 0;

  will-change: transform, opacity;
  transform: translate3d(
    /* X starts very late (see calc below) */
    calc(var(--dir) * var(--ts3d-drift-x) * var(--px)),
    /* Y starts earlier */
    calc(var(--ts3d-drift-y) * var(--py) * -1),
    0
  );
  opacity: var(--po);
  filter: blur(calc(var(--ts3d-drift-blur) * var(--po-blur)));
}

/* direction helpers */
.ts3d-drift--left { --dir: -1; }
.ts3d-drift--right { --dir: 1; }

/*
  We derive 3 curves from --p:
  - --py: upward movement starts earlier (0..1 across most of the range)
  - --px: sideways movement starts very late (0 until ~0.72, then ramps)
  - --po: opacity stays 1 for a while, then fades late (from ~0.70 to 1.00)
  
  These are *piecewise* shaped using clamp math.
  JS supplies eased progress already (easeInQuint), so CSS shaping is just timing.
*/

.ts3d-drift {
  /* Upwards: start earlier and remain subtle /0.85 was standaard */
  --py: clamp(0, calc(var(--p) / 0.85), 1.5);

  /* Sideways: starts late (after ~0.72) / 0.28 was standaard ) */
  --px: clamp(0, calc((var(--p) - 0.01) / 1.28), 1);

  /* Opacity: stays 1 until ~0.70, then fades to 0 by 1.0 */
  --po: calc(1 - clamp(0, calc((var(--p) - 0.10) / 0.85), 1));

  /* Optional blur factor (kept 0 by default) */
  --po-blur: calc(1 - var(--po));
}



/* Optional: reduce motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .ts3d-drift {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

/* yinyang slow spin */
.yinyang-spin {
  --spin-duration: 120s;
  animation: yinyang-rotate var(--spin-duration) linear infinite;
}

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