/* =========================================================
   main.css  —  پایه‌ی پروژه (عیناً از Apeel)
   مسیر: theme-home/assets/css/main.css
   ========================================================= */

/* =========================================================
   ۱. متغیرهای پایه (از entry.BoQna4hk.css)
   ========================================================= */
:root {
  /* ارتفاع‌های صفحه */
  --vh100max: 100vh;
  --vh100: 100vh;
  --vh100min: 100vh;
  --jsvh100min: 100vh;
  --roughMin: calc(100vh - 30vw);
  --safe100min: max(var(--roughMin), var(--jsvh100min));

  /* شعاع گوشه‌ها */
  --radius: 1.5rem;
  --overlap: 2rem;
  --parallax: 4rem;

  /* ایزینگ‌ها (از Apeel) */
  --ease-in-quad: cubic-bezier(.55, .085, .68, .53);
  --ease-out-quad: cubic-bezier(.25, .46, .45, .94);
  --ease-in-cubic: cubic-bezier(.55, .055, .675, .19);
  --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
  --ease-in-quart: cubic-bezier(.895, .03, .685, .22);
  --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
  --ease-in-quint: cubic-bezier(.755, .05, .855, .06);
  --ease-out-quint: cubic-bezier(.23, 1, .32, 1);
  --ease-in-back: cubic-bezier(.6, -.28, .735, .045);
  --ease-out-back: cubic-bezier(.175, .885, .32, 1.275);
  --ease-in-expo: cubic-bezier(.95, .05, .795, .035);
  --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
  --ease-in-out-sine: cubic-bezier(.445, .05, .55, .95);

  /* گرید ۴۸ ستونی */
  --grid-columns: 48;
  --grid-column-gap: 0px;
  --grid-side-margin: 6rem;
  --scrollbar-width: 0px;
  --grid-max-width: 1480px;
  --grid-width-input: calc(100vw - var(--scrollbar-width) - var(--grid-side-margin) * 2);
  --grid-width: min(var(--grid-width-input), var(--grid-max-width));
  --grid-column-width: calc((var(--grid-width) - (var(--grid-columns) - 1) * var(--grid-column-gap)) / var(--grid-columns));
}

/* موبایل */
@media only screen and (max-width: 767px) {
  :root {
    --radius: 1rem;
    --overlap: 1rem;
    --parallax: 2rem;
    --vh100min: var(--safe100min);
    --grid-columns: 16;
    --grid-side-margin: 2rem;
    --scrollbar-width: 0px;
  }
}

/* =========================================================
   ۲. رنگ‌های Apeel
   ========================================================= */
:root {
  --cl-debug: hsla(0, 0%, 100%, .3);
  --cl-error: #b83e35;
  --cl-black: #000;
  --cl-offwhite-400: #faf3e6;
  --cl-green-300: #f3edd1;
  --cl-blue-800: #0e4347;
  --cl-green-800: #154726;
  --cl-red-800: #5b1a1d;
  --cl-purple-800: #622a52;
  --cl-asparagus-400: #2f4e37;
  --cl-lime-400: #97c74b;
  --cl-cilantro-300: #d8e0a5;
  --cl-cilantro-400: #266b47;
  --cl-banana-300: #fce8bd;
  --cl-banana-400: #ffd550;
  --cl-tangerine-200: #fdd7c6;
  --cl-tangerine-300: #feb291;
  --cl-tangerine-400: #f1753f;
  --cl-strawberry-300: #ffb9b5;
  --cl-strawberry-400: #ff5b4e;
  --cl-eggplant-300: #eec6cb;
  --cl-eggplant-400: #7d3e61;
  --cl-bluekale-200: #daeced;
  --cl-bluekale-300: #c0d0d1;
  --cl-bluekale-400: #135a60;
  --cl-aqua-300: #d6f3ec;
  --cl-aqua-400: #99dbcc;
}

/* =========================================================
   ۳. تم‌های Apeel (با attribute theme="...")
   ========================================================= */
