/* Higgsfield homepage takeover, live at motions.fun/higgsfield/ only: the
   top bar, "Powered by" under the headline, the blimps' hover tag and the
   footer credit. The build writes that page with data-sponsor="higgsfield" on
   <html> (tools/build-sponsor-pages.py); everywhere else these pieces stay
   hidden. Every logo is the one SVG (higgsfield-logo-v1.svg) used as a mask,
   so it takes the text colour. */
.hf-bar, .hf-powered, .hf-foot { display:none !important; }
[data-sponsor="higgsfield"] .hf-bar,
[data-sponsor="higgsfield"] .hf-powered,
[data-sponsor="higgsfield"] .hf-foot { display:inline-flex !important; }
[data-sponsor="higgsfield"] .hf-bar { display:flex !important; }

:root { --hf-lime:#D1FE17; --hf-ink:#121314; }
[data-sponsor="higgsfield"] { --hf-bar:34px; }

.hf-logo {
  display:inline-block; height:1em; aspect-ratio:5024/1072; flex:none;
  background:currentColor;
  -webkit-mask:url(higgsfield-logo-v1.svg) center/contain no-repeat;
          mask:url(higgsfield-logo-v1.svg) center/contain no-repeat;
}

/* Top bar: lime, above the fixed nav, which moves down to make room. */
.hf-bar {
  position:fixed; top:0; left:0; right:0; z-index:60; height:var(--hf-bar);
  align-items:center; justify-content:center; gap:14px;
  background:var(--hf-lime); color:var(--hf-ink); text-decoration:none;
  font:600 13px/1 Inter, system-ui, sans-serif; letter-spacing:-.01em; white-space:nowrap;
}
.hf-bar .hf-logo { height:15px; }
.hf-bar__copy { opacity:.78; }
.hf-bar__cta {
  display:inline-flex; align-items:center; gap:5px; padding:6px 11px; border-radius:999px;
  background:var(--hf-ink); color:var(--hf-lime); font-weight:700; font-size:12px;
  transition:transform .18s ease;
}
.hf-bar:hover .hf-bar__cta { transform:translateX(2px); }
[data-sponsor="higgsfield"] .nav { top:var(--hf-bar); }
/* The bar and "Powered by" add height the one-screen hero was not built
   for: let it grow past the screen rather than clip the last games. */
[data-sponsor="higgsfield"] #hero { padding-top:var(--hf-bar); height:auto; min-height:100dvh; }

/* "Powered by Higgsfield": the title-sponsor line, between the subline and
   the games. White on the sky like the copy above it. */
#hero .hf-powered {
  position:relative; z-index:6; margin:clamp(12px,1.8vh,18px) 0 0;
  align-items:center; gap:10px; padding:8px 16px 8px 14px;
  border-radius:999px; color:#fff; text-decoration:none;
  background:rgba(18,19,20,.78); box-shadow:0 8px 24px rgba(18,19,20,.18), inset 0 0 0 1px rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  font:600 12px/1 Inter, system-ui, sans-serif; letter-spacing:.06em; text-transform:uppercase;
  transition:transform .18s ease, background .18s ease;
}
#hero .hf-powered span { opacity:.6; }
#hero .hf-powered .hf-logo { height:17px; color:var(--hf-lime); }
#hero .hf-powered:hover { transform:translateY(-1px); background:rgba(18,19,20,.92); }

/* Blimp hover tag, sponsored: the logo over the call to action. */
.sky3d-tip--sponsor { background:rgba(18,19,20,.9); border-color:rgba(255,255,255,.08); gap:5px; }
.sky3d-tip--sponsor .hf-logo { height:14px; color:var(--hf-lime); }
.sky3d-tip--sponsor span { color:#fff; opacity:.75; }

/* Footer credit. */
.hf-foot {
  align-items:center; gap:8px; margin-top:8px;
  color:var(--hf-ink); text-decoration:none; opacity:.8;
  font:600 11px/1 Inter, system-ui, sans-serif; letter-spacing:.08em; text-transform:uppercase;
}
.hf-foot .hf-logo { height:14px; }
.hf-foot:hover { opacity:1; }

@media (max-width:640px), (max-aspect-ratio:3/4) {
  [data-sponsor="higgsfield"] { --hf-bar:32px; }
  .hf-bar { gap:10px; font-size:12px; }
  .hf-bar__copy { display:none; }
  .hf-bar .hf-logo { height:14px; }
  #hero .hf-powered { padding:7px 13px 7px 12px; font-size:11px; }
  #hero .hf-powered .hf-logo { height:15px; }
}