/* =============================================================================
   FogoFi motion and illustration layer, 2026-08-06
   Fogo means fire, so the motion language is heat: embers rise, gradients drift
   like hot air, edges glow, numbers climb. Everything here animates ONLY
   transform and opacity, which the compositor can run off the main thread, so a
   busy page still scrolls at 60fps. Nothing here is load-bearing: with motion
   disabled every element is still fully readable and usable.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. EMBER FIELD. Rising sparks behind the hero. Pure CSS, no canvas, no JS
   loop. Each ember is one span; the parent stays position:fixed/absolute and
   pointer-events:none so it can never intercept a click.
   ------------------------------------------------------------------------- */
.fg-embers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.fg-embers i {
  position: absolute; bottom: -12px; width: 3px; height: 3px; border-radius: 50%;
  background: var(--fg-ember); opacity: 0;
  box-shadow: 0 0 8px 1px rgba(255, 107, 0, .8);
  animation: fg-rise var(--d, 9s) linear var(--delay, 0s) infinite;
}
@keyframes fg-rise {
  0%   { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
  12%  { opacity: .9; }
  70%  { opacity: .55; }
  100% { transform: translate3d(var(--dx, 18px), calc(var(--h, 520px) * -1), 0) scale(.15); opacity: 0; }
}

/* ---------------------------------------------------------------------------
   2. HEAT MESH. A slow drifting gradient, the visual equivalent of hot air.
   Two layers at different speeds so it never looks like a single loop.
   ------------------------------------------------------------------------- */
.fg-mesh { position: absolute; inset: -20%; pointer-events: none; z-index: 0; opacity: .55; }
.fg-mesh::before, .fg-mesh::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; filter: blur(70px);
}
.fg-mesh::before {
  background: radial-gradient(circle at 30% 40%, rgba(249,115,22,.30), transparent 55%);
  animation: fg-drift-a 22s ease-in-out infinite;
}
.fg-mesh::after {
  background: radial-gradient(circle at 70% 60%, rgba(255,107,0,.22), transparent 55%);
  animation: fg-drift-b 31s ease-in-out infinite;
}
@keyframes fg-drift-a {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(6%, -4%, 0) scale(1.12); }
}
@keyframes fg-drift-b {
  0%,100% { transform: translate3d(0,0,0) scale(1.05); }
  50%     { transform: translate3d(-7%, 5%, 0) scale(.94); }
}

/* ---------------------------------------------------------------------------
   3. FLAME MARK. An SVG illustration that actually burns: three stacked paths
   flickering out of phase, which reads as fire rather than as a pulsing icon.
   ------------------------------------------------------------------------- */
.fg-flame-mark { display: block; overflow: visible; }
.fg-flame-mark .f-outer { transform-origin: 50% 92%; animation: fg-flicker-a 2.6s ease-in-out infinite; }
.fg-flame-mark .f-mid   { transform-origin: 50% 92%; animation: fg-flicker-b 1.9s ease-in-out infinite; }
.fg-flame-mark .f-core  { transform-origin: 50% 92%; animation: fg-flicker-c 1.4s ease-in-out infinite; }
@keyframes fg-flicker-a {
  0%,100% { transform: scaleY(1) scaleX(1) skewX(0deg); }
  35%     { transform: scaleY(1.07) scaleX(.96) skewX(-2.2deg); }
  70%     { transform: scaleY(.95) scaleX(1.04) skewX(1.8deg); }
}
@keyframes fg-flicker-b {
  0%,100% { transform: scaleY(1) skewX(1deg); opacity: .95; }
  50%     { transform: scaleY(1.1) skewX(-1.6deg); opacity: 1; }
}
@keyframes fg-flicker-c {
  0%,100% { transform: scaleY(.98) translateY(0); }
  45%     { transform: scaleY(1.12) translateY(-1px); }
}

/* ---------------------------------------------------------------------------
   4. SHINE SWEEP on primary actions. Fires on hover only, so it reads as a
   response to the user rather than as decoration demanding attention.
   ------------------------------------------------------------------------- */
.fg-shine { position: relative; overflow: hidden; }
.fg-shine::after {
  content: ""; position: absolute; top: 0; left: -140%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
.fg-shine:hover::after { animation: fg-sweep .85s var(--fg-ease); }
@keyframes fg-sweep { to { left: 160%; } }

/* ---------------------------------------------------------------------------
   5. TICKER. Duplicated track so the loop is seamless. Pauses on hover, because
   a moving target the user is trying to read is a usability failure.
   ------------------------------------------------------------------------- */
.fg-ticker { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.fg-ticker-track { display: flex; gap: var(--fg-s6); width: max-content; animation: fg-marquee var(--speed, 38s) linear infinite; }
.fg-ticker:hover .fg-ticker-track { animation-play-state: paused; }
@keyframes fg-marquee { to { transform: translate3d(-50%, 0, 0); } }

/* ---------------------------------------------------------------------------
   6. FLOAT. For cards that should feel suspended rather than pinned.
   ------------------------------------------------------------------------- */
.fg-float { animation: fg-bob 6s ease-in-out infinite; }
.fg-float-slow { animation: fg-bob 9s ease-in-out infinite reverse; }
@keyframes fg-bob {
  0%,100% { transform: translate3d(0,0,0); }
  50%     { transform: translate3d(0,-9px,0); }
}

/* ---------------------------------------------------------------------------
   7. STAGGERED REVEAL. The delay is set per element by JS so a grid resolves
   in sequence instead of snapping in as one block.
   ------------------------------------------------------------------------- */
.fg-reveal { transition-delay: var(--rd, 0ms); }

/* ---------------------------------------------------------------------------
   8. RING. A conic sweep for live/processing states, honest about being busy.
   ------------------------------------------------------------------------- */
.fg-ring { position: relative; }
.fg-ring::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--a, 0deg), transparent 0 65%, var(--fg-flame) 80%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: fg-spin 3.4s linear infinite; pointer-events: none;
}
@keyframes fg-spin { to { --a: 360deg; transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   9. COUNTER. JS writes the value; this only keeps the digits from reflowing
   the layout as they change width.
   ------------------------------------------------------------------------- */
.fg-count { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   Opt-outs. Motion is decoration everywhere it appears above, so all of it is
   safe to switch off wholesale.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fg-embers, .fg-mesh { display: none; }
  .fg-flame-mark .f-outer, .fg-flame-mark .f-mid, .fg-flame-mark .f-core,
  .fg-float, .fg-float-slow, .fg-ticker-track, .fg-ring::before { animation: none; }
  .fg-shine:hover::after { animation: none; }
}
@media (max-width: 860px) {
  /* fewer embers on small screens: same effect, a fraction of the paint cost */
  .fg-embers i:nth-child(n+9) { display: none; }
}