/* MASSIA design system v10 — tokens, typography, buttons, fields.
 * Loaded LAST on pages that adopt it. Legacy --m-* variables are re-pointed at the new tokens so
 * older stylesheets inherit the new palette without being edited. Persian-first, RTL-native.
 */
@font-face{font-family:"Vazirmatn NL";src:url("../fonts/Vazirmatn-NL-variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/CormorantGaramond-latin-variable.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}

:root{
  /* wine */
  --mx-wine-950:#26080f;--mx-wine-900:#380e1b;--mx-wine-800:#4a1424;--mx-wine-700:#5c1d2f;--mx-wine-600:#78293f;--mx-wine-500:#98405a;--mx-rose-300:#d9a7aa;--mx-rose-200:#ecc9c8;
  /* ivory / sand / taupe */
  --mx-ivory-50:#fefbf5;--mx-ivory-100:#f9f4ea;--mx-ivory-200:#f1e9db;--mx-sand-300:#e4d7c3;--mx-sand-400:#cfbfa8;--mx-taupe-500:#9c8978;--mx-taupe-700:#6b5b50;
  /* graphite */
  --mx-graphite-950:#100b0f;--mx-graphite-900:#191217;--mx-graphite-800:#251b21;--mx-graphite-700:#36282f;
  /* champagne */
  --mx-champagne-200:#f3e6c8;--mx-champagne-300:#ead7ae;--mx-champagne-400:#d9bc83;--mx-champagne-500:#c5a063;--mx-champagne-600:#9f7d43;
  --mx-ink:#2a1c21;--mx-ink-soft:#54434a;
  --mx-success:#3d6b4f;--mx-warning:#9a6416;--mx-danger:#a1303c;

  --mx-font-fa:"Vazirmatn NL","Vazirmatn",Tahoma,"Segoe UI",Arial,sans-serif;
  --mx-font-display:"Cormorant Garamond","Vazirmatn NL",Georgia,"Times New Roman",serif;

  --mx-r-xs:2px;--mx-r-sm:4px;--mx-r-md:8px;--mx-r-lg:14px;--mx-r-pill:999px;
  --mx-s-1:4px;--mx-s-2:8px;--mx-s-3:12px;--mx-s-4:16px;--mx-s-5:24px;--mx-s-6:32px;--mx-s-7:48px;--mx-s-8:72px;--mx-s-9:112px;

  --mx-e1:0 1px 2px rgba(38,8,15,.10),0 8px 18px -10px rgba(38,8,15,.28);
  --mx-e2:0 2px 4px rgba(38,8,15,.10),0 18px 36px -16px rgba(38,8,15,.38);
  --mx-e3:0 4px 8px rgba(38,8,15,.12),0 36px 70px -26px rgba(38,8,15,.5);
  --mx-ring:0 0 0 2px var(--mx-ivory-50),0 0 0 4px var(--mx-champagne-500);

  --mx-ease:cubic-bezier(.2,.8,.2,1);--mx-ease-out:cubic-bezier(.16,1,.3,1);--mx-ease-spring:cubic-bezier(.34,1.4,.64,1);
  --mx-t-fast:160ms;--mx-t-base:280ms;--mx-t-slow:560ms;--mx-t-cine:1100ms;

  /* legacy variables used by the older landing stylesheets */
  --m-paper:#f6f0e6;--m-cream:var(--mx-ivory-50);--m-wine:var(--mx-wine-700);--m-deep:var(--mx-graphite-900);--m-deeper:var(--mx-graphite-950);
  --m-gold:var(--mx-champagne-500);--m-rose:#c98a8f;--m-line:#d2c4b2;--m-ink:var(--mx-ink);
  --m-font:var(--mx-font-fa);--m-display:var(--mx-font-display);--m-serifs:var(--mx-font-display);
}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.m-cinema{font-family:var(--mx-font-fa);font-feature-settings:"kern","liga";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--mx-wine-700);color:var(--mx-ivory-50)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--mx-champagne-500);outline-offset:3px;border-radius:var(--mx-r-xs)}

.mx-eyebrow{font:600 12px/1.4 var(--mx-font-display);letter-spacing:.34em;text-transform:uppercase;direction:ltr;color:var(--mx-champagne-600)}
.mx-hairline{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--mx-champagne-500),transparent);opacity:.7}

/* ---------- Buttons ---------- */
.mx-btn,
body.m-cinema .m-cut-button,
body.m-cinema .m-outline-link,
body.m-cinema .m-rack-dialog__buy,
body.m-cinema .m-rack-dialog__link{
  --bg:var(--mx-wine-700);--fg:var(--mx-ivory-50);--bd:var(--mx-wine-700);--bg-hover:var(--mx-wine-800);--sheen:rgba(236,215,174,.55);
  position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.85em;
  min-height:48px;padding:0 1.7em;margin:0;border:1px solid var(--bd)!important;border-radius:var(--mx-r-xs);clip-path:none!important;
  background:var(--bg)!important;color:var(--fg)!important;font:600 13px/1 var(--mx-font-fa);letter-spacing:.01em;text-decoration:none;white-space:nowrap;cursor:pointer;
  box-shadow:var(--mx-e1),inset 0 0 0 1px rgba(236,215,174,.0);
  transition:background-color var(--mx-t-base) var(--mx-ease),color var(--mx-t-base) var(--mx-ease),border-color var(--mx-t-base),transform var(--mx-t-base) var(--mx-ease),box-shadow var(--mx-t-base) var(--mx-ease);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.mx-btn::before,
body.m-cinema .m-cut-button::before,
body.m-cinema .m-outline-link::before,
body.m-cinema .m-rack-dialog__buy::before,
body.m-cinema .m-rack-dialog__link::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(160px circle at var(--mx-x,50%) var(--mx-y,50%),var(--sheen),transparent 60%);opacity:0;transition:opacity var(--mx-t-base) var(--mx-ease);
}
.mx-btn:hover,
body.m-cinema .m-cut-button:hover,
body.m-cinema .m-outline-link:hover,
body.m-cinema .m-rack-dialog__buy:hover,
body.m-cinema .m-rack-dialog__link:hover{
  background:var(--bg-hover)!important;transform:translateY(-2px);box-shadow:var(--mx-e2),inset 0 0 0 1px rgba(236,215,174,.55);
}
.mx-btn:hover::before,body.m-cinema .m-cut-button:hover::before,body.m-cinema .m-outline-link:hover::before,
body.m-cinema .m-rack-dialog__buy:hover::before,body.m-cinema .m-rack-dialog__link:hover::before{opacity:1}
.mx-btn:active,body.m-cinema .m-cut-button:active,body.m-cinema .m-outline-link:active,
body.m-cinema .m-rack-dialog__buy:active,body.m-cinema .m-rack-dialog__link:active{transform:translateY(0) scale(.985);box-shadow:var(--mx-e1);transition-duration:60ms}
.mx-btn:focus-visible,body.m-cinema .m-cut-button:focus-visible,body.m-cinema .m-outline-link:focus-visible,
body.m-cinema .m-rack-dialog__buy:focus-visible,body.m-cinema .m-rack-dialog__link:focus-visible{outline:none;box-shadow:var(--mx-ring),var(--mx-e2)}

/* icon slot: the forward arrow slides toward the reading direction (left in RTL) */
.mx-btn__icon,body.m-cinema .m-cut-button>span:last-child,body.m-cinema .m-outline-link>span:last-child,body.m-cinema .m-rack-dialog__link>span{display:inline-grid;place-items:center;transition:transform var(--mx-t-base) var(--mx-ease)}
.mx-btn:hover .mx-btn__icon,body.m-cinema .m-cut-button:hover>span:last-child,body.m-cinema .m-outline-link:hover>span:last-child,body.m-cinema .m-rack-dialog__link:hover>span{transform:translate(-5px,-3px)}

/* variants */
.mx-btn--ivory,body.m-cinema .m-cut-button--cream{--bg:var(--mx-ivory-100);--fg:var(--mx-wine-800);--bd:var(--mx-ivory-100);--bg-hover:var(--mx-ivory-50);--sheen:rgba(197,160,99,.45)}
.mx-btn--champagne{--bg:var(--mx-champagne-400);--fg:var(--mx-graphite-950);--bd:var(--mx-champagne-400);--bg-hover:var(--mx-champagne-300);--sheen:rgba(255,255,255,.6)}
.mx-btn--ghost,body.m-cinema .m-outline-link{--bg:transparent;--fg:var(--mx-wine-700);--bd:currentColor;--bg-hover:rgba(92,29,47,.08);--sheen:rgba(197,160,99,.35);box-shadow:none}
.mx-btn--ghost:hover,body.m-cinema .m-outline-link:hover{box-shadow:inset 0 0 0 1px var(--mx-champagne-500)}
/* ghost button on dark scenes */
.mx-on-dark .mx-btn--ghost,body.m-cinema .m-archive-intro .m-outline-link,body.m-cinema .m-timeline .m-outline-link{--fg:var(--mx-ivory-100);--bd:rgba(236,215,174,.65);--bg-hover:rgba(236,215,174,.12);--sheen:rgba(236,215,174,.4)}
.mx-btn--sm,body.m-cinema .m-archive-intro .m-outline-link,body.m-cinema .m-rack-dialog__buy{min-height:42px;padding:0 1.3em;font-size:12px}
.mx-btn--lg{min-height:56px;padding:0 2.1em;font-size:14px}
.mx-btn--block{display:flex;width:100%}

/* states */
.mx-btn[disabled],.mx-btn.is-disabled,.mx-btn[aria-disabled="true"]{opacity:.45;pointer-events:none;box-shadow:none}
.mx-btn.is-loading,.mx-btn[aria-busy="true"]{color:transparent!important;pointer-events:none}
.mx-btn.is-loading::after,.mx-btn[aria-busy="true"]::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;border:2px solid rgba(254,251,245,.35);border-top-color:var(--mx-ivory-50);animation:mx-spin .8s linear infinite}

/* round icon buttons */
.mx-icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid transparent;border-radius:50%;background:transparent;color:inherit;cursor:pointer;
  transition:background-color var(--mx-t-base) var(--mx-ease),border-color var(--mx-t-base),transform var(--mx-t-base) var(--mx-ease),color var(--mx-t-base)}
.mx-icon-btn:hover{background:rgba(92,29,47,.08);border-color:rgba(197,160,99,.7);transform:translateY(-1px)}
.mx-icon-btn:active{transform:scale(.94)}
.mx-icon-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Fields ---------- */
.mx-field{display:grid;gap:var(--mx-s-2)}
.mx-field>label{font:500 13px/1.5 var(--mx-font-fa);color:var(--mx-ink-soft)}
.mx-input,.mx-select,.mx-textarea{width:100%;min-height:48px;padding:0 var(--mx-s-4);border:1px solid var(--mx-sand-400);border-radius:var(--mx-r-xs);background:var(--mx-ivory-50);color:var(--mx-ink);font:400 14px/1.6 var(--mx-font-fa);
  transition:border-color var(--mx-t-base),box-shadow var(--mx-t-base),background-color var(--mx-t-base)}
.mx-textarea{min-height:120px;padding:var(--mx-s-3) var(--mx-s-4)}
.mx-input:hover,.mx-select:hover,.mx-textarea:hover{border-color:var(--mx-taupe-500)}
.mx-input:focus,.mx-select:focus,.mx-textarea:focus{outline:none;border-color:var(--mx-champagne-600);box-shadow:0 0 0 3px rgba(197,160,99,.28);background:#fff}
.mx-input[aria-invalid="true"]{border-color:var(--mx-danger);box-shadow:0 0 0 3px rgba(161,48,60,.14)}
.mx-input:disabled{opacity:.5;cursor:not-allowed}

@keyframes mx-spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .mx-btn,.mx-icon-btn,body.m-cinema .m-cut-button,body.m-cinema .m-outline-link,body.m-cinema .m-rack-dialog__buy,body.m-cinema .m-rack-dialog__link{transition-duration:1ms!important}
  .mx-btn:hover,body.m-cinema .m-cut-button:hover,body.m-cinema .m-outline-link:hover{transform:none}
  .mx-btn.is-loading::after{animation-duration:2.4s}
}
@media (hover:none){.mx-btn:hover,body.m-cinema .m-cut-button:hover,body.m-cinema .m-outline-link:hover{transform:none}}