/* =============================================================================
   signature-moves.css — Awwwards Vault: sygnaturowe ruchy „wow", drop-in.
   Każdy ruch = klasa fx-*. Seed (uniqueness-seed.json → signature_moves) mówi,
   które wpiąć. Wszystkie: lekkie, animują tylko transform/opacity/clip (CWV-safe),
   i WYŁĄCZANE przez prefers-reduced-motion. JS dla części w assets/signature-moves.js.
   Podłącz po styles.css:  <link rel="stylesheet" href="signature-moves.css">
   ============================================================================= */

/* --- fx-grain: ziarno/noise overlay (STATYCZNE = zero kosztu animacji) -------- */
.fx-grain { position: relative; isolation: isolate; }
.fx-grain::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fx-grain--strong::after { opacity: .12; }

/* --- fx-marquee: przewijający się pasek (tekst/logo) -------------------------- */
.fx-marquee { overflow: hidden; white-space: nowrap; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.fx-marquee__track { display: inline-flex; gap: var(--space-6, 32px); will-change: transform; animation: fx-marquee 22s linear infinite; }
.fx-marquee:hover .fx-marquee__track { animation-play-state: paused; }
@keyframes fx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- fx-mask: nagłówek odsłaniany maską przy wejściu (reuse .is-in z reveal) -- */
.reveal-ready .fx-mask { clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--motion-ease, cubic-bezier(.16,1,.3,1)); }
.reveal-ready .fx-mask.is-in { clip-path: inset(0 0 0 0); }

/* --- fx-split: dwie połowy wjeżdżające z przeciwnych stron (reuse .is-in) ----- */
.reveal-ready .fx-split > :nth-child(odd)  { transform: translateX(-40px); opacity: 0; transition: transform .8s var(--motion-ease), opacity .8s var(--motion-ease); }
.reveal-ready .fx-split > :nth-child(even) { transform: translateX(40px);  opacity: 0; transition: transform .8s var(--motion-ease), opacity .8s var(--motion-ease); }
.reveal-ready .fx-split.is-in > * { transform: none; opacity: 1; }

/* --- fx-tilt: karta z lekkim przechyłem 3D na hover (JS ustawia --rx/--ry) ---- */
.fx-tilt { transform: perspective(800px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform .15s ease-out; transform-style: preserve-3d; }

/* --- fx-kinetic: duża typografia z lekkim skew sterowanym scrollem (JS --sk) -- */
.fx-kinetic { display: inline-block; transform: skewY(var(--sk, 0deg)); transition: transform .2s ease-out; will-change: transform; }

/* --- fx-sticky: pozioma galeria przypięta na scrollu (JS przesuwa --x) -------- */
.fx-sticky { position: relative; }
.fx-sticky__viewport { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.fx-sticky__row { display: flex; gap: var(--space-6, 32px); padding-inline: var(--space-5, 24px); transform: translateX(var(--x, 0px)); will-change: transform; }
.fx-sticky__row > * { flex: 0 0 auto; }

/* --- fx-cursor: warstwa pod poświatę kursora (JS przesuwa --mx/--my) ---------- */
.fx-cursor { position: relative; isolation: isolate; }
.fx-cursor::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
              color-mix(in srgb, var(--color-accent) 30%, transparent), transparent 70%);
  transition: opacity .3s ease;
}

/* --- fx-count: liczniki (JS wpisuje wartość) --------------------------------- */
.fx-count { font-variant-numeric: tabular-nums; }

/* Cursor/tilt/magnetic to efekty WSKAŹNIKOWE — tylko myszka (nie dotyk) -------- */
@media (hover: none), (pointer: coarse) {
  .fx-tilt { transform: none; }
  .fx-cursor::before { display: none; }
}

/* Szacunek dla preferencji ruchu — wyłącz wszystkie sygnaturowe ruchy ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-marquee__track { animation: none; }
  .fx-mask, .reveal-ready .fx-mask { clip-path: none !important; }
  .reveal-ready .fx-split > * { transform: none !important; opacity: 1 !important; }
  .fx-tilt, .fx-kinetic { transform: none !important; }
  .fx-cursor::before { display: none; }
}