/* Header dropdown reveal: same feel as the Planner dropdown (planner-header.css),
   applied to every other header dropdown. .is-revealing is set for ~1.3 s per open
   by web/js/header-dd-reveal.js. Planner keeps its own rules. */
.header-widget .dropdown-menu.is-revealing:not(.planner-dropdown) {
    transform-origin: top right;
    animation: hdr-dd-panel-in 0.26s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.header-widget .dropdown-menu.is-revealing:not(.planner-dropdown) > * {
    animation: hdr-dd-item-in 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: calc(0.08s + var(--rv, 0) * 30ms);
}

.header-widget .dropdown-menu.is-revealing:not(.planner-dropdown) > :nth-child(1) { --rv: 1; }
.header-widget .dropdown-menu.is-revealing:not(.planner-dropdown) > :nth-child(2) { --rv: 2; }
.header-widget .dropdown-menu.is-revealing:not(.planner-dropdown) > :nth-child(3) { --rv: 3; }
.header-widget .dropdown-menu.is-revealing:not(.planner-dropdown) > :nth-child(4) { --rv: 4; }
.header-widget .dropdown-menu.is-revealing:not(.planner-dropdown) > :nth-child(5) { --rv: 5; }
.header-widget .dropdown-menu.is-revealing:not(.planner-dropdown) > :nth-child(6) { --rv: 6; }
.header-widget .dropdown-menu.is-revealing:not(.planner-dropdown) > :nth-child(n+7) { --rv: 7; }

/* Icons pop in with a small spin, staggered by their position (--ic set by JS) */
.header-widget .dropdown-menu.is-revealing:not(.planner-dropdown) i.fas,
.header-widget .dropdown-menu.is-revealing:not(.planner-dropdown) i.far {
    display: inline-block;
    animation: hdr-dd-icon-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both;
    animation-delay: calc(0.18s + var(--ic, 0) * 35ms);
}

/* Signature motion per dropdown */
.header-widget .shortcut-dropdown.is-revealing i.fa-bolt,
.header-widget .shortcut-dropdown.is-revealing .shortcut-dd-add-icon {
    animation: hdr-dd-zap 0.6s ease-out 0.15s both;
}

.header-widget .shortcut-dropdown.is-revealing .shortcut-dd-add-icon {
    animation-name: hdr-dd-plus-turn;
}

.header-widget .dropdown-menu.is-revealing i.fa-bell {
    transform-origin: 50% 0;
    animation: hdr-dd-ring 0.9s ease-in-out 0.2s both;
}

.header-widget .dropdown-menu.is-revealing i.fa-comments {
    animation: hdr-dd-bob 0.7s ease-in-out 0.2s both;
}

.header-widget .dropdown-menu.is-revealing i.fa-cog,
.header-widget .dropdown-menu.is-revealing i.fa-sliders-h {
    animation: hdr-dd-spin-in 0.7s cubic-bezier(0.3, 1.4, 0.5, 1) 0.3s both;
}

/* Hover tilt on item icons, like the planner footer links */
.header-widget .dropdown-menu:not(.planner-dropdown) .dropdown-item i {
    display: inline-block;
    transition: transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.header-widget .dropdown-menu:not(.planner-dropdown) .dropdown-item:hover i,
.header-widget .dropdown-menu:not(.planner-dropdown) .dropdown-item:focus-visible i {
    transform: scale(1.2) rotate(-10deg);
}

@keyframes hdr-dd-panel-in {
    from { opacity: 0; translate: 0 -6px; scale: 0.96; }
    to { opacity: 1; translate: none; scale: none; }
}

@keyframes hdr-dd-item-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

@keyframes hdr-dd-icon-pop {
    0% { opacity: 0; transform: scale(0.3) rotate(-25deg); }
    100% { opacity: 1; transform: none; }
}

@keyframes hdr-dd-zap {
    0% { opacity: 0; transform: scale(0.4) translateY(-4px); }
    50% { opacity: 1; transform: scale(1.35); filter: drop-shadow(0 0 6px currentColor); }
    100% { transform: none; filter: none; }
}

@keyframes hdr-dd-plus-turn {
    0% { opacity: 0; transform: rotate(-90deg) scale(0.4); }
    100% { opacity: 1; transform: none; }
}

@keyframes hdr-dd-ring {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(18deg); }
    40% { transform: rotate(-16deg); }
    60% { transform: rotate(10deg); }
    80% { transform: rotate(-6deg); }
}

@keyframes hdr-dd-bob {
    0% { opacity: 0; transform: translateY(6px); }
    50% { opacity: 1; transform: translateY(-4px); }
    100% { transform: none; }
}

@keyframes hdr-dd-spin-in {
    0% { opacity: 0; transform: rotate(-200deg) scale(0.3); }
    100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .header-widget .dropdown-menu.is-revealing,
    .header-widget .dropdown-menu.is-revealing > *,
    .header-widget .dropdown-menu.is-revealing i,
    .header-widget .dropdown-menu .dropdown-item i {
        animation: none !important;
        transition: none !important;
    }
}