/* YourCA brand — the wordmark as live type, and the collapse between its two
   states. Loaded by every app's index.html BEFORE _shared/mtop-chrome.css.

   The identity is one word that folds: YourCA closes to YCA, the "our" folding
   away and the ochre staying on the CA throughout. Everything that is not a
   browser-tab icon renders it as text, from the two-kilobyte subset below, so
   it inherits the surface it sits on and stays crisp at any size.
   The flat files (favicon, app icon, mail) are outlines instead, generated by
   scripts/brand/build-logo-pack.py from the same font. Never hand-draw either.

   Colours are brand-fixed, NOT the app's --accent: the mark is the same ochre
   on a marketing page, in the app chrome and on an invoice. */

@font-face {
  font-family: "YourCA Brand";
  src: url("/_shared/HankenGrotesk-brand.woff2") format("woff2");
  font-weight: 700 800;
  font-style: normal;
  font-display: block; /* the wordmark flashing in another face is worse than a beat of nothing */
}

:root {
  --yca-ink: #20160f;
  --yca-cream: #fdfaf4;
  --yca-ochre: #af7100;
  --yca-ochre-light: #cf9951;
  /* "our" at 700 tracked -0.075em is 1.349em wide. The collapse animates this
     to zero, so it is stated once here and never re-measured at a call site. */
  --yca-our-width: 1.349em;
}

.yca-wm {
  font-family: "YourCA Brand", "Hanken Grotesk", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.075em;
  line-height: 1;
  white-space: nowrap;
  color: var(--yca-ink);
  /* Cap-box centring: with no descenders the glyph box is the cap box, which at
     line-height 1 sits below the line-box centre. One em-relative nudge serves
     every size. */
  display: inline-block;
  vertical-align: middle;
}

.yca-wm .yca-our {
  font-weight: 700;
  display: inline-block;
  overflow: hidden;
  max-width: var(--yca-our-width);
  vertical-align: top;
}

.yca-wm .yca-c { color: var(--yca-ochre); }
.yca-wm .yca-a { color: var(--yca-ochre); }

/* On a dark ground the letters and the ochre both lighten. */
.yca-wm.yca-wm--reversed { color: var(--yca-cream); }
.yca-wm.yca-wm--reversed .yca-c,
.yca-wm.yca-wm--reversed .yca-a { color: var(--yca-ochre-light); }

/* Short state, held. */
.yca-wm.is-short .yca-our { max-width: 0; opacity: 0; }

/* The collapse. Plays once and rests on YCA: the animation is `forwards` and
   nothing ever removes it, so the mark does not bounce back to the long state
   the way a looping GIF does. */
@keyframes yca-fold {
  from { max-width: var(--yca-our-width); opacity: 1; }
  to   { max-width: 0; opacity: 0; }
}
.yca-wm.is-folding .yca-our {
  animation: yca-fold 340ms cubic-bezier(0.2, 0.7, 0.3, 1) 900ms forwards;
}


/* The tile: the short mark on its own ground, for avatars and anywhere an icon
   is wanted rather than a name. Same letters, same rules. */
.yca-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--yca-ink);
  color: var(--yca-cream);
  border-radius: 22%;
  flex: none;
}
.yca-tile .yca-wm { color: inherit; }
.yca-tile .yca-c,
.yca-tile .yca-a { color: var(--yca-ochre-light); }
.yca-tile--ochre { background: var(--yca-ochre); color: var(--yca-cream); }
.yca-tile--ochre .yca-c,
.yca-tile--ochre .yca-a { color: var(--yca-cream); }

@media (prefers-reduced-motion: reduce) {
  .yca-wm.is-folding .yca-our { animation: none; max-width: 0; opacity: 0; }
}