[theme=image] {
  --cl-theme: var(--cl-black);
  --cl-navBg: var(--cl-offwhite-400);
  --cl-navEl: var(--cl-green-800);
  --cl-text: var(--cl-offwhite-400);
  --cl-markup: var(--cl-banana-400);
  --cl-btnBg: var(--cl-offwhite-400);
  --cl-btnEl: var(--cl-green-800);
  --cl-pattern: var(--cl-tangerine-400);
  --cl-bgShape: var(--cl-banana-300);
  --cl-fadedHead: hsla(39, 67%, 94%, .4);
  --cl-fadedSub: hsla(39, 67%, 94%, .4);
  --cl-caption: hsla(39, 67%, 94%, .6);
}

[theme=offwhite] {
  --cl-theme: var(--cl-offwhite-400);
  --cl-navBg: var(--cl-offwhite-400);
  --cl-navEl: var(--cl-green-800);
  --cl-text: var(--cl-green-800);
  --cl-markup: var(--cl-banana-400);
  --cl-btnBg: var(--cl-green-800);
  --cl-btnEl: var(--cl-offwhite-400);
  --cl-pattern: var(--cl-tangerine-400);
  --cl-bgShape: var(--cl-banana-300);
  --cl-fadedHead: hsla(64, 15%, 82%, .5);
  --cl-fadedSub: rgba(21, 71, 38, .4);
  --cl-caption: rgba(21, 71, 38, .5);
}

[theme=banana] {
  --cl-theme: var(--cl-banana-400);
  --cl-text: var(--cl-green-800);
  --cl-markup: var(--cl-banana-300);
  --cl-btnBg: var(--cl-green-800);
  --cl-btnEl: var(--cl-offwhite-400);
  --cl-pattern: var(--cl-tangerine-400);
  --cl-fadedHead: rgba(224, 185, 67, .5);
  --cl-fadedSub: rgba(21, 71, 38, .4);
  --cl-caption: rgba(21, 71, 38, .5);
}

[theme=bananaLight] {
  --cl-theme: var(--cl-banana-300);
  --cl-text: var(--cl-green-800);
  --cl-markup: var(--cl-banana-400);
  --cl-btnBg: var(--cl-green-800);
  --cl-btnEl: var(--cl-offwhite-400);
  --cl-pattern: var(--cl-tangerine-400);
  --cl-fadedHead: hsla(43, 50%, 73%, .5);
  --cl-fadedSub: rgba(170, 146, 87, .5);
  --cl-caption: rgba(170, 146, 87, .8);
}

[theme=lime] {
  --cl-theme: var(--cl-lime-400);
  --cl-text: var(--cl-green-800);
  --cl-markup: var(--cl-banana-400);
  --cl-btnBg: var(--cl-green-800);
  --cl-btnEl: var(--cl-offwhite-400);
  --cl-pattern: var(--cl-banana-400);
  --cl-fadedHead: rgba(21, 71, 38, .2);
  --cl-fadedSub: rgba(21, 71, 38, .5);
  --cl-caption: rgba(21, 71, 38, .6);
}

[theme=asparagus] {
  --cl-theme: var(--cl-asparagus-400);
  --cl-text: var(--cl-banana-400);
  --cl-markup: #377243;
  --cl-btnBg: var(--cl-banana-400);
  --cl-btnEl: var(--cl-green-800);
  --cl-pattern: var(--cl-tangerine-400);
  --cl-fadedHead: rgba(255, 213, 80, .2);
  --cl-fadedSub: rgba(255, 213, 80, .25);
  --cl-caption: rgba(255, 213, 80, .6);
}

[theme=tangerine] {
  --cl-theme: var(--cl-tangerine-400);
  --cl-text: var(--cl-red-800);
  --cl-markup: var(--cl-banana-400);
  --cl-btnBg: var(--cl-red-800);
  --cl-btnEl: var(--cl-offwhite-400);
  --cl-pattern: var(--cl-banana-400);
  --cl-fadedHead: rgba(91, 26, 29, .2);
  --cl-fadedSub: rgba(91, 26, 29, .5);
  --cl-caption: rgba(91, 26, 29, .6);
}

