/* ==========================================================================
   METABOLIC MAYHEM / DIAGNOSTIC EXAM - WEBAPP ANIMATIONS & MICRO-INTERACTIONS
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base & Page Transition Keyframes
   -------------------------------------------------------------------------- */
@keyframes mmFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mmFadeInScale {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes mmPulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(184, 58, 75, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(184, 58, 75, 0);
  }
}

@keyframes mmAmberPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(233, 131, 0, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(233, 131, 0, 0);
  }
}

@keyframes mmGreenPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 133, 102, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(0, 133, 102, 0);
  }
}

@keyframes mmHighlightFlash {
  0% {
    background-color: rgba(184, 58, 75, 0.18);
    transform: scale(1.01);
  }
  100% {
    background-color: transparent;
    transform: scale(1);
  }
}

@keyframes mmBadgeBeacon {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.35);
    opacity: 0.3;
  }
  100% {
    transform: scale(1);
    opacity: 0.9;
  }
}

/* --------------------------------------------------------------------------
   2. Interactive Buttons & Actions
   -------------------------------------------------------------------------- */
button,
a.inline-flex,
.btn-interactive,
input[type="submit"] {
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}

/* Button hover lift */
button:not(:disabled):hover,
a.inline-flex:not([disabled]):hover {
  transform: translateY(-1.5px);
}

/* Button active press */
button:not(:disabled):active,
a.inline-flex:not([disabled]):active {
  transform: scale(0.975) translateY(0);
}

/* Primary cobalt button special sheen */
.bg-cobalt-600:hover,
.bg-cobalt-500:hover {
  box-shadow: 0 4px 14px -2px rgba(184, 58, 75, 0.35);
}

/* Clay accent button sheen */
.bg-clay-500:hover,
.bg-clay-600:hover {
  box-shadow: 0 4px 14px -2px rgba(233, 131, 0, 0.35);
}

/* Green success button sheen */
.bg-green-600:hover,
.bg-green-500:hover {
  box-shadow: 0 4px 14px -2px rgba(0, 133, 102, 0.35);
}

/* Red danger button sheen */
.bg-red-600:hover,
.bg-red-700:hover {
  box-shadow: 0 4px 14px -2px rgba(229, 8, 8, 0.35);
}

/* --------------------------------------------------------------------------
   3. Card & Tile Micro-Interactions
   -------------------------------------------------------------------------- */
.bg-paper {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.2s ease;
}

/* Subtle elevation on cards when hovered */
.grid > div.bg-paper:hover,
#catalog-grid > div:hover,
.space-y-6 > div.bg-paper:hover {
  box-shadow: 0 8px 24px -4px rgba(46, 45, 41, 0.07);
}

/* Patient Card specific smooth hover */
.grid > div.bg-paper.rounded-3xl {
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.2s ease;
}

.grid > div.bg-paper.rounded-3xl:hover {
  transform: translateY(-2px);
}

/* Table rows smooth hover */
tr {
  transition: background-color 0.15s ease;
}

/* --------------------------------------------------------------------------
   4. HTMX Transitions & Real-time Swap Animations
   -------------------------------------------------------------------------- */
.htmx-swapping {
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

.htmx-settling {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.2s ease-in, transform 0.2s ease-in;
}

.htmx-added {
  animation: mmHighlightFlash 1.2s ease-out;
}

#patient-tab-content {
  animation: mmFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth progress bars */
.h-full.rounded-lg,
.h-full.rounded-full {
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --------------------------------------------------------------------------
   5. Tour Trigger & Guide Beacon UI
   -------------------------------------------------------------------------- */
.tour-beacon {
  position: relative;
}

.tour-beacon::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: #E98300;
  box-shadow: 0 0 0 2px #820000;
  animation: mmBadgeBeacon 2s infinite ease-in-out;
}

/* Tour Launcher Modal / Dropdown */
.tour-menu-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(46, 45, 41, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: mmFadeIn 0.2s ease-out;
}

.tour-menu-modal {
  background: #FFFFFF;
  border: 1px solid #EAEAEA;
  border-radius: 24px;
  padding: 1.75rem;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 24px 64px -8px rgba(46, 45, 41, 0.25);
  animation: mmFadeInScale 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.tour-menu-modal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #B83A4B 0%, #E98300 100%);
}

/* --------------------------------------------------------------------------
   10. Oregon Trail Animations & Stamp Micro-Interactions
   -------------------------------------------------------------------------- */
@keyframes wagonBob {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-3.5px) rotate(-1.5deg);
  }
  75% {
    transform: translateY(-1.5px) rotate(1.5deg);
  }
}

