@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(0.25rem); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes priority-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

@keyframes toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(1.25rem); }
}

@keyframes toast-timer {
    from { width: 100%; }
    to   { width: 0; }
}

@keyframes sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
@keyframes sheet-down {
    from { transform: translateY(0); opacity: 1; }
    to   { transform: translateY(5%);  opacity: 0; }
}

@view-transition { navigation: auto; }

::view-transition-old(root) {
    animation: sheet-down 0.14s cubic-bezier(.55, 0, .68, 0) both;
}
::view-transition-new(root) {
    animation: sheet-up   0.2s  cubic-bezier(.22, 1, .36, 1) both;
}
:root { view-transition-name: root; }

@keyframes sunrise {
    0%   { transform: translateY(0.375rem) scale(0.7); opacity: 0.4; }
    60%  { transform: translateY(-0.125rem) scale(1.1); opacity: 1; }
    100% { transform: translateY(0)        scale(1);   opacity: 1; }
}

@keyframes moon-drift {
    0%   { transform: rotate(0)    scale(1); }
    50%  { transform: rotate(-8deg) scale(1.08); }
    100% { transform: rotate(0)    scale(1); }
}

@keyframes alert-ping {
    0%   { transform: scale(1);    filter: drop-shadow(0 0 0 currentColor); }
    40%  { transform: scale(1.22); filter: drop-shadow(0 0 0.5rem currentColor); }
    100% { transform: scale(1);    filter: drop-shadow(0 0 0 currentColor); }
}

@keyframes stamp-check {
    0%   { transform: scale(1)    rotate(0); }
    35%  { transform: scale(1.35) rotate(-6deg); }
    70%  { transform: scale(0.9)  rotate(3deg); }
    100% { transform: scale(1)    rotate(0); }
}

@keyframes task-tick {
    0%   { transform: translateX(0); }
    25%  { transform: translateX(-0.1875rem); }
    60%  { transform: translateX(0.25rem); }
    100% { transform: translateX(0); }
}

@keyframes photo-shuffle {
    0%   { transform: translate(0, 0)              rotate(0); }
    30%  { transform: translate(0.25rem, -0.125rem) rotate(6deg); }
    60%  { transform: translate(-0.125rem, 0.0625rem) rotate(-3deg); }
    100% { transform: translate(0, 0)              rotate(0); }
}

@keyframes chart-grow {
    0%   { transform: scaleY(0.4) translateY(0.25rem); transform-origin: bottom center; }
    70%  { transform: scaleY(1.15) translateY(0);       transform-origin: bottom center; }
    100% { transform: scaleY(1)    translateY(0);       transform-origin: bottom center; }
}

@keyframes coin-flip {
    0%   { transform: perspective(12rem) rotateY(0); }
    50%  { transform: perspective(12rem) rotateY(180deg) scale(1.1); }
    100% { transform: perspective(12rem) rotateY(360deg); }
}

@keyframes page-flip {
    0%   { transform: perspective(12rem) rotateX(0); }
    50%  { transform: perspective(12rem) rotateX(-70deg) translateY(-0.125rem); }
    100% { transform: perspective(12rem) rotateX(0); }
}

@keyframes scan-orbit {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-0.1875rem, -0.1875rem); }
    50%  { transform: translate(0.1875rem, -0.1875rem); }
    75%  { transform: translate(0.1875rem, 0.1875rem); }
    100% { transform: translate(0, 0); }
}

@keyframes wave-hand {
    0%, 100% { transform: rotate(0); }
    20%      { transform: rotate(14deg); }
    40%      { transform: rotate(-8deg); }
    60%      { transform: rotate(14deg); }
    80%      { transform: rotate(-4deg); }
}

@keyframes mail-send {
    0%   { transform: translate(0, 0)              rotate(0); opacity: 1; }
    40%  { transform: translate(0.375rem, -0.25rem) rotate(-15deg); opacity: 0.7; }
    70%  { transform: translate(-0.5rem, 0.125rem)  rotate(12deg); opacity: 0.5; }
    100% { transform: translate(0, 0)              rotate(0); opacity: 1; }
}

@keyframes build-up {
    0%   { transform: translateY(0.5rem) scaleY(0.5); opacity: 0.5; transform-origin: bottom; }
    55%  { transform: translateY(-0.125rem) scaleY(1.1); opacity: 1; transform-origin: bottom; }
    100% { transform: translateY(0)        scaleY(1);   opacity: 1; transform-origin: bottom; }
}

@keyframes report-unfurl {
    0%   { transform: translateY(-0.375rem) scaleY(0.8); opacity: 0.4; }
    60%  { transform: translateY(0.0625rem) scaleY(1.08); opacity: 1; }
    100% { transform: translateY(0)         scaleY(1);    opacity: 1; }
}

.fm-fade-in { animation: fade-in 180ms var(--ease-out); }

