/* ============================================================
   fx.css — premium interaction layer (Awwwards-grade)
   Loads AFTER the inline <style> in index.html, pairs with fx.js.
   Rules:
   - ALL motion gated behind prefers-reduced-motion.
   - GPU-only: transform / opacity / filter.
   - NO smooth / inertial scroll. Native scroll only.
   - Degrades gracefully if GSAP is absent (offline).
   ============================================================ */

:root{
  --fx-ease:    cubic-bezier(.22,1,.36,1);   /* expo-out — premium settle */
  --fx-ease-io: cubic-bezier(.83,0,.17,1);   /* expo-in-out */
  --fx-accent:  var(--accent, #c79a4b);
}

/* ============================================================
   1. FILM GRAIN — fixed, pointer-events:none, never repaints on scroll
   ============================================================ */
.fx-grain{
  position:fixed; inset:0; z-index:9997; pointer-events:none;
  opacity:.04; mix-blend-mode:multiply;
  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%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
@media (prefers-reduced-motion:reduce){ .fx-grain{display:none} }
@media print{ .fx-grain{display:none} }

/* ============================================================
   2. CURSOR — единообразно обычный (нативный) по всему сайту.
   Кастомный курсор отключён: SEO-страницы и так на нативном, поэтому
   на главной тоже используем нативный — без рассинхрона.
   ============================================================ */
.cursor-dot,.cursor-ring{ display:none !important; }

/* ============================================================
   3. SCROLL REVEAL — heavy fade-up + blur (CSS-driven via .in)
   The site's IntersectionObserver adds .in to .rv / .ph.
   We only ADD blur to the pre-state and restore on .in.
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  .rv{
    filter:blur(12px);
    transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
  }
  .rv.in{ filter:blur(0); }
}

/* ============================================================
   4. MAGNETIC BUTTONS — fx.js translates them; CSS keeps it smooth
   ============================================================ */
.fx-mag > *{ pointer-events:none; }          /* clicks always land on the button */
/* will-change is toggled by fx.js only while hovering, so it isn't left on at rest */
@media (prefers-reduced-motion:reduce){ .fx-mag{ transform:none !important; } }

/* ============================================================
   5. PARALLAX layers — fx.js drives transform via ScrollTrigger
   ============================================================ */
[data-fx-parallax]{ will-change:transform; }
/* Hero image: extra vertical headroom so parallax never reveals edges
   (the <img> inside keeps its own Ken-Burns scale — we move the wrapper). */
@media (prefers-reduced-motion:no-preference){
  .hero-img[data-fx-parallax]{ top:-8%; height:116%; }
}
@media (prefers-reduced-motion:reduce){ [data-fx-parallax]{ transform:none !important; will-change:auto; } }

/* ============================================================
   6. KINETIC TYPOGRAPHY — per-word mask reveal (only when fx.js splits)
   Pre-state lives on .fx-split so headings stay normal without JS/GSAP.
   ============================================================ */
/* Words are only ever split when GSAP is present; GSAP owns their
   initial (hidden) state, so no CSS pre-state is needed here — that keeps
   headings fully visible if GSAP never loads. */
.fx-word{ display:inline-block; will-change:transform; }

/* ============================================================
   7. COUNTERS — tabular figures so width doesn't jump while counting
   ============================================================ */
[data-fx-count]{ font-variant-numeric:tabular-nums; }

/* ============================================================
   8. MARQUEE velocity-skew — fx.js sets --fx-skew / --fx-speed.
   Keeps the existing CSS keyframe animation; only adds a transform layer.
   ============================================================ */
.marquee-track{ will-change:transform; }
@media (prefers-reduced-motion:reduce){ .marquee-track{ animation:none !important; } }

/* ============================================================
   9. MOBILE COMPACTION — tighter vertical rhythm + trim decorative
   extras so phones scroll less. No CONTENT section is removed here
   (section-level hiding is a separate, opt-in decision).
   ============================================================ */
@media (max-width:780px){
  .sec{ padding:62px 0; }
  #method .method-foot{ display:none; }                 /* decorative italic footer */
  .booking-cal .bc-legend, .booking-cal .bc-note{ display:none; }  /* calendar chrome */
  /* Mobile-only section trims (links stay in HTML → still crawlable):
     niche UAE whitepaper + the SEO cluster grid (header + service CTAs кept). */
  #whitepaper{ display:none !important; }
  #knowledge .wrap > div:nth-of-type(2){ display:none !important; }  /* inline display:grid → needs !important */
}
@media (max-width:560px){
  .sec{ padding:48px 0; }
}

/* ============================================================
   10. HEADER FIT — keep brand name + subtitle + full nav + CTA from
   clipping at tight desktop widths. Strategy: collapse to the burger
   menu earlier (≤1180px), and gently shrink the nav + subtitle in the
   ~1181–1440px band so nothing overflows. The subtitle stays (smaller),
   not hidden.
   ============================================================ */
@media (min-width:1181px) and (max-width:1440px){
  .nav-links{ gap:22px; }
  .nav-links a.nl{ font-size:11px; letter-spacing:.09em; }
  .nav-cta{ padding:11px 18px !important; font-size:10.5px; }
  header.scrolled .brand .br{ font-size:8px; letter-spacing:.16em; }
}