/* STILLBEAT supersymbol-v2. Brand shell only; never use in artwork renderers. */
:root {
  --sb-ink: #0E0F11;
  --sb-chalk: #F4F4F1;
  --sb-still: #0A2FD6;
  --sb-still-on-dark: #4A66FF;
  --sb-beat: #FF5A1F;
  --sb-muted: #626360;
  --sb-muted-on-dark: #A5A5A1;
  --sb-surface: #FBFBF8;
  --sb-surface-dark: #1B1C1F;
  --sb-line: #D6D6D0;
  --sb-line-dark: #343538;
}

.sb-logo {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  color: var(--sb-logo-color, inherit);
}
.sb-logo[data-sb-variant="primary-reversed"],
.sb-logo[data-sb-variant="hero-reversed"] {
  color: var(--sb-logo-color, var(--sb-chalk));
}
.sb-logo .sb-word,
.sb-logo .sb-half { fill: currentColor; }
.sb-logo .sb-point { fill: var(--sb-point-color, currentColor); }
.sb-logo[data-sb-variant="hero"] .sb-point {
  fill: var(--sb-point-color, var(--sb-still));
}
.sb-logo[data-sb-variant="hero-reversed"] .sb-point {
  fill: var(--sb-point-color, var(--sb-still-on-dark));
}
/* Master reverse files retain their rectangles for standalone SVG use. The
   inlined identity inherits the page surface without painting a black tile. */
.sb-logo .sb-logo-background { display: none; }

/* Translations use the master symbol's LOCAL units. The group still carries
   the exact approved transform, so one stroke is always 20 units at any size.
   Hard cut: left rises 20, right falls 20 to briefly align; then original
   stagger returns. No interpolated sliding, rotation, scaling or point motion. */
.sb-logo .sb-half { transform: translateY(0); }
@keyframes sb-half-left {
  0%, 24%, 74%, 100% { transform: translateY(0); }
  25%, 73% { transform: translateY(-20px); }
}
@keyframes sb-half-right {
  0%, 24%, 74%, 100% { transform: translateY(0); }
  25%, 73% { transform: translateY(20px); }
}
@keyframes sb-half-loading-left {
  0%, 19%, 32%, 100% { transform: translateY(0); }
  20%, 31% { transform: translateY(-20px); }
}
@keyframes sb-half-loading-right {
  0%, 19%, 32%, 100% { transform: translateY(0); }
  20%, 31% { transform: translateY(20px); }
}

.sb-logo[data-sb-motion="enter"] .sb-half,
[data-sb-asset][data-sb-motion="enter"] .sb-logo .sb-half {
  animation-duration: 900ms;
  animation-timing-function: steps(1, end);
  animation-iteration-count: 1;
}
.sb-logo[data-sb-motion="enter"] .sb-half--left,
[data-sb-asset][data-sb-motion="enter"] .sb-logo .sb-half--left { animation-name: sb-half-left; }
.sb-logo[data-sb-motion="enter"] .sb-half--right,
[data-sb-asset][data-sb-motion="enter"] .sb-logo .sb-half--right { animation-name: sb-half-right; }

.sb-logo[data-sb-motion="hover"]:is(:hover, :focus-within) .sb-half,
:is(a, button):is(:hover, :focus-visible) .sb-logo[data-sb-motion="hover"] .sb-half,
:is(a, button):is(:hover, :focus-visible) [data-sb-asset][data-sb-motion="hover"] .sb-logo .sb-half,
[data-sb-asset][data-sb-motion="hover"]:is(:hover, :focus-within) .sb-logo .sb-half {
  animation-duration: 700ms;
  animation-timing-function: steps(1, end);
  animation-iteration-count: 1;
}
.sb-logo[data-sb-motion="hover"]:is(:hover, :focus-within) .sb-half--left,
:is(a, button):is(:hover, :focus-visible) .sb-logo[data-sb-motion="hover"] .sb-half--left,
:is(a, button):is(:hover, :focus-visible) [data-sb-asset][data-sb-motion="hover"] .sb-logo .sb-half--left,
[data-sb-asset][data-sb-motion="hover"]:is(:hover, :focus-within) .sb-logo .sb-half--left { animation-name: sb-half-left; }
.sb-logo[data-sb-motion="hover"]:is(:hover, :focus-within) .sb-half--right,
:is(a, button):is(:hover, :focus-visible) .sb-logo[data-sb-motion="hover"] .sb-half--right,
:is(a, button):is(:hover, :focus-visible) [data-sb-asset][data-sb-motion="hover"] .sb-logo .sb-half--right,
[data-sb-asset][data-sb-motion="hover"]:is(:hover, :focus-within) .sb-logo .sb-half--right { animation-name: sb-half-right; }

.sb-logo[data-sb-motion="loading"] .sb-half,
[data-sb-asset][data-sb-motion="loading"] .sb-logo .sb-half {
  animation-duration: 2800ms;
  animation-timing-function: steps(1, end);
  animation-iteration-count: 3;
}
.sb-logo[data-sb-motion="loading"] .sb-half--left,
[data-sb-asset][data-sb-motion="loading"] .sb-logo .sb-half--left { animation-name: sb-half-loading-left; }
.sb-logo[data-sb-motion="loading"] .sb-half--right,
[data-sb-asset][data-sb-motion="loading"] .sb-logo .sb-half--right { animation-name: sb-half-loading-right; }

[data-sb-paused] .sb-logo .sb-half { animation-play-state: paused !important; }
.sb-logo[hidden] { display: none !important; }
[hidden] .sb-logo .sb-half,
.sb-logo[hidden] .sb-half { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .sb-logo .sb-half { animation: none !important; transform: none !important; }
}