/* =====================================================================
   FLAIR FOOTBALL — MOTION LAYER  (premium, lightweight, a11y-safe)
   Enqueued after design-system + flair-motion.js. Everything that moves
   is gated behind prefers-reduced-motion: no-preference.
   ===================================================================== */

/* default safe state: visible. JS adds .fx-ready to enable entrances. */
.flair-home [data-reveal]{ opacity:1; transform:none; }

@media (prefers-reduced-motion: no-preference){

  /* ---------- HERO FX ---------- */
  .fb-hero-fx{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
  /* film grain */
  .fb-hero-fx .grain{ position:absolute; inset:-50%; opacity:.06; mix-blend-mode:overlay;
    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");
    animation:fbGrain 1.6s steps(3) infinite; }
  @keyframes fbGrain{ 0%{transform:translate(0,0)} 33%{transform:translate(-4%,2%)} 66%{transform:translate(3%,-3%)} 100%{transform:translate(0,0)} }
  /* drifting gold light glow */
  .fb-hero-fx .glow{ position:absolute; width:55vw; height:55vw; border-radius:50%; filter:blur(70px); opacity:.16;
    background:radial-gradient(circle, var(--fb-gold) 0%, transparent 62%); }
  .fb-hero-fx .glow.g1{ top:-12%; right:-6%; animation:fbFloat1 16s ease-in-out infinite; }
  .fb-hero-fx .glow.g2{ bottom:-18%; left:-8%; opacity:.10; animation:fbFloat2 20s ease-in-out infinite; }
  @keyframes fbFloat1{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(-4%,5%)} }
  @keyframes fbFloat2{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(5%,-4%)} }
  /* light streaks */
  .fb-hero-fx .streak{ position:absolute; width:140%; height:1px; left:-20%;
    background:linear-gradient(90deg, transparent, rgba(232,178,58,.0) 20%, rgba(232,178,58,.5) 50%, transparent 80%);
    opacity:0; animation:fbStreak 9s linear infinite; }
  .fb-hero-fx .streak.s1{ top:38%; transform:rotate(-14deg); animation-delay:1s; }
  .fb-hero-fx .streak.s2{ top:62%; transform:rotate(-14deg); animation-delay:5s; }
  @keyframes fbStreak{ 0%{ transform:translateX(-30%) rotate(-14deg); opacity:0 } 12%{opacity:.9} 35%{opacity:0} 100%{ transform:translateX(40%) rotate(-14deg); opacity:0 } }
  /* floating tactical dots */
  .fb-hero-fx .dot{ position:absolute; width:7px; height:7px; border-radius:50%; background:var(--fb-gold); opacity:.5; box-shadow:0 0 12px rgba(232,178,58,.6); }
  .fb-hero-fx .dot.d1{ top:24%; left:14%; animation:fbDot 7s ease-in-out infinite; }
  .fb-hero-fx .dot.d2{ top:70%; left:40%; width:5px; animation:fbDot 9s ease-in-out infinite reverse; }
  .fb-hero-fx .dot.d3{ top:34%; right:26%; width:4px; opacity:.4; animation:fbDot 11s ease-in-out infinite; }
  .fb-hero-fx .dot.d4{ top:54%; right:14%; animation:fbDot 8s ease-in-out infinite reverse; }
  @keyframes fbDot{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }
  /* faint tactical line svg */
  .fb-hero-fx .tac{ position:absolute; inset:0; width:100%; height:100%; opacity:.14; }
  .fb-hero-fx .tac path,.fb-hero-fx .tac circle{ stroke:var(--fb-gold); stroke-width:1; fill:none; stroke-dasharray:6 8; animation:fbDash 30s linear infinite; }
  @keyframes fbDash{ to{ stroke-dashoffset:-280; } }

  /* ---------- HERO STAGGERED ENTRANCE ---------- */
  .flair-home.fx-ready [data-hero]{ opacity:0; transform:translateY(26px); animation:fbUp .8s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:calc(var(--d,0) * 1ms); }
  @keyframes fbUp{ to{ opacity:1; transform:none; } }

  /* ---------- SCROLL REVEAL (cards stagger) ---------- */
  .flair-home.fx-ready [data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .6s var(--reveal-ease,cubic-bezier(.2,.8,.2,1)), transform .6s var(--reveal-ease,cubic-bezier(.2,.8,.2,1)); transition-delay:calc(var(--reveal-i,0) * 70ms); }
  .flair-home.fx-ready [data-reveal].is-visible{ opacity:1; transform:none; }

  /* ---------- MAGNETIC / GLOW CTA ---------- */
  .fb-btn-gold{ position:relative; }
  .fb-btn-gold::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 0 rgba(232,178,58,.5); transition:box-shadow .35s ease; }
  .fb-btn-gold:hover::after{ box-shadow:0 0 28px 2px rgba(232,178,58,.45); }
  .fb-magnetic{ will-change:transform; transition:transform .18s ease; }

  /* ---------- SERVICE CARD: animated gradient border + glow + sweep ---------- */
  .fb-svc{ position:relative; isolation:isolate; }
  .fb-svc::before{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none; padding:1px;
    background:linear-gradient(130deg, transparent 30%, rgba(232,178,58,.0) 45%, rgba(232,178,58,.7) 50%, transparent 70%);
    background-size:240% 240%; background-position:0% 0%;
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
    opacity:0; transition:opacity .35s ease; }
  .fb-svc:hover::before{ opacity:1; animation:fbBorder 1.4s ease forwards; }
  @keyframes fbBorder{ from{ background-position:0% 0%; } to{ background-position:100% 100%; } }
  .fb-svc:hover{ box-shadow:0 24px 60px -30px rgba(232,178,58,.4), 0 0 0 1px rgba(232,178,58,.25); }
  /* image light-sweep on hover */
  .fb-svc-img::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
    background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%);
    transform:translateX(-120%); }
  .fb-svc:hover .fb-svc-img::after{ opacity:1; animation:fbSweep .85s ease; }
  @keyframes fbSweep{ from{transform:translateX(-120%)} to{transform:translateX(120%)} }
  /* animated icon */
  .fb-svc-ico{ width:34px; height:34px; margin-bottom:1rem; color:var(--fb-gold); }
  .fb-svc-ico svg{ width:100%; height:100%; }
  .fb-svc-ico svg *{ transition:transform .4s ease, stroke-dashoffset .6s ease; transform-origin:center; }
  .fb-svc:hover .fb-svc-ico svg .spin{ transform:rotate(90deg); }
  .fb-svc:hover .fb-svc-ico svg .pop{ transform:scale(1.18); }

  /* ---------- TIMELINE (journey) ---------- */
  .fb-steps{ position:relative; }
  .fb-steps::before{ content:""; position:absolute; top:0; left:0; height:1px; width:0; background:linear-gradient(90deg, var(--fb-gold), transparent); transition:width 1.1s ease .15s; z-index:2; }
  .fb-steps.is-visible::before{ width:100%; }
  .fb-step .sn{ position:relative; }
  .fb-step .sn::after{ content:""; position:absolute; top:-1px; left:0; width:9px; height:9px; border-radius:50%; background:var(--fb-gold); transform:translateY(-100%) scale(0); transition:transform .4s ease; box-shadow:0 0 12px rgba(232,178,58,.6); }
  .fb-steps.is-visible .fb-step:nth-child(1) .sn::after{ transition-delay:.25s; transform:translateY(-160%) scale(1); }
  .fb-steps.is-visible .fb-step:nth-child(2) .sn::after{ transition-delay:.45s; transform:translateY(-160%) scale(1); }
  .fb-steps.is-visible .fb-step:nth-child(3) .sn::after{ transition-delay:.65s; transform:translateY(-160%) scale(1); }
  .fb-steps.is-visible .fb-step:nth-child(4) .sn::after{ transition-delay:.85s; transform:translateY(-160%) scale(1); }
  .fb-steps.is-visible .fb-step:nth-child(5) .sn::after{ transition-delay:1.05s; transform:translateY(-160%) scale(1); }

  /* ---------- NAV underline ---------- */
  .site-nav a:not(.nav-cta){ position:relative; }
  .site-nav a:not(.nav-cta)::after{ content:""; position:absolute; left:0; bottom:-4px; height:2px; width:100%; background:var(--fb-gold); transform:scaleX(0); transform-origin:left; transition:transform .28s cubic-bezier(.2,.8,.2,1); }
  .site-nav a:not(.nav-cta):hover::after,.site-nav a:not(.nav-cta)[aria-current="page"]::after{ transform:scaleX(1); }

  /* ---------- FINAL CTA moving gradient + glow ---------- */
  .fb-final{ position:relative; overflow:hidden; background:linear-gradient(120deg,#E8B23A,#F2C661,#E8B23A,#D89B25); background-size:300% 300%; animation:fbGrad 12s ease infinite; }
  @keyframes fbGrad{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
  .fb-final::before{ content:""; position:absolute; width:50%; height:160%; top:-30%; left:10%; background:radial-gradient(circle, rgba(255,255,255,.25), transparent 60%); filter:blur(30px); animation:fbCtaGlow 9s ease-in-out infinite; pointer-events:none; }
  @keyframes fbCtaGlow{ 0%,100%{ transform:translateX(-20%);} 50%{ transform:translateX(60%);} }
  .fb-final .fb-wrap{ position:relative; z-index:2; }
}

/* ---------- COUNTERS + CAROUSEL (structural, motion-independent) ---------- */
.fb-stats{ background:var(--fb-bg); border-bottom:1px solid var(--fb-line); }
.fb-stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--fb-line); border-left:1px solid var(--fb-line); }
.fb-statc{ padding:2.6rem 1.6rem; border-right:1px solid var(--fb-line); border-bottom:1px solid var(--fb-line); }
.fb-statc .n{ font-family:var(--fb-display); font-weight:800; font-size:clamp(2.6rem,5vw,4rem); letter-spacing:-.04em; line-height:1; color:var(--fb-ink); }
.fb-statc .n .suf{ color:var(--fb-gold); }
.fb-statc .l{ font-family:var(--fb-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fb-muted); margin-top:.7rem; }
@media(max-width:760px){ .fb-stats-grid{ grid-template-columns:1fr 1fr; } }

/* testimonial carousel */
.fb-carousel{ position:relative; overflow:hidden; }
.fb-track{ display:flex; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.fb-slide{ flex:0 0 100%; padding:0 .1rem; }
.fb-slide .fb-quote{ height:100%; }
.fb-dots{ display:flex; gap:.5rem; justify-content:center; margin-top:1.6rem; }
.fb-dots button{ width:9px; height:9px; border-radius:50%; border:0; background:var(--fb-line-2); cursor:pointer; padding:0; transition:background .2s, transform .2s; }
.fb-dots button[aria-current="true"]{ background:var(--fb-gold); transform:scale(1.25); }
.fb-carousel-nav{ display:flex; gap:.6rem; }
.fb-carousel-nav button{ width:42px; height:42px; border:1px solid var(--fb-line-2); background:transparent; color:var(--fb-ink); cursor:pointer; font-size:1.1rem; transition:border-color .2s, color .2s, background .2s; }
.fb-carousel-nav button:hover{ border-color:var(--fb-gold); color:var(--fb-gold); }
@media(min-width:861px){ .fb-slide{ flex:0 0 50%; } }