:root {
  --color-primary: #005460;
  --color-primary-rgb: 0, 84, 96;
  --color-secondary: #36656d;
  --color-tertiary: #6e4212;
  --color-background: #f9f9fa;
  --color-surface: #f9f9fa;
  --color-on-background: #1a1c1d;
  --color-on-surface: #1a1c1d;
  --color-on-surface-variant: #3f484a;
  --color-outline-variant: #bfc8cb;
  --color-surface-ice: #F4FAFB;
  --color-surface-variant: #e2e2e3;
  --color-primary-container: #226d7a;
  --color-secondary-container: #b8e8f1;
  --color-tertiary-container: #8a5928;
  --color-primary-fixed: #a9edfc;
  --color-secondary-fixed: #bbebf4;
  --color-tertiary-fixed: #ffdcc0;
}

body {
  background-color: var(--color-background); /* colors.background / colors.surface */
  color: var(--color-on-background); /* colors.on-background / colors.on-surface */
}

/* Material symbols variations */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.fill,
.material-symbols-outlined[data-weight="fill"] {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Glassmorphic utilities */
.glass-panel {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(224, 231, 233, 0.5);
  box-shadow: 0 10px 20px -5px rgba(var(--color-primary-rgb), 0.04);
}

.text-gradient {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    90deg,
    var(--color-primary), /* primary */
    var(--color-secondary)  /* secondary */
  );
}

/* Shadows and animations */
.ambient-shadow {
  box-shadow: 0 10px 20px -4px rgba(var(--color-primary-rgb), 0.04);
}

.ambient-shadow-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ambient-shadow-hover:hover {
  box-shadow: 0 15px 30px -5px rgba(var(--color-primary-rgb), 0.08);
  transform: translateY(-2px);
}

/* Form Styles */
.form-input-thick-label {
  display: block;
  width: 100%;
  background-color: transparent;
  border-width: 0;
  border-bottom-width: 1px;
  border-color: var(--color-outline-variant); /* outline-variant */
  padding-left: 0;
  padding-right: 0;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--color-on-surface); /* on-surface */
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.form-input-thick-label:focus {
  border-color: var(--color-primary); /* primary */
  outline: none;
  box-shadow: none;
}

.form-label-thick {
  display: block;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--color-on-surface-variant); /* on-surface-variant */
  margin-bottom: 0.25rem;
}

/* Theme color overlay filter for brand logo */
img[alt="Lend Craft Mortgage Logo"] {
  filter: url(#logo-theme-filter);
  -webkit-filter: url(#logo-theme-filter);
}

/* Infinite Scrolling Marquee */
.marquee-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 1.5rem 0;
  display: flex;
}
.marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: marquee-scroll 25s linear infinite;
}
.marquee-track:hover {
  animation-play-state: paused;
}
@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.marquee-item {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 3rem;
}

/* Custom Video Player & Animations */
.video-container {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  transition: transform 0.5s ease;
}
.video-container:hover {
  transform: scale(1.005);
}
.video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
  z-index: 10;
}
.video-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}
.play-btn-pulse {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  background: var(--color-primary);
  color: #ffffff;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease;
  box-shadow: 0 10px 20px rgba(0, 84, 96, 0.3);
  border: 3px solid rgba(255, 255, 255, 0.9);
}
.play-btn-pulse:hover {
  transform: scale(1.1);
  background: var(--color-primary-container);
}
.play-btn-pulse::before,
.play-btn-pulse::after {
  content: '';
  position: absolute;
  inset: -8px;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  opacity: 0.8;
  animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  pointer-events: none;
}
.play-btn-pulse::after {
  animation-delay: 0.5s;
  inset: -16px;
}
@keyframes pulse-ring {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

/* Testimonial Carousel */
.carousel-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.carousel-track-wrapper {
  overflow: hidden;
  width: 100%;
}
.carousel-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  width: 100%;
}
.carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 0 0.5rem;
  opacity: 0.3;
  transform: scale(0.95);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.carousel-slide.active {
  opacity: 1;
  transform: scale(1);
}

@media (min-width: 768px) {
  .carousel-track {
    transform: none !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 2rem !important;
  }
  .carousel-slide {
    flex: unset !important;
    width: auto !important;
    opacity: 1 !important;
    transform: none !important;
    padding: 0 !important;
  }
  .carousel-controls {
    display: none !important;
  }
}

/* Scroll Reveal Animations */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* reveal directions */
.reveal-left {
  transform: translateX(-40px);
}
.reveal-left.revealed {
  transform: translateX(0);
}

.reveal-right {
  transform: translateX(40px);
}
.reveal-right.revealed {
  transform: translateX(0);
}

.reveal-scale {
  transform: scale(0.95);
}
.reveal-scale.revealed {
  transform: scale(1);
}

/* Stagger delays for children elements */
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }
.reveal-delay-5 { transition-delay: 500ms; }

/* Interactive Video Showcase Tabs Cross-Fade */
.fade-content {
  transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1), 
              transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 1;
  transform: translateY(0) scale(1);
}
.fade-content.fade-out {
  opacity: 0;
  transform: translateY(12px) scale(0.99);
}

/* Custom Range Slider Styling for Borrowing Estimator */
.custom-range-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 9999px;
  background: var(--color-outline-variant);
  outline: none;
  transition: background 0.2s ease;
}
.custom-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 10px rgba(0, 84, 96, 0.3);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s ease;
}
.custom-range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.25);
  background: var(--color-primary-container);
}
.custom-range-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 84, 96, 0.3);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s ease;
}
.custom-range-slider::-moz-range-thumb:hover {
  transform: scale(1.25);
  background: var(--color-primary-container);
}

/* Hero Mouse Cursor Parallax Transitions */
.parallax-bg-slow {
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}
.parallax-bg-fast {
  transition: transform 0.1s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}
.parallax-layer {
  transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}