/* ============================================
   animations.css — Smooth transitions and micro-interactions
   ============================================ */

/* Page enter animation — disabled (GSAP handles this) */
.editor-blocks {
  /* animation handled by Animations.onPageRender() */
}
.page-header {
  /* animation handled by Animations.onPageRender() */
}
@keyframes page-enter {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes header-enter {
  0%   { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* New block insertion - handled by GSAP Animations.onBlockInsert() */
.block {
  /* animation: block-enter removed, GSAP handles stagger */
}
@keyframes block-enter {
  0%   { opacity: 0; transform: translateY(-4px) scale(0.99); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Hover lift on tree rows */
.tree-row {
  transition: background 0.12s, transform 0.12s;
}
.tree-row:hover { transform: translateX(2px); }

/* Sidebar items: smooth highlight */
.sb-item {
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s;
}
.sb-item:hover { transform: translateX(2px); }
.sb-item:active { transform: translateX(2px) scale(0.98); }

/* Caret pulse for newly focused block */
@keyframes caret-bloom {
  0% { box-shadow: 0 0 0 4px var(--primary-soft); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.editable[data-focused="true"]:focus {
  animation: caret-bloom 0.4s ease;
}

/* Slash menu: pop-in */
.slash-menu:not(.hidden) {
  animation: pop-in 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: top left;
}
@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0.92) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.slash-menu .sm-item {
  transition: background 0.12s ease;
}
.slash-menu .sm-item.selected {
  background: var(--hover);
  position: relative;
}
.slash-menu .sm-item.selected::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 16px; transform: translateY(-50%);
  background: var(--primary);
  border-radius: 0 2px 2px 0;
}

/* Format toolbar: fade + slight rise */
.format-toolbar:not(.hidden) {
  animation: toolbar-enter 0.18s cubic-bezier(0.21, 0.61, 0.35, 1);
}
@keyframes toolbar-enter {
  0%   { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}
.ft-btn {
  transition: background 0.12s ease, color 0.12s, transform 0.1s;
}
.ft-btn:active { transform: scale(0.92); }

/* Buttons - tactile press */
.btn, .auth-btn, .btn-secondary, .btn-ghost, .pc-btn, .icon-btn, .tb-text-btn, .db-tab, .cal-nav, .cover-action-btn {
  transition: background 0.15s ease, color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.btn:active, .auth-btn:active { transform: scale(0.97); }

/* Modals: backdrop + card */
.modal:not(.hidden) .modal-overlay {
  animation: backdrop-fade 0.18s ease;
}
.modal:not(.hidden) .search-card,
.modal:not(.hidden) .settings-card,
.modal:not(.hidden) .share-card,
.modal:not(.hidden) .templates-card,
.modal:not(.hidden) .row-detail-card,
.modal:not(.hidden) .history-card,
.modal:not(.hidden) .export-card,
.modal:not(.hidden) .chart-settings-card,
.modal:not(.hidden) .mermaid-editor-card {
  animation: modal-pop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes backdrop-fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes modal-pop {
  0%   { opacity: 0; transform: translateY(20px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* AI panel */
.ai-panel:not(.hidden) .ai-card {
  animation: ai-rise 0.28s cubic-bezier(0.21, 0.61, 0.35, 1);
}
@keyframes ai-rise {
  0%   { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}
.ai-overlay {
  animation: backdrop-fade 0.22s ease;
}

/* Todo checked: pop celebration */
.block-todo .todo-checkbox:checked {
  animation: check-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes check-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* Block handle hover */
.bh-btn {
  transition: background 0.12s, color 0.12s, transform 0.1s;
}
.bh-btn:hover { transform: scale(1.1); }

/* Drag preview */
.block.dragging {
  transition: opacity 0.15s;
  cursor: grabbing !important;
}

/* Drop indicator */
.block.drop-above::before, .block.drop-below::after {
  animation: drop-glow 0.3s ease infinite alternate;
}
@keyframes drop-glow {
  0%   { box-shadow: 0 0 0 0 var(--primary-soft); }
  100% { box-shadow: 0 0 6px 1px var(--primary); }
}

/* Toast slide-in */
.toast {
  animation: toast-slide-up 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes toast-slide-up {
  0%   { opacity: 0; transform: translateX(-50%) translateY(20px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Tree expand: rotate icon smoothly */
.tree-row .tr-toggle svg {
  transition: transform 0.18s cubic-bezier(0.21, 0.61, 0.35, 1);
}

/* Notification dot pulse */
.notif-item.unread .notif-dot {
  animation: dot-pulse 2s ease infinite;
}
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--primary); }
  50%      { box-shadow: 0 0 0 4px transparent; }
}

/* Sidebar collapse smooth */
.sidebar {
  transition: margin-left 0.25s cubic-bezier(0.21, 0.61, 0.35, 1);
}

/* Comment badge gentle bounce on hover */
.block-comment-badge {
  transition: transform 0.18s, background 0.15s;
}
.block-comment-badge:hover {
  transform: scale(1.08);
}

/* Settings nav active state */
.settings-nav button {
  transition: background 0.15s, color 0.15s, padding-left 0.15s;
}
.settings-nav button.active { padding-left: 14px; }

/* Page card hover lift on Home */
.recent-card {
  transition: transform 0.22s cubic-bezier(0.21, 0.61, 0.35, 1), box-shadow 0.22s, background 0.15s;
}
.recent-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(15,15,15,0.10);
}

/* Template card spring */
.template-card {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s;
}
.template-card:hover { transform: translateY(-3px) scale(1.02); }

/* Cell focus ring */
.db-table td.cell-edit:focus,
.db-table td[contenteditable="true"]:focus {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* Calendar hover */
.cal-cell {
  transition: background 0.12s, transform 0.1s;
}
.cal-cell:not(.empty):hover { transform: scale(0.98); }
.cal-event {
  transition: filter 0.12s, transform 0.1s;
}
.cal-event:hover { transform: translateX(2px); }

/* Checkbox completion strike-through smooth */
.block-todo .editable {
  transition: color 0.2s, text-decoration-color 0.2s;
}

/* Chart entry */
.chart-block {
  animation: chart-enter 0.4s cubic-bezier(0.21, 0.61, 0.35, 1);
}
@keyframes chart-enter {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Block-menu items press */
.bm-item {
  transition: background 0.12s, padding-left 0.12s;
}
.bm-item:hover { padding-left: 12px; }

/* Color menu swatch hover */
.cm-swatch {
  transition: transform 0.12s;
}
.cm-item:hover .cm-swatch { transform: scale(1.1); }

/* Title type-in: subtle character feel */
.page-title {
  transition: color 0.2s;
}

/* Smooth scrollbar on editor */
.editor-scroll {
  scroll-behavior: smooth;
}

/* Reduce motion preference respected */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}