.app {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px 20px 40px;
    text-align: center;
}

@media (max-width: 640px) {
    .app {
        padding: 40px 16px 28px;
    }
}

.app__title {
    font-family: var(--display);
    font-size: clamp(2.8rem, 7vw, 4.4rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(100deg, var(--signal-red), var(--signal-violet) 30%, var(--signal-yellow) 50%, var(--signal-cyan) 75%, var(--signal-red) 100%);
    background-size: 340% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: title-flow 4.5s linear infinite;
    filter: drop-shadow(0 0 30px rgba(255, 46, 109, 0.25));
    cursor: default;
    transition: transform 0.4s var(--bounce);
}

.app__title:hover {
    animation: title-flow 4.5s linear infinite, title-jelly 0.6s var(--bounce);
}

.app__tally {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--signal-red);
    box-shadow: 0 0 8px var(--signal-red), var(--glow-red);
    animation: tally-pulse 1.1s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes title-flow {
    0% { background-position: 0% 0%; }
    100% { background-position: 340% 0%; }
}

@keyframes title-jelly {
    0% { transform: scale(1, 1); }
    30% { transform: scale(1.06, 0.94); }
    50% { transform: scale(0.96, 1.06); }
    70% { transform: scale(1.03, 0.97); }
    100% { transform: scale(1, 1); }
}

@keyframes tally-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.7); }
}

/* Signature element: a small rainbow waveform, tuned bouncier/faster than
   a subtle audio-meter — reads more "party" than "telemetry". */
.waveform {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
    height: 30px;
    margin: 4px 0 24px;
}

.waveform span {
    display: inline-block;
    width: 6px;
    border-radius: 3px;
    animation: wave 0.9s var(--bounce) infinite;
}

.waveform span:nth-child(1) { height: 40%; background: var(--signal-red); animation-delay: 0s; box-shadow: 0 0 8px var(--signal-red-dim); }
.waveform span:nth-child(2) { height: 95%; background: var(--signal-violet); animation-delay: 0.09s; box-shadow: 0 0 8px rgba(255, 176, 32, 0.4); }
.waveform span:nth-child(3) { height: 60%; background: var(--signal-yellow); animation-delay: 0.18s; box-shadow: 0 0 8px rgba(255, 225, 77, 0.4); }
.waveform span:nth-child(4) { height: 100%; background: var(--signal-cyan); animation-delay: 0.27s; box-shadow: 0 0 8px var(--signal-cyan-dim); }
.waveform span:nth-child(5) { height: 50%; background: var(--signal-purple); animation-delay: 0.36s; box-shadow: 0 0 8px rgba(176, 107, 255, 0.4); }
.waveform span:nth-child(6) { height: 85%; background: var(--signal-red); animation-delay: 0.45s; box-shadow: 0 0 8px var(--signal-red-dim); }
.waveform span:nth-child(7) { height: 35%; background: var(--signal-cyan); animation-delay: 0.54s; box-shadow: 0 0 8px var(--signal-cyan-dim); }

@keyframes wave {
    0%, 100% { transform: scaleY(0.35) rotate(0deg); opacity: 0.75; }
    50% { transform: scaleY(1) rotate(0deg); opacity: 1; }
}