/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Custom Animations for Landing Page */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(20, 184, 166, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(20, 184, 166, 0.6);
  }
}

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out forwards;
}

.animate-fade-in {
  animation: fade-in 0.4s ease-out forwards;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-pulse-glow {
  animation: pulse-glow 3s ease-in-out infinite;
}

.bg-gradient-animated {
  background-size: 200% 200%;
  animation: gradient-shift 15s ease infinite;
}

/* Smooth Scroll */
html {
  scroll-behavior: smooth;
}

/* Client Branding (CSS variable driven) */
:root {
  --client-primary-color: #0f766e;
}

.text-client-primary {
  color: var(--client-primary-color);
}

.border-client-primary {
  border-color: var(--client-primary-color);
}

.bg-client-primary {
  background-color: var(--client-primary-color);
}

.bg-client-primary-soft {
  background-color: color-mix(in srgb, var(--client-primary-color) 12%, white);
}

.text-client-primary-strong {
  color: color-mix(in srgb, var(--client-primary-color) 92%, black);
}

.border-client-primary-soft {
  border-color: color-mix(in srgb, var(--client-primary-color) 25%, white);
}

.hover\\:bg-client-primary:hover {
  background-color: color-mix(in srgb, var(--client-primary-color) 88%, black);
}

.btn-client-primary {
  background-color: var(--client-primary-color);
}

.btn-client-primary:hover {
  background-color: color-mix(in srgb, var(--client-primary-color) 88%, black);
}

.btn-client-primary:focus-visible {
  outline: 2px solid var(--client-primary-color);
  outline-offset: 2px;
}

/*
  Make SVG icons that rely on currentColor automatically pick up the
  client primary color, unless a more specific color (e.g. Tailwind text-*)
  is applied.
*/
.client-branding :where(svg[stroke="currentColor"], svg[fill="currentColor"]) {
  color: var(--client-primary-color);
}

/* In buttons/areas with white text, icons should follow the text color */
.client-branding :where(.text-white) :where(svg[stroke="currentColor"], svg[fill="currentColor"]) {
  color: inherit;
}

.btn-client-primary :where(svg[stroke="currentColor"], svg[fill="currentColor"]) {
  color: inherit;
}

.client-branding :where(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--client-primary-color);
}

.file-client-primary::file-selector-button {
  background: color-mix(in srgb, var(--client-primary-color) 12%, white);
  color: color-mix(in srgb, var(--client-primary-color) 92%, black);
}

.file-client-primary::file-selector-button:hover {
  background: color-mix(in srgb, var(--client-primary-color) 18%, white);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: var(--client-primary-color);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--client-primary-color) 88%, black);
}

/* Client-branded scrollbars (where supported) */
.client-branding {
  scrollbar-color: var(--client-primary-color) #f1f1f1; /* Firefox */
  scrollbar-width: thin; /* Firefox */
}

.client-branding ::-webkit-scrollbar-thumb {
  background: var(--client-primary-color);
}

.client-branding ::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--client-primary-color) 88%, black);
}