/* cetiritocka brand: logo colours, header/footer logo, brand loader and page-transition indicator (docs/brand.md).
   Colours come from the --logo-* tokens in site.css. Every animation is inside prefers-reduced-motion: no-preference. */

/* Logo (layouts/_logo.php). Geometry numbers (aspect ratios, --ctk-cut) are kept in step by tools/build-brand.py. */
:root { --ctk-cut: 204.76px; }
.ctk-logo { display: block; flex: none; height: 40px; aspect-ratio: 282.31 / 103.14; }
.ctk-logo--lg { height: 56px; }
.ctk-g1, .bl-g1 { fill: var(--logo-wheel-1); }
.ctk-g2, .bl-g2 { fill: var(--logo-wheel-2); }
.ctk-g3, .bl-g3 { fill: var(--logo-wheel-3); }
.ctk-f, .ctk-tb, .bl-f, .bl-tb { fill: var(--logo-wheel-4); }   /* tyre colour: the front tyre and the underlay of the trail */
.ctk-gs0 { stop-color: var(--logo-trail-start); }
.ctk-gs1 { stop-color: var(--logo-trail-gold); }
@media print {
  .ctk-g1 { fill: #dcdcdc; } .ctk-g2 { fill: #c0c0c0; } .ctk-g3 { fill: #808080; } .ctk-f, .ctk-tb { fill: #000; }
  .ctk-gs0 { stop-color: #ff6347; } .ctk-gs1 { stop-color: #ffd700; }
}

.brand { display: inline-flex; align-items: center; gap: .5rem; }
.footer-brand .brand-logo { display: inline-block; line-height: 0; }
/* Header: the full logo-v1; the text wordmark stays for screen readers and shows beside it when there is room. */
.site-header .brand .ctk-logo { height: 34px; }
.site-header .brand-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 720px) {
  .site-header .brand-text { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}

/* Header inside an app: app name big, "by četiritočka" small under it. */
.brand-app { display: inline-flex; align-items: center; gap: .6rem; }
.brand-logo-link { display: inline-flex; line-height: 0; }
.brand-stack { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-app-name { color: var(--fg); text-decoration: none; font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }
.brand-by { color: var(--muted); text-decoration: none; font-size: .78rem; font-weight: 600; }
.brand-by span { color: var(--accent); }
.brand-by:hover { color: var(--fg); }
@media (max-width: 719px) { .brand-app-name { font-size: 1.1rem; } }

/* Brand loader: the front tyre stays, the trail stretches and relaxes, the ghost tyres fade in one after another.
   Static logo when motion is reduced. Same viewBox as the full logo (sprite ids ctk-*). */
.brand-loader { display: inline-block; height: 18px; aspect-ratio: 282.31 / 103.14; flex: none; vertical-align: middle; overflow: visible; }
.brand-loader--sm { height: 14px; }
.bl-t { transform-origin: var(--ctk-cut) 0; transform-box: view-box; }
/* One colour (buttons): everything takes currentColor, the ghosts through fill-opacity. */
.brand-loader--current .bl-to, .brand-loader--current .bl-f, .brand-loader--current .bl-g { fill: currentColor; }
.brand-loader--current .bl-tb, .brand-loader--current .bl-tg { display: none; }   /* one flat colour on buttons: only the trail outline */
.brand-loader--current .bl-to { fill-opacity: .6; }
.brand-loader--current .bl-g1 { fill-opacity: .25; }
.brand-loader--current .bl-g2 { fill-opacity: .45; }
.brand-loader--current .bl-g3 { fill-opacity: .7; }
@keyframes bl-trail { 0%, 100% { transform: scaleX(.62); } 55% { transform: scaleX(1); } }
@keyframes bl-ghost { 0%, 12% { opacity: 0; } 32%, 68% { opacity: 1; } 90%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .brand-loader.is-animated .bl-t, .brand-loader--auto .bl-t { animation: bl-trail 1.4s ease-in-out infinite; }
  .brand-loader.is-animated .bl-g, .brand-loader--auto .bl-g { animation: bl-ghost 1.4s ease-in-out infinite; }
  .brand-loader.is-animated .bl-g3, .brand-loader--auto .bl-g3 { animation-delay: 0s; }
  .brand-loader.is-animated .bl-g2, .brand-loader--auto .bl-g2 { animation-delay: .14s; }
  .brand-loader.is-animated .bl-g1, .brand-loader--auto .bl-g1 { animation-delay: .28s; }
}

/* Submit buttons: label hidden (colour only, so no width change), the loader sits in the middle. */
button.btn[aria-busy="true"] { position: relative; color: transparent; cursor: progress; }
button.btn[aria-busy="true"] .brand-loader { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--accent-fg); }
button.btn.btn-secondary[aria-busy="true"] .brand-loader { color: var(--fg); }

/* Page-transition indicator (js/motion.js shows it when a navigation takes longer than 400 ms). */
.brand-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 3px; pointer-events: none; background: color-mix(in srgb, var(--logo-speed) 18%, transparent); }
.brand-progress[hidden] { display: none; }
.brand-progress::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--logo-speed); opacity: .55; }
.brand-progress .brand-loader { position: absolute; top: 66px; left: 50%; transform: translateX(-50%); padding: 5px 8px; box-sizing: content-box; height: 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 99px; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
@keyframes bp-run { 0% { transform: translateX(-100%); } 100% { transform: translateX(380%); } }
@media (prefers-reduced-motion: no-preference) {
  .brand-progress::before { width: 26%; opacity: 1; background: linear-gradient(90deg, transparent, var(--logo-speed)); animation: bp-run 1.1s ease-in-out infinite; }
}

/* Logo above page headings (About, sign-in) */
.about-logo, .auth-logo { margin: .5rem 0 1rem; }