@import "tailwindcss";
@import "tw-animate-css";

/* IRANSansX Font Faces */
@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: 100;

  src: url("/assets/irsansx/Woff/IRANSansXFaNum-Thin.woff") format("woff"),
    url("/assets/irsansx/Woff2/IRANSansXFaNum-Thin.woff2") format("woff2");
}

@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: 200;
  src: url("/assets/irsansx/Woff/IRANSansXFaNum-UltraLight.woff") format("woff"),
    url("/assets/irsansx/Woff2/IRANSansXFaNum-UltraLight.woff2") format("woff2");
}

@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: 300;
  src: url("/assets/irsansx/Woff/IRANSansXFaNum-Light.woff") format("woff"),
    url("/assets/irsansx/Woff2/IRANSansXFaNum-Light.woff2") format("woff2");
}

@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: 500;
  src: url("/assets/irsansx/Woff/IRANSansXFaNum-Medium.woff") format("woff"),
    url("/assets/irsansx/Woff2/IRANSansXFaNum-Medium.woff2") format("woff2");
}

@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: 600;
  src: url("/assets/irsansx/Woff/IRANSansXFaNum-DemiBold.woff") format("woff"),
    url("/assets/irsansx/Woff2/IRANSansXFaNum-DemiBold.woff2") format("woff2");
}

@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: 800;
  src: url("/assets/irsansx/Woff/IRANSansXFaNum-ExtraBold.woff") format("woff"),
    url("/assets/irsansx/Woff2/IRANSansXFaNum-ExtraBold.woff2") format("woff2");
}

@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: 900;
  src: url("/assets/irsansx/Woff/IRANSansXFaNum-Black.woff") format("woff"),
    url("/assets/irsansx/Woff2/IRANSansXFaNum-Black.woff2") format("woff2");
}

@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: bold;
  src: url("/assets/irsansx/Woff/IRANSansXFaNum-Bold.woff") format("woff"),
    url("/assets/irsansx/Woff2/IRANSansXFaNum-Bold.woff2") format("woff2");
}

@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: normal;
  src: url("/assets/irsansx/Woff/IRANSansXFaNum-Regular.woff") format("woff"),
    url("/assets/irsansx/Woff2/IRANSansXFaNum-Regular.woff2") format("woff2");
}

@custom-variant dark (&:is(.dark *));

/*
 * تم واحد (بدون لایت/دارک) — پالت اصلاح‌شده
 * پایه: شرابی-مشکی گرم | کارت: بورگوندی کنترل‌شده (کمتر ماژنتا) | متن: کرم گرم (نه خاکستری آبی)
 * برند: طلایی #c99d4d | ثانویه: سرمه‌ای | طلایی/زمردی برای گرادیان و border انیمیشن
 */

@theme inline {
  /* Design tokens → Tailwind colors */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-overlay: var(--overlay);
  --color-overlay-foreground: var(--overlay-foreground);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  /* Gold & Emerald scales for utility use */
  --color-gold-50: var(--gold-50);
  --color-gold-100: var(--gold-100);
  --color-gold-200: var(--gold-200);
  --color-gold-300: var(--gold-300);
  --color-gold-400: var(--gold-400);
  --color-gold-500: var(--gold-500);
  --color-gold-600: var(--gold-600);
  --color-gold-700: var(--gold-700);
  --color-gold-800: var(--gold-800);
  --color-gold-900: var(--gold-900);
  --color-gold-950: var(--gold-950);
  --color-emerald-50: var(--emerald-50);
  --color-emerald-100: var(--emerald-100);
  --color-emerald-200: var(--emerald-200);
  --color-emerald-300: var(--emerald-300);
  --color-emerald-400: var(--emerald-400);
  --color-emerald-500: var(--emerald-500);
  --color-emerald-600: var(--emerald-600);
  --color-emerald-700: var(--emerald-700);
  --color-emerald-800: var(--emerald-800);
  --color-emerald-900: var(--emerald-900);
  --color-emerald-950: var(--emerald-950);
  --font-sans: var(--font-iran-sans);
  --font-mono: var(--font-geist-mono);
  --font-iran-sans: "IRANSansX", "system-ui", "Avenir", "Helvetica", "Arial",
    "sans-serif";
  --font-size-heading-1: clamp(2rem, 4vw + 1rem, 3.75rem);
  --font-size-heading-2: clamp(1.5rem, 3vw + 0.5rem, 2.25rem);
  --font-size-heading-3: clamp(1.25rem, 2vw + 0.5rem, 1.875rem);
  --font-size-heading-4: 1.25rem;
  --font-size-heading-5: 1.125rem;
  --font-size-body: 1rem;
  --font-size-body-sm: 0.875rem;
  --font-size-caption: 0.75rem;
  --font-weight-heading: 700;
  --font-weight-subheading: 600;
  --font-weight-body: 400;
  --font-weight-medium: 500;
  --line-height-heading: 1.25;
  --line-height-body: 1.6;
  --line-height-relaxed: 1.75;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --animate-line-shadow: line-shadow 15s linear infinite;
  @keyframes line-shadow {
    0% { background-position: 0 0; }
    100% { background-position: 100% -100%; }
  }
}

