/* ============================================================
   motion-polish.css — Subtle CSS-only animations for Dr. Fuxx
   ============================================================
   - Respects prefers-reduced-motion (accessibility)
   - Short durations (120-220ms) for snappy feel
   - Subtle transforms (1.02-1.04 scale) — never aggressive
   - Easing: cubic-bezier(0.4, 0, 0.2, 1) — Material Design ease-out
   - Scoped to common classes to avoid surprise side-effects
   ============================================================ */

/* -- 1. Global timing variables -------------------------------- */
:root {
  --motion-duration-fast: 120ms;
  --motion-duration-base: 180ms;
  --motion-duration-slow: 280ms;
  --motion-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* -- 2. Accessibility: kill all motion if user prefers reduced - */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* -- 3. Buttons: press feedback + hover lift ------------------- */
.btn,
button[type="submit"],
button[type="button"],
.btn-continue,
.btn-back,
.pharmacy-btn-continue,
.pharmacy-btn-back,
.header-btn,
.dropdown-btn-green {
  transition:
    transform var(--motion-duration-base) var(--motion-ease),
    box-shadow var(--motion-duration-base) var(--motion-ease),
    background-color var(--motion-duration-base) var(--motion-ease),
    border-color var(--motion-duration-base) var(--motion-ease),
    color var(--motion-duration-base) var(--motion-ease),
    opacity var(--motion-duration-base) var(--motion-ease);
  will-change: transform;
}
.btn:hover,
button[type="submit"]:hover,
.btn-continue:hover,
.pharmacy-btn-continue:hover,
.header-btn:hover {
  transform: translateY(-1px);
}
.btn:active,
button[type="submit"]:active,
button[type="button"]:active,
.btn-continue:active,
.btn-back:active,
.pharmacy-btn-continue:active,
.pharmacy-btn-back:active {
  transform: scale(0.97);
  transition-duration: var(--motion-duration-fast);
}

/* Pulse focus ring for keyboard accessibility */
.btn:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 2px solid var(--site_color, #8a48ff);
  outline-offset: 2px;
  border-radius: 4px;
}

/* -- 4. Card hover lift (medicine cards, doctor cards, etc.) --- */
.card,
.medicine-card,
.product-card,
.pharmacy-card,
.doctor-card,
.treatment-card,
.banner-card,
.medicine-selection-ui .medicine-card {
  transition:
    transform var(--motion-duration-base) var(--motion-ease),
    box-shadow var(--motion-duration-base) var(--motion-ease),
    border-color var(--motion-duration-base) var(--motion-ease);
}
.card:hover,
.medicine-card:hover,
.product-card:hover,
.pharmacy-card:hover,
.doctor-card:hover,
.treatment-card:hover,
.banner-card:hover,
.medicine-selection-ui .medicine-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

/* Selected medicine card — subtle pulse glow */
.medicine-selection-ui .medicine-card.selected {
  transition:
    transform var(--motion-duration-base) var(--motion-ease),
    box-shadow var(--motion-duration-base) var(--motion-ease),
    border-color var(--motion-duration-base) var(--motion-ease);
}

/* -- 5. Image zoom on hover (inside cards only) ---------------- */
.card .card-image img,
.product-card .card-image img,
.medicine-image,
.medicine-image-container img {
  transition: transform var(--motion-duration-slow) var(--motion-ease);
}
.card:hover .card-image img,
.product-card:hover .card-image img,
.medicine-card:hover .medicine-image,
.medicine-card:hover .medicine-image-container img {
  transform: scale(1.04);
}

/* Image container needs overflow hidden for the zoom to clip cleanly */
.card .card-image,
.product-card .card-image,
.medicine-image-container {
  overflow: hidden;
}

/* -- 6. Anchors / nav links: gentle color transition ----------- */
a,
.nav-link,
.menu-label-wrapper {
  transition:
    color var(--motion-duration-base) var(--motion-ease),
    opacity var(--motion-duration-base) var(--motion-ease);
}

/* -- 7. Form inputs: focus border + shadow --------------------- */
input,
select,
textarea {
  transition:
    border-color var(--motion-duration-base) var(--motion-ease),
    box-shadow var(--motion-duration-base) var(--motion-ease),
    background-color var(--motion-duration-base) var(--motion-ease);
}
input:focus,
select:focus,
textarea:focus {
  box-shadow: 0 0 0 3px rgba(138, 72, 255, 0.12);
}

/* -- 8. Produkttyp chip filter (medicine selection page) ------- */
.produkttyp-chip {
  transition:
    transform var(--motion-duration-base) var(--motion-ease),
    border-color var(--motion-duration-base) var(--motion-ease),
    background-color var(--motion-duration-base) var(--motion-ease),
    box-shadow var(--motion-duration-base) var(--motion-ease);
}
.produkttyp-chip:hover {
  transform: translateY(-1px);
}
.produkttyp-chip:active {
  transform: scale(0.97);
  transition-duration: var(--motion-duration-fast);
}
.produkttyp-chip.active .produkttyp-chip-icon {
  animation: produkttyp-icon-pop var(--motion-duration-slow) var(--motion-ease-bounce);
}
@keyframes produkttyp-icon-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* -- 9. Quantity stepper buttons ------------------------------- */
.qty-btn,
.quantity-stepper .qty-btn {
  transition:
    transform var(--motion-duration-fast) var(--motion-ease),
    background-color var(--motion-duration-base) var(--motion-ease);
}
.qty-btn:active {
  transform: scale(0.88);
}

/* -- 10. Skeleton loader: improve the fade-in -- */
#global-skeleton-loader {
  transition: opacity 320ms var(--motion-ease);
}

/* -- 11. Utility class for scroll-fade-in (Blade can apply) ---- */
.motion-fade-in {
  animation: motion-fade-in-up 420ms var(--motion-ease) both;
}
@keyframes motion-fade-in-up {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Utility class with a stagger delay — apply with inline style="animation-delay: 100ms" */
.motion-fade-in-delayed {
  animation: motion-fade-in-up 420ms var(--motion-ease) both;
  animation-delay: 80ms;
}

/* -- 12. Page-level entrance (applied to main content) --------- */
.main-content > section,
main > section {
  animation: motion-section-in 380ms var(--motion-ease) both;
}
@keyframes motion-section-in {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* But not for the questionnaire wizard (would feel janky during step nav) */
.medicine-selection-ui section,
.questionnaire-wizard section {
  animation: none;
}

/* -- 13. Sticky nav: shrink + shadow on scroll (works with JS) - */
.site-header.scrolled,
header.scrolled {
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}
.site-header,
header {
  transition:
    box-shadow var(--motion-duration-base) var(--motion-ease),
    background-color var(--motion-duration-base) var(--motion-ease);
}

/* -- 14. Dropdown / mobile menu reveal ------------------------- */
.dropdown-menu,
#profileDropdown,
.sidebar-panel {
  transition:
    opacity var(--motion-duration-base) var(--motion-ease),
    transform var(--motion-duration-base) var(--motion-ease);
}

/* -- 15. Don't double-animate elements that already use Slick -- */
.slick-slide,
.slick-track,
.slick-list * {
  /* leave Slick's own transitions alone */
}