/* Red Banana credit v2.2: the canonical footer credit component. v2.2 (29 Sep 10:3x): sheen clipped to the tiles inside the SVG (no grey disc). v2.1 (29 Sep 09:5x, Master Bob ruling): name at 400, not 600 (FOOTER-STANDARD rules 2 and 5).
   Binding spec: ~/Cultre/fleet/motion-bar/FOOTER-STANDARD.md (rule 5 shape, rule 8 interaction).
   Mark geometry and colours are unchanged from v1 (Bob 58, rb58-redesign/credit).
   No inline <style> or style="" is required to USE this file: link it as an external
   stylesheet. The host page sets two custom properties on the footer (or :root):
     --foot-mark    mark height, 28px desktop / 24px at <=600px (this file also halves it
                    itself as a safety default if the host forgets the breakpoint)
     --foot-accent  the site's accent colour for hover/focus (falls back to RB red)
   Everything else (rest-state text colour) is inherited via currentColor from the footer. */

.rb-credit{
  --_mark: var(--foot-mark, 28px);
  --_accent: var(--foot-accent, #e2422e);
  display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:.35em;min-height:44px;padding:.35em .1em;
  color:inherit;text-decoration:none;font:inherit;line-height:1.2;
  transform:translateY(0);
  transition:transform .25s cubic-bezier(.2,.7,.2,1);
}
@media (max-width:600px){
  .rb-credit{ --_mark: var(--foot-mark, 24px); }
}

.rb-credit:hover,.rb-credit:focus-visible{ transform:translateY(-2px); }
.rb-credit:focus-visible{ outline:2px solid var(--_accent); outline-offset:4px; border-radius:6px; }

/* rule 2: label 11px uppercase 0.12em tracking, muted.
   R4 (Bob 47, 29 Sep): 11px must clear WCAG AA 4.5:1 against the footer background.
   Default is the footer's own text colour at full opacity (whatever ratio the footer
   already uses is preserved) so nothing needs checking out of the box. A site that
   wants a softer/muted tone sets --foot-muted explicitly and is responsible for
   verifying 4.5:1 for its own background: the size must never be the fix. */
.rbc-label{
  font-size:11px;line-height:1;text-transform:uppercase;letter-spacing:.12em;
  color:var(--foot-muted, currentColor);white-space:nowrap;
}

/* rule 3: mark + name on one line, vertically centred */
.rbc-body{ display:flex; align-items:center; gap:.55em; }

.rbc-mark-wrap{
  height:var(--_mark); width:var(--_mark); flex:none; position:relative;
  perspective:600px; display:block;
}
.rbc-mark{
  height:100%; width:auto; display:block; overflow:visible;
  transform-style:preserve-3d; transform-origin:50% 50%;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}
/* R2 (Bob 47, 29 Sep): no chips: the mark is monochrome, in the footer's own text
   colour, at rest. Brand fills return only on hover, focus and the touch tap pulse.
   The four distinct tile colours in the mosaic are named as variables so the active
   state can restore them; every shape defaults to currentColor. Colour transition only. */
.rbc-mark{ --rbc-c1:#e2422e; --rbc-c2:#c2362a; --rbc-c3:#a92f21; --rbc-c4:#7a1f16; }
.rbc-mark rect,.rbc-mark g{ fill:currentColor; transition:fill .25s ease; }
.rb-credit:hover .rbc-mark .rbc-c1,.rb-credit:focus-visible .rbc-mark .rbc-c1,.rb-credit.rbc-tap .rbc-mark .rbc-c1{ fill:var(--rbc-c1); }
.rb-credit:hover .rbc-mark .rbc-c2,.rb-credit:focus-visible .rbc-mark .rbc-c2,.rb-credit.rbc-tap .rbc-mark .rbc-c2{ fill:var(--rbc-c2); }
.rb-credit:hover .rbc-mark .rbc-c3,.rb-credit:focus-visible .rbc-mark .rbc-c3,.rb-credit.rbc-tap .rbc-mark .rbc-c3{ fill:var(--rbc-c3); }
.rb-credit:hover .rbc-mark .rbc-c4,.rb-credit:focus-visible .rbc-mark .rbc-c4,.rb-credit.rbc-tap .rbc-mark .rbc-c4{ fill:var(--rbc-c4); }
/* pointer-following sheen (rule 8), v2.2: a narrow highlight INSIDE the SVG, clipped to the tiles, so it only
   ever brightens the mark (never a disc over the footer). JS moves the gradient's cx/cy; CSS toggles opacity.
   The old .rbc-sheen span (v2, v2.1) is kept hidden for backward compatibility. */
.rbc-sheen{ display:none; }
.rbc-mark .rbc-sheen-rect{ fill:url(#rbc-sheen-grad); opacity:0; transition:opacity .25s ease; pointer-events:none; mix-blend-mode:screen; }
.rb-credit:hover .rbc-mark .rbc-sheen-rect,.rb-credit:focus-visible .rbc-mark .rbc-sheen-rect{ opacity:1; }

/* rule 2: content 14px, name is the content role */
.rbc-name{ font-size:14px; font-weight:400; transition:color .25s ease; }
.rb-credit:hover .rbc-name,.rb-credit:focus-visible .rbc-name{ color:var(--_accent); }

/* touch tap pulse (rule 8): plays once on pointerdown with pointerType=touch, never blocks the tap */
@keyframes rbc-tap{ 0%{transform:scale(1)} 45%{transform:scale(.9) rotate(-3deg)} 100%{transform:scale(1)} }
.rb-credit.rbc-tap .rbc-mark{ animation:rbc-tap .32s cubic-bezier(.3,1.4,.4,1); }

/* reduced motion: colour change only, no tilt, no sheen, no tap animation */
@media (prefers-reduced-motion:reduce){
  .rb-credit,.rbc-mark,.rbc-sheen,.rbc-sheen-rect{ transition:none !important; animation:none !important; }
  .rb-credit:hover,.rb-credit:focus-visible{ transform:none; }
  .rbc-mark{ transform:none !important; }
  .rbc-sheen,.rbc-mark .rbc-sheen-rect{ display:none; }
}

@media (forced-colors:active){ .rbc-mark *{ fill:CanvasText; } }