/* ═══════════════════════════════════════════════════════════
   ANIMATIONS & TRANSITIONS — FreeCalendarMaker
   Smooth panel collapses, bouncy toggles, subtle flair
   ═══════════════════════════════════════════════════════════ */

/* ── Sidebar section panels ───────────────────────────────── */
/* Animation handled by JS accordion.js — smooth max-height transition */
.sec-body {
  overflow: hidden;
}
details.sec > summary { list-style: none; cursor: pointer; }
details.sec > summary::-webkit-details-marker { display: none; }
/* Arrow indicator */
details.sec > summary::after {
  content: '›';
  float: right;
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
details.sec[open] > summary::after { transform: rotate(90deg); }

/* ── Toggle switches — bouncy ─────────────────────────────── */
@keyframes tog-on {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  70%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}
@keyframes tog-off {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.85); }
  70%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.tog { transition: background 0.2s ease; }
.tog.tog-anim-on  { animation: tog-on  0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.tog.tog-anim-off { animation: tog-off 0.3s ease; }

/* ── Button press micro-animation ────────────────────────── */
@keyframes btn-press {
  0%   { transform: scale(1); }
  45%  { transform: scale(0.93); }
  100% { transform: scale(1); }
}
.bopt:active, .btn-sec:active, .ico-btn:active {
  animation: btn-press 0.18s ease;
}

/* ── Color dot bounce on change ──────────────────────────── */
@keyframes dot-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.feed-color-dot.dot-pop { animation: dot-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ── Calendar page entrance ──────────────────────────────── */
@keyframes page-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cal-page {
  animation: page-in 0.3s ease both;
}
.cal-page:nth-child(2) { animation-delay: 0.04s; }
.cal-page:nth-child(3) { animation-delay: 0.08s; }
.cal-page:nth-child(4) { animation-delay: 0.12s; }
.cal-page:nth-child(n+5) { animation-delay: 0.15s; }

/* ── Popover entrance ─────────────────────────────────────── */
@keyframes pop-in {
  from { opacity: 0; transform: scale(0.92) translateY(-6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.ev-popover {
  animation: pop-in 0.2s cubic-bezier(0.34, 1.3, 0.64, 1);
}

/* ── Photo adj overlay entrance ──────────────────────────── */
.photo-adj-overlay {
  animation: pop-in 0.18s cubic-bezier(0.34, 1.3, 0.64, 1);
}

/* ── UI lang selector style ──────────────────────────────── */
.ui-lang-sel {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.65rem;
  padding: 3px 5px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ui-lang-sel:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
}

/* ── Smooth slider thumb ─────────────────────────────────── */
input[type=range] {
  transition: opacity 0.15s;
}
input[type=range]:hover { opacity: 0.9; }

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