[theme=tangerineLight] {
  --cl-theme: var(--cl-tangerine-300);
  --cl-text: var(--cl-red-800);
  --cl-markup: var(--cl-banana-400);
  --cl-btnBg: var(--cl-red-800);
  --cl-btnEl: var(--cl-offwhite-400);
  --cl-pattern: var(--cl-tangerine-400);
  --cl-fadedHead: rgba(91, 26, 29, .2);
  --cl-fadedSub: rgba(91, 26, 29, .4);
  --cl-caption: rgba(91, 26, 29, .5);
}

[theme=cilantro] {
  --cl-theme: var(--cl-cilantro-400);
  --cl-text: var(--cl-banana-400);
  --cl-markup: #3a8451;
  --cl-btnBg: var(--cl-banana-400);
  --cl-btnEl: var(--cl-green-800);
  --cl-pattern: var(--cl-tangerine-400);
  --cl-fadedHead: rgba(134, 173, 142, .3);
  --cl-fadedSub: rgba(134, 173, 142, .5);
  --cl-caption: #86ad8e;
}

[theme=cilantroLight] {
  --cl-theme: var(--cl-cilantro-300);
  --cl-text: var(--cl-green-800);
  --cl-markup: var(--cl-banana-400);
  --cl-btnBg: var(--cl-green-800);
  --cl-btnEl: var(--cl-offwhite-400);
  --cl-pattern: var(--cl-tangerine-400);
  --cl-fadedHead: rgba(21, 71, 38, .15);
  --cl-fadedSub: rgba(21, 71, 38, .5);
  --cl-caption: rgba(21, 71, 38, .6);
}

[theme=aqua] {
  --cl-theme: var(--cl-aqua-400);
  --cl-text: #0e4347;
  --cl-markup: var(--cl-banana-400);
  --cl-btnBg: #0e4347;
  --cl-btnEl: var(--cl-offwhite-400);
  --cl-pattern: var(--cl-banana-400);
  --cl-fadedHead: rgba(14, 67, 71, .15);
  --cl-fadedSub: rgba(14, 67, 71, .4);
  --cl-caption: rgba(14, 67, 71, .6);
}

[theme=eggplant] {
  --cl-theme: var(--cl-eggplant-400);
  --cl-text: var(--cl-banana-400);
  --cl-markup: #ab5253;
  --cl-btnBg: var(--cl-banana-400);
  --cl-btnEl: var(--cl-green-800);
  --cl-pattern: var(--cl-banana-400);
  --cl-fadedHead: rgba(255, 213, 80, .2);
  --cl-fadedSub: rgba(255, 213, 80, .4);
  --cl-caption: rgba(255, 213, 80, .6);
}

[theme=eggplantLight] {
  --cl-theme: var(--cl-eggplant-300);
  --cl-text: var(--cl-purple-800);
  --cl-markup: var(--cl-banana-400);
  --cl-btnBg: var(--cl-purple-800);
  --cl-btnEl: var(--cl-offwhite-400);
  --cl-pattern: var(--cl-tangerine-400);
  --cl-fadedHead: rgba(98, 42, 82, .15);
  --cl-fadedSub: rgba(98, 42, 82, .4);
  --cl-caption: rgba(98, 42, 82, .6);
}

[theme=strawberry] {
  --cl-theme: var(--cl-strawberry-400);
  --cl-text: var(--cl-red-800);
  --cl-markup: var(--cl-banana-400);
  --cl-btnBg: var(--cl-red-800);
  --cl-btnEl: var(--cl-offwhite-400);
  --cl-pattern: var(--cl-banana-400);
  --cl-fadedHead: rgba(91, 26, 29, .15);
  --cl-fadedSub: rgba(91, 26, 29, .4);
  --cl-caption: rgba(91, 26, 29, .6);
}