:root {
  /* ----- Master palette from provided swatch ----- */
  --tone-1: #110507;
  --tone-2: #230a0d;
  --tone-3: #340e14;
  --tone-4: #46131a;
  --tone-5: #571821;
  --tone-6: #682f37;
  --tone-7: #895d64;
  --tone-8: #db8c90;
  --tone-9: #ddd1d3;

  /* ----- طلایی (برند؛ هم‌راستا با --primary) ----- */
  --gold-50: #fdf9f2;
  --gold-100: #f8eed9;
  --gold-200: #efd9b0;
  --gold-300: #e4c27e;
  --gold-400: #d4ad5a;
  --gold-500: #c99d4d;
  --gold-600: #a67e3c;
  --gold-700: #85632f;
  --gold-800: #5c4522;
  --gold-900: #3d2f18;
  --gold-950: #261c10;

  /* ----- زمردی-فیروزه (تزئینات؛ کمی عمیق‌تر برای کنار بورگوندی) ----- */
  --emerald-50: #e6f4f1;
  --emerald-100: #c0e6df;
  --emerald-200: #8fd4c8;
  --emerald-300: #5cb9a9;
  --emerald-400: #3a9d8c;
  --emerald-500: #2a7f72;
  --emerald-600: #23695f;
  --emerald-700: #1d534c;
  --emerald-800: #163e39;
  --emerald-900: #0f2b28;
  --emerald-950: #081916;

  --font-iran-sans: "IRANSansX", var(--font-geist-sans);
  --radius: 0.625rem;

  /* ----- Semantic tokens based on exact provided palette ----- */
  --background: var(--tone-2);
  --foreground: var(--tone-9);

  --card: var(--tone-4);
  --card-foreground: var(--tone-9);
  --popover: var(--tone-3);
  --popover-foreground: var(--tone-9);

  --primary: var(--tone-8);
  --primary-foreground: var(--tone-1);

  --secondary: var(--tone-6);
  --secondary-foreground: var(--tone-9);

  --muted: var(--tone-3);
  --muted-foreground: var(--tone-7);

  --accent: var(--tone-5);
  --accent-foreground: var(--tone-9);

  --destructive: oklch(0.62 0.2 22);
  --destructive-foreground: oklch(0.99 0.01 25);

  /* حاشیه: طلای ملایم روی پایهٔ تیرهٔ گرم */
  --border: color-mix(in srgb, var(--tone-8) 28%, var(--tone-2));
  --input: var(--tone-5);
  --ring: var(--tone-8);

  /* متن/اسکرین روی تصویر و اورلی مودال */
  --overlay: var(--tone-1);
  --overlay-foreground: var(--tone-9);

  --chart-1: var(--tone-8);
  --chart-2: var(--tone-6);
  --chart-3: var(--tone-7);
  --chart-4: var(--tone-5);
  --chart-5: var(--tone-4);

  --sidebar: var(--tone-2);
  --sidebar-foreground: var(--tone-9);
  --sidebar-primary: var(--tone-8);
  --sidebar-primary-foreground: var(--tone-1);
  --sidebar-accent: var(--tone-5);
  --sidebar-accent-foreground: var(--tone-9);
  --sidebar-border: var(--tone-6);
  --sidebar-ring: var(--tone-8);

  /* ----- دکمهٔ پریمیوم (طلایی + گرادیان آبی ثانویه) ----- */
  --btn-radius: 0.625rem;
  --btn-transition: 280ms ease-out;
  --btn-gold-from: #d8b056;
  --btn-gold-via: #c99d4d;
  --btn-gold-to: #b08a3f;
  --btn-gold-text: #fffaf0;
  --btn-gold-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 2px 8px rgba(0, 0, 0, 0.35),
    0 4px 16px rgba(224, 168, 48, 0.2);
  --btn-gold-shadow-hover: 0 1px 0 0 rgba(255, 255, 255, 0.3) inset, 0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 10px rgba(242, 217, 122, 0.2);
  --btn-gold-shadow-active: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 2px 6px rgba(0, 0, 0, 0.4);
  --btn-gold-glow-hover: 0 0 10px rgba(242, 217, 122, 0.22);
  --btn-sapphire-from: #2a5ab8;
  --btn-sapphire-to: #153875;
  --btn-sapphire-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.14) inset, 0 2px 8px rgba(0, 0, 0, 0.35),
    0 4px 16px rgba(30, 74, 180, 0.25);
  --btn-sapphire-shadow-hover: 0 1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 6px 20px rgba(0, 0, 0, 0.28),
    0 0 10px rgba(90, 140, 220, 0.22);
  --btn-sapphire-shadow-active: 0 0 0 1px rgba(0, 0, 0, 0.12) inset, 0 2px 6px rgba(0, 0, 0, 0.35);
  --btn-sapphire-glow-hover: 0 0 10px rgba(90, 140, 220, 0.28);
}

