/* 登录宫格分层动效：只动插画，不碰圆角砖与落影。
   呼吸由 .hub.is-alive 打开；Spotlight 由 .is-spotlight + data-motion 点名。 */

.app-glyph {
    perspective: 140px;
}

.app-glyph-art {
    transform-origin: 50% 58%;
}

.hub.is-alive .app-icon:not(.is-spotlight):not(.is-note-play) .app-glyph-art {
    animation: hubFloat 4.8s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 0.18s);
}

.app-icon.is-spotlight .app-glyph-art {
    will-change: transform;
    animation-duration: 2.2s;
    animation-timing-function: var(--ease);
    animation-iteration-count: 1;
    animation-fill-mode: both;
}

.app-icon.is-spotlight[data-motion="bob"] .app-glyph-art { animation-name: hubBob; }
.app-icon.is-spotlight[data-motion="nod"] .app-glyph-art { animation-name: hubNod; }
.app-icon.is-spotlight[data-motion="tilt"] .app-glyph-art { animation-name: hubTilt; }
.app-icon.is-spotlight[data-motion="orbit"] .app-glyph-art { animation-name: hubOrbit; }
.app-icon.is-spotlight[data-motion="pulse"] .app-glyph-art { animation-name: hubPulse; }
.app-icon.is-spotlight[data-motion="spin"] .app-glyph-art { animation-name: hubSpin; }
.app-icon.is-spotlight[data-motion="scan"] .app-glyph-art { animation-name: hubScan; }
.app-icon.is-spotlight[data-motion="wiggle"] .app-glyph-art { animation-name: hubWiggle; }

.app-icon.is-note-play .app-glyph-art {
    will-change: transform, opacity, filter;
    animation:
        noteArtOut 0.72s var(--ease) 0s forwards,
        noteArtIn 0.7s var(--ease) 3.15s forwards;
}

.note-smoke {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.note-smoke-puff {
    position: absolute;
    width: 44%;
    height: 44%;
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(circle, rgb(248 250 252 / 0.58) 0%, rgb(226 232 240 / 0.16) 46%, transparent 72%);
    filter: blur(7px);
}

.note-smoke-puff:nth-child(1) { left: 10%; top: 36%; }
.note-smoke-puff:nth-child(2) { left: 38%; top: 22%; }
.note-smoke-puff:nth-child(3) { left: 22%; top: 50%; }
.note-smoke-puff:nth-child(4) { left: 48%; top: 40%; }

.note-slip {
    position: absolute;
    inset: 6%;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    place-items: center;
    pointer-events: none;
}

.note-char {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1;
    color: var(--label);
    text-shadow: var(--label-shadow);
    letter-spacing: 0;
    opacity: 0;
}

.app-icon.is-note-play .note-smoke--out .note-smoke-puff {
    animation: noteSmoke 0.92s var(--ease) both;
}
.app-icon.is-note-play .note-smoke--out .note-smoke-puff:nth-child(1) { animation-delay: 0.02s; }
.app-icon.is-note-play .note-smoke--out .note-smoke-puff:nth-child(2) { animation-delay: 0.1s; }
.app-icon.is-note-play .note-smoke--out .note-smoke-puff:nth-child(3) { animation-delay: 0.16s; }
.app-icon.is-note-play .note-smoke--out .note-smoke-puff:nth-child(4) { animation-delay: 0.22s; }

.app-icon.is-note-play .note-smoke--back .note-smoke-puff {
    animation: noteSmoke 0.92s var(--ease) both;
}
.app-icon.is-note-play .note-smoke--back .note-smoke-puff:nth-child(1) { animation-delay: 3.05s; }
.app-icon.is-note-play .note-smoke--back .note-smoke-puff:nth-child(2) { animation-delay: 3.13s; }
.app-icon.is-note-play .note-smoke--back .note-smoke-puff:nth-child(3) { animation-delay: 3.19s; }
.app-icon.is-note-play .note-smoke--back .note-smoke-puff:nth-child(4) { animation-delay: 3.26s; }

.app-icon.is-note-play .note-char {
    animation-name: noteCharIn, noteCharLive, noteCharOut;
    animation-duration: 0.48s, 1.7s, 0.42s;
    animation-timing-function: var(--ease), ease-in-out, var(--ease);
    animation-iteration-count: 1, 1, 1;
    animation-fill-mode: both, none, forwards;
}
.app-icon.is-note-play .note-char:nth-child(1) { animation-delay: 0.56s, 1.08s, 2.82s; }
.app-icon.is-note-play .note-char:nth-child(2) { animation-delay: 0.68s, 1.16s, 2.86s; }
.app-icon.is-note-play .note-char:nth-child(3) { animation-delay: 0.8s, 1.24s, 2.9s; }
.app-icon.is-note-play .note-char:nth-child(4) { animation-delay: 0.92s, 1.32s, 2.94s; }

.hub.is-alive.is-paused .app-icon .app-glyph-art,
.hub.is-alive .app-icon.is-pressing .app-glyph-art,
.hub.is-alive.is-paused .app-icon .note-smoke-puff,
.hub.is-alive.is-paused .app-icon .note-char,
.hub.is-alive .app-icon.is-pressing .note-smoke-puff,
.hub.is-alive .app-icon.is-pressing .note-char {
    animation-play-state: paused;
}

.hub.is-leaving .app-glyph-art,
.hub.is-leaving .note-smoke-puff,
.hub.is-leaving .note-char {
    animation: none;
    will-change: auto;
}

.hub.is-leaving .note-char,
.hub.is-leaving .note-smoke-puff {
    opacity: 0;
}

@keyframes hubFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

@keyframes hubBob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    35% { transform: translateY(-5px) rotate(-4deg); }
    70% { transform: translateY(-2px) rotate(3deg); }
}

