/* Supplemental brand polish: preserve the existing public-site composition. */
.hero-color-pulse {
    background: radial-gradient(circle at 40% 52%, rgba(31,79,216,.2), transparent 28%),
        radial-gradient(circle at 78% 18%, rgba(141,180,230,.16), transparent 27%);
}

.dance-catalog-item {
    transition: color 220ms ease-out, background-color 220ms ease-out,
        box-shadow 220ms ease-out;
}
.dance-catalog-item:is(:hover, :focus-within),
.dance-catalog-item:nth-child(3n):is(:hover, :focus-within) {
    padding-right: 26px;
    padding-left: 26px;
    color: #fff;
    background: #1F4FD8;
    box-shadow: inset 4px 0 #C2CEF2;
}
.dance-catalog-item:is(:hover, :focus-within) > span {
    color: #EEF1F8;
}
.dance-catalog-item:is(:hover, :focus-within) p {
    opacity: .86;
}
.dance-catalog-item > a {
    transition: transform 220ms ease-out, background-color 220ms ease-out;
}
.dance-catalog-item:is(:hover, :focus-within) > a {
    background: rgba(255,255,255,.16);
    transform: rotate(45deg);
}

/* Two-color focus remains visible on both paper and navy surfaces. */
:is(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid #C2CEF2;
    outline-offset: 4px;
    box-shadow: 0 0 0 7px #0B1B57;
}
.brand .identity-logo {
    animation: papyonLogoReveal 520ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes papyonLogoReveal {
    from { opacity: .35; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Transform-based equalizer keeps its box stable while moving. */
.beat-bars i {
    background: #C2CEF2;
    transform-origin: center;
    animation: papyonBeat 900ms ease-in-out infinite alternate;
    animation-delay: calc(var(--beat) * -110ms);
}
@keyframes papyonBeat {
    from { transform: scaleY(.35); }
    to { transform: scaleY(1); }
}

@media (max-width: 760px) {
    .dance-catalog-item:is(:hover, :focus-within),
    .dance-catalog-item:nth-child(3n):is(:hover, :focus-within) {
        padding-right: 16px;
        padding-left: 16px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .brand .identity-logo, .beat-bars i {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .dance-catalog-item, .dance-catalog-item > a {
        transition: none;
    }
    .dance-catalog-item:is(:hover, :focus-within) > a {
        transform: none;
    }
}