@import "tailwindcss";











/* Tailwind variants for manual theming (next-themes sets `html` class to `dark`/`light`) */
@custom-variant dark (&:where(.dark, .dark *));
@custom-variant light (&:where(.light, .light *));

/* Rotating glass border (used on service detail quick-stats)
   Uses `transform: rotate()` for smoother (GPU-friendly) animation. */
   @property --rb-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
  }
  
  @keyframes rb-spin {
    to {
      --rb-angle: 360deg;
    }
  }
  
@keyframes rb-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  .glass-rotating-border {
    position: relative;
  }
  
  .glass-rotating-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px; /* border thickness */
    pointer-events: none;
    opacity: 0;
    background: conic-gradient(
      from var(--rb-angle),
      rgba(255, 255, 255, 0) 0deg,
      rgba(128, 200, 245, 0.55) 80deg,
      rgba(167, 139, 250, 0.55) 155deg,
      rgba(132, 225, 188, 0.55) 230deg,
      rgba(96, 165, 250, 0.55) 305deg,
      rgba(255, 255, 255, 0) 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    filter: drop-shadow(0 0 22px rgba(128, 200, 245, 0.12));
    animation: rb-fade-in 700ms ease-out 150ms forwards, rb-spin 7.5s linear infinite;
  }
  
  html.light .glass-rotating-border::before {
    background: conic-gradient(
      from var(--rb-angle),
      rgba(255, 255, 255, 0) 0deg,
      rgba(96, 165, 250, 0.40) 85deg,
      rgba(167, 139, 250, 0.38) 165deg,
      rgba(34, 211, 238, 0.36) 235deg,
      rgba(52, 211, 153, 0.34) 310deg,
      rgba(255, 255, 255, 0) 360deg
    );
    filter: drop-shadow(0 0 18px rgba(2, 6, 23, 0.06));
  }

html.light .glass-rotating-border::after {
  background: conic-gradient(
    rgba(255, 255, 255, 0) 0deg 30deg,
    rgba(96, 165, 250, 0.22) 46deg 72deg,
    rgba(255, 255, 255, 0) 88deg 124deg,
    rgba(167, 139, 250, 0.20) 138deg 164deg,
    rgba(255, 255, 255, 0) 180deg 216deg,
    rgba(34, 211, 238, 0.18) 230deg 256deg,
    rgba(255, 255, 255, 0) 272deg 308deg,
    rgba(52, 211, 153, 0.16) 322deg 346deg,
    rgba(255, 255, 255, 0) 360deg
  );
  filter: blur(16px);
}

/* Animated gradient border (FAQ cards / hex badges) */
@property --gb-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes gb-spin {
  to {
    --gb-angle: 360deg;
  }
}

.gradient-border-anim {
  position: relative;
}

.gradient-border-anim::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  background: conic-gradient(
    from var(--gb-angle),
    rgba(255, 255, 255, 0) 0deg,
    rgba(128, 200, 245, 0.55) 70deg,
    rgba(167, 139, 250, 0.50) 145deg,
    rgba(132, 225, 188, 0.50) 225deg,
    rgba(34, 211, 238, 0.45) 305deg,
    rgba(255, 255, 255, 0) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 18px rgba(128, 200, 245, 0.10));
  animation: gb-spin 6.5s linear infinite;
}

.gradient-border-anim::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(
    from var(--gb-angle),
    rgba(255, 255, 255, 0) 0deg,
    rgba(128, 200, 245, 0.18) 90deg,
    rgba(167, 139, 250, 0.14) 170deg,
    rgba(132, 225, 188, 0.14) 250deg,
    rgba(34, 211, 238, 0.12) 330deg,
    rgba(255, 255, 255, 0) 360deg
  );
  filter: blur(18px);
  opacity: 0.65;
  animation: gb-spin 6.5s linear infinite;
}

html.light .gradient-border-anim::before {
  filter: drop-shadow(0 0 14px rgba(2, 6, 23, 0.06));
}

.hex-clip {
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
}