@keyframes hubNod {
    0%, 100% { transform: translateY(0) scale(1); }
    28% { transform: translateY(4px) scale(0.97, 1.02); }
    58% { transform: translateY(-3px) scale(1.04, 0.98); }
    78% { transform: translateY(1px) scale(0.99, 1.01); }
}

@keyframes hubTilt {
    0%, 100% { transform: rotateY(0deg) rotateZ(0deg); }
    32% { transform: rotateY(-12deg) rotateZ(-3deg); }
    68% { transform: rotateY(12deg) rotateZ(3deg); }
}

@keyframes hubOrbit {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(3px, -4px) rotate(6deg); }
    50% { transform: translate(-2px, -5px) rotate(-2deg); }
    75% { transform: translate(-4px, 1px) rotate(-6deg); }
}

@keyframes hubPulse {
    0%, 100% { transform: scale(1); }
    42% { transform: scale(1.06); }
    72% { transform: scale(0.99); }
}

@keyframes hubSpin {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(18deg); }
}

@keyframes hubScan {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    40% { transform: translateY(5px) rotate(-6deg); }
    72% { transform: translateY(-3px) rotate(4deg); }
}

@keyframes hubWiggle {
    0%, 100% { transform: rotate(0deg); }
    22% { transform: rotate(-10deg); }
    44% { transform: rotate(8deg); }
    66% { transform: rotate(-5deg); }
    84% { transform: rotate(3deg); }
}

@keyframes noteArtOut {
    to {
        opacity: 0;
        filter: blur(7px);
        transform: scale(0.86) translateY(4px);
    }
}

@keyframes noteArtIn {
    from {
        opacity: 0;
        filter: blur(7px);
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        filter: none;
        transform: none;
    }
}

@keyframes noteSmoke {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(0.46);
    }
    30% { opacity: 0.82; }
    100% {
        opacity: 0;
        transform: translateY(-30px) scale(1.55);
    }
}

@keyframes noteCharIn {
    from {
        opacity: 0;
        filter: blur(4px);
        transform: translateY(9px) scale(0.72);
    }
    to {
        opacity: 1;
        filter: none;
        transform: none;
    }
}

@keyframes noteCharLive {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-3px) rotate(var(--r, 4deg)); }
}

@keyframes noteCharOut {
    to {
        opacity: 0;
        filter: blur(3px);
        transform: translateY(-7px) scale(0.84);
    }
}

@media (min-width: 900px) and (pointer: fine) {
    .note-char { font-size: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hub.is-alive .app-glyph-art,
    .app-icon.is-spotlight .app-glyph-art,
    .app-icon.is-note-play .app-glyph-art,
    .note-smoke-puff,
    .note-char {
        animation: none;
        will-change: auto;
        filter: none;
    }
    .note-smoke,
    .note-slip {
        display: none;
    }
}