/*
 Animated navigation icons (see Components/NavIcon.razor). They animate while the surrounding link or tile
 (class "nav-host") is hovered or keyboard-focused. Sizes depend on where the icon is used.
*/
.nav-icon { overflow: visible; flex: none; }

/* Every animated part scales/rotates around its own centre */
.nav-icon .cell, .nav-icon .bar, .nav-icon .trophy, .nav-icon .spark, .nav-icon .roof, .nav-icon .door, .nav-icon .dot, .nav-icon .ring {
    transform-box: fill-box;
    transform-origin: center;
}
.nav-icon .hand { transform-box: view-box; transform-origin: 32px 36px; }
.nav-icon .bar { transform-origin: bottom; }
.nav-icon .door { transform-origin: left center; }
.nav-icon .spark { opacity: 0; }

/* Dashboard: the four cells pop in turn */
@keyframes navicon-cell-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.72); } }
.nav-host:hover .nav-icon .cell, .nav-host:focus-visible .nav-icon .cell { animation: navicon-cell-pop 0.7s ease-in-out; }
.nav-host:hover .nav-icon .c2, .nav-host:focus-visible .nav-icon .c2 { animation-delay: 0.1s; }
.nav-host:hover .nav-icon .c4, .nav-host:focus-visible .nav-icon .c4 { animation-delay: 0.2s; }
.nav-host:hover .nav-icon .c3, .nav-host:focus-visible .nav-icon .c3 { animation-delay: 0.3s; }

/* Practice: the stopwatch hand sweeps a full turn */
@keyframes navicon-sweep { to { transform: rotate(360deg); } }
.nav-host:hover .nav-icon .hand, .nav-host:focus-visible .nav-icon .hand { animation: navicon-sweep 1.2s linear infinite; }

/* Qualification: the bars grow up from the baseline in turn */
@keyframes navicon-bar-grow { 0% { transform: scaleY(0.15); } 60% { transform: scaleY(1.08); } 100% { transform: scaleY(1); } }
.nav-host:hover .nav-icon .bar, .nav-host:focus-visible .nav-icon .bar { animation: navicon-bar-grow 0.7s ease-out backwards; }
.nav-host:hover .nav-icon .b2, .nav-host:focus-visible .nav-icon .b2 { animation-delay: 0.12s; }
.nav-host:hover .nav-icon .b3, .nav-host:focus-visible .nav-icon .b3 { animation-delay: 0.24s; }

/* Playoffs: the trophy lifts and tilts, sparkles twinkle */
@keyframes navicon-trophy-lift {
    0%, 100% { transform: translateY(0) rotate(0); }
    30% { transform: translateY(-5px) rotate(-6deg); }
    60% { transform: translateY(-5px) rotate(6deg); }
}
@keyframes navicon-twinkle { 0%, 100% { opacity: 0; transform: scale(0.4); } 50% { opacity: 1; transform: scale(1.1); } }
.nav-host:hover .nav-icon .trophy, .nav-host:focus-visible .nav-icon .trophy { animation: navicon-trophy-lift 1s ease-in-out infinite; }
.nav-host:hover .nav-icon .spark, .nav-host:focus-visible .nav-icon .spark { animation: navicon-twinkle 1s ease-in-out infinite; }
.nav-host:hover .nav-icon .s2, .nav-host:focus-visible .nav-icon .s2 { animation-delay: 0.5s; }

/* Home: the roof lifts and the door swings open */
@keyframes navicon-roof { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes navicon-door { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.3); } }
.nav-host:hover .nav-icon .roof, .nav-host:focus-visible .nav-icon .roof { animation: navicon-roof 0.8s ease-in-out infinite; }
.nav-host:hover .nav-icon .door, .nav-host:focus-visible .nav-icon .door { animation: navicon-door 0.8s ease-in-out infinite; }

/* Schedule: the calendar's dots pop in turn and the binder rings bounce */
@keyframes navicon-dot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.45); } }
@keyframes navicon-ring { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.nav-host:hover .nav-icon .dot, .nav-host:focus-visible .nav-icon .dot { animation: navicon-dot 0.6s ease-in-out; }
.nav-host:hover .nav-icon .d2, .nav-host:focus-visible .nav-icon .d2 { animation-delay: 0.1s; }
.nav-host:hover .nav-icon .d3, .nav-host:focus-visible .nav-icon .d3 { animation-delay: 0.2s; }
.nav-host:hover .nav-icon .d4, .nav-host:focus-visible .nav-icon .d4 { animation-delay: 0.3s; }
.nav-host:hover .nav-icon .d5, .nav-host:focus-visible .nav-icon .d5 { animation-delay: 0.4s; }
.nav-host:hover .nav-icon .ring, .nav-host:focus-visible .nav-icon .ring { animation: navicon-ring 0.5s ease-in-out 2; }

/* Sizes by context */
.home-tile .nav-icon { width: 10rem; height: 10rem; }
.sidebar-link .nav-icon, .menu-home .nav-icon { width: 1.75rem; height: 1.75rem; }
.sidebar-link:hover .nav-icon, .menu-home:hover .nav-icon { color: var(--theme-color-accent); }

@media (prefers-reduced-motion: reduce) {
    .nav-host, .nav-host * { animation: none !important; transition: none !important; }
}