/* ==========================================================================
   تُرجُمَان fx · base tokens and shared surfaces
   Optional but recommended: every fx-*.css also works without it, because
   each one falls back to these same values.
   Brand rule: orange is #ff6a00 only. Gradients go deeper (#e85d00, #d94f00),
   never lighter. Glows are #ff6a00 at low opacity. Light theme orange text
   is #b84a00.
   ========================================================================== */
:root {
  --fx-o: #ff6a00;
  --fx-o2: #e85d00;
  --fx-o3: #d94f00;
  --fx-ink: #ff6a00;                         /* orange used as TEXT */
  --fx-on-o: #0a0a0a;                        /* text on an orange fill, 7:1 */
  --fx-glow: rgba(255, 106, 0, .30);
  --fx-glow-soft: rgba(255, 106, 0, .12);

  --fx-bg: var(--bg, #070707);
  --fx-surface: var(--surface, #141414);
  --fx-surface-2: var(--surface-2, #1b1b1b);
  --fx-text: var(--text, #f7f4f0);
  --fx-muted: var(--muted, #bcb5ae);
  --fx-faint: var(--faint, #948d86);
  --fx-line: var(--line, rgba(255, 255, 255, .085));
  --fx-line-2: var(--line-2, rgba(255, 255, 255, .16));
  --fx-glass: rgba(18, 18, 18, .58);
  --fx-glass-edge: rgba(255, 255, 255, .14);
  --fx-shadow: 0 40px 80px -40px rgba(0, 0, 0, .85), 0 2px 0 rgba(255, 255, 255, .03) inset;

  --fx-font: var(--font, "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, "Segoe UI", Tahoma, sans-serif);
  --fx-mono: var(--mono, "IBM Plex Mono", ui-monospace, Consolas, monospace);

  /* Motion tokens. Exits are faster than entrances. */
  --fx-ease-out: cubic-bezier(.16, 1, .3, 1);      /* expo-out: arrivals */
  --fx-ease-in: cubic-bezier(.7, 0, .84, 0);       /* exits */
  --fx-ease-io: cubic-bezier(.65, 0, .35, 1);
  --fx-spring: cubic-bezier(.34, 1.56, .64, 1);    /* overshoot fallback */
  --fx-dur-1: 160ms;                               /* taps, hovers */
  --fx-dur-2: 320ms;                               /* small moves */
  --fx-dur-3: 720ms;                               /* reveals */

  /* 160px tile of fractal noise, white, used at low opacity */
  --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* A real damped spring where the browser supports linear() easing. */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --fx-spring: linear(0, .009, .035 2.1%, .141 4.4%, .281 6.7%, .723 12.9%, .938 16.7%, 1.017 19.4%, 1.077 22.2%, 1.104 25.4%, 1.1 28.1%, 1.077 31.1%, 1.017 37.6%, .996 41.5%, .987 46.5%, .996 56.3%, 1.002 66.1%, 1);
    --fx-spring-soft: linear(0, .028 2%, .113 4.3%, .449 11.1%, .688 16.6%, .862 22.5%, .974 29%, 1.03 36.5%, 1.047 43.5%, 1.04 52%, 1.012 68%, 1);
  }
}
@media (prefers-color-scheme: light) {
  :root {
    --fx-ink: #b84a00;
    --fx-glass: rgba(255, 255, 255, .64);
    --fx-glass-edge: rgba(0, 0, 0, .08);
    --fx-glow: rgba(255, 106, 0, .22);
    --fx-glow-soft: rgba(255, 106, 0, .09);
    --fx-shadow: 0 30px 60px -34px rgba(60, 30, 0, .35), 0 1px 0 rgba(255, 255, 255, .8) inset;
  }
}

/* ---- Shared surfaces --------------------------------------------------- */

/* Soft film grain. Put .fx-grain on any positioned element. */
.fx-grain { position: relative; isolation: isolate; }
.fx-grain::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background-image: var(--fx-noise); background-size: 160px;
  opacity: .055; mix-blend-mode: overlay; border-radius: inherit;
}

/* Glass with refraction: blur + saturate, a lit top edge, and a specular
   sheen that follows the pointer (fx-tilt sets --fx-mx / --fx-my). */
.fx-glass {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, 0) 38%),
    var(--fx-glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid var(--fx-glass-edge);
  border-radius: 24px;
  box-shadow: var(--fx-shadow);
}
.fx-glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--fx-mx, 30%) var(--fx-my, 0%), rgba(255, 255, 255, .07), transparent 60%);
  mix-blend-mode: screen;
}

/* Light leaks: an orange bloom anchored to one corner (logical, RTL-aware). */
.fx-leak { position: relative; isolation: isolate; overflow: clip; }
.fx-leak::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset-block-start: -30%; inset-inline-end: -20%; inline-size: 70%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(255, 106, 0, .26), rgba(232, 93, 0, .08) 55%, transparent 72%);
  filter: blur(10px);
}

.fx-sr { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* One focus style for every fx control. */
:where([data-fx]) :focus-visible, :where([data-fx]):focus-visible {
  outline: 2px solid var(--fx-o); outline-offset: 3px; border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --fx-dur-1: 1ms; --fx-dur-2: 1ms; --fx-dur-3: 1ms; }
}