@font-face { font-family: Orbitron; src: url('/fonts/orbitron-logo.woff2') format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Chakra Petch'; src: url('/fonts/chakra-logo.woff2') format('woff2'); font-weight: 700 900; font-display: swap; }
@font-face { font-family: Syncopate; src: url('/fonts/syncopate-logo.woff2') format('woff2'); font-weight: 700 900; font-display: swap; }
@font-face { font-family: Rajdhani; src: url('/fonts/rajdhani-logo.woff2') format('woff2'); font-weight: 700 900; font-display: swap; }
.spectrum-logo { display: block; width: 100%; height: auto; overflow: hidden; --logo-duration: 7s; --logo-split: .5px; }
/* Only transform and opacity animate, including on the low-memory target. */
@keyframes logo-wave { 0%,100% { transform: translateY(-2px) scaleY(1); opacity: .85; } 50% { transform: translateY(2px) scaleY(.82); opacity: 1; } }
@keyframes logo-red { 0%,100% { transform: translateX(calc(-1 * var(--logo-split))); } 50% { transform: translateX(var(--logo-split)); } }
@keyframes logo-blue { 0%,100% { transform: translateX(var(--logo-split)); } 50% { transform: translateX(calc(-1 * var(--logo-split))); } }
.spectrum-logo #fourierWavesBack, .spectrum-logo #fourierWavesFront { transform-origin: 700px 220px; animation: logo-wave var(--logo-duration) ease-in-out infinite; }
.spectrum-logo #textRedshift { animation: logo-red var(--logo-duration) ease-in-out infinite; }
.spectrum-logo #textBlueshift { animation: logo-blue var(--logo-duration) ease-in-out infinite; }
.spectrum-logo.still *, .spectrum-logo.paused * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .spectrum-logo * { animation: none !important; } }
.logo-bridge { display: flex; align-items: end; flex-wrap: wrap; gap: 16px 24px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); }
.bridge-copy { flex: 1 1 260px; }
.bridge-copy p { margin: 0; color: var(--dim); font-size: 14px; }
.bridge-copy strong { color: var(--face); font-size: 18px; font-weight: 500; }
.logo-bridge label { display: block; font-size: 12px; color: var(--dim); margin-bottom: 5px; }
.bridge-fields { display: flex; gap: 8px; flex-wrap: wrap; }
.bridge-fields input { width: 240px; min-width: 0; background: #08090b; color: var(--face); border: 1px solid #555b63; padding: 10px 12px; font: inherit; font-size: 15px; border-radius: 0; }
.bridge-fields button { background: var(--face); color: #000; border: 1px solid var(--face); padding: 10px 16px; font: inherit; font-size: 15px; cursor: pointer; }
.bridge-fields input:focus { outline: 2px solid white; outline-offset: 2px; }
.bridge-status { min-height: 1.5em; margin: 7px 0 0; font-size: 12px; color: var(--dim); }
@media (max-width: 540px) { .logo-bridge { gap: 12px; } .bridge-editor, .bridge-fields { width: 100%; } .bridge-fields input { flex: 1 1 130px; width: 130px; } .bridge-fields button { flex: 1 1 auto; } }