@keyframes btn-shine {
  0% { transform: translateX(-100%) skewX(-12deg); }
  100% { transform: translateX(200%) skewX(-12deg); }
}

@layer base {
  html {
    scroll-behavior: smooth;
    color-scheme: dark;
  }
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-family: "IRANSansX";
    letter-spacing: normal;
    line-height: 1.6;
    overflow-x: hidden;
    /* Single subtle overlay for premium feel – no banding */
    background-image:
      radial-gradient(
        ellipse 95% 62% at 50% -10%,
        color-mix(in srgb, var(--tone-8) 18%, transparent) 0%,
        transparent 54%
      ),
      radial-gradient(
        ellipse 85% 48% at 50% 115%,
        color-mix(in srgb, var(--tone-7) 16%, transparent) 0%,
        transparent 56%
      );
    background-attachment: fixed;
    background-repeat: no-repeat;
    transition: background-color 0.3s ease;
  }
  /* Standard typography – same sizes/weights across all pages */
  h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    letter-spacing: normal;
    line-height: var(--line-height-heading);
    font-weight: var(--font-weight-heading);
    transition: color 0.3s ease;
  }
  h1 {
    font-size: var(--font-size-heading-1);
    font-weight: 700;
  }
  h2 {
    font-size: var(--font-size-heading-2);
    font-weight: 600;
  }
  h3 {
    font-size: var(--font-size-heading-3);
    font-weight: 600;
  }
  h4 {
    font-size: var(--font-size-heading-4);
    font-weight: 500;
  }
  h5 {
    font-size: var(--font-size-heading-5);
    font-weight: 500;
  }
  h6 {
    font-size: var(--font-size-body);
    font-weight: 500;
  }
  p {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-body);
    letter-spacing: normal;
    line-height: var(--line-height-body);
    transition: color 0.3s ease;
  }
  a {
    transition: all 0.3s ease;
    color: var(--primary);
  }
  a:hover {
    color: var(--primary);
    opacity: 0.9;
  }
  button {
    transition: all 0.3s ease;
  }
}

/* WordPress table block (figure.wp-block-table > table) */
.wp-block-table {
  margin: 1.5rem 0;
  overflow-x: auto;
  border-radius: var(--radius);
}

.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;

}

.wp-block-table table.has-fixed-layout {
  table-layout: fixed;
}

.wp-block-table th,
.wp-block-table td {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  text-align: right;
  min-width: 850px;
}

