/**
 * home-page.css
 * Meridian GeoStrategy - Homepage Styles
 *
 * Covers the hero video banner, gradient overlays, scroll indicator,
 * insight card interactions, gallery carousel, and shared utility
 * animations used on the landing page.
 *
 * @module home-page
 * @version 2.0.0
 * @see {@link https://meridiangeostrategy.com}
 */

/* ==========================================================================
   Hero Video Banner
   ========================================================================== */

.video_container {
  width: 100%;
  height: 100vh;
  position: relative;
}

.video_container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.linear {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(
    to right bottom,
    rgba(118, 145, 144, 0.7),
    rgba(184, 167, 203, 0.7)
  );
}

.linear-bg {
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.linear-title h1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.animate-fade-in {
  opacity: 0;
  animation: fadeIn 1s ease forwards;
}

.delay-600 {
  animation-delay: 600ms;
}

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

/* ==========================================================================
   Banner Scroll Indicator
   ========================================================================== */

.banner_icon {
  cursor: pointer;
}

.index-header-btn {
  position: absolute;
  bottom: 20px;
  width: 100%;
}

/* ==========================================================================
   Responsive - Insight Button Visibility
   ========================================================================== */

@media screen and (min-width: 850px) {
  .linear-title {
    margin-top: 100px;
    color: #381551;
  }

  .insight-btn {
    display: none !important;
  }
}

@media screen and (max-width: 850px) {
  .insight-btn {
    display: inline-block !important;
  }
}

/* ==========================================================================
   Insight Cards & Gallery
   ========================================================================== */

.rounded-lg {
  cursor: pointer;
}

.expertise-item2 a {
  display: block;
  width: 100%;
  height: 100%;
}

.expertise-item2:hover .insight-btn {
  display: inline-block !important;
}

.page-btn {
  flex-direction: row-reverse;
}

#prev-btn {
  margin-right: 15px;
}

.gallery-container {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.gallery-container::-webkit-scrollbar {
  display: none;
}

.gallery-card:hover img {
  transform: scale(1.02);
  transition: transform 0.3s ease;
}

.gallery-card img {
  transition: transform 0.3s ease;
}

/* ==========================================================================
   Service Card Links
   ========================================================================== */

.what-box a {
  display: block;
  width: 100%;
  height: 100%;
}

.what-box h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.capabilities-card_arrow__L_plP {
  opacity: 0;
  transform: translateX(0);
  transition: all 0.3s ease-in;
  font-weight: 500;
  color: #fff;
  line-height: 18px;
  font-size: 0.75rem;
  width: 46px;
  height: 14px;
  fill: none;
  margin-left: 10px;
}

.what-box:hover .capabilities-card_arrow__L_plP {
  opacity: 1;
}

.what-box:hover h3 {
  text-decoration: underline;
}