@keyframes stampPop {
  0% {
    transform: scale(0.6) rotate(-15deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.15) rotate(4deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(-2deg);
    opacity: 1;
  }
}

@keyframes trailPulseGlow {
  0%, 100% {
    filter: drop-shadow(0 0 2px rgba(0, 133, 102, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(0, 133, 102, 0.8));
  }
}

.animate-wagon-bob {
  animation: wagonBob 3s ease-in-out infinite;
  transform-origin: bottom center;
}

.animate-stamp-pop {
  animation: stampPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.trail-line-active {
  animation: trailPulseGlow 3s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   6. Custom Theme for Driver.js Popovers
   -------------------------------------------------------------------------- */
.driver-popover.mm-driver-popover {
  background-color: #FFFFFF !important;
  color: #43423E !important;
  border: 1px solid #EAEAEA !important;
  border-radius: 20px !important;
  padding: 1.5rem 1.5rem 1.25rem 1.5rem !important;
  box-shadow: 0 20px 50px -10px rgba(46, 45, 41, 0.28), 0 0 0 1px rgba(46, 45, 41, 0.05) !important;
  max-width: 380px !important;
  font-family: 'Figtree', sans-serif !important;
  animation: mmFadeInScale 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  position: relative !important;
}

/* Popover header badge / accent stripe */
.driver-popover.mm-driver-popover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.5rem;
  right: 1.5rem;
  height: 3px;
  background-color: #B83A4B;
  border-radius: 0 0 4px 4px;
}

/* Popover Title */
.driver-popover.mm-driver-popover .driver-popover-title {
  font-family: 'Gabarito', 'Figtree', sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #2E2D29 !important;
  line-height: 1.3 !important;
  margin-bottom: 0.5rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

/* Popover Description */
.driver-popover.mm-driver-popover .driver-popover-description {
  font-family: 'Figtree', sans-serif !important;
  font-size: 0.875rem !important;
  line-height: 1.55 !important;
  color: #6D6C69 !important;
  margin-bottom: 1.25rem !important;
}

.driver-popover.mm-driver-popover .driver-popover-description strong {
  color: #2E2D29 !important;
  font-weight: 600 !important;
}

/* Popover Close Button */
.driver-popover.mm-driver-popover .driver-popover-close-btn {
  position: absolute !important;
  top: 0.85rem !important;
  right: 0.85rem !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 10px !important;
  background: #F4F4F4 !important;
  color: #767674 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.driver-popover.mm-driver-popover .driver-popover-close-btn:hover {
  background: #EAEAEA !important;
  color: #2E2D29 !important;
  transform: scale(1.08) !important;
}

/* Popover Footer */
.driver-popover.mm-driver-popover .driver-popover-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-top: 1px solid #F4F4F4 !important;
  padding-top: 0.85rem !important;
  margin-top: 0.25rem !important;
}

/* Progress text pill */
.driver-popover.mm-driver-popover .driver-popover-progress-text {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.725rem !important;
  font-weight: 600 !important;
  color: #767674 !important;
  background: #F4F4F4 !important;
  padding: 0.25rem 0.6rem !important;
  border-radius: 9999px !important;
  letter-spacing: 0.02em !important;
}

/* Navigation buttons */
.driver-popover.mm-driver-popover .driver-popover-navigation-btns {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

/* Prev button */
.driver-popover.mm-driver-popover .driver-popover-prev-btn {
  background: #F4F4F4 !important;
  color: #6D6C69 !important;
  border: 1px solid #EAEAEA !important;
  border-radius: 12px !important;
  padding: 0.4rem 0.85rem !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-shadow: none !important;
}

.driver-popover.mm-driver-popover .driver-popover-prev-btn:hover {
  background: #EAEAEA !important;
  color: #2E2D29 !important;
}

.driver-popover.mm-driver-popover .driver-popover-prev-btn[disabled] {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* Next / Done button */
.driver-popover.mm-driver-popover .driver-popover-next-btn {
  background: #B83A4B !important;
  color: #FFFFFF !important;
  border: 1px solid #8C1515 !important;
  border-radius: 12px !important;
  padding: 0.4rem 0.95rem !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 6px rgba(184, 58, 75, 0.25) !important;
  text-shadow: none !important;
}

.driver-popover.mm-driver-popover .driver-popover-next-btn:hover {
  background: #8C1515 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(184, 58, 75, 0.35) !important;
}

/* Driver Highlight Stage & Outline */
.driver-stage {
  border-radius: 16px !important;
  box-shadow: 0 0 0 3px rgba(184, 58, 75, 0.7), 0 0 24px rgba(184, 58, 75, 0.35) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Driver Popover Arrow Styling */
.driver-popover-arrow-side-top {
  border-top-color: #FFFFFF !important;
}
.driver-popover-arrow-side-bottom {
  border-bottom-color: #FFFFFF !important;
}
.driver-popover-arrow-side-left {
  border-left-color: #FFFFFF !important;
}
.driver-popover-arrow-side-right {
  border-right-color: #FFFFFF !important;
}