/* chucho brand: lockup, mark and motion. The one stylesheet behind every
   logo on the web surfaces. Svelte apps import this file; static pages get a
   generated copy (landing/assets/brand/brand.css). Markup comes from
   ChuchoLockup.svelte / ChuchoMark.svelte or mark.js — never hand-written.

   Colour is inherited: mark and word default to currentColor, so a lockup is
   ink on cream and cream on dusk glass with no extra rules. Surfaces that want
   the gold-dog dusk treatment set --brand-mark-color (or add .chucho-tone-dusk). */

:root {
  --brand-word-font: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --brand-word-weight: 600;
  --brand-word-tracking: -0.035em;
  --brand-word-s: 16px;
  --brand-word-m: 20px;
  --brand-word-l: 24px;
  --brand-mark-s: 28px;
  --brand-mark-m: 36px;
  --brand-mark-l: 44px;
  --brand-gap: 0.45em;
  --brand-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --brand-tilt: -8deg;
  --brand-perk: 10deg;
  --brand-dur: 520ms;
  --brand-ink: #22372c;
  --brand-ink-muted: #4a6052;
  --brand-gold: #c9a86a;
  --brand-cream: #f1ead8;
}

.chucho-lockup {
  --_word: var(--brand-word-m);
  --_mark: var(--brand-mark-m);
  display: inline-flex;
  align-items: center;
  gap: var(--brand-gap);
  min-width: 0;
  font-size: var(--_word);
  line-height: 1;
  color: var(--brand-word-color, currentColor);
  transform-origin: left center;
  transition: transform 170ms var(--brand-ease);
  -webkit-tap-highlight-color: transparent;
}
.chucho-lockup--s {
  --_word: var(--brand-word-s);
  --_mark: var(--brand-mark-s);
}
.chucho-lockup--l {
  --_word: var(--brand-word-l);
  --_mark: var(--brand-mark-l);
}

.chucho-lockup .chucho-mark {
  width: var(--_mark);
  height: var(--_mark);
}
.chucho-mark {
  display: block;
  flex: none;
  overflow: visible;
  color: var(--brand-mark-color, currentColor);
}

.chucho-word {
  font-family: var(--brand-word-font);
  font-weight: var(--brand-word-weight);
  font-size: 1em;
  line-height: 1;
  letter-spacing: var(--brand-word-tracking);
  white-space: nowrap;
  text-transform: none;
  transform: translateY(-0.04em);
}

/* Product name after a hairline. Names the product, nothing else. */
.chucho-context {
  margin-left: 0.15em;
  padding-left: 0.6em;
  border-left: 1px solid var(--brand-rule-color, color-mix(in srgb, currentColor 22%, transparent));
  color: var(--brand-context-color, color-mix(in srgb, currentColor 70%, transparent));
  font-family: var(--brand-word-font);
  font-weight: 500;
  font-size: 0.7em;
  line-height: 1.35;
  letter-spacing: normal;
  white-space: nowrap;
  text-transform: none;
}
@media (max-width: 599px) {
  .chucho-context {
    display: none;
  }
}

/* Tones from the mark standard. Ink and glass are the inherited default. */
.chucho-tone-ink {
  --brand-mark-color: var(--brand-ink);
  --brand-word-color: var(--brand-ink);
  --brand-context-color: var(--brand-ink-muted);
  --brand-rule-color: rgb(34 55 44 / 0.22);
}
.chucho-tone-dusk {
  --brand-mark-color: var(--brand-gold);
  --brand-word-color: var(--brand-cream);
  --brand-context-color: rgb(241 234 216 / 0.68);
  --brand-rule-color: rgb(241 234 216 / 0.22);
}
.chucho-tone-glass {
  --brand-mark-color: var(--brand-cream);
  --brand-word-color: var(--brand-cream);
  --brand-context-color: rgb(241 234 216 / 0.75);
  --brand-rule-color: rgb(241 234 216 / 0.28);
}

/* Motion: he looks up. Transform only, once per hover, reversed on leave.
   Triggered by hovering the lockup, a link/button that directly wraps it, or
   any .chucho-hover ancestor (standalone marks). */
.chucho-head,
.chucho-ear-l,
.chucho-ear-r,
.chucho-eyes {
  transform-box: view-box;
}
.chucho-head {
  transform-origin: 12px 20.8px;
}
.chucho-ear-l {
  transform-origin: 6.4px 7.5px;
}
.chucho-ear-r {
  transform-origin: 17.6px 7.5px;
}
.chucho-eyes {
  transform-origin: 12px 11.5px;
}

@keyframes chucho-blink {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.08);
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .chucho-head,
  .chucho-ear-l,
  .chucho-ear-r {
    transition: transform var(--brand-dur) var(--brand-ease);
  }
  .chucho-lockup:hover .chucho-head,
  :is(a, button):hover > .chucho-lockup .chucho-head,
  .chucho-hover:hover .chucho-head {
    transform: rotate(var(--brand-tilt));
  }
  .chucho-lockup:hover .chucho-ear-l,
  :is(a, button):hover > .chucho-lockup .chucho-ear-l,
  .chucho-hover:hover .chucho-ear-l {
    transform: rotate(var(--brand-perk));
  }
  .chucho-lockup:hover .chucho-ear-r,
  :is(a, button):hover > .chucho-lockup .chucho-ear-r,
  .chucho-hover:hover .chucho-ear-r {
    transform: rotate(calc(var(--brand-perk) * -1));
  }
  .chucho-lockup:hover .chucho-eyes,
  :is(a, button):hover > .chucho-lockup .chucho-eyes,
  .chucho-hover:hover .chucho-eyes {
    animation: chucho-blink 240ms 160ms ease-in-out;
  }
}

/* Press feedback only where the lockup is the control (a footer lockup is not). */
@media (prefers-reduced-motion: no-preference) {
  :is(a, button):active > .chucho-lockup {
    transform: scale(0.96);
    transition-duration: 90ms;
  }
}