/* styles/main.css */
@import 'variables.css';

/* Base & Fade‑in */
body {
  background-color: var(--bg-color);
  color: var(--main-color);
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

body.loaded {
  opacity: 1;
}

/* Fallback if JavaScript fails */
noscript body {
  opacity: 1;
}

/* Utility classes – use these instead of raw Tailwind colors */
.text-main {
  color: var(--main-color);
}

.text-secondary {
  color: var(--secondary-color);
}

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

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

.border-main {
  border-color: var(--main-color);
}

.border-secondary {
  border-color: var(--secondary-color);
}

/* Offset for sticky header (adjust 80px to match your header height) */
html {
  scroll-padding-top: 80px;
}

/* Hero section */
#hero {
  display: block;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#hero section {
  margin: 0 !important;
  display: flex;
}

/* Wave animation */
.waves-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.waves {
  width: 100%;
  height: 12vh;
  min-height: 100px;
  max-height: 150px;
  margin-bottom: -1px;
  background-color: var(--white);
  fill: currentColor;
}

.parallax>use {
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}

.parallax>use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 10s;
  opacity: 0.5;
}

.parallax>use:nth-child(2) {
  animation-delay: -5s;
  animation-duration: 18s;
  opacity: 1;
}

@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }

  100% {
    transform: translate3d(85px, 0, 0);
  }
}

/* Marquee (partners) – supports both LTR and RTL */
.marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: 2rem;
}

.marquee-content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  gap: 2rem;
  min-width: 100%;
  /* Default LTR animation: scroll left */
  animation: scroll-left 30s linear infinite;
  animation-play-state: running;
}

.marquee:hover .marquee-content {
  animation-play-state: paused;
}

.marquee-item img {
  height: 60px;
  width: auto;
  object-fit: contain;
}

/* LTR scroll animation */
@keyframes scroll-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-100% - 2rem));
  }
}

/* RTL override: reverse direction for Arabic */
[dir="rtl"] .marquee-content {
  animation-name: scroll-right;
}

@keyframes scroll-right {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(100% + 2rem));
  }
}

/* Product grid transitions */
#product-grid>div {
  transition: opacity 0.3s ease, transform 0.3s ease;
}