/* Veltrix SecOps Styles */

/* Global Styles */
:root {
  --primary-color: #3b82f6;
  --primary-dark: #2563eb;
  --primary-light: #60a5fa;
  --secondary-color: #6c757d;
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --danger-color: #ef4444;
  --info-color: #3b82f6;
  --dark-bg: #111827;
  --light-text: #f9fafb;
  --dark-text: #1f2937;
  --gray-light: #f3f4f6;
  --gray-medium: #d1d5db;
  --gray-dark: #4b5563;
}

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* Fixed header spacing adjustment */
body {
  padding-top: 4rem;
}

/* Button Styles */
.btn-primary {
  @apply bg-blue-600 hover:bg-blue-700 text-white rounded-md font-medium;
}

.btn-secondary {
  @apply bg-gray-600 hover:bg-gray-700 text-white rounded-md font-medium;
}

.btn-disabled {
  @apply bg-gray-400 text-white rounded-md font-medium cursor-not-allowed;
}

/* Card Hover Effects */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Pricing Table Styles */
.pricing-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.pricing-card.featured {
  transform: scale(1.05);
  z-index: 10;
  position: relative;
}

.pricing-card.featured:hover {
  transform: scale(1.05) translateY(-5px);
}

/* Dark Mode Adjustments */
.dark .card-hover:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

.dark .pricing-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}

/* Animation for loading components */
[data-component] {
  min-height: 50px;
  position: relative;
}

[data-component]:empty::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f3f4f6;
  border-radius: 0.375rem;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .pricing-card.featured {
    transform: scale(1);
  }

  .pricing-card.featured:hover {
    transform: translateY(-5px);
  }
}

/* ==========================================================================
   Motion layer — classes are applied automatically by assets/js/animations.js
   ========================================================================== */

/* Scroll reveal: elements fade + rise into place as they enter the viewport */
.v-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--v-delay, 0ms);
  will-change: opacity, transform;
}

.v-reveal.v-visible {
  opacity: 1;
  transform: none;
}

/* Card lift on hover (only applied to shadowed "card" elements) */
.v-card {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.v-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 30px -12px rgba(2, 6, 23, 0.22);
}

.dark .v-card:hover {
  box-shadow: 0 18px 30px -12px rgba(0, 0, 0, 0.55);
}

/* Reveal + hover-lift need to compose: once visible, hover transform wins */
.v-card.v-reveal.v-visible:hover {
  transform: translateY(-6px);
}

/* CTA buttons: gentle lift with a soft shadow */
.v-btn {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

.v-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(2, 6, 23, 0.4);
}

.v-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px -6px rgba(2, 6, 23, 0.4);
}

/* Header nav links: sliding underline */
.v-navlink {
  position: relative;
}

.v-navlink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  opacity: 0.75;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}

.v-navlink:hover::after,
.v-navlink:focus-visible::after {
  transform: scaleX(1);
}

/* Hero / CTA gradient bands slowly drift */
.v-gradient-flow {
  background-size: 180% 180%;
  animation: v-gradient-drift 16s ease-in-out infinite alternate;
}

@keyframes v-gradient-drift {
  0% {
    background-position: 0% 40%;
  }
  100% {
    background-position: 100% 60%;
  }
}

/* Hero mock window: gentle float */
.v-float {
  animation: v-float 7s ease-in-out infinite;
}

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

/* Pipeline rows / list items ticking in one after another */
.v-tick-in {
  animation: v-tick 0.5s ease-out both;
  animation-delay: var(--v-delay, 0ms);
}

@keyframes v-tick {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Accessibility: honor reduced-motion preferences everywhere */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .v-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .v-card,
  .v-btn,
  .v-navlink::after {
    transition: none !important;
  }

  .v-card:hover,
  .v-btn:hover {
    transform: none !important;
  }

  .v-gradient-flow,
  .v-float,
  .v-tick-in {
    animation: none !important;
  }
}