/*
Theme Name: MEGAGEN
Theme URI: https://imegagen.ir/
Description: قالب فرزند Hello Elementor برای وب‌سایت مگاژن ایران — فارسی (راست‌به‌چپ)، سبک تیره و مینیمال، با انیمیشن اسکرول. Child theme of Hello Elementor: Persian RTL, dark minimal style, scroll animations.
Author: MEGAGEN
Template: hello-elementor
Version: 5.9.5
Text Domain: megagen
*/

/* ---------- Design tokens (overridable from Elementor Global Settings) ----------
   The 6 brand/neutral colors below are runtime-overridden per-site by mg-core.php
   (admin editable). The scale tokens (type / space / radius / elevation / motion)
   are the design-system DNA used by the professional redesign layer. */
:root {
  --mg-bg: #ffffff;
  --mg-surface: #f5f8fc;
  --mg-text: #0b1320;
  --mg-muted: #56677b;
  --mg-accent: #0067b1; /* corporate blue (MegaGen-style) */
  --mg-border: #e5eaf1;

  /* Extended neutrals + semantic (derived; safe fallbacks) */
  --mg-surface-2: #eef3f9;
  --mg-heading: #0a1626;
  --mg-faint: #8496a8;
  --mg-accent-deep: #024e86;
  --mg-accent-soft: #e9f1fa;
  --mg-border-strong: #d4dce7;
  --mg-success: #1f9d63;
  --mg-warn: #b5760a;
  --mg-danger: #d0392b;

  /* Type scale (fluid) + line-heights */
  --mg-fs-xs: .8125rem;
  --mg-fs-sm: .9375rem;
  --mg-fs-base: 1rem;
  --mg-fs-md: 1.125rem;
  --mg-fs-lg: 1.375rem;
  --mg-fs-xl: 1.75rem;
  --mg-fs-2xl: clamp(2rem, 1.2rem + 3vw, 2.85rem);
  --mg-fs-3xl: clamp(2.6rem, 1.4rem + 5vw, 4rem);
  --mg-fs-display: clamp(3.1rem, 1.5rem + 7vw, 5.6rem);
  --mg-lh-tight: 1.12;
  --mg-lh-snug: 1.35;
  --mg-lh: 1.8;

  /* Spacing (8pt) + layout */
  --mg-sp-1: .25rem; --mg-sp-2: .5rem; --mg-sp-3: .75rem; --mg-sp-4: 1rem;
  --mg-sp-5: 1.5rem; --mg-sp-6: 2rem; --mg-sp-7: 3rem; --mg-sp-8: 4.5rem; --mg-sp-9: 6.5rem;
  --mg-container: 1200px;

  /* Radius */
  --mg-r-sm: 8px; --mg-r: 14px; --mg-r-lg: 22px; --mg-r-pill: 999px;

  /* Motion + elevation (strong custom curves, soft diffused shadows) */
  --mg-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --mg-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --mg-dur: .24s;
  --mg-shadow-xs: 0 1px 2px rgba(11,19,32,.06), 0 1px 3px rgba(11,19,32,.05);
  --mg-shadow: 0 10px 34px -14px rgba(11, 19, 32, 0.16);
  --mg-shadow-lg: 0 30px 70px -26px rgba(11, 19, 32, 0.30);
  --mg-ring: 0 0 0 3px rgba(0, 103, 177, 0.30);
}

/* ---------- Persian base ---------- */
html { scroll-behavior: smooth; }

body {
  font-family: var(--mg-font, "Vazirmatn", system-ui, "Segoe UI", Tahoma, sans-serif);
  background: var(--mg-bg);
  color: var(--mg-text);
  line-height: 1.8;
}

/* Tabular/Persian numerals look better with these defaults */
body { font-feature-settings: "ss01"; }

/* ---------- Scroll-reveal (progressive enhancement) ----------
   The hidden state applies only when JS is available (html.mg-js, set very early
   in <head>). Without JS — and for crawlers — content renders fully visible. */
.mg-js [data-reveal] {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition: opacity 0.7s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)),
    transform 0.7s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1));
  will-change: opacity, transform;
}

.mg-js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Optional directional variants (add data-reveal="right" etc.) */
.mg-js [data-reveal="right"] { transform: translateX(34px); }
.mg-js [data-reveal="left"] { transform: translateX(-34px); }
.mg-js [data-reveal="zoom"] { transform: scale(0.92); }
.mg-js [data-reveal="right"].is-visible,
.mg-js [data-reveal="left"].is-visible,
.mg-js [data-reveal="zoom"].is-visible { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mg-js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Safety net: if the reveal script never runs (slow/blocked JS), this class is
   added by an inline timer so content can never stay invisible. */
.mg-reveal-fallback [data-reveal] { opacity: 1 !important; transform: none !important; }