/**
 * Shared FX layer for all Tunai themes — loaded before each theme's own
 * stylesheet. Generic mechanics only; each theme supplies the colours via
 * custom properties on its root:
 *
 *   --fx-accent  scroll-progress bar colour
 *   --fx-spot    cursor-spotlight tint (a translucent rgba)
 *
 * The matching behaviour lives in ThemeFX (data-tilt / data-spot /
 * data-magnetic / data-reveal / data-countup / data-parallax).
 */

/* Cursor spotlight — a soft light that follows the pointer across a card. */
[data-spot] {
  position: relative;
}

[data-spot]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    var(--fx-spot, rgba(255, 255, 255, 0.12)),
    transparent 65%
  );
}

[data-spot]:hover::after {
  opacity: 1;
}

/* 3D tilt — ThemeFX drives --rx/--ry from the pointer; only under .tfx and a
   fine pointer, so touch devices and no-JS never get a stuck perspective. */
.tfx [data-tilt] {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.16s ease;
}

/* Magnetic CTAs — ThemeFX nudges `translate` toward the cursor; the spring
   back happens here. Composes with any theme `transform` (skews etc.). */
[data-magnetic] {
  transition: translate 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: translate;
}

@media (prefers-reduced-motion: reduce) {
  .tfx [data-tilt] {
    transform: none;
    transition: none;
  }

  [data-spot]::after {
    display: none;
  }
}

/* ── FX v3 ──────────────────────────────────────────────────────────────── */

/* Split-text headline: ThemeFX wraps each character in .fx-w > .fx-c; chars
   rise out of their own clipping box, staggered via --d. */
.tfx [data-splittext] .fx-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.tfx [data-splittext] .fx-c {
  display: inline-block;
  translate: 0 115%;
  opacity: 0;
  transition: translate 0.75s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.45s ease;
  transition-delay: var(--d, 0s);
}

.tfx [data-splittext].fx-ready .fx-c {
  translate: 0 0;
  opacity: 1;
}

/* Curtain image reveal: an accent panel wipes off the image when it enters
   view, while the photo settles from a slight over-zoom. Uses ::before so it
   composes with themes that already use ::after on the same figure. */
.tfx [data-curtain] {
  position: relative;
  overflow: hidden;
}

.tfx [data-curtain]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--fx-accent, #000);
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 0.8s cubic-bezier(0.7, 0, 0.2, 1) 0.1s;
  pointer-events: none;
}

.tfx [data-curtain].is-in::before {
  transform: scaleX(0);
}

.tfx [data-curtain] img {
  scale: 1.14;
  transition: scale 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s;
}

.tfx [data-curtain].is-in img {
  scale: 1;
}

/* Auto-hiding nav: slides away scrolling down, returns scrolling up. */
.tfx [data-autohide] {
  transition: translate 0.35s ease;
}

.tfx [data-autohide].fx-nav-hidden {
  translate: 0 -130%;
}

/* Scrollspy: the nav link whose section is on screen lights up in accent. */
.tfx [data-nav] a.fx-active {
  color: var(--fx-accent, currentColor) !important;
}

/* Click ripple on CTAs. */
[data-ripple] {
  position: relative;
  overflow: hidden;
}

.fx-ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
  scale: 0;
  animation: fx-ripple 0.55s ease-out forwards;
  pointer-events: none;
}

@keyframes fx-ripple {
  to {
    scale: 1;
    opacity: 0;
  }
}

/* Marquee utility: render the track twice inside .fx-marquee. */
.fx-marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
}

.fx-marquee > span {
  display: inline-flex;
  flex: 0 0 auto;
  min-width: 100%;
  justify-content: space-around;
  animation: fx-marquee var(--fx-mq, 28s) linear infinite;
}

@keyframes fx-marquee {
  to {
    translate: -100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tfx [data-splittext] .fx-c {
    translate: 0 0;
    opacity: 1;
    transition: none;
  }

  .tfx [data-curtain]::before {
    display: none;
  }

  .tfx [data-curtain] img {
    scale: 1;
    transition: none;
  }

  .tfx [data-autohide] {
    transition: none;
  }

  .fx-marquee > span {
    animation: none;
  }

  .fx-ripple {
    display: none;
  }
}