.skeleton {
    background: linear-gradient(90deg,
        var(--bg-surface) 25%,
        var(--bg-elevated) 50%,
        var(--bg-surface) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

.btn[aria-busy="true"] .icon,
.fm-ingest-spin {
    animation: spin 1.2s linear infinite;
    display: inline-block;
}

.action-btn.is-tap-selected {
    outline: 0.09375rem solid var(--primary);
    outline-offset: -0.09375rem;
    background: color-mix(in srgb, var(--primary) 6%, transparent);
}

.action-btn[data-action="morning_report"]:hover  .action-icon,
.action-btn[data-action="morning_report"].is-tap-selected .action-icon,
.action-btn[data-action="morning"]:hover         .action-icon,
.action-btn[data-action="morning"].is-tap-selected .action-icon          { transform: none; animation: sunrise       0.55s cubic-bezier(.22,1,.36,1); }

.action-btn[data-action="evening_report"]:hover  .action-icon,
.action-btn[data-action="evening_report"].is-tap-selected .action-icon,
.action-btn[data-action="evening"]:hover         .action-icon,
.action-btn[data-action="evening"].is-tap-selected .action-icon          { transform: none; animation: moon-drift    0.7s  cubic-bezier(.45,0,.55,1); }

.action-btn[data-action="complaint_new"]:hover   .action-icon,
.action-btn[data-action="complaint_new"].is-tap-selected .action-icon,
.action-btn[data-action="complaint"]:hover       .action-icon,
.action-btn[data-action="complaint"].is-tap-selected .action-icon,
.action-btn[data-action="complaints"]:hover      .action-icon,
.action-btn[data-action="complaints"].is-tap-selected .action-icon       { transform: none; animation: alert-ping    0.5s  cubic-bezier(.34,1.56,.64,1); }

.action-btn[data-action="checklist"]:hover       .action-icon,
.action-btn[data-action="checklist"].is-tap-selected .action-icon        { transform: none; animation: stamp-check   0.45s cubic-bezier(.34,1.56,.64,1); }

.action-btn[data-action="my_tasks"]:hover        .action-icon,
.action-btn[data-action="my_tasks"].is-tap-selected .action-icon,
.action-btn[data-action="tasks"]:hover           .action-icon,
.action-btn[data-action="tasks"].is-tap-selected .action-icon            { transform: none; animation: task-tick     0.5s  cubic-bezier(.22,1,.36,1); }

.action-btn[data-action="gallery"]:hover         .action-icon,
.action-btn[data-action="gallery"].is-tap-selected .action-icon          { transform: none; animation: photo-shuffle 0.6s  cubic-bezier(.22,1,.36,1); }

.action-btn[data-action="kpi"]:hover             .action-icon,
.action-btn[data-action="kpi"].is-tap-selected .action-icon              { transform: none; animation: chart-grow    0.5s  cubic-bezier(.34,1.56,.64,1); }

.action-btn[data-action="fines"]:hover           .action-icon,
.action-btn[data-action="fines"].is-tap-selected .action-icon            { transform: none; animation: coin-flip     0.7s  cubic-bezier(.45,0,.55,1); }

.action-btn[data-action="schedule"]:hover        .action-icon,
.action-btn[data-action="schedule"].is-tap-selected .action-icon         { transform: none; animation: page-flip     0.55s cubic-bezier(.45,0,.55,1); }

.action-btn[data-action="audit"]:hover           .action-icon,
.action-btn[data-action="audit"].is-tap-selected .action-icon            { transform: none; animation: scan-orbit    0.8s  cubic-bezier(.45,0,.55,1); }

.action-btn[data-action="users"]:hover           .action-icon,
.action-btn[data-action="users"].is-tap-selected .action-icon            { transform: none; animation: wave-hand     0.8s  cubic-bezier(.25,.1,.25,1); }

.action-btn[data-action="invites"]:hover         .action-icon,
.action-btn[data-action="invites"].is-tap-selected .action-icon          { transform: none; animation: mail-send     0.7s  cubic-bezier(.22,1,.36,1); }

.action-btn[data-action="sites"]:hover           .action-icon,
.action-btn[data-action="sites"].is-tap-selected .action-icon            { transform: none; animation: build-up      0.6s  cubic-bezier(.34,1.56,.64,1); }

.action-btn[data-action="reports"]:hover         .action-icon,
.action-btn[data-action="reports"].is-tap-selected .action-icon,
.action-btn[data-action="myreports"]:hover       .action-icon,
.action-btn[data-action="myreports"].is-tap-selected .action-icon        { transform: none; animation: report-unfurl 0.55s cubic-bezier(.22,1,.36,1); }

.action-btn[data-action="checklist_editor"]:hover .action-icon,
.action-btn[data-action="checklist_editor"].is-tap-selected .action-icon,
.action-btn[data-action="settings"]:hover        .action-icon,
.action-btn[data-action="settings"].is-tap-selected .action-icon         { transform: none; animation: spin          1.5s  linear infinite; }

@media (prefers-reduced-motion: reduce) {
    .section,
    .skeleton,
    .priority-dot--critical,
    .action-btn:hover .action-icon {
        animation: none !important;
    }
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }
}