.wp-block-table tbody tr:first-child th,
.wp-block-table tbody tr:first-child td {
  background: var(--muted);
  font-weight: 600;
  color: var(--foreground);
}

.wp-block-table tbody tr:not(:first-child):hover td {
  background: var(--muted);
}

.wp-block-table thead th {
  background: var(--muted);
  font-weight: 600;
  color: var(--foreground);
}

.wp-block-button > .wp-element-button {
  @apply inline-flex bg-primary text-primary-foreground  px-4 py-2 rounded-md hover:bg-primary/80 hover:text-primary-foreground/80 cursor-pointer no-underline;
}

.wp-block-button  {
  @apply inline-flex;
}

.wp-block-button.is-style-outline > .wp-element-button {
  @apply bg-transparent text-foreground border border-2 border-primary hover:text-primary cursor-pointer no-underline;
}

.cta-block {
  @apply flex flex-col gap-4 border rounded-md border-primary/50 p-4 items-center my-4 shadow-sm bg-primary/5 text-primary;
}

.wp-block-image {
  @apply rounded-md overflow-hidden shadow-sm;
}

/* ========== Animated Gradient Border ========== */

@property --bag-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

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


.border-animated-gradient {
  --bag-width: 2px;
  --bag-speed: 5s;
  --bag-bg: var(--card);
  --bag-c1: var(--gold-300);
  --bag-c2: var(--emerald-500);
  --bag-c3: var(--gold-500);
  --bag-c4: var(--emerald-300);

  border: var(--bag-width) solid transparent;
  background:
    var(--bag-bg) padding-box,
    conic-gradient(
      from var(--bag-angle),
      var(--bag-c1)  0%,
      var(--bag-c2) 25%,
      var(--bag-c3) 50%,
      var(--bag-c4) 75%,
      var(--bag-c1) 100%
    ) border-box;
  animation: bag-spin var(--bag-speed) linear infinite;
}

/* ── ورایانت رنگ: فقط طلایی ── */
.border-animated-gradient.bag-gold {
  --bag-c1: var(--gold-200);
  --bag-c2: var(--gold-500);
  --bag-c3: var(--gold-300);
  --bag-c4: var(--gold-700);
}

/* ── ورایانت رنگ: فقط زمردی ── */
.border-animated-gradient.bag-emerald {
  --bag-c1: var(--emerald-200);
  --bag-c2: var(--emerald-500);
  --bag-c3: var(--emerald-300);
  --bag-c4: var(--emerald-700);
}

/* ── ورایانت پس‌زمینه ── */
.border-animated-gradient.bag-bg-base  { --bag-bg: var(--background); }
.border-animated-gradient.bag-bg-muted { --bag-bg: var(--muted); }

/* ── ورایانت سرعت ── */
.border-animated-gradient.bag-slow { --bag-speed: 10s; }
.border-animated-gradient.bag-fast { --bag-speed: 2s;  }

/* ── ورایانت ضخامت ── */
.border-animated-gradient.bag-thick { --bag-width: 3px; }
.border-animated-gradient.bag-thin  { --bag-width: 1px; }

/* ========== Unified section surfaces & blur separators ========== */
.section-unified-block {
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--tone-5) 62%, transparent) 0%,
      color-mix(in srgb, var(--tone-3) 74%, transparent) 100%
    );
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--tone-1) 55%, transparent);
}

.frosted-panel {
  border: 1px solid color-mix(in srgb, var(--tone-8) 24%, transparent);
  background: color-mix(in srgb, var(--tone-4) 72%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  backdrop-filter: blur(16px) saturate(115%);
}

.tone-gradient-line {
  height: 1px;
  width: 8rem;
  border-radius: 999px;
  margin-inline: auto;
  background: linear-gradient(
    to right,
    var(--tone-3) 0%,
    var(--tone-6) 35%,
    var(--tone-8) 65%,
    var(--tone-9) 100%
  );
  filter: blur(0.2px);
}

.section-blur-separator {
  position: relative;
}

.section-blur-separator::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: min(78rem, 92vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    to right,
    transparent 0%,
    color-mix(in srgb, var(--tone-6) 65%, transparent) 20%,
    color-mix(in srgb, var(--tone-8) 78%, transparent) 50%,
    color-mix(in srgb, var(--tone-7) 65%, transparent) 80%,
    transparent 100%
  );
  filter: blur(1.6px);
  opacity: 0.95;
}

