/*
 * ArshPress effects (fx). Pair with arsh-fx.js. Docs: docs/BUILDER-FX.md
 * Rules: tokens only (src/mu-plugins/arshpress-core/assets/css/tokens.css), logical properties only, no raw colors.
 * Direction: --arsh-fx-sign is 1 in LTR and -1 in RTL; every horizontal movement multiplies by it, so "from the reading
 * start" is the right side in Persian. Content is visible by default: the hidden start state exists only after the script
 * marks html.arsh-fx-ready, and only when the visitor does not ask for reduced motion.
 */
.arsh-fx { --arsh-fx-sign: 1; }
@supports selector(:dir(rtl)) {
  .arsh-fx:dir(rtl), .arsh-fx-preview:dir(rtl) { --arsh-fx-sign: -1; }
}
@supports not selector(:dir(rtl)) {
  [dir="rtl"] .arsh-fx, [dir="rtl"].arsh-fx-preview { --arsh-fx-sign: -1; }
}

/* static looks: also what reduced-motion visitors see (never hidden, nothing moves) */
[data-fx-text="gradient-sweep"] {
  background-image: linear-gradient(calc(90deg * var(--arsh-fx-sign)), var(--arsh-ink) 0%, var(--arsh-primary) 45%, var(--arsh-primary-ink) 55%, var(--arsh-ink) 100%);
  background-size: 250% 100%;
  background-position-x: calc(50% - 50% * var(--arsh-fx-sign));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
[data-fx-text="highlight-brush"] {
  background-image: linear-gradient(var(--arsh-primary-tint), var(--arsh-primary-tint));
  background-repeat: no-repeat;
  background-position-x: calc(50% - 50% * var(--arsh-fx-sign)); /* starts at the inline-start edge */
  background-position-y: 88%;
  background-size: 100% 45%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media (forced-colors: active) {
  [data-fx-text="gradient-sweep"] { background-image: none; -webkit-text-fill-color: currentColor; }
}
[data-fx-text="counter"], .arsh-fx-num { font-variant-numeric: tabular-nums; }
.arsh-fx-num { display: inline-block; text-align: end; }
.arsh-fx-track > * { flex: none; }
.arsh-fx-marq { position: relative; overflow: clip; inline-size: 100%; min-inline-size: 0; }
.arsh-fx-pause {
  position: absolute; inset-block-start: var(--arsh-space-1); inset-inline-end: var(--arsh-space-1); z-index: 2;
  min-block-size: 24px; min-inline-size: 24px; padding-inline: var(--arsh-space-2);
  border: 1px solid var(--arsh-border); border-radius: var(--arsh-radius-pill);
  background: var(--arsh-surface); color: var(--arsh-ink);
  font-family: var(--arsh-font); font-size: var(--arsh-text-xs); cursor: pointer;
}
.arsh-fx-pause:focus-visible { outline: 3px solid var(--arsh-primary); outline-offset: 2px; }
.arsh-fx-preview-layer { background: var(--arsh-surface); box-shadow: var(--arsh-shadow-3); pointer-events: none; }
[data-fx-hover="swap-label"] { overflow: clip; }
.arsh-fx-sw { position: relative; display: inline-block; }
.arsh-fx-sw::after {
  content: attr(data-fx-label); content: attr(data-fx-label) / ""; position: absolute; inset-inline: 0; inset-block-start: 100%; display: block; text-align: center;
}

/* effect parameters per kind (the hidden start state of a reveal) */
[data-fx-reveal="fade"] { --arsh-fx-o: 0; }
[data-fx-reveal="rise"] { --arsh-fx-ty: var(--arsh-space-5); }
[data-fx-reveal="drop"] { --arsh-fx-ty: calc(var(--arsh-space-5) * -1); }
[data-fx-reveal="inline-start"] { --arsh-fx-tx: calc(var(--arsh-fx-sign) * var(--arsh-space-6) * -1); }
[data-fx-reveal="inline-end"] { --arsh-fx-tx: calc(var(--arsh-fx-sign) * var(--arsh-space-6)); }
[data-fx-reveal="zoom"] { --arsh-fx-sc: 0.92; }
[data-fx-reveal="blur"] { --arsh-fx-bl: 12px; }
[data-fx-reveal="mask-wipe"] {
  --arsh-fx-o: 1;
  --arsh-fx-cp: inset(-1em calc(50% + 50% * var(--arsh-fx-sign)) -1em calc(50% - 50% * var(--arsh-fx-sign)));
}
[data-fx-parallax="1"] { --arsh-fx-pd: var(--arsh-space-3); }
[data-fx-parallax="2"] { --arsh-fx-pd: var(--arsh-space-5); }
[data-fx-parallax="3"] { --arsh-fx-pd: var(--arsh-space-7); }

@media (prefers-reduced-motion: no-preference) {
  /* reveal: hidden start state (only once the script is ready, or inside the editor preview layer) */
  :is(.arsh-fx-ready, .arsh-fx-preview) [data-fx-reveal]:not([data-fx-reveal="stagger-children"], .arsh-fx-in) {
    opacity: var(--arsh-fx-o, 0);
    transform: translate(var(--arsh-fx-tx, 0), var(--arsh-fx-ty, 0)) scale(var(--arsh-fx-sc, 1));
    filter: blur(var(--arsh-fx-bl, 0));
    will-change: transform, opacity;
  }
  :is(.arsh-fx-ready, .arsh-fx-preview) [data-fx-reveal="mask-wipe"]:not(.arsh-fx-in) { clip-path: var(--arsh-fx-cp); }
  :is(.arsh-fx-ready, .arsh-fx-preview) [data-fx-reveal="mask-wipe"].arsh-fx-in { clip-path: inset(-1em); }
  :is(.arsh-fx-ready, .arsh-fx-preview) [data-fx-reveal]:not([data-fx-reveal="stagger-children"]) {
    transition: opacity var(--arsh-fx-duration, 600ms) var(--arsh-ease) var(--arsh-fx-delay, 0ms),
      transform var(--arsh-fx-duration, 600ms) var(--arsh-ease) var(--arsh-fx-delay, 0ms),
      filter var(--arsh-fx-duration, 600ms) var(--arsh-ease) var(--arsh-fx-delay, 0ms),
      clip-path var(--arsh-fx-duration, 600ms) var(--arsh-ease) var(--arsh-fx-delay, 0ms);
  }
  :is(.arsh-fx-ready, .arsh-fx-preview) [data-fx-reveal="stagger-children"]:not(.arsh-fx-in) > * {
    opacity: 0; transform: translateY(var(--arsh-space-5)); will-change: transform, opacity;
  }
  :is(.arsh-fx-ready, .arsh-fx-preview) [data-fx-reveal="stagger-children"] > * {
    transition: opacity var(--arsh-fx-duration, 600ms) var(--arsh-ease) calc(var(--arsh-fx-delay, 0ms) + var(--arsh-fx-i, 0) * 80ms),
      transform var(--arsh-fx-duration, 600ms) var(--arsh-ease) calc(var(--arsh-fx-delay, 0ms) + var(--arsh-fx-i, 0) * 80ms);
  }

  /* reveal driven by scrolling (trigger scroll-progress); the script uses the viewport fallback where unsupported */
  @supports (animation-timeline: view()) {
    [data-fx-trigger="scroll-progress"][data-fx-reveal]:not([data-fx-reveal="stagger-children"]) {
      transition: none;
      animation: arsh-fx-sd linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    @keyframes arsh-fx-sd {
      from {
        opacity: var(--arsh-fx-o, 0);
        transform: translate(var(--arsh-fx-tx, 0), var(--arsh-fx-ty, 0)) scale(var(--arsh-fx-sc, 1));
        filter: blur(var(--arsh-fx-bl, 0));
        clip-path: var(--arsh-fx-cp, inset(-1em));
      }
      to { opacity: 1; transform: none; filter: blur(0); clip-path: inset(-1em); }
    }
    [data-fx-parallax] { animation: arsh-fx-par linear both; animation-timeline: view(); }
    @keyframes arsh-fx-par {
      from { translate: 0 var(--arsh-fx-pd); }
      to { translate: 0 calc(var(--arsh-fx-pd) * -1); }
    }
  }
  @supports not (animation-timeline: view()) {
    [data-fx-parallax] { translate: 0 calc(var(--arsh-fx-p, 0) * var(--arsh-fx-pd) * -1); }
  }

  /* text: words are inline spans (no transform, so bidi order and joining are untouched) */
  :is(.arsh-fx-ready, .arsh-fx-preview) [data-fx-text="words-reveal"]:not(.arsh-fx-in) .arsh-fx-w { opacity: 0; }
  :is(.arsh-fx-ready, .arsh-fx-preview) [data-fx-text="blur-in"]:not(.arsh-fx-in) .arsh-fx-w { opacity: 0; filter: blur(8px); }
  :is(.arsh-fx-ready, .arsh-fx-preview) [data-fx-text="typewriter-words"]:not(.arsh-fx-in) .arsh-fx-w { opacity: 0; }
  [data-fx-text="words-reveal"] .arsh-fx-w, [data-fx-text="blur-in"] .arsh-fx-w {
    transition: opacity var(--arsh-fx-duration, 600ms) var(--arsh-ease) calc(var(--arsh-fx-delay, 0ms) + var(--arsh-fx-i, 0) * var(--arsh-fx-step, 60ms)),
      filter var(--arsh-fx-duration, 600ms) var(--arsh-ease) calc(var(--arsh-fx-delay, 0ms) + var(--arsh-fx-i, 0) * var(--arsh-fx-step, 60ms));
  }
  [data-fx-text="typewriter-words"] .arsh-fx-w {
    transition: opacity 1ms steps(1, end) calc(var(--arsh-fx-delay, 0ms) + var(--arsh-fx-i, 0) * var(--arsh-fx-step, 100ms));
  }
  :is(.arsh-fx-ready, .arsh-fx-preview) [data-fx-text="highlight-brush"]:not(.arsh-fx-in) { background-size: 0 45%; }
  [data-fx-text="highlight-brush"] {
    transition: background-size calc(var(--arsh-fx-duration, 600ms) * 1.5) var(--arsh-ease) var(--arsh-fx-delay, 0ms);
  }
  [data-fx-text="gradient-sweep"].arsh-fx-in {
    animation: arsh-fx-sweep calc(var(--arsh-fx-duration, 600ms) * 3) var(--arsh-ease) var(--arsh-fx-delay, 0ms) 1 both;
  }
  @keyframes arsh-fx-sweep {
    from { background-position-x: calc(50% + 50% * var(--arsh-fx-sign)); }
    to { background-position-x: calc(50% - 50% * var(--arsh-fx-sign)); }
  }

  /* loops: run only while the element is on screen (the script toggles .arsh-fx-vis), stop on hover/focus and in a hidden tab */
  [data-fx-loop="float"].arsh-fx-vis { animation: arsh-fx-float 4s ease-in-out infinite; will-change: transform; }
  [data-fx-loop="pulse"].arsh-fx-vis { animation: arsh-fx-pulse 2.4s ease-in-out infinite; will-change: transform; }
  @keyframes arsh-fx-float { 50% { transform: translateY(calc(var(--arsh-space-2) * -1)); } }
  @keyframes arsh-fx-pulse { 50% { transform: scale(1.04); } }
  [data-fx-loop="marquee"].arsh-fx-track, [data-fx-loop="marquee-reverse"].arsh-fx-track {
    display: flex; flex-wrap: nowrap; inline-size: max-content; column-gap: var(--arsh-space-5); padding-inline-end: var(--arsh-space-5);
    animation: arsh-fx-marquee var(--arsh-fx-mdur, 20s) linear infinite; will-change: translate;
  }
  [data-fx-loop="marquee-reverse"].arsh-fx-track { animation-direction: reverse; }
  @keyframes arsh-fx-marquee { to { translate: calc(var(--arsh-fx-sign) * var(--arsh-fx-set, 0px) * -1) 0; } }
  [data-fx-loop]:not(.arsh-fx-vis), [data-fx-loop]:hover, [data-fx-loop]:focus-within,
  .arsh-fx-marq:hover .arsh-fx-track, .arsh-fx-marq:focus-within .arsh-fx-track,
  .arsh-fx-stopped .arsh-fx-track, .arsh-fx-tab-hidden .arsh-fx, .arsh-fx-tab-hidden .arsh-fx-track { animation-play-state: paused; }

  /* hover: only on devices that can hover */
  @media (hover: hover) {
    [data-fx-hover] {
      transition-property: translate, rotate, scale, box-shadow, background-size, background-color, color;
      transition-duration: var(--arsh-duration);
      transition-timing-function: var(--arsh-ease);
    }
    [data-fx-hover="lift"]:hover { translate: 0 calc(var(--arsh-space-1) * -1); box-shadow: var(--arsh-shadow-2); }
    [data-fx-hover="glow"]:hover { box-shadow: 0 0 0 var(--arsh-space-1) var(--arsh-focus-ring), 0 0 var(--arsh-space-5) var(--arsh-glow); }
    [data-fx-hover="magnetic"]:hover { translate: var(--arsh-fx-mx, 0) var(--arsh-fx-my, 0); }
    [data-fx-hover="tilt"]:hover { rotate: var(--arsh-fx-ax, 0) var(--arsh-fx-ay, 1) 0 var(--arsh-fx-ang, 0deg); box-shadow: var(--arsh-shadow-2); }
    [data-fx-hover="underline-brush"] {
      background-image: linear-gradient(currentColor, currentColor);
      background-repeat: no-repeat;
      background-position-x: calc(50% - 50% * var(--arsh-fx-sign)); /* grows from the inline-start edge */
      background-position-y: 100%;
      background-size: 0 0.12em;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }
    [data-fx-hover="underline-brush"]:hover, [data-fx-hover="underline-brush"]:focus-visible { background-size: 100% 0.12em; }
    .arsh-fx-sw { transition: translate var(--arsh-duration) var(--arsh-ease); }
    [data-fx-hover="swap-label"]:hover .arsh-fx-sw, [data-fx-hover="swap-label"]:focus-visible .arsh-fx-sw { translate: 0 -100%; }
  }
}