/* =============================================================
   PL8TEK FX LAYER - texture + motion, sitewide
   Loaded on every page after the page stylesheet; wired by js/fx.js.
   Palette, type, and layout are untouched - this file only adds:
   1. Film grain over everything (static, very low opacity).
   2. Machined scroll-reveals: js/fx.js tags below-fold blocks with
      .fx-hide and flips them to .fx-in on scroll. Without JS nothing
      is ever hidden. Short travel, fast ease-out, no bounce.
   3. Eyebrow "QC stamp": hard two-frame flicker instead of a slide.
   4. .accent-rule wipes in from the left.
   All motion sits behind prefers-reduced-motion (fx.js also bails).
   ============================================================= */

/* film grain - sits above everything, including the nav (max site
   z-index is 200); at this opacity it reads as atmosphere, not a veil */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  background-image: 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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.09;
  mix-blend-mode: overlay;
}

@media (prefers-reduced-motion: no-preference) {
  .fx-hide {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity 0.55s cubic-bezier(0.19, 1, 0.22, 1),
      transform 0.55s cubic-bezier(0.19, 1, 0.22, 1);
    transition-delay: var(--fx-d, 0ms);
  }
  .fx-hide.fx-in {
    opacity: 1;
    transform: none;
  }

  /* accent rule: reveal is a left-to-right wipe, not a slide */
  .accent-rule.fx-hide {
    opacity: 1;
    transform: scaleX(0);
    transform-origin: left center;
  }
  .accent-rule.fx-hide.fx-in { transform: scaleX(1); }

  /* eyebrows stamp in: hard frames, like a QC ink stamp hitting a part */
  .fx-stamp.fx-in { animation: fx-stamp 0.4s steps(1, end) both; }
  @keyframes fx-stamp {
    0%   { opacity: 0; }
    35%  { opacity: 1; }
    55%  { opacity: 0.35; }
    100% { opacity: 1; }
  }
}