.faq-title-bars {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.faq-title-bars::before,
.faq-title-bars::after {
  content: '';
  width: 44px;
  height: 10px;
  background:
    linear-gradient(90deg, rgba(128,200,245,0) 0%,
      rgba(128,200,245,0) 22%,
      rgba(167,139,250,0.85) 22%,
      rgba(167,139,250,0.85) 34%,
      rgba(128,200,245,0) 34%,
      rgba(128,200,245,0) 44%,
      rgba(128,200,245,0.85) 44%,
      rgba(128,200,245,0.85) 56%,
      rgba(128,200,245,0) 56%,
      rgba(128,200,245,0) 66%,
      rgba(96,165,250,0.85) 66%,
      rgba(96,165,250,0.85) 78%,
      rgba(128,200,245,0) 78%,
      rgba(128,200,245,0) 100%);
  -webkit-mask: linear-gradient(135deg, #000 0 0);
  mask: linear-gradient(135deg, #000 0 0);
  transform: skewX(-18deg);
  opacity: 0.9;
}

.faq-title-bars::after {
  transform: scaleX(-1) skewX(-18deg);
}

html.light .glass-rotating-border::before {
  background: conic-gradient(
    rgba(255, 255, 255, 0) 0deg 28deg,
    rgba(96, 165, 250, 0.38) 44deg 70deg,
    rgba(255, 255, 255, 0) 86deg 126deg,
    rgba(167, 139, 250, 0.34) 140deg 166deg,
    rgba(255, 255, 255, 0) 182deg 222deg,
    rgba(34, 211, 238, 0.32) 236deg 262deg,
    rgba(255, 255, 255, 0) 278deg 318deg,
    rgba(52, 211, 153, 0.30) 332deg 352deg,
    rgba(255, 255, 255, 0) 360deg
  );
  filter: drop-shadow(0 0 10px rgba(2, 6, 23, 0.05));
}

@font-face {
  font-family: "YekanBakhFaNum";
  src: url("/fonts/YekanBakhFaNum-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "YekanBakhFaNum";
  src: url("/fonts/YekanBakhFaNum-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "YekanBakhFaNum";
  src: url("/fonts/YekanBakhFaNum-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Theme tokens (default = dark, per request) */
  --background: #000918;
  --foreground: #ffffff;

  --app-bg: #000918;
  --hero-bg: #050a15;
  --footer-bg: #050D1C;

  --text-primary: #ffffff;
  --text-muted: #d1d5db; /* gray-300 */
  --text-muted-2: #9ca3af; /* gray-400 */
  --text-muted-3: #6b7280; /* gray-500 */

  --glass-02: rgba(255, 255, 255, 0.02);
  --glass-04: rgba(255, 255, 255, 0.04);
  --glass-05: rgba(255, 255, 255, 0.05);
  --glass-10: rgba(255, 255, 255, 0.10);

  --border-05: rgba(255, 255, 255, 0.05);
  --border-10: rgba(255, 255, 255, 0.10);
  --border-20: rgba(255, 255, 255, 0.20);

  /* Section-specific surfaces (keep dark visuals identical) */
  --surface-main-wrap: rgba(10, 17, 32, 0.50); /* #0a1120/50 */
  --global-surface-bg: #091120;
  --global-surface-bg-80: rgba(9, 17, 32, 0.80);
  --global-surface-border: rgba(30, 41, 59, 0.50); /* #1e293b/50 */
  --footer-surface-bg: #050D1C;
  --footer-cta-from: #050D1C;
  --footer-cta-via: #0d1a30;
  --footer-cta-to: #0a1829;
  --footer-chip-bg: #131b2f;
  --footer-chip-inner-bg: #1a233a;
  --footer-icon-bg: #161f36;

  --hero-image-opacity: 1;
  --hero-bottom-fade-from: #000918;

  /* --font-family-base: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji"; */

  /* Tailwind `font-sans` bridge */
  --font-geist-sans: var(--font-family-base);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

/* Light theme: white base + very subtle blue/green gradients, keeping glass feel */
html.light {
  --background: #F8FAFC;
  --foreground: #0b1020;

  --app-bg: #F8FAFC;
  /* --app-bg: radial-gradient(1000px 600px at 10% 10%, rgba(56, 189, 248, 0.10), transparent 60%),
    radial-gradient(900px 520px at 85% 20%, rgba(132, 225, 188, 0.12), transparent 55%),
    #ffffff; */
  --hero-bg: radial-gradient(1000px 600px at 15% 0%, rgba(56, 189, 248, 0.12), transparent 60%),
    radial-gradient(900px 520px at 85% 25%, rgba(132, 225, 188, 0.14), transparent 55%),
    #ffffff;
  --footer-bg: #f8fafc;

  --text-primary: #0b1020;
  --text-muted: #334155; /* slate-700-ish */
  --text-muted-2: #475569; /* slate-600-ish */
  --text-muted-3: #64748b; /* slate-500-ish */

  --glass-02: rgba(2, 6, 23, 0.02);
  --glass-04: rgba(2, 6, 23, 0.04);
  --glass-05: rgba(2, 6, 23, 0.05);
  --glass-10: rgba(2, 6, 23, 0.10);

  --border-05: rgba(2, 6, 23, 0.06);
  --border-10: rgba(2, 6, 23, 0.12);
  --border-20: rgba(2, 6, 23, 0.18);

  --surface-main-wrap: rgba(255, 255, 255, 0.70);
  --global-surface-bg: rgba(255, 255, 255, 0.75);
  --global-surface-bg-80: rgba(255, 255, 255, 0.80);
  --global-surface-border: rgba(2, 6, 23, 0.12);
  --footer-surface-bg: rgba(255, 255, 255, 0.75);
  --footer-cta-from: rgba(56, 189, 248, 0.12);
  --footer-cta-via: rgba(132, 225, 188, 0.12);
  --footer-cta-to: rgba(56, 189, 248, 0.08);
  --footer-chip-bg: rgba(255, 255, 255, 0.60);
  --footer-chip-inner-bg: rgba(255, 255, 255, 0.55);
  --footer-icon-bg: rgba(2, 6, 23, 0.04);

  --hero-image-opacity: 0.12;
  --hero-bottom-fade-from: #ffffff;
}

body {
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--font-family-base);
}

.locale-fa {
  --font-family-base: "YekanBakhFaNum", system-ui, -apple-system, Segoe UI, Roboto, Helvetica,
    Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-geist-sans: var(--font-family-base);
}

/* Direction hooks (edit freely) */
.locale-scope[data-locale="en"] .en-row-reverse {
  flex-direction: row-reverse !important;
}
.locale-scope[data-locale="en"] .en-row {
  flex-direction: row !important;
}
.locale-scope[data-locale="en"] .en-justify-start {
  justify-content: flex-start;
}
.locale-scope[data-locale="en"] .en-justify-end {
  justify-content: flex-end;
}
.locale-scope[data-locale="en"] .en-items-start {
  align-items: flex-start;
}
.locale-scope[data-locale="en"] .en-items-end {
  align-items: flex-end;
}
.locale-scope[data-locale="en"] .en-text-left {
  text-align: left !important;
}
.locale-scope[data-locale="en"] .en-text-right {
  text-align: right !important;
}

/* Shadow hooks (defaults are subtle; tweak as needed) */
.locale-scope[data-locale="en"] .en-shadow-left {
  box-shadow: -12px 0 40px rgba(2, 6, 23, 0.12);
}
.locale-scope[data-locale="en"] .en-shadow-right {
  box-shadow: 12px 0 40px rgba(2, 6, 23, 0.12);
}

/* Optional FA-specific hooks (use only when you need overrides for /fa) */
.locale-scope[data-locale="fa"] .fa-text-right {
  text-align: right !important;
}
.locale-scope[data-locale="fa"] .fa-text-left {
  text-align: left !important;
}
.locale-scope[data-locale="fa"] .fa-row-reverse {
  flex-direction: row-reverse !important;
}
.locale-scope[data-locale="fa"] .fa-row {
  flex-direction: row !important;
}

/* Debug helper: uncomment to visually verify EN scope is applied */
/* .locale-scope[data-locale="en"] { outline: 2px dashed rgba(59,130,246,0.35); outline-offset: -2px; } */

.app-bg {
  background: var(--app-bg);
}

.hero-bg {
  background: var(--hero-bg);
}

.footer-bg {
  background: var(--footer-bg);
}
