/* ============================================================
   animations.css — Global motion tokens, keyframes, utilities
   Domain layout stays in component CSS; motion lives here.
   ============================================================ */

:root {
  --anim-fast: 180ms;
  --anim-med: 280ms;
  --anim-slow: 400ms;
  --anim-sheet: 420ms;
  --anim-theme: 280ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in: ease;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Keyframes ─────────────────────────────────────────────── */

@keyframes anim-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes anim-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes anim-pop-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes anim-pop-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(8px) scale(0.98); }
}

@keyframes anim-slide-up-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes anim-marker-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes anim-drop-in {
  0% { opacity: 0; transform: translateY(-12px) scale(0.92); }
  65% { opacity: 1; transform: translateY(3px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Utility classes ───────────────────────────────────────── */

.anim-fade-in {
  animation: anim-fade-in var(--anim-med) var(--ease-in) both;
}

.anim-fade-out {
  animation: anim-fade-out var(--anim-med) var(--ease-in) both;
  pointer-events: none;
}

.anim-pop-in {
  animation: anim-pop-in var(--anim-med) var(--ease-out) both;
}

.anim-pop-out {
  animation: anim-pop-out var(--anim-fast) var(--ease-in) both;
}

.anim-slide-up-in {
  animation: anim-slide-up-in var(--anim-fast) var(--ease-in) both;
}

/* Height expand/collapse (grid 0fr → 1fr) */
.anim-expand {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--anim-slow) var(--ease-out);
}

.anim-expand.is-open,
.area-item.expanded > .anim-expand,
.group-item.expanded > .anim-expand {
  grid-template-rows: 1fr;
}

.anim-expand-inner {
  overflow: hidden;
  min-height: 0;
}

/* Chevron rotate (right → down) */
.anim-chevron .fa-solid,
.anim-chevron.fa-solid {
  display: inline-block;
  font-size: 1.05rem;
  transition: transform var(--anim-slow) var(--ease-out);
}

.anim-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  color: var(--text-secondary);
  border-radius: 10px;
}

.area-item.expanded .anim-chevron .fa-solid,
.group-item.expanded .anim-chevron .fa-solid,
.anim-chevron.is-open .fa-solid {
  transform: rotate(90deg);
}

/* Soft surface / opacity hovers */
.anim-bg {
  transition: background var(--anim-fast) var(--ease-in);
}

.anim-opacity {
  transition: opacity var(--anim-fast) var(--ease-in);
}

.anim-transform {
  transition: transform var(--anim-med) var(--ease-out);
}

/* Tree row soft motion */
.area-item,
.group-item,
.post-item {
  transition: background var(--anim-fast) var(--ease-in);
}

.area-actions,
.group-actions,
.post-actions {
  transition: opacity var(--anim-fast) var(--ease-in);
}

/* Theme cross-fade */
.theme-transitioning,
.theme-transitioning * {
  transition:
    background-color var(--anim-theme) ease,
    border-color var(--anim-theme) ease,
    color var(--anim-theme) ease,
    box-shadow var(--anim-theme) ease !important;
}

@keyframes anim-sheet-in {
  from { transform: translateY(110%); }
  to { transform: translateY(0); }
}

@keyframes anim-sheet-out {
  from { transform: translateY(0); }
  to { transform: translateY(110%); }
}

/* Modal fade hooks — centered dialogs (structure in modals.css) */
.modal-backdrop.modal-fading-in {
  animation: anim-fade-in 220ms ease both;
}

.modal-backdrop.modal-fading-out {
  animation: anim-fade-out 180ms ease both;
  pointer-events: none;
}

.modal-backdrop.modal-fading-in .modal {
  animation: anim-pop-in 240ms var(--ease-out) both;
}

.modal-backdrop.modal-fading-out .modal {
  animation: anim-pop-out 160ms ease both;
}

/* Sheet panels share the same transform transition as the areas sheet */
.areas-panel,
.modal.modal-sheet {
  transition:
    transform var(--anim-sheet) var(--ease-out),
    visibility 0s linear var(--anim-sheet);
}

.areas-panel.is-open,
.modal.modal-sheet.is-open {
  transition:
    transform var(--anim-sheet) var(--ease-out),
    visibility 0s linear 0s;
}

.areas-sheet-overlay {
  transition:
    opacity var(--anim-sheet) var(--ease-out),
    visibility 0s linear var(--anim-sheet);
}

.areas-sheet-overlay.is-visible {
  transition:
    opacity var(--anim-sheet) var(--ease-out),
    visibility 0s linear 0s;
}

/* Mobile sheet modal backdrop: same fade duration as areas overlay */
@media (max-width: 768px) {
  .modal-backdrop:has(.modal.modal-sheet) {
    transition: opacity var(--anim-sheet) var(--ease-out);
  }

  /* Disable pop/keyframe path for sheet panels — use .is-open transition instead */
  .modal-backdrop.modal-fading-in .modal.modal-sheet,
  .modal-backdrop.modal-fading-out .modal.modal-sheet {
    animation: none !important;
  }

  .modal-backdrop:has(.modal.modal-sheet).modal-fading-in,
  .modal-backdrop:has(.modal.modal-sheet).modal-fading-out {
    animation: none !important;
  }
}

/* Toast enter */
.toast {
  animation: anim-slide-up-in var(--anim-fast) ease both;
}

/* Map marker / week card */
.marker-fade-in {
  animation: anim-marker-in 250ms ease-out forwards;
}

.day-session-card.just-dropped {
  animation: anim-drop-in 280ms var(--ease-spring) forwards;
}

.leaflet-marker-icon.marker-hovered {
  filter: brightness(1.35) drop-shadow(0 0 5px rgba(234, 88, 12, 0.55));
  transition: filter 120ms ease;
}

/* Leaflet area border / mask fade */
.area-border-polygon,
.area-mask-polygon {
  transition: opacity var(--anim-slow) var(--ease-out);
}

.area-border-polygon.anim-leaflet-fade-out,
.area-mask-polygon.anim-leaflet-fade-out {
  opacity: 0 !important;
}

.area-border-polygon.anim-leaflet-fade-in,
.area-mask-polygon.anim-leaflet-fade-in {
  animation: anim-fade-in var(--anim-slow) var(--ease-out) both;
}

/* ── Reduced motion ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  :root {
    --anim-fast: 1ms;
    --anim-med: 1ms;
    --anim-slow: 1ms;
    --anim-sheet: 1ms;
    --anim-theme: 1ms;
  }

  .anim-fade-in,
  .anim-fade-out,
  .anim-pop-in,
  .anim-pop-out,
  .anim-slide-up-in,
  .anim-expand,
  .anim-chevron .fa-solid,
  .anim-chevron.fa-solid,
  .anim-bg,
  .anim-opacity,
  .anim-transform,
  .theme-transitioning,
  .theme-transitioning *,
  .modal-backdrop.modal-fading-in,
  .modal-backdrop.modal-fading-out,
  .modal-backdrop.modal-fading-in .modal,
  .modal-backdrop.modal-fading-out .modal,
  .modal-backdrop.modal-fading-in .modal.modal-sheet,
  .modal-backdrop.modal-fading-out .modal.modal-sheet,
  .toast,
  .marker-fade-in,
  .day-session-card.just-dropped,
  .areas-panel,
  .areas-sheet-overlay,
  .modal.modal-sheet,
  .modal-backdrop:has(.modal.modal-sheet),
  .area-border-polygon,
  .area-mask-polygon {
    animation: none !important;
    transition: none !important;
  }
}