/* Gentle decoration for the flat lavender theme. No interactive element moves. */
body.uya-page .uya-brand-mark,
body.uya-page .uya-portrait > span,
body.uya-page .uya-listening-note > span {
    pointer-events: none;
    user-select: none;
}

body.uya-page .uya-listening-note > span { display: inline-block; }
body.uya-page .uya-song-heading h2 { position: relative; }

/* Empty generated shapes do not add text to the heading's accessible name. */
body.uya-page .uya-song-heading h2::before,
body.uya-page .uya-song-heading h2::after {
    content: "";
    position: absolute;
    pointer-events: none;
    user-select: none;
    background: #a98dbe;
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
    opacity: .7;
}

body.uya-page .uya-song-heading h2::after {
    width: 11px;
    height: 11px;
    inset-inline-end: -16px;
    top: 3px;
}

body.uya-page .uya-song-heading h2::before {
    width: 5px;
    height: 5px;
    inset-inline-end: -22px;
    top: 17px;
    background: #c4accf;
}

body.uya-page[data-uya-effects="on"] .uya-brand-mark {
    transform-origin: 50% 75%;
    animation: uya-theme-note-sway 7s ease-in-out infinite;
}

body.uya-page[data-uya-effects="on"] .uya-portrait > span {
    animation: uya-theme-portrait-note 6.5s ease-in-out infinite;
}

body.uya-page[data-uya-effects="on"] .uya-listening-note > span {
    animation: uya-theme-star-float 8s ease-in-out infinite;
}

body.uya-page[data-uya-effects="on"] .uya-song-heading h2::after {
    animation: uya-theme-star-glow 5.5s ease-in-out infinite;
}

body.uya-page[data-uya-effects="on"] .uya-song-heading h2::before {
    animation: uya-theme-star-glow 5.5s 1.3s ease-in-out infinite;
}

/* The controller supplies this attribute only during the first page entrance. */
body.uya-page[data-uya-effects="on"][data-uya-effects-intro="true"] .uya-header,
body.uya-page[data-uya-effects="on"][data-uya-effects-intro="true"] .uya-sidebar,
body.uya-page[data-uya-effects="on"][data-uya-effects-intro="true"] .uya-main,
body.uya-page[data-uya-effects="on"][data-uya-effects-intro="true"] .uya-bgm__bar {
    animation: uya-theme-enter 380ms ease-out both;
}

body.uya-page[data-uya-effects="on"][data-uya-effects-intro="true"] .uya-sidebar { animation-delay: 50ms; }
body.uya-page[data-uya-effects="on"][data-uya-effects-intro="true"] .uya-main { animation-delay: 100ms; }
body.uya-page[data-uya-effects="on"][data-uya-effects-intro="true"] .uya-bgm__bar { animation-delay: 150ms; }

/* Pointer hover adds color and a small response on the non-interactive portrait. */
@media (hover: hover) and (pointer: fine) {
    body.uya-page[data-uya-effects="on"] .uya-portrait img {
        transition: transform 220ms ease, border-color 220ms ease;
    }

    body.uya-page[data-uya-effects="on"] .uya-portrait:hover img {
        transform: scale(1.025);
        border-color: #e0d1ec;
    }

    body.uya-page[data-uya-effects="on"] .uya-profile,
    body.uya-page[data-uya-effects="on"] .bili-weekly,
    body.uya-page[data-uya-effects="on"] .bili-hub__card,
    body.uya-page[data-uya-effects="on"] .song-tools-item {
        transition: background-color 180ms ease, border-color 180ms ease;
    }

    body.uya-page[data-uya-effects="on"] .uya-profile:hover { background-color: #eee7f4; }
    body.uya-page[data-uya-effects="on"] .bili-weekly:hover { background-color: #ede7f3; }
}

@keyframes uya-theme-note-sway {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
}

@keyframes uya-theme-portrait-note {
    0%, 100% { transform: translateY(0) rotate(12deg); }
    50% { transform: translateY(-3px) rotate(8deg); }
}

@keyframes uya-theme-star-float {
    0%, 100% { transform: translateY(0); opacity: .75; }
    50% { transform: translateY(-3px); opacity: 1; }
}

@keyframes uya-theme-star-glow {
    0%, 100% { opacity: .5; transform: scale(.88); }
    50% { opacity: .85; transform: scale(1); }
}

@keyframes uya-theme-enter {
    from { opacity: .65; }
    to { opacity: 1; }
}

/* Mobile keeps the small title sparkle and portrait note, with less movement. */
@media (max-width: 600px), (pointer: coarse) {
    body.uya-page[data-uya-effects="on"] .uya-brand-mark { animation: none; }
    body.uya-page[data-uya-effects="on"] .uya-portrait > span { animation-name: uya-theme-portrait-note-small; animation-duration: 8s; }
    body.uya-page .uya-song-heading h2::after { width: 8px; height: 8px; inset-inline-end: -12px; top: 2px; }
    body.uya-page .uya-song-heading h2::before { display: none; }
    body.uya-page[data-uya-effects="on"][data-uya-effects-intro="true"] .uya-header,
    body.uya-page[data-uya-effects="on"][data-uya-effects-intro="true"] .uya-sidebar,
    body.uya-page[data-uya-effects="on"][data-uya-effects-intro="true"] .uya-main,
    body.uya-page[data-uya-effects="on"][data-uya-effects-intro="true"] .uya-bgm__bar { animation-duration: 240ms; }
}

@keyframes uya-theme-portrait-note-small {
    0%, 100% { transform: translateY(0) rotate(12deg); }
    50% { transform: translateY(-1.5px) rotate(10deg); }
}

body.uya-page[data-uya-effects-paused="true"] .uya-brand-mark,
body.uya-page[data-uya-effects-paused="true"] .uya-portrait > span,
body.uya-page[data-uya-effects-paused="true"] .uya-listening-note > span,
body.uya-page[data-uya-effects-paused="true"] .uya-song-heading h2::before,
body.uya-page[data-uya-effects-paused="true"] .uya-song-heading h2::after,
body.uya-page[data-uya-effects-paused="true"] .uya-header,
body.uya-page[data-uya-effects-paused="true"] .uya-sidebar,
body.uya-page[data-uya-effects-paused="true"] .uya-main,
body.uya-page[data-uya-effects-paused="true"] .uya-bgm__bar {
    animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
    body.uya-page .uya-brand-mark,
    body.uya-page .uya-portrait > span,
    body.uya-page .uya-listening-note > span,
    body.uya-page .uya-song-heading h2::before,
    body.uya-page .uya-song-heading h2::after,
    body.uya-page .uya-header,
    body.uya-page .uya-sidebar,
    body.uya-page .uya-main,
    body.uya-page .uya-bgm__bar {
        animation: none !important;
    }

    body.uya-page .uya-portrait img,
    body.uya-page .uya-profile,
    body.uya-page .bili-weekly,
    body.uya-page .bili-hub__card,
    body.uya-page .song-tools-item { transition: none !important; }

    body.uya-page .uya-portrait:hover img { transform: none !important; }
}