/*
 * animations.css — TCB Elementor Theme
 * Transitions, motion preferences, interactive state animations.
 * Keep all transitions in one place so reduced-motion override is complete.
 */

/* ─── Button & Link Transitions (global base) ────────────────────────────── */
/*
 * These are also referenced in base.css; animations.css owns the values so
 * they can be blanket-disabled via prefers-reduced-motion below.
 */
button,
a {
  transition: background 0.2s, color 0.2s, opacity 0.2s;
}

/* ─── Photo Button Images ────────────────────────────────────────────────── */
.photo-button img {
  transition: opacity 0.45s, transform 0.7s;
}

/* ─── Quick-Add Overlay ──────────────────────────────────────────────────── */
.quick-add {
  transition: opacity 0.2s, transform 0.2s;
}

/* ─── Save Button SVG Fill ───────────────────────────────────────────────── */
.save-button svg {
  transition: fill 0.2s, stroke 0.2s;
}

/* ─── Filter Tabs ────────────────────────────────────────────────────────── */
.filter-tabs button {
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

/* ─── Size Option Buttons ────────────────────────────────────────────────── */
.size-options button {
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

/* ─── Toast ──────────────────────────────────────────────────────────────── */
#toast {
  transition: opacity 0.2s, transform 0.2s;
}

#toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#toast:not(.visible) {
  transform: translateX(-50%) translateY(12px);
}

/* ─── Outline Button Hover ───────────────────────────────────────────────── */
.outline {
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

/* ─── Dialog Backdrop ────────────────────────────────────────────────────── */
dialog::backdrop {
  transition: opacity 0.2s;
}

/* ─── Mobile Menu Hamburger Lines ────────────────────────────────────────── */
#menu-toggle span {
  transition: transform 0.2s, opacity 0.2s;
}

/* ─── Details/Summary Accordion ─────────────────────────────────────────── */
details summary::after {
  transition: transform 0.2s;
}

/* ─── Product Photo Alternate Image ──────────────────────────────────────── */
.photo-button .alternate-image {
  transition: opacity 0.45s;
}

/* ─── Story, Contact, Section Link Hover ─────────────────────────────────── */
.text-link {
  transition: border-color 0.2s, color 0.2s;
}

/* ──────────────────────────────────────────────────────────────────────────
   REDUCED MOTION
   Respect user OS preference. Blanket-remove all transitions and animations.
   ────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}