feat: enhance loading indicator and improve UI transitions

- Updated the loading indicator in `index.html` to include a spinner and text for better user feedback during loading.
- Added CSS transitions for smoother visual effects on various elements, including buttons and overlays, enhancing overall user experience.
- Refactored JavaScript functions to utilize requestAnimationFrame for improved animation performance when showing and hiding panels.
- Implemented smooth scrolling behavior for duty list navigation, improving usability when focusing on current duties.

webapp/style.css

@@ -12,6 +12,19 @@
   --error: #f7768e;
   --timeline-date-width: 3.6em;
   --timeline-track-width: 10px;
+  --transition-fast: 0.15s;
+  --transition-normal: 0.25s;
+  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
 }
 
 /* Light theme: prefer Telegram themeParams (--tg-theme-*), fallback to Telegram-like palette */
@@ -102,10 +115,25 @@ body {
   font-size: 24px;
   line-height: 1;
   cursor: pointer;
+  transition: opacity var(--transition-fast), transform var(--transition-fast);
+}
+
+.nav:focus {
+  outline: none;
+}
+
+.nav:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
 }
 
 .nav:active {
-  opacity: 0.8;
+  transform: scale(0.95);
+}
+
+.nav:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
 .title {
@@ -132,6 +160,15 @@ body {
   padding-bottom: 12px;
   margin-bottom: 4px;
   touch-action: pan-y;
+  transition: box-shadow var(--transition-fast) ease-out;
+}
+
+.calendar-sticky.is-scrolled {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+[data-theme="dark"] .calendar-sticky.is-scrolled {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
 }
 
 /* === Calendar grid & day cells */
@@ -156,6 +193,7 @@ body {
   min-width: 0;
   min-height: 0;
   overflow: hidden;
+  transition: background-color var(--transition-fast), transform var(--transition-fast);
 }
 
 .day.other-month {
@@ -187,6 +225,19 @@ body {
   cursor: pointer;
 }
 
+.day:focus {
+  outline: none;
+}
+
+.day:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.day:active {
+  transform: scale(0.98);
+}
+
 .day-indicator {
   display: flex;
   flex-wrap: wrap;
@@ -247,6 +298,14 @@ body.day-detail-sheet-open {
   z-index: 999;
   background: rgba(0, 0, 0, 0.4);
   -webkit-tap-highlight-color: transparent;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--transition-normal) ease-out;
+}
+
+.day-detail-overlay.day-detail-overlay--visible {
+  opacity: 1;
+  pointer-events: auto;
 }
 
 .day-detail-panel {
@@ -277,6 +336,12 @@ body.day-detail-sheet-open {
   padding-right: 16px;
   /* Комфортный отступ снизу: safe area + дополнительное поле */
   padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
+  transform: translateY(100%);
+  transition: transform var(--transition-normal) var(--ease-out);
+}
+
+.day-detail-panel--sheet.day-detail-panel--open {
+  transform: translateY(0);
 }
 
 .day-detail-panel--sheet::before {
@@ -303,6 +368,16 @@ body.day-detail-sheet-open {
   line-height: 1;
   cursor: pointer;
   border-radius: 8px;
+  transition: opacity var(--transition-fast), background-color var(--transition-fast);
+}
+
+.day-detail-close:focus {
+  outline: none;
+}
+
+.day-detail-close:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
 }
 
 .day-detail-close:hover {
@@ -403,6 +478,15 @@ body.day-detail-sheet-open {
   white-space: pre;
   overflow: visible;
   transform: translateY(-100%);
+  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
+}
+
+.calendar-event-hint:not(.calendar-event-hint--visible) {
+  opacity: 0;
+}
+
+.calendar-event-hint.calendar-event-hint--visible {
+  opacity: 1;
 }
 
 .calendar-event-hint.below {
@@ -464,6 +548,7 @@ body.day-detail-sheet-open {
   border-radius: 50%;
   flex-shrink: 0;
   cursor: pointer;
+  transition: box-shadow var(--transition-fast) ease-out;
 }
 
 .duty-marker {
@@ -723,15 +808,71 @@ body.day-detail-sheet-open {
 .duty-item--current {
   border-left-color: var(--today);
   background: color-mix(in srgb, var(--today) 12%, var(--surface));
+  animation: duty-current-pulse 2s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .duty-item--current {
+    animation: none;
+  }
+}
+
+@keyframes duty-current-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--today) 30%, transparent);
+  }
+  50% {
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--today) 15%, transparent);
+  }
 }
 
 /* === Loading / error / access denied */
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 12px;
+  color: var(--muted);
+  text-align: center;
+}
+
+.loading__spinner {
+  display: block;
+  width: 20px;
+  height: 20px;
+  border: 2px solid transparent;
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: loading-spin 0.8s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .loading__spinner {
+    animation: none;
+    border-top-color: var(--accent);
+    border-right-color: color-mix(in srgb, var(--accent) 50%, transparent);
+  }
+}
+
+@keyframes loading-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .loading, .error {
   text-align: center;
   padding: 12px;
   color: var(--muted);
 }
 
+.error,
+.access-denied {
+  transition: opacity 0.2s ease-out;
+}
+
 .error {
   color: var(--error);
 }