/* ── The loading screen ──────────────────────────────────────────────────────
   One treatment for every "between screens" moment, replacing the graph mark
   that used to loop there. An ochre ring sweeps from twelve o'clock while the
   wordmark holds YourCA, and the "our" closes up over the last quarter so the
   mark lands on YCA exactly as the ring completes — the same short state the
   header, the tab icon and the app icon wear.

   Ported from the operator's YourCASplash handoff. That component drives the
   ring from a progress number in JS; nothing in this app HAS a real progress
   number (a boot splash is waiting on a bundle, not counting bytes), so this is
   the indeterminate loop only, in CSS, which also means it paints before any
   script runs. Markup:

     <div class="yca-splash" role="progressbar" aria-label="Loading YourCA">
       <svg class="yca-splash-ring" viewBox="0 0 360 360" aria-hidden="true">
         <circle class="yca-splash-track" cx="180" cy="180" r="164"/>
         <circle class="yca-splash-sweep" cx="180" cy="180" r="164"/>
       </svg>
       <span class="yca-wm">…the four spans…</span>
     </div> */

.yca-splash {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--yca-splash-size, min(56vmin, 360px));
  height: var(--yca-splash-size, min(56vmin, 360px));
  /* The bloom behind the ring. Transparent otherwise, so the splash inherits
     whatever surface it is dropped on. */
  background: radial-gradient(circle at 50% 50%, rgba(175, 113, 0, 0.1), transparent 58%);
}

.yca-splash-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg); /* start the sweep at twelve o'clock */
  fill: none;
}
.yca-splash-track { stroke: rgba(32, 22, 15, 0.1); stroke-width: 2; }
.yca-splash-sweep {
  stroke: var(--yca-ochre);
  stroke-width: 2.5;
  stroke-linecap: round;
  /* 2 * pi * 164 */
  stroke-dasharray: 1030.4;
  stroke-dashoffset: 1030.4;
  animation: yca-sweep 4000ms cubic-bezier(0.3, 0, 0.2, 1) infinite;
}

.yca-splash .yca-wm {
  position: relative;
  font-size: calc(var(--yca-splash-size, min(56vmin, 360px)) * 0.161);
}
/* One 4000ms cycle for both: the ring sweeps over the first 65% and the "our"
   closes into the same moment, so the mark lands on YCA exactly as the ring
   completes. The remaining 35% is the beat the short mark is held before the
   loop repeats — the pause is IN the keyframes rather than an animation-delay,
   which would only ever pause once. */
.yca-splash .yca-wm .yca-our {
  animation: yca-splash-fold 4000ms cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
}

@keyframes yca-sweep {
  0%   { stroke-dashoffset: 1030.4; }
  65%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
@keyframes yca-splash-fold {
  0%, 40%   { max-width: var(--yca-our-width); opacity: 1; }
  65%, 100% { max-width: 0; opacity: 0; }
}

.yca-splash--reversed .yca-splash-track { stroke: rgba(253, 250, 244, 0.1); }
.yca-splash--reversed .yca-splash-sweep { stroke: var(--yca-ochre-light); }
.yca-splash--reversed { background: radial-gradient(circle at 50% 50%, rgba(207, 153, 81, 0.13), transparent 58%); }

@media (prefers-reduced-motion: reduce) {
  /* Neither the ring nor the collapse moves. The mark rests in its short state
     and the ring reads as a static ring, which is still an honest "waiting". */
  .yca-splash-sweep { animation: none; stroke-dashoffset: 258; }
  .yca-splash .yca-wm .yca-our { animation: none; max-width: 0; opacity: 0; }
}

/* Inline variant — a button or a table row waiting on one call. The wordmark is
   dropped (it is unreadable at 1em and the brand is already on the page) and
   the ring becomes a spinning arc, because a sweep that restarts every four
   seconds reads as stalled at this size. */
.yca-splash--inline {
  width: var(--yca-splash-size, 1.15em);
  height: var(--yca-splash-size, 1.15em);
  background: none;
  vertical-align: middle;
}
.yca-splash--inline .yca-wm { display: none; }
.yca-splash--inline .yca-splash-ring { animation: yca-spin 900ms linear infinite; }
.yca-splash--inline .yca-splash-track { stroke-width: 26; }
.yca-splash--inline .yca-splash-sweep {
  stroke-width: 26;
  stroke-dashoffset: 772;
  animation: none;
}
@keyframes yca-spin {
  from { transform: rotate(-90deg); }
  to   { transform: rotate(270deg); }
}
@media (prefers-reduced-motion: reduce) {
  .yca-splash--inline .yca-splash-ring { animation-duration: 2400ms; }
}