[theme=bluekale] {
  --cl-theme: var(--cl-bluekale-400);
  --cl-text: var(--cl-banana-400);
  --cl-markup: #1d707b;
  --cl-btnBg: var(--cl-banana-400);
  --cl-btnEl: var(--cl-green-800);
  --cl-pattern: var(--cl-tangerine-400);
  --cl-fadedHead: rgba(111, 149, 153, .3);
  --cl-fadedSub: rgba(111, 149, 153, .5);
  --cl-caption: #6f9599;
}

/* تم پیش‌فرض */
:root,
[theme=offwhite] {
  --cl-theme: var(--cl-offwhite-400);
  --cl-text: var(--cl-green-800);
}

/* =========================================================
   ۴. Reset و پایه
   ========================================================= */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: none;
  font-size: 10px;
}

@media only screen and (max-width: 767px) {
  html {
    font-size: clamp(8.5333333333px, 2.6666666667vw, 20.4533333333px);
    min-height: 0;
  }
}

@media only screen and (min-width: 768px) {
  html {
    font-size: clamp(6.4px, .625vw, 10px);
    min-height: 0;
  }
}

body, html {
  line-height: 0 !important;
  margin: 0;
}

body {
  white-space: pre-line;
  background: var(--cl-offwhite-400);
  color: var(--cl-text);
  font-family: 'Vazirmatn', 'acumin-pro', sans-serif;
  overflow-x: hidden;
}

*, :after, :before {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

ol, ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, p {
  margin: 0;
}

button, input {
  border: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  outline: none;
  padding: 0;
  text-transform: inherit;
}

button {
  cursor: pointer;
  background: none;
}

/* =========================================================
   ۵. سیستم تایپوگرافی Apeel (کامل)
   ========================================================= */
.type-dh1 {
  font-family: 'Vazirmatn', 'FoundersGrotesk', sans-serif;
  font-size: 14.2rem;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .8;
}
@media only screen and (max-width: 767px) {
  .type-dh1 { font-size: 6.4rem; line-height: .85; }
}

.type-dh2 {
  font-family: 'Vazirmatn', 'FoundersGrotesk', sans-serif;
  font-size: 11.6rem;
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: .8;
}
@media only screen and (max-width: 767px) {
  .type-dh2 { font-size: 6.4rem; line-height: .85; }
}

.type-h1 {
  font-family: 'Vazirmatn', 'FoundersGrotesk', sans-serif;
  font-size: 9rem;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: .85;
}
@media only screen and (max-width: 767px) {
  .type-h1 { font-size: 5.2rem; line-height: .85; }
}

.type-h2 {
  font-family: 'Vazirmatn', 'FoundersGrotesk', sans-serif;
  font-size: 6.4rem;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: .9;
}
@media only screen and (max-width: 767px) {
  .type-h2 { font-size: 3.2rem; letter-spacing: -.02em; line-height: .9; }
}

.type-h3 {
  font-family: 'Vazirmatn', 'FoundersGrotesk', sans-serif;
  font-size: 5.6rem;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: .9;
}
@media only screen and (max-width: 767px) {
  .type-h3 { font-size: 3.2rem; letter-spacing: -.02em; line-height: .9; }
}

.type-h4 {
  font-family: 'Vazirmatn', 'FoundersGrotesk', sans-serif;
  font-size: 4.8rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: .9;
}
@media only screen and (max-width: 767px) {
  .type-h4 { font-size: 3.2rem; letter-spacing: -.02em; line-height: .9; }
}

.type-sub1 {
  font-family: 'Vazirmatn', 'FoundersGrotesk', sans-serif;
  font-size: 2.8rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: .9;
}
@media only screen and (max-width: 767px) {
  .type-sub1 { font-size: 2.2rem; line-height: 1; }
}

.type-sub5 {
  font-family: 'Vazirmatn', 'acumin-pro', sans-serif;
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.2;
}
@media only screen and (max-width: 767px) {
  .type-sub5 { font-size: 1.4rem; }
}

.type-sub6 {
  font-family: 'Vazirmatn', 'acumin-pro', sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.2;
}
@media only screen and (max-width: 767px) {
  .type-sub6 { font-size: 1.4rem; }
}

.type-caption1 {
  font-family: 'Vazirmatn', 'acumin-pro', sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.2;
}

.type-body2 {
  font-family: 'Vazirmatn', 'acumin-pro', sans-serif;
  font-size: 2.2rem;
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.45;
}
@media only screen and (max-width: 767px) {
  .type-body2 { font-size: 1.4rem; letter-spacing: normal; }
}

.type-body3 {
  font-family: 'Vazirmatn', 'acumin-pro', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.4;
}
@media only screen and (max-width: 767px) {
  .type-body3 { font-size: 1.4rem; }
}

.type-link {
  font-family: 'Vazirmatn', 'FoundersGrotesk', sans-serif;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: .85;
}
@media only screen and (max-width: 767px) {
  .type-link { font-size: 1.6rem; }
}

/* =========================================================
   ۶. گرید Apeel
   ========================================================= */
.the-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1600px;
  width: var(--grid-width, 100%);
}

