/* SocialVault - Main Stylesheet */

/* Base Styles */
body {
  font-family: 'Inter', sans-serif;
  background-color: #030303;
}

/* Enhanced Header Blur */
nav div.backdrop-blur-xl {
  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  background-color: rgba(0, 0, 0, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Hide scrollbar for cleaner look */
::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

/* Visibility utility */
.invisible {
  visibility: hidden !important;
}

/* Custom Gradient Animation for text */
.animate-gradient {
  background-size: 200% 200%;
  animation: gradient-move 4s ease infinite;
}

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

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Fade Slide In Animation */
@keyframes fadeSlideIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(8px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
  }
}

/* Animate on Scroll */
.animate-on-scroll {
  animation-play-state: paused !important;
}

.animate-on-scroll.animate {
  animation-play-state: running !important;
}

/* Fade In Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Beam Animations */
@keyframes beamV {
  0% {
    top: -150px;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    top: 100%;
    opacity: 0;
  }
}

@keyframes beamH {
  0% {
    left: -150px;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    left: 100%;
    opacity: 0;
  }
}

@keyframes beamHRev {
  0% {
    right: -150px;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    right: 100%;
    opacity: 0;
  }
}

.animate-beam-v {
  animation: beamV 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.animate-beam-h {
  animation: beamH 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.animate-beam-h-rev {
  animation: beamHRev 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Shimmer Animation */
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

/* Aura Bar Grow Animation */
@keyframes aura-bar-grow {
  from {
    transform: scaleY(0.2);
    opacity: 0.5;
  }

  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

.aura-animate-bar {
  transform-origin: bottom;
  animation: aura-bar-grow 2s ease-in-out infinite alternate;
  opacity: 0;
  will-change: transform, opacity;
  animation-play-state: paused;
}

/* Font Family Classes */
.font-geist {
  font-family: 'Geist', sans-serif !important;
}

.font-jakarta {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.font-manrope {
  font-family: 'Manrope', sans-serif !important;
}

.font-playfair {
  font-family: 'Playfair Display', serif !important;
}

.font-instrument-serif {
  font-family: 'Instrument Serif', serif !important;
}

.font-nunito {
  font-family: 'Nunito', sans-serif !important;
}

.font-bricolage {
  font-family: 'Bricolage Grotesque', sans-serif !important;
}

.font-space-grotesk {
  font-family: 'Space Grotesk', sans-serif !important;
}

.font-geist-mono {
  font-family: 'Geist Mono', monospace !important;
}

.font-quicksand {
  font-family: 'Quicksand', sans-serif !important;
}

.font-montserrat {
  font-family: 'Montserrat', sans-serif !important;
}

/* Selection styling */
::selection {
  background-color: rgba(99, 102, 241, 0.3);
  color: rgb(196, 181, 253);
}

/* Social Media Icon Styling */
.social-icon {
  color: rgb(212, 212, 216);
  width: 30px;
  height: 30px;
}

.social-icon path {
  fill: currentColor;
}


/* Features Section - Adjustable positioning */
#features {
  padding-top: 100px !important;
  /* Adjust this value to move the section up (reduce) or down (increase) - original was 128px (pt-32) */
}

#features>div {
  transform: translateY(0px) !important;
  /* Reset transform to move content down */
}

/* Right Column Content - Move text down */
.features-right-column {
  margin-top: 0px !important;
  /* Reset margin to move content down */
}


.features-right-column h2 {
  margin-bottom: 1rem !important;
  /* Reduce spacing after heading */
}

/* Features Section - Font Sizing */
.features-main-heading {
  font-size: 2.5rem !important;
  /* Slightly bigger than original text-4xl (2.25rem) */
  line-height: 1.15;
}

@media (min-width: 768px) {
  .features-main-heading {
    font-size: 3.25rem !important;
    /* Slightly bigger than original md:text-5xl (3rem) */
  }
}

.features-tab-heading {
  font-size: 1.25rem !important;
  /* Slightly bigger than original text-lg (1.125rem) */
}

.features-tab-text {
  font-size: 0.9375rem !important;
  /* Slightly bigger than original text-sm (0.875rem) */
  line-height: 1.625;
}

/* Platforms Card - Adjustable positioning */
.platforms-card {
  margin-top: 200px !important;
  /* Adjust this value to move the card up or down */
  width: calc(100% + 16px) !important;
  /* Make the card 16 pixels wider (increased from 8px) */
  position: relative !important;
  left: -5.3px !important;
  /* Shift left 5.3 pixels */
  margin-left: -5.3px !important;
  /* Also use margin as backup */
}

/* Target the grid column containing the platforms card */
.grid.grid-cols-1.lg\\:grid-cols-2>div:last-child {
  padding-left: -5.3px !important;
  margin-left: -5.3px !important;
}

/* Force the positioning even with animations */
div.platforms-card.overflow-hidden {
  left: -5.3px !important;
  margin-left: -5.3px !important;
  transform: translateX(-5.3px) !important;
}

/* Smart Content Extraction Section - Move down slightly */
.smart-content-section {
  margin-top: 28px !important;
  /* Moved down 5px from 25px */
  padding-top: 28px !important;
  /* Moved down 5px from 25px */
  transform: translateY(28px) !important;
  /* Moved down 5px from 25px */
  align-self: flex-start !important;
  /* Override grid items-center alignment */
}

/* Target the first content div inside */
.smart-content-section>div:first-child {
  margin-top: 28px !important;
  /* Moved down 5px from 25px */
  padding-top: 28px !important;
  /* Moved down 5px from 25px */
}

/* Target the grid column containing this section */
.grid.grid-cols-1.lg\\:grid-cols-2>div:first-child {
  padding-top: 28px !important;
  /* Moved down 5px from 25px */
}

/* Upscaling Section - Adjustable positioning */
#upscaling {
  margin-top: -16px !important;
  /* Adjust this value to move the section up (negative) or down (positive) */
}

/* Upscaler Card - Adjustable positioning */
.upscaler-card {
  margin-top: 50px;
  /* Adjust this value to move the card up or down */
}

/* Pricing Cards - Always visible features */
.spotlight-card .relative.flex-grow {
  min-height: 200px;
}

.spotlight-card .flex.flex-col.gap-4 {
  padding: 1rem 0;
}

/* Pricing Toggle Styles */
.pricing-toggle-btn {
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.pricing-toggle-btn.active {
  background-color: rgb(39, 39, 42) !important;
  /* bg-zinc-800 */
  color: white !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.pricing-toggle-btn:not(.active) {
  background-color: transparent !important;
  color: rgb(161, 161, 170) !important;
  /* text-zinc-400 */
}

.pricing-toggle-btn:hover:not(.active) {
  color: white !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Price Animation Styles */
.pricing-price {
  will-change: opacity, transform;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.price-number {
  display: inline-block;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .platforms-card {
    margin-top: 32px !important;
  }

  .spotlight-card {
    min-height: auto !important;
  }
}