@keyframes meteor-title-fall {
  0% {
    transform: translate3d(64px, -120px, 0) rotate(300deg) scaleX(0.82);
    opacity: 0;
  }
  9% {
    opacity: 0.9;
  }
  58% {
    opacity: 0.62;
  }
  82% {
    opacity: 0.28;
  }
  100% {
    transform: translate3d(-146px, var(--meteor-distance, 340px), 0) rotate(300deg) scaleX(0.96);
    opacity: 0;
  }
}

.meteor-title-streak {
  position: absolute;
  top: -18%;
  width: 56px;
  height: 1.2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--tone-9) 0%, transparent) 0%,
    color-mix(in srgb, var(--gold-200) 56%, transparent) 30%,
    color-mix(in srgb, var(--gold-400) 72%, transparent) 55%,
    color-mix(in srgb, var(--tone-9) 60%, transparent) 100%
  );
  box-shadow:
    0 0 10px color-mix(in srgb, var(--gold-400) 44%, transparent),
    0 0 20px color-mix(in srgb, var(--gold-200) 34%, transparent),
    0 0 28px color-mix(in srgb, var(--tone-9) 20%, transparent);
  transform-origin: right center;
  transform: translate3d(64px, -120px, 0) rotate(300deg) scaleX(0.82);
  animation-name: meteor-title-fall;
  animation-delay: -2s;
  animation-duration: 4.5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}

.meteor-title-streak-1 {
  left: 2%;
  --meteor-distance: 320px;
  animation-delay: -0.6s;
  animation-duration: 4.1s;
}
.meteor-title-streak-2 {
  left: 9%;
  --meteor-distance: 360px;
  animation-delay: -1.7s;
  animation-duration: 4.8s;
}
.meteor-title-streak-3 {
  left: 15%;
  --meteor-distance: 340px;
  animation-delay: -2.9s;
  animation-duration: 4.3s;
}
.meteor-title-streak-4 {
  left: 22%;
  --meteor-distance: 390px;
  animation-delay: -3.8s;
  animation-duration: 5.1s;
}
.meteor-title-streak-5 {
  left: 29%;
  --meteor-distance: 330px;
  animation-delay: -1.2s;
  animation-duration: 4.2s;
}
.meteor-title-streak-6 {
  left: 36%;
  --meteor-distance: 370px;
  animation-delay: -2.4s;
  animation-duration: 4.9s;
}
.meteor-title-streak-7 {
  left: 43%;
  --meteor-distance: 350px;
  animation-delay: -3.5s;
  animation-duration: 4.6s;
}
.meteor-title-streak-8 {
  left: 50%;
  --meteor-distance: 400px;
  animation-delay: -0.9s;
  animation-duration: 5.2s;
}
.meteor-title-streak-9 {
  left: 57%;
  --meteor-distance: 335px;
  animation-delay: -2.1s;
  animation-duration: 4.4s;
}
.meteor-title-streak-10 {
  left: 64%;
  --meteor-distance: 375px;
  animation-delay: -3.1s;
  animation-duration: 5s;
}
.meteor-title-streak-11 {
  left: 71%;
  --meteor-distance: 345px;
  animation-delay: -1.4s;
  animation-duration: 4.5s;
}
.meteor-title-streak-12 {
  left: 78%;
  --meteor-distance: 385px;
  animation-delay: -2.8s;
  animation-duration: 5.1s;
}
.meteor-title-streak-13 {
  left: 84%;
  --meteor-distance: 325px;
  animation-delay: -3.7s;
  animation-duration: 4.2s;
}
.meteor-title-streak-14 {
  left: 90%;
  --meteor-distance: 365px;
  animation-delay: -1.9s;
  animation-duration: 4.8s;
}
.meteor-title-streak-15 {
  left: 95%;
  --meteor-distance: 340px;
  animation-delay: -2.6s;
  animation-duration: 4.6s;
}
.meteor-title-streak-16 {
  left: 98%;
  --meteor-distance: 380px;
  animation-delay: -3.3s;
  animation-duration: 5.2s;
}