.the-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  margin-left: auto;
  margin-right: auto;
  max-width: 1600px;
  width: var(--grid-width, 100%);
  grid-column-gap: var(--grid-column-gap);
}

/* =========================================================
   ۷. یوتیلیتی‌های مشترک Apeel
   ========================================================= */
.mobile-only { display: none; }
.desktop-only { display: block; }

@media only screen and (max-width: 767px) {
  .mobile-only { display: block; }
  .desktop-only { display: none !important; }
}

@media only screen and (min-width: 768px) {
  .mobile-only { display: none !important; }
  .desktop-only { display: block; }
}

/* =========================================================
   ۸. انیمیشن‌های Apeel
   ========================================================= */
@keyframes spin-clockwise {
  to { transform: rotate(1turn); }
}

@keyframes spin-counterclockwise {
  to { transform: rotate(-1turn); }
}

@keyframes dashoffset {
  to { stroke-dashoffset: 0; }
}

@keyframes flash {
  0% { opacity: .2; }
  20% { opacity: 1; }
  40% { opacity: .2; }
  60% { opacity: 1; }
  80% { opacity: .2; }
  to { opacity: 1; }
}

@keyframes pulse {
  0% { opacity: 1; transform: none; }
  to { opacity: 0; transform: scale(1.5); }
}

@keyframes blink {
  0% { opacity: 0; }
  to { opacity: 1; }
}

@keyframes bounce {
  0%, to { transform: translateY(0); }
  50% { transform: translateY(-30%); }
}

@keyframes slideright {
  0% { transform: translate(-100%); }
  to { transform: translate(200%); }
}

@keyframes redraw {
  0% { transform: translate(-100%); }
  to { transform: translate(0); }
}

/* =========================================================
   ۹. Preloader Apeel
   ========================================================= */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

.preloader.show {
  pointer-events: all;
}

.preloader .bgs {
  position: absolute;
  inset: 0;
}

.preloader .bg {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.preloader .bg:first-child {
  opacity: 1;
}

.preloader .bg-offwhite { background: #faf3e6; }
.preloader .bg-blue { background: #d0ebe6; }
.preloader .bg-orange { background: #ffeac2; }
.preloader .bg-green { background: #dee1ac; }
.preloader .bg-red { background: #f3d1d1; }

.preloader .icons {
  position: absolute;
  inset: 0;
}

.preloader .icon {
  position: absolute;
  inset: 0;
  margin: auto;
  max-height: 100%;
  max-width: 100%;
  height: fit-content;
}

.preloader .icon.icon-blue { width: 16.5rem; }
.preloader .icon.icon-orange { width: 14.4rem; }
.preloader .icon.icon-green { width: 14.9rem; }
.preloader .icon.icon-red { width: 14.5rem; }

.preloader .left, .preloader .right {
  width: 100%;
}

.preloader .right {
  position: absolute;
  left: 0;
  top: 0;
}

.preloader .first, .preloader .second {
  transform: scale(0);
}