/* =====================================================================
   FLAIR FOOTBALL — CINEMATIC PRELOADER (0 → 100%)
   Black canvas, animated FF logo, gold progress bar, curtain reveal.
   SAFETY: a CSS-only failsafe hides this overlay even if JS never runs,
   so the site can never be blocked by a black screen.
   ===================================================================== */
#ff-loader{
  position:fixed; inset:0; z-index:99999;
  background:#0B0B0C;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  /* failsafe: force-hide after 6s no matter what */
  animation:ffLoadFailsafe 0s linear 6s forwards;
}
@keyframes ffLoadFailsafe{ to{ opacity:0; visibility:hidden; pointer-events:none; } }

/* prevent scroll while loading */
html.ff-loading, body.ff-loading{ overflow:hidden !important; }

/* ambient gold glow + grain, matching the hero */
#ff-loader::before{
  content:""; position:absolute; width:70vmax; height:70vmax; border-radius:50%;
  background:radial-gradient(circle, rgba(232,178,58,.16) 0%, transparent 62%);
  filter:blur(60px); animation:ffGlow 6s ease-in-out infinite alternate;
}
@keyframes ffGlow{ from{ transform:scale(.9); opacity:.7; } to{ transform:scale(1.1); opacity:1; } }
#ff-loader::after{
  content:""; position:absolute; inset:-50%; opacity:.05; mix-blend-mode:overlay; pointer-events:none;
  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:ffGrain 1.6s steps(3) infinite;
}
@keyframes ffGrain{ 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)} }

.ffl-inner{ position:relative; z-index:2; width:min(90vw,420px); text-align:center; }

/* animated logo (video) */
.ffl-logo{ width:min(46vw,190px); height:min(46vw,190px); margin:0 auto 1.6rem; position:relative; }
.ffl-logo video,.ffl-logo img{
  width:100%; height:100%; object-fit:contain; display:block;
}
/* animated WebP already has a real alpha channel — no blend needed */
.ffl-logo .ffl-anim{ mix-blend-mode:normal; }
/* mp4 fallback is white-on-black, so screen-blend drops its black box */
.ffl-logo .ffl-vid{ mix-blend-mode:screen; }

/* wordmark */
.ffl-brand{
  font-family:'Space Grotesk',sans-serif; font-weight:800;
  font-size:clamp(1.1rem,3.4vw,1.5rem); letter-spacing:.28em; text-transform:uppercase;
  color:#F4F2EC; margin:0 0 .5rem; padding-left:.28em;
}
.ffl-tag{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.66rem; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(244,242,236,.5); margin:0 0 2.2rem;
}

/* progress */
.ffl-bar{ position:relative; height:2px; background:rgba(244,242,236,.14); overflow:hidden; }
.ffl-fill{ position:absolute; inset:0 auto 0 0; width:0%; background:linear-gradient(90deg,#E8B23A,#F2C661); box-shadow:0 0 16px rgba(232,178,58,.7); transition:width .25s cubic-bezier(.2,.8,.2,1); }
.ffl-meta{ display:flex; justify-content:space-between; align-items:baseline; margin-top:.85rem; }
.ffl-status{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(244,242,236,.42); }
.ffl-pct{ font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:1.5rem; letter-spacing:-.02em; color:#E8B23A; line-height:1; font-variant-numeric:tabular-nums; }
.ffl-pct span{ font-size:.85rem; }

/* curtain reveal */
#ff-loader.ffl-done{ animation:none; transform:translateY(-101%); opacity:1; transition:transform .85s cubic-bezier(.76,0,.24,1); }
#ff-loader.ffl-gone{ display:none !important; }

@media (prefers-reduced-motion: reduce){
  #ff-loader::before,#ff-loader::after{ animation:none; }
  #ff-loader.ffl-done{ transition:opacity .3s linear; transform:none; opacity:0; }
}