@import 'tailwindcss';
/* @import './fonts.css'; */

:root {
  --background: #ebeef2;
  --foreground: #171717;
  /* English language → English first, Persian fallback */
  /* --font-en: 'Inter', 'EstedadFa', 'Estedad', sans-serif; */

  /* Persian language → Persian first */
  /* --font-fa: 'EstedadFa', 'Estedad', 'Inter', sans-serif; */
}

html[dir='ltr'] {
  font-family: var(--font-en) !important;
}

html[dir='rtl'] {
  font-family: var(--font-fa) !important;
}

html[dir='rtl'] .MuiTypography-root,
html[dir='rtl'] .MuiMenuItem-root,
html[dir='rtl'] .MuiButton-root,
html[dir='rtl'] .MuiBox-root,
html[dir='rtl'] .MuiTableCell-root {
  font-family: var(--font-fa) !important;
}

html[dir='ltr'] .MuiTypography-root,
html[dir='ltr'] .MuiMenuItem-root,
html[dir='ltr'] .MuiButton-root,
html[dir='ltr'] .MuiBox-root,
html[dir='ltr'] .MuiTableCell-root {
  font-family: var(--font-en) !important;
}

/* @media (prefers-color-scheme: dark) {
  :root {
    --background: #ebeef2;
    --foreground: #ededed;
    --font-fa: 'EstedadFa', sans-serif;
  }
} */

html,
body {
  background-color: var(--background);
  color: var(--foreground);
  overflow-x: clip !important;
  /* font-family: var(--font-en); */
}

body.dark {
  --background: rgb(6, 0, 11);
  /* forces body to black via your existing rule */
}

/* @theme {
  --font-fa: 'Estedad', sans-serif;
  --font-faFa: 'EstedadFa', sans-serif;
} */

.btn-sweep {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
  --hover-bg: #ef2f03;
  --hover-fg: #fff;
  --sweep-origin: left;
}

.btn-sweep::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hover-bg);
  transform: scaleX(0);
  transform-origin: var(--sweep-origin);
  transition: transform 0.2s ease;
  z-index: 0;
}

.btn-sweep:hover::before,
.btn-sweep:focus-visible::before {
  transform: scaleX(1);
}

.btn-sweep > * {
  position: relative;
  z-index: 1;
}

.btn-sweep:hover,
.btn-sweep:focus-visible {
  color: var(--hover-fg) !important;
}

.splide__pagination__page.is-active {
  background-color: #ff0000 !important;
}

@theme {
  --breakpoint-*: initial;
  --breakpoint-xs: 30rem;
  /* 480px */
  --breakpoint-sm: 40rem;
  /* 640px */
  --breakpoint-md: 75rem;
  /* 1200px */
  --breakpoint-lg: 90rem;
  /* 1440px */
  --breakpoint-xl: 110rem;
  /* 1760px */
  --breakpoint-2xl: 120rem;
  /* 1920px (optional) */
}

@keyframes pulseFromInside {
  0% {
    background: radial-gradient(circle, rgba(253, 13, 14, 0.8) 0%, transparent 0%);
    background-size: 0% 0%;
  }

  50% {
    background: radial-gradient(circle, rgba(253, 13, 14, 0.4) 40%, transparent 70%);
    background-size: 150% 150%;
  }

  100% {
    background: radial-gradient(circle, rgba(253, 13, 14, 0) 100%, transparent 100%);
    background-size: 0% 0%;
  }
}

.pulse-bg {
  animation: pulseFromInside 1.2s ease-in-out infinite;
}

.text-gradient {
  background: linear-gradient(90deg, #ffffff 0%, #6d6d6d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.loader-screen {
  overscroll-behavior: contain;
  touch-action: none;
}

/* :root {
  --font-en: 'EstedadFa', sans-serif;
  --font-fa: 'Estedad', sans-serif;
} */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

/* .MuiTypography-root,
.MuiBox-root,
.MuiBox-root li {
  font-family: var(--font-fa) !important;
} */

/* APPLE-LEVEL SMOOTHNESS */

.smooth {
  will-change: opacity, transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

/* Fade-in appearance for content blocks */
.fade-up {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity 0.7s ease-out,
    transform 0.7s ease-out;
}

.fade-up.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

html {
  scroll-behavior: smooth;
}

/* Prevents flickering of images */
img,
video {
  backface-visibility: hidden;
  transform: translateZ(0);
}

.bg-orange-line {
  background: linear-gradient(90deg, rgba(255, 137, 4, 0) 0%, rgba(255, 137, 4, 1) 50%, rgba(255, 137, 4, 0) 100%);
}

.bg-radial-orange {
  background: radial-gradient(circle, rgba(255, 137, 4, 0.24) 0%, rgba(255, 137, 4, 0) 70%);
}

.border-button {
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 40%, rgba(215, 88, 0, 0) 60%);
}

.button-shadow {
  box-shadow:
    inset 2px 2px 8px rgba(255, 255, 255, 0.48),
    inset 4px 4px 12px rgba(255, 255, 255, 0.56);
}

.button-text-shadow {
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.48);
}

.bg-gradient-card-red {
  background: radial-gradient(circle, rgba(97, 1, 2, 1) 0%, rgba(24, 2, 2, 0) 70%);
}

.border-gradient-card-red {
  background: radial-gradient(circle, rgba(184, 14, 16, 1) 0%, rgba(16, 1, 1, 1) 70%);
}

.bg-gradient-hero-2 {
  background: linear-gradient(180deg, rgba(15, 15, 15, 1) 0%, rgba(10, 10, 10, 0) 100%);
}

.bg-gradient-hero-1 {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.24) 0%, rgba(20, 20, 20, 1) 100%);
  opacity: 0.12;
}

.bg-gradient-hero-3 {
  /* background: #ffffff; */
  background: linear-gradient(180deg, rgba(10, 10, 10, 0) 0%, rgb(10, 10, 10) 100%);
}

.text-gradient-orange {
  background: linear-gradient(140deg, rgba(255, 255, 255, 1) 0%, rgba(255, 137, 4, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* text-shadow: 0 8px 12px rgba(0, 0, 0, 0.48); */
}

.bg-white-line {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgb(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}

.bg-radial-white {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 70%);
}

.bg-vertical-back {
  background: linear-gradient(180deg, rgba(10, 10, 10, 1) 0%, rgba(18, 18, 18, 1) 100%);
}

.bg-vertical-back-revrse {
  background: linear-gradient(180deg, rgba(18, 18, 18, 1) 0%, rgba(10, 10, 10, 1) 100%);
}

.border-back-box {
  background: linear-gradient(320deg, rgba(50, 50, 50, 1) 0%, rgba(255, 255, 255, 0.63) 100%);
}

.bg-back-box {
  background: linear-gradient(320deg, rgb(17, 17, 17) 0%, rgb(60, 60, 60) 100%);
}
@keyframes marquee2 {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.animate-marquee2 {
  animation: marquee2 25s linear infinite;
}

@keyframes marquee-ltr {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes marquee-rtl {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

.animate-marquee-ltr {
  animation: marquee-ltr 20s linear infinite;
}
.animate-marquee-rtl {
  animation: marquee-rtl 20s linear infinite;
}

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

.animate-gradient-move {
  animation: gradient-move 2s linear infinite;
}