/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
}

/* Joe's Color System */
:root {
  --nav-height: 64px;
  --joe-success: #22c55e;
  --joe-warning: #f59e0b;
  --joe-danger: #ef4444;
  --joe-info: #3b82f6;
  --joe-light: #d1d5db;
}

/* Semantic Flash Message Classes */
.alert-success {
  @apply bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800/30 text-green-800 dark:text-green-200 px-4 py-3 rounded-md mb-4;
}

.alert-error {
  @apply bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800/30 text-red-800 dark:text-red-200 px-4 py-3 rounded-md mb-4;
}

.alert-warning {
  @apply bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800/30 text-yellow-800 dark:text-yellow-200 px-4 py-3 rounded-md mb-4;
}

.alert-info {
  @apply bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800/30 text-blue-800 dark:text-blue-200 px-4 py-3 rounded-md mb-4;
}

/* Responsive Design */
@media (max-width: 600px) {
  .responsive-text {
    display: none;
  }
}

/* Navbar opacity - matches mobile menu when open (CSS-only, no JS needed) */
#mainNav:has(#mobileMenu:not(.hidden)) {
  background-color: rgb(255 255 255 / 0.9);
}
.dark #mainNav:has(#mobileMenu:not(.hidden)) {
  background-color: rgb(31 41 55 / 0.9);
}

/* Fonts */
header, h1, h2, h3, h4, h5, h6 { font-family: 'Outfit', sans-serif; font-weight: 700; }
body { font-family: 'Lexend', sans-serif; }

/* Custom Scrollbar Styles */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

.custom-scrollbar::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Dark mode scrollbar */
.dark .custom-scrollbar {
  scrollbar-color: #475569 #1e293b;
}

.dark .custom-scrollbar::-webkit-scrollbar-track {
  background: #1e293b;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background: #475569;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* Utility class for vertical scrolling with custom scrollbar */
.scroll-y {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

.scroll-y::-webkit-scrollbar {
  width: 8px;
}

.scroll-y::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.scroll-y::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.scroll-y::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Dark mode for scroll-y */
.dark .scroll-y {
  scrollbar-color: #475569 #1e293b;
}

.dark .scroll-y::-webkit-scrollbar-track {
  background: #1e293b;
}

.dark .scroll-y::-webkit-scrollbar-thumb {
  background: #475569;
}

.dark .scroll-y::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* Hide scrollbars for mobile tab navigation */
.scrollbar-hide {
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Safari and Chrome */
}

/* Mobile tab navigation optimizations */
@media (max-width: 640px) {
  .mobile-tab-optimized {
    font-size: 0.875rem; /* text-sm */
    padding-left: 0.5rem; /* px-2 */
    padding-right: 0.5rem; /* px-2 */
  }

  /* Ensure touch targets are at least 44px */
  .mobile-tab-optimized button {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Import Administrate overrides to match site design */
@import "administrate_overrides.css";

/* For dark mode, invert the calendar icon */
.dark input,
.dark select,
.dark textarea {
  color-scheme: dark;
}

/* Agent Tools Code Viewer - Override Prism font size */
[data-tool-viewer-target="code"] {
  font-size: 0.75rem !important; /* text-xs = 0.75rem */
  line-height:1;
}

/* Social Media Icons Hover Effects */
.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}

.social-facebook:hover {
  background: linear-gradient(135deg, #1877F2 0%, #42A5F5 100%);
  transform: rotate(-8deg);
}

.social-x:hover {
  background: linear-gradient(135deg, #000000 0%, #333333 100%);
  transform: rotate(8deg);
}

.social-instagram:hover {
  background: linear-gradient(135deg, #E1306C 0%, #F56040 50%, #F77737 100%);
  transform: rotate(-8deg);
}

/* Turbo Frame Error Styling (dark mode aware) */
.turbo-frame-error {
  @apply text-red-700 dark:text-red-300;
}

/* ===========================================
   PROSE CONTENT STYLING
   For markdown content (bug reports, comments, etc.)
   No @apply - explicit CSS for reliability
   =========================================== */

/* Inline code */
.prose code {
  background-color: rgb(229 231 235);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: rgb(31 41 55);
}
.dark .prose code {
  background-color: rgb(55 65 81);
  color: rgb(229 231 235);
}

/* Code blocks */
.prose pre {
  background-color: rgb(17 24 39);
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 1rem 0;
}
.prose pre code {
  background-color: transparent;
  padding: 0;
  color: rgb(243 244 246);
  font-size: 0.875rem;
  line-height: 1.625;
}

/* Links - blue in both modes */
.prose a {
  color: rgb(37 99 235);
  word-break: break-all;
}
.prose a:hover { text-decoration: underline; }
.dark .prose a { color: rgb(96 165 250); }

/* Headings */
.prose h2 {
  font-size: 1.125rem;
  font-weight: 600;
  color: rgb(17 24 39);
  margin: 1.5rem 0 0.75rem;
}
.prose h3 {
  font-size: 1rem;
  font-weight: 600;
  color: rgb(17 24 39);
  margin: 1rem 0 0.5rem;
}
.dark .prose h2,
.dark .prose h3 { color: white; }

/* Lists - indented with markers */
.prose ul, .prose ol {
  margin: 0.75rem 0;
  padding-left: 1.5rem;
}
.prose ul { list-style-type: disc; }
.prose ol { list-style-type: decimal; }
.prose li {
  margin-bottom: 0.375rem;
  padding-left: 0.25rem;
  color: rgb(55 65 81);
}
.dark .prose li { color: rgb(209 213 219); }

/* Paragraphs */
.prose p { margin-bottom: 0.75rem; }

/* Horizontal rule */
.prose hr {
  margin: 1.5rem 0;
  border-color: rgb(229 231 235);
}
.dark .prose hr { border-color: rgb(55 65 81); }

/* Bold text */
.prose strong {
  font-weight: 600;
  color: rgb(17 24 39);
}
.dark .prose strong { color: white; }

/* Blockquotes */
.prose blockquote {
  border-left: 4px solid rgb(209 213 219);
  padding-left: 1rem;
  font-style: italic;
  color: rgb(75 85 99);
  margin: 1rem 0;
}
.dark .prose blockquote {
  border-left-color: rgb(75 85 99);
  color: rgb(156 163 175);
}

/* Google Translate Widget Styling - Hide default banners and style to match footer */
.goog-te-banner-frame {
  display: none !important;
}

/* Offset sticky nav when Google Translate banner is showing */
html.translated-ltr nav.sticky,
html.translated-rtl nav.sticky {
  top: 40px !important;
}

.goog-te-footer {
  display: none !important;
}

.goog-te-gadget {
  font-family: inherit !important;
  font-size: 0.875rem !important;
  color: rgb(107 114 128) !important;
}

.dark .goog-te-gadget {
  color: rgb(156 163 175) !important;
}

.goog-te-combo {
  background-color: transparent !important;
  border: none !important;
  color: rgb(107 114 128) !important;
  font-size: 0.875rem !important;
  padding: 0.25rem 0.5rem !important;
  cursor: pointer !important;
  outline: none !important;
  font-family: inherit !important;
}

.dark .goog-te-combo {
  color: rgb(156 163 175) !important;
}

.goog-te-combo:hover {
  color: rgb(17 24 39) !important;
}

.dark .goog-te-combo:hover {
  color: rgb(229 231 235) !important;
}

/* New Google Translate widget (uses link instead of select) */
.goog-te-gadget-simple {
  background-color: transparent !important;
  border: none !important;
  font-size: 0.875rem !important;
  padding: 0 !important;
}

.goog-te-gadget-simple a {
  color: rgb(107 114 128) !important;
  text-decoration: none !important;
  font-size: 0.875rem !important;
}

.dark .goog-te-gadget-simple a {
  color: rgb(156 163 175) !important;
}

.goog-te-gadget-simple a:hover {
  color: rgb(17 24 39) !important;
}

.dark .goog-te-gadget-simple a:hover {
  color: rgb(229 231 235) !important;
}

/* Hide Google branding image */
.goog-te-gadget-simple img {
  display: none !important;
}

/* Hide dropdown arrow styling issues */
.goog-te-gadget-simple span[style*="border-left"] {
  display: none !important;
}

/* Icon defaults - only apply when no explicit color class is present */
.icon:not([class*="text-"]) {
  @apply text-gray-600 dark:text-gray-400;
}

/* Lucide icon placeholder - prevents flash of blank icons before JS loads
   Shows a subtle rounded square that matches the icon dimensions (via Tailwind w-X h-X classes) */
i[data-lucide] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: currentColor;
  opacity: 0.12;
  border-radius: 0.25rem;
  vertical-align: middle;
}

/* Once Lucide converts to SVG, show the real icon */
svg[data-lucide] {
  background: transparent;
  opacity: 1;
}

/* Three-state dark mode icon visibility (controlled by data-theme-mode on <html>) */
.theme-icon-light, .theme-icon-dark, .theme-icon-system { display: none; }
html[data-theme-mode="light"] .theme-icon-light { display: block; }
html[data-theme-mode="dark"] .theme-icon-dark { display: block; }
html[data-theme-mode="system"] .theme-icon-system { display: block; }
/* Fallback: show light icon when no mode set (default) */
html:not([data-theme-mode]) .theme-icon-light { display: block; }

/* Confidence Bar Calculation Animation */
/* Creates a noticeable swaying effect that shows active calculations */
@keyframes confidence-calculating {
  0%, 100% {
    transform: scaleX(1);
    opacity: 1;
  }
  20% {
    transform: scaleX(1.08);
    opacity: 0.9;
  }
  40% {
    transform: scaleX(0.94);
    opacity: 1;
  }
  60% {
    transform: scaleX(1.05);
    opacity: 0.92;
  }
  80% {
    transform: scaleX(0.97);
    opacity: 1;
  }
}

[data-onboarding-estimate-display-target="confidenceBar"] {
  animation: confidence-calculating 2.5s ease-in-out infinite;
  transform-origin: left;
  will-change: transform;
}

/* Dialog Modal Centering & Animation */
/* Matches both Turbo Stream modals (data-controller on dialog) and inline modals (data-dialog-target) */
dialog[data-controller="dialog"],
dialog[data-dialog-target="modal"] {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 60; /* Above navbar (z-50) and backdrop (z-50) */
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}

/* Dialog entry animation - starts hidden and scaled down */
dialog[data-controller="dialog"]:not(.dialog-open),
dialog[data-dialog-target="modal"]:not(.dialog-open) {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.95);
}

/* Dialog open state - visible and full scale */
dialog[data-controller="dialog"].dialog-open,
dialog[data-dialog-target="modal"].dialog-open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Dialog exit animation */
dialog[data-controller="dialog"].dialog-closing,
dialog[data-dialog-target="modal"].dialog-closing {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.95);
}

/* Clean FAQ details markers */
details summary {
  list-style: none;
}

details summary::-webkit-details-marker {
  display: none;
}

/* ===========================================
   LOADING STATE (aria-busy)
   Reusable loading pattern for any container.
   Usage: element.setAttribute('aria-busy', 'true')
   Note: Excludes html/body to prevent full-page blocking
   =========================================== */
[aria-busy="true"]:not(html):not(body) {
  position: relative;
  pointer-events: none;
}

[aria-busy="true"]:not(html):not(body) > * {
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

/* Optional: Add subtle pulse animation */
[aria-busy="true"][data-loading-pulse] > * {
  animation: loading-pulse 1.5s ease-in-out infinite;
}

@keyframes loading-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.35; }
}

/* Loading spinner overlay (opt-in with data-loading-spinner) */
[aria-busy="true"][data-loading-spinner]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.75rem 0 0 -0.75rem;
  border: 2px solid rgb(209 213 219);
  border-top-color: rgb(59 130 246);
  border-radius: 50%;
  animation: loading-spin 0.6s linear infinite;
  z-index: 10;
}

.dark [aria-busy="true"][data-loading-spinner]::after {
  border-color: rgb(75 85 99);
  border-top-color: rgb(96 165 250);
}

@keyframes loading-spin {
  to { transform: rotate(360deg); }
}

/* TOM SELECT - Clean overrides for body-appended dropdown */

/* Control styling */
.ts-wrapper.single .ts-control {
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  border-radius: 0.375rem;
  cursor: pointer;
  position: relative;
}

/* Custom dropdown arrow */
.ts-wrapper.single .ts-control::after {
  content: '';
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-top: 6px solid rgb(156 163 175);
  border-bottom: 0;
  transition: transform 0.2s ease;
  pointer-events: none;
}

.ts-wrapper.single.dropdown-active .ts-control::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Dropdown positioning (body-appended via dropdownParent: 'body') */
.ts-dropdown {
  z-index: 9999;
}

/* Dropdown content scrolling */
.ts-dropdown .ts-dropdown-content {
  max-height: 20rem;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

/* Selected item display */
.ts-control .item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Dark mode - wrapper styles (must override CDN's .input-active specificity) */
.ts-wrapper.ts-dark .ts-control,
.ts-wrapper.ts-dark.input-active .ts-control,
.ts-wrapper.ts-dark.focus .ts-control,
.ts-wrapper.ts-dark.dropdown-active .ts-control {
  background: rgb(31 41 55);
  border-color: rgb(75 85 99);
  color: white;
}

/* Dark mode - dropdown (supports body-appended via .ts-dark class) */
.ts-wrapper.ts-dark .ts-dropdown,
.ts-dropdown.ts-dark {
  background: rgb(31 41 55);
  border-color: rgb(55 65 81);
}

.ts-wrapper.ts-dark .option:hover,
.ts-wrapper.ts-dark .option.active,
.ts-dropdown.ts-dark .option:hover,
.ts-dropdown.ts-dark .option.active {
  background: rgb(55 65 81);
}

.ts-wrapper.ts-dark .option.selected,
.ts-dropdown.ts-dark .option.selected {
  background: rgb(55 65 81);
}

/* Custom slow-spin animation for in-progress credit/commission states */
@layer utilities {
  @keyframes slow-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .animate-slow-spin {
    animation: slow-spin 4s linear infinite;
  }
}

/* ===========================================
   CUSTOM RANGE SLIDER
   Modern, accessible range input with brand teal accent
   =========================================== */
.range-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.75rem; /* 12px track height */
  border-radius: 9999px;
  background: rgb(229 231 235); /* gray-200 */
  cursor: pointer;
  outline: none;
}

.dark .range-slider {
  background: rgb(55 65 81); /* gray-700 */
}

/* Webkit (Chrome, Safari, Edge) - Track */
.range-slider::-webkit-slider-runnable-track {
  height: 0.75rem;
  border-radius: 9999px;
  background: transparent;
}

/* Webkit - Thumb */
.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.75rem; /* 28px thumb */
  height: 1.75rem;
  border-radius: 9999px;
  background: #2EC4A6; /* Brand teal (green-500) */
  border: 3px solid white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  margin-top: -0.5rem; /* Center thumb on track */
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  background: #009476; /* Brand teal darker (green-600) */
}

.range-slider::-webkit-slider-thumb:active {
  transform: scale(1.05);
}

.dark .range-slider::-webkit-slider-thumb {
  border-color: rgb(31 41 55); /* gray-800 */
  background: #2EC4A6; /* Brand teal */
}

/* Firefox - Track */
.range-slider::-moz-range-track {
  height: 0.75rem;
  border-radius: 9999px;
  background: rgb(229 231 235);
}

.dark .range-slider::-moz-range-track {
  background: rgb(55 65 81);
}

/* Firefox - Thumb */
.range-slider::-moz-range-thumb {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: #2EC4A6; /* Brand teal (green-500) */
  border: 3px solid white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.range-slider::-moz-range-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  background: #009476; /* Brand teal darker (green-600) */
}

.dark .range-slider::-moz-range-thumb {
  border-color: rgb(31 41 55);
  background: #2EC4A6; /* Brand teal */
}

/* Focus state for accessibility */
.range-slider:focus-visible {
  outline: 2px solid #2EC4A6; /* Brand teal */
  outline-offset: 2px;
}

.dark .range-slider:focus-visible {
  outline-color: #2EC4A6; /* Brand teal */
}

/* ===========================================
   ANIMATED ICONS
   CSS animations for Lucide icons via icon_tag helper
   Usage: icon_tag("bell", animate: :ring, loop: true)
   =========================================== */

/* Ring/shake - bell notification effect */
@keyframes icon-ring {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-12deg); }
  30% { transform: rotate(10deg); }
  40% { transform: rotate(-8deg); }
  50% { transform: rotate(6deg); }
  60% { transform: rotate(-4deg); }
  70% { transform: rotate(2deg); }
  80% { transform: rotate(-1deg); }
  100% { transform: rotate(0deg); }
}

/* Pulse - heartbeat/attention effect */
@keyframes icon-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.85; }
}

/* Bounce - playful bounce */
@keyframes icon-bounce {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-20%); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-10%); }
}

/* Spin - loading/processing */
@keyframes icon-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Wiggle - playful side-to-side */
@keyframes icon-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}

/* Float - gentle hovering effect */
@keyframes icon-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8%); }
}

/* Pop - scale entrance */
@keyframes icon-pop {
  0% { transform: scale(0.5); opacity: 0; }
  70% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Shake - horizontal shake */
@keyframes icon-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* Tada - attention-grabbing entrance */
@keyframes icon-tada {
  0% { transform: scale(1) rotate(0deg); }
  10%, 20% { transform: scale(0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
  40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Animation classes - single play */
.icon-animate-ring { animation: icon-ring 0.8s ease-in-out; }
.icon-animate-pulse { animation: icon-pulse 0.6s ease-in-out; }
.icon-animate-bounce { animation: icon-bounce 0.6s ease-in-out; }
.icon-animate-spin { animation: icon-spin 1s linear; }
.icon-animate-wiggle { animation: icon-wiggle 0.5s ease-in-out; }
.icon-animate-float { animation: icon-float 2s ease-in-out; }
.icon-animate-pop { animation: icon-pop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.icon-animate-shake { animation: icon-shake 0.6s ease-in-out; }
.icon-animate-tada { animation: icon-tada 0.8s ease-in-out; }

/* Loop modifier - continuous animation */
.icon-animate-ring.icon-loop { animation: icon-ring 1.5s ease-in-out infinite; }
.icon-animate-pulse.icon-loop { animation: icon-pulse 1.5s ease-in-out infinite; }
.icon-animate-bounce.icon-loop { animation: icon-bounce 1s ease-in-out infinite; }
.icon-animate-spin.icon-loop { animation: icon-spin 1s linear infinite; }
.icon-animate-wiggle.icon-loop { animation: icon-wiggle 1s ease-in-out infinite; }
.icon-animate-float.icon-loop { animation: icon-float 3s ease-in-out infinite; }
.icon-animate-shake.icon-loop { animation: icon-shake 1s ease-in-out infinite; }
.icon-animate-tada.icon-loop { animation: icon-tada 1.5s ease-in-out infinite; }

/* Hover modifier - animate on hover only */
.icon-animate-hover { animation: none !important; }
.icon-animate-hover:hover.icon-animate-ring { animation: icon-ring 0.8s ease-in-out; }
.icon-animate-hover:hover.icon-animate-pulse { animation: icon-pulse 0.6s ease-in-out; }
.icon-animate-hover:hover.icon-animate-bounce { animation: icon-bounce 0.6s ease-in-out; }
.icon-animate-hover:hover.icon-animate-spin { animation: icon-spin 1s linear; }
.icon-animate-hover:hover.icon-animate-wiggle { animation: icon-wiggle 0.5s ease-in-out; }
.icon-animate-hover:hover.icon-animate-float { animation: icon-float 2s ease-in-out; }
.icon-animate-hover:hover.icon-animate-pop { animation: icon-pop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.icon-animate-hover:hover.icon-animate-shake { animation: icon-shake 0.6s ease-in-out; }
.icon-animate-hover:hover.icon-animate-tada { animation: icon-tada 0.8s ease-in-out; }

/* Viewport modifier - animate when scrolled into view (paused until observed) */
.icon-animate-viewport {
  animation-play-state: paused;
}
.icon-animate-viewport.icon-in-view {
  animation-play-state: running;
}