/* ═══════════════════════════════════════════════
   NOTED PAD PRO v4 — animations.css
   Keyframes, focus mode, will-change optimizations
═══════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes modalIn    { from { transform: scale(.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes toastIn    { from { transform: translateX(26px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut   { from { transform: translateX(0); opacity: 1; } to { transform: translateX(26px); opacity: 0; } }
@keyframes remindIn   { from { transform: translateX(-50%) translateY(-18px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }
@keyframes pulse      { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes fadeIn     { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideDown  { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes shimmer    { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }

/* ── Autosave dot pulse ── */
.save-dot { animation: pulse 2.5s infinite; will-change: opacity; }
.save-dot.saving { background: var(--warning); }

/* ── Focus Mode ── */
body.focus-mode #sidebar,
body.focus-mode #right-panel,
body.focus-mode #topbar,
body.focus-mode #meta-bar,
body.focus-mode #toolbar,
body.focus-mode #attach-panel,
body.focus-mode #status-bar   { display: none !important; }

body.focus-mode #layout        { height: 100vh; }
body.focus-mode #editor-area   { background: var(--bg-deep); }
body.focus-mode #editor-scroll { padding: 56px max(56px,9vw); }
body.focus-mode #note-title    { font-size: 32px; margin-bottom: 16px; }
body.focus-mode #editor-content {
  font-size: 16.5px;
  line-height: 2;
  max-width: 740px;
  margin: 0 auto;
}

/* Focus mode overlay controls */
#focus-exit {
  position: fixed; top: 16px; right: 16px;
  z-index: var(--z-focus);
  display: none;
  padding: 6px 13px;
  border-radius: var(--radius-sm);
  background: rgba(240,165,0,.12);
  border: 1px solid var(--border-accent);
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 11.5px; font-weight: 600;
  cursor: pointer;
  align-items: center; gap: 5px;
  transition: background var(--t-fast);
}
#focus-exit:hover { background: rgba(240,165,0,.22); }
body.focus-mode #focus-exit { display: flex; }

/* Focus progress bar */
#focus-progress-bar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: var(--z-focus);
  display: none;
  pointer-events: none;
}
body.focus-mode #focus-progress-bar { display: block; }
#focus-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #ff6b35);
  width: 0%;
  transition: width .4s ease;
  will-change: width;
}

/* Focus word counter */
#focus-wordcount {
  position: fixed; bottom: 18px; right: 18px;
  font-size: 11px; color: var(--text-muted);
  z-index: var(--z-focus); display: none;
  font-family: var(--font-mono);
  background: rgba(13,15,20,.85);
  padding: 4px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  backdrop-filter: blur(6px);
}
body.focus-mode #focus-wordcount { display: block; }

/* ── will-change hints for animated elements ── */
.modal       { will-change: transform, opacity; }
.toast       { will-change: transform, opacity; }
.pomo-ring-fill { will-change: stroke-dashoffset; }
#focus-progress-fill { will-change: width; }
.bar-fill    { will-change: width; }
#sidebar, #right-panel { will-change: width; }

/* ── Save indicator states ── */
.save-dot          { animation: pulse 2.5s infinite; background: var(--success); }
.save-dot.saving   { background: var(--warning); animation: none; }
.save-dot.error    { background: var(--danger);  animation: none; }

/* ── Mobile sidebar overlay ── */
#sidebar.mobile-open ~ * #mobile-overlay,
#sidebar.mobile-open { transform: translateX(0) !important; }