/* The YourFire lockup: the flame and the name, as YourCA draws its wordmark
   (YourCA web/public/_shared/brand.css): live type from a cut-down Hanken
   Grotesk, weight 800, tracked -0.075em, the font's own kerning off, the "our"
   at 700 tucked under the Y's arm. "Fire" takes the brand ochre as YourCA's
   "CA" does. The flame stands before the name, the brand ochre with its core
   cut out. Colours are the brand's fixed pair, not the app's accent. */

@font-face {
  font-family: "YourFire Brand";
  src: url("/static/fonts/HankenGrotesk-brand.woff2") format("woff2");
  font-weight: 700 800;
  font-style: normal;
  font-display: block;
}

:root {
  --brand-ink: #20160f;
  --brand-ochre: #af7100;
  --brand-kern-yo: -0.083em;
  --brand-gap-rf: 0.05em;
}

.yf-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.1em;
  line-height: 1;
  color: var(--brand-ink);
  text-decoration: none;
}
a.yf-lockup:hover { text-decoration: none; }

.yf-flame {
  display: block;
  flex: none;
  width: 0.6em;
  height: 0.92em;
  fill: var(--brand-ochre);
  /* The flame stands on the name's baseline, so it sits a touch low of the box centre. */
  transform: translateY(-0.02em);
}

.yf-wm {
  font-family: "YourFire Brand", "Hanken Grotesk", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.075em;
  font-kerning: none;
  line-height: 1;
  white-space: nowrap;
  color: var(--brand-ink);
  display: inline-block;
  padding: 0.15em 0;
  margin: -0.15em 0;
}
.yf-wm .yf-our {
  font-weight: 700;
  margin: 0 var(--brand-gap-rf) 0 var(--brand-kern-yo);
}
.yf-wm .yf-fire { color: var(--brand-ochre); }

/* The loading ring, YourCA's (brand.css, .yca-splash): 200px on a small screen to 360px on a
   large one, the ochre sweep drawing round from twelve and back, the flame in the middle
   where YourCA's folded YCA sits. */
:root { --yf-wait-size: clamp(200px, 32vmin, 360px); }
.yf-splash {
  position: relative; display: grid; place-items: center;
  width: var(--yf-wait-size); height: var(--yf-wait-size);
  background: radial-gradient(circle at 50% 50%, rgba(175, 113, 0, 0.1), transparent 58%);
}
.yf-splash-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; }
.yf-splash-track { stroke: rgba(32, 22, 15, 0.1); stroke-width: 2; }
.yf-splash-sweep {
  stroke: var(--brand-ochre); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: yf-sweep 5200ms cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.yf-splash .yf-flame { position: relative; font-size: calc(var(--yf-wait-size) * 0.2); }
@keyframes yf-sweep {
  0%   { stroke-dashoffset: 100; stroke-opacity: 0; }
  3%   { stroke-opacity: 1; }
  50%  { stroke-dashoffset: 0; animation-timing-function: steps(1, end); }
  50.01% { stroke-dashoffset: 200; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  97%  { stroke-opacity: 1; }
  100% { stroke-dashoffset: 100; stroke-opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .yf-splash-sweep { animation: none; stroke-dashoffset: 25; } }