/* MASSIA landing v10 — art-direction layer on top of the legacy cinema/editorial stylesheets.
 * Rules here change colour, type, surfaces, borders, shadows and decorative layers only. Layout/transform
 * properties owned by the scroll-driven stages (hero track, archive, timeline, editorial, focus) are left alone.
 */

/* ---------- atmosphere: fine film grain over the whole page ---------- */
body.m-cinema::after{content:"";position:fixed;inset:0;z-index:150;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .1  0 0 0 0 .12  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ---------- header ---------- */
body.m-cinema .m-topbar.mx-header{height:var(--m-head,68px);padding-inline:clamp(18px,3.2vw,56px);gap:20px;
  background:linear-gradient(180deg,rgba(254,251,245,.9),rgba(249,244,234,.78));backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);
  border-bottom:1px solid rgba(197,160,99,.38);box-shadow:0 1px 0 rgba(255,255,255,.6) inset;color:var(--mx-ink);
  transition:background-color var(--mx-t-base) var(--mx-ease),box-shadow var(--mx-t-base) var(--mx-ease),height var(--mx-t-base) var(--mx-ease)}
body.m-cinema .m-topbar.mx-header.is-scrolled{background:rgba(254,251,245,.94);box-shadow:0 10px 30px -18px rgba(38,8,15,.45)}
body.m-cinema .m-topbar.mx-header .m-topbar__start,body.m-cinema .m-topbar.mx-header .m-topbar__end{display:flex;align-items:center;gap:clamp(14px,1.8vw,30px)}
body.m-cinema .m-topbar.mx-header .m-topbar__end{justify-content:flex-start}
body.m-cinema .m-topbar.mx-header a,body.m-cinema .m-topbar.mx-header summary{color:var(--mx-ink)!important;font:500 13px/1 var(--mx-font-fa);letter-spacing:0;text-decoration:none;opacity:1;position:relative;cursor:pointer;list-style:none}
body.m-cinema .m-topbar.mx-header summary::-webkit-details-marker{display:none}
.mx-header .mx-link,.mx-header .m9-nav>a,.mx-header .m9-shop-menu>summary{padding:10px 2px}
.mx-header .mx-link::after,.mx-header .m9-nav>a::after,.mx-header .m9-shop-menu>summary::after{content:"";position:absolute;inset-inline:2px;bottom:3px;height:1px;background:var(--mx-champagne-500);transform:scaleX(0);transform-origin:right center;transition:transform var(--mx-t-base) var(--mx-ease)}
.mx-header .mx-link:hover::after,.mx-header .m9-nav>a:hover::after,.mx-header .m9-shop-menu[open]>summary::after,.mx-header .m9-shop-menu>summary:hover::after{transform:scaleX(1);transform-origin:left center}
body.m-cinema .m-topbar.mx-header a:hover{opacity:1;color:var(--mx-wine-600)!important}
.mx-header .m9-nav{display:flex;align-items:center;gap:clamp(14px,1.8vw,30px)}
.mx-header .m-topbar__brand img{height:46px;width:auto;display:block;transition:transform var(--mx-t-slow) var(--mx-ease)}
.mx-header .m-topbar__brand:hover img{transform:scale(1.04)}
.mx-header .m-menu-open i{background:var(--mx-wine-700)}
.mx-header .m9-chevron{display:inline-block;transition:transform var(--mx-t-base) var(--mx-ease)}
.mx-header .m9-shop-menu[open] .m9-chevron{transform:rotate(180deg)}
.mx-header .m9-mega{background:var(--mx-ivory-50);color:var(--mx-ink);border:1px solid rgba(197,160,99,.5);border-radius:var(--mx-r-sm);box-shadow:var(--mx-e3);padding:var(--mx-s-4) var(--mx-s-5)}
.mx-header .m9-mega a{font-weight:500}
.mx-header .m9-mega-heading a{color:var(--mx-wine-700)!important;font-weight:700}

.mx-header .mx-account{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 12px;border:1px solid rgba(92,29,47,.28);border-radius:var(--mx-r-pill);
  transition:background-color var(--mx-t-base) var(--mx-ease),border-color var(--mx-t-base),transform var(--mx-t-base) var(--mx-ease)}
.mx-header .mx-account:hover{background:var(--mx-wine-700);border-color:var(--mx-wine-700);transform:translateY(-1px)}
.mx-header .mx-account:hover,.mx-header .mx-account:hover *{color:var(--mx-ivory-50)!important}
.mx-header .mx-account svg,.mx-header .mx-cart svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mx-header .mx-cart{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid transparent;
  transition:background-color var(--mx-t-base) var(--mx-ease),border-color var(--mx-t-base),transform var(--mx-t-base) var(--mx-ease)}
.mx-header .mx-cart:hover{background:rgba(92,29,47,.08);border-color:rgba(197,160,99,.7);transform:translateY(-1px)}
.mx-header .mx-cart::after,.mx-header .mx-account::after{display:none}

/* ---------- hero ---------- */
body.m-cinema .m-hero-stage{background:
  radial-gradient(1100px 760px at 66% 42%,rgba(255,250,240,.95),rgba(246,239,227,0) 62%),
  radial-gradient(900px 600px at 8% 110%,rgba(197,160,99,.18),transparent 65%),
  linear-gradient(180deg,#f6f0e6 0%,#efe5d4 100%)}
.m-hero-stage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%,transparent 58%,rgba(92,29,47,.10) 100%)}
.mx-hero-ghost{position:absolute;z-index:1;inset-inline:-4vw;top:48%;transform:translate3d(var(--mx-ghost-x,0px),-50%,0);
  font:600 clamp(200px,36vw,620px)/.78 var(--mx-font-display);letter-spacing:.03em;text-align:center;white-space:nowrap;direction:ltr;
  color:transparent;-webkit-text-stroke:1px rgba(92,29,47,.16);pointer-events:none;user-select:none;will-change:transform}
body.m-cinema .m-hero-model{z-index:3}
body.m-cinema .m-hero-model__photos img{filter:saturate(1.04) contrast(1.02)}
@media(min-width:701px){body.m-cinema .m-hero-model .m-hero-photo img{object-position:50% 0}}
body.m-cinema .m-hero-intro{z-index:5}
body.m-cinema .m-hero-title{font:600 clamp(80px,9.2vw,168px)/.86 var(--mx-font-display)!important;letter-spacing:.045em!important;transform:none!important;text-transform:uppercase;
  color:var(--mx-wine-800);text-shadow:0 1px 0 rgba(255,255,255,.65),0 24px 60px rgba(92,29,47,.22)}
body.m-cinema .m-hero-title__sub{font:600 clamp(11px,1vw,14px)/1 var(--mx-font-display)!important;letter-spacing:.9em!important;color:var(--mx-champagne-600);display:flex;align-items:center;justify-content:flex-end;gap:18px;margin-top:18px}
body.m-cinema .m-hero-title__sub::before{content:"";flex:0 1 64px;height:1px;background:linear-gradient(90deg,transparent,var(--mx-champagne-500))}
.mx-hero-lede{margin:22px 0 0;max-width:30ch;margin-inline-start:auto;text-align:right;font:400 clamp(14px,1.15vw,17px)/2 var(--mx-font-fa);color:var(--mx-ink-soft)}
body.m-cinema .m-hero-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end;margin-top:30px}
.mx-hero-ghost-btn{--fg:var(--mx-wine-800)}
body.m-cinema .m-look-controls{gap:10px;padding:10px 12px;border:1px solid rgba(197,160,99,.45);border-radius:var(--mx-r-pill);background:rgba(254,251,245,.62);backdrop-filter:blur(12px);box-shadow:var(--mx-e1)}
body.m-cinema .m-look-controls button{min-height:44px;color:var(--mx-wine-700);transition:transform var(--mx-t-base) var(--mx-ease),opacity var(--mx-t-base)}
body.m-cinema .m-look-controls button:hover{transform:translateY(-2px)}
body.m-cinema .m-look-controls button[aria-pressed="true"]{color:var(--mx-wine-800)}
body.m-cinema .m-look-controls button[aria-pressed="true"] i{background:var(--mx-champagne-500)!important}

.mx-scroll-cue{position:absolute;z-index:6;inset-inline-start:auto;inset-inline-end:clamp(24px,5vw,86px);bottom:30px;width:max-content;display:grid;justify-items:center;gap:10px;color:var(--mx-taupe-700);font:500 11px/1 var(--mx-font-fa);letter-spacing:.12em;
  transition:opacity var(--mx-t-base) var(--mx-ease)}
.mx-scroll-cue i{display:block;width:1px;height:46px;background:linear-gradient(var(--mx-champagne-500),transparent);transform-origin:top;animation:mx-cue 2.2s var(--mx-ease) infinite}
.mx-scrolled .mx-scroll-cue{opacity:0}
@keyframes mx-cue{0%{transform:scaleY(0)}45%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

/* ---------- entrance choreography (only when JS is present) ---------- */
.mx-js .mx-reveal{opacity:0;transform:translate3d(0,26px,0);transition:opacity var(--mx-t-cine) var(--mx-ease-out),transform var(--mx-t-cine) var(--mx-ease-out);transition-delay:var(--mx-d,0ms)}
.mx-js.mx-ready .mx-reveal,.mx-js .mx-reveal.is-in{opacity:1;transform:none}
.mx-js .mx-hero-ghost.mx-reveal{transform:translate3d(var(--mx-ghost-x,0px),-46%,0)}
.mx-js.mx-ready .mx-hero-ghost.mx-reveal{transform:translate3d(var(--mx-ghost-x,0px),-50%,0)}

/* ---------- section atmospheres ---------- */
body.m-cinema .m-archive-stage{background:
  radial-gradient(900px 620px at 18% 30%,rgba(120,41,63,.42),transparent 70%),
  radial-gradient(700px 500px at 90% 90%,rgba(197,160,99,.10),transparent 70%),
  linear-gradient(180deg,var(--mx-graphite-900),var(--mx-wine-950))}
body.m-cinema .m-archive-intro .m-kicker,body.m-cinema .m-timeline__head .m-kicker{color:var(--mx-champagne-400);font:600 12px/1.4 var(--mx-font-display)}
body.m-cinema .m-archive-intro h2{font-weight:800;letter-spacing:-.01em;color:var(--mx-ivory-50)}
body.m-cinema .m-archive-card{box-shadow:0 30px 60px -28px rgba(0,0,0,.8),0 0 0 1px rgba(236,215,174,.14)}
body.m-cinema .m-timeline{background:
  radial-gradient(800px 520px at 80% 0%,rgba(120,41,63,.30),transparent 70%),
  linear-gradient(180deg,var(--mx-graphite-950),var(--mx-graphite-900))}
body.m-cinema .m-timeline-row__copy h3,body.m-cinema .m-timeline-row__copy h2{color:var(--mx-ivory-50)}

/* ---------- rack: atelier staging ---------- */
body.m-cinema .m-rack{background:
  radial-gradient(900px 520px at 50% -8%,rgba(255,250,240,.95),transparent 70%),
  radial-gradient(1200px 420px at 50% 112%,rgba(92,29,47,.14),transparent 70%),
  linear-gradient(180deg,var(--mx-ivory-100),var(--mx-sand-300))}
body.m-cinema .m-rack__title{font-family:var(--mx-font-display);font-weight:600;color:var(--mx-wine-800)}
body.m-cinema .m-rack__eyebrow{color:var(--mx-champagne-600);font-family:var(--mx-font-display);font-weight:600}
body.m-cinema .m-rack__arrow{width:46px;height:46px;border-radius:50%;border:1px solid rgba(92,29,47,.4);background:var(--mx-ivory-50);color:var(--mx-wine-700);box-shadow:var(--mx-e1);
  transition:background-color var(--mx-t-base) var(--mx-ease),color var(--mx-t-base),transform var(--mx-t-base) var(--mx-ease),border-color var(--mx-t-base)}
body.m-cinema .m-rack__arrow:hover{background:var(--mx-wine-700);color:var(--mx-ivory-50);border-color:var(--mx-wine-700);transform:translateY(-2px)}
body.m-cinema .m-rack__arrow:active{transform:scale(.94)}
body.m-cinema .m-rack__filter{min-height:40px;padding:0 1.2em;border:1px solid rgba(92,29,47,.32);border-radius:var(--mx-r-pill);background:rgba(254,251,245,.7);color:var(--mx-wine-700);font:600 12px/1 var(--mx-font-fa);
  transition:background-color var(--mx-t-base) var(--mx-ease),color var(--mx-t-base),border-color var(--mx-t-base),transform var(--mx-t-base) var(--mx-ease)}
body.m-cinema .m-rack__filter:hover{border-color:var(--mx-champagne-600);transform:translateY(-1px)}
body.m-cinema .m-rack__filter[aria-pressed="true"]{background:var(--mx-wine-700);border-color:var(--mx-wine-700);color:var(--mx-ivory-50)}
/* Fix: massia-finish-v6-merge.css turns the dialog into a transparent full-viewport flex box (background:transparent!important)
   but never gives the inner panel a surface, so the copy column floated over the backdrop. The panel owns the surface now. */
body.m-cinema dialog.m-rack-dialog[open] .m-rack-dialog__panel{background:linear-gradient(180deg,var(--mx-ivory-50),var(--mx-ivory-100));border:1px solid rgba(197,160,99,.5);border-radius:var(--mx-r-sm);box-shadow:var(--mx-e3);overflow:hidden}
body.m-cinema .m-rack-dialog__title{font-family:var(--mx-font-fa);font-weight:800;line-height:1.35;color:var(--mx-wine-800)}
body.m-cinema .m-rack-dialog__eyebrow{font-family:var(--mx-font-display);font-weight:600;letter-spacing:.3em;color:var(--mx-champagne-600)}
body.m-cinema .m-rack-dialog::backdrop{background:rgba(26,8,14,.62);backdrop-filter:blur(6px)}
body.m-cinema .m-rack-dialog__actions button{border:1px solid rgba(92,29,47,.4);color:var(--mx-wine-700);background:var(--mx-ivory-50);transition:background-color var(--mx-t-base),color var(--mx-t-base),transform var(--mx-t-base) var(--mx-ease)}
body.m-cinema .m-rack-dialog__actions button:hover{background:var(--mx-wine-700);color:var(--mx-ivory-50);transform:translateY(-2px)}
body.m-cinema .m-rack-dialog__close{transition:transform var(--mx-t-base) var(--mx-ease),background-color var(--mx-t-base)}
body.m-cinema .m-rack-dialog__close:hover{transform:rotate(90deg)}
body.m-cinema .m-rack-dialog__link{--fg:var(--mx-wine-700);--bg:transparent;--bd:rgba(92,29,47,.45);--bg-hover:rgba(92,29,47,.08);box-shadow:none}
body.m-cinema .m-rack-dialog__price{font-family:var(--mx-font-fa);font-weight:800;color:var(--mx-wine-700)}

/* ---------- editorial + complete look: refined labels ---------- */
body.m-cinema .m-v3-focus__card h3,body.m-cinema .m-v7-scene h2{letter-spacing:-.01em}

/* ---------- responsive ---------- */
@media (max-width:980px){
  /* tablet: the intro column is ~48% wide and sits beside the model, so the wordmark must fit that column */
  body.m-cinema .m-hero-title{font:600 clamp(64px,12vw,112px)/.86 var(--mx-font-display)!important}
}
@media (max-width:700px){
  /* phone: intro stacks above the model and may use the full width */
  body.m-cinema .m-hero-title{font:600 clamp(60px,20.5vw,110px)/.86 var(--mx-font-display)!important}
}
@media (max-width:640px){
  body.m-cinema .m-topbar.mx-header{padding-inline:14px;gap:8px}
  .mx-header .m-topbar__brand img{height:36px}
  .mx-header .mx-account span{display:none}
  .mx-header .mx-account{padding:0;width:42px;height:42px;justify-content:center;border-color:transparent}
  .mx-hero-lede{max-width:none;font-size:14px}
  body.m-cinema .m-hero-actions{justify-content:flex-start}
  .mx-scroll-cue{display:none}
}
@media (prefers-reduced-motion:reduce){
  .mx-js .mx-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .mx-scroll-cue i{animation:none}
  .mx-hero-ghost{transform:translate3d(0,-50%,0)!important}
}
@media print{body.m-cinema::after,.mx-scroll-cue,.mx-hero-ghost,.mx-footer__ghost{display:none!important}}

/* ---------- menu sheet (mobile / tablet) ----------
 * Legacy rules put cream text (#fff6eb) on a cream surface, so "فروشگاه" was invisible and the first two links were unstyled. */
body.m-cinema .m-menu-sheet{background:radial-gradient(700px 480px at 85% 0%,rgba(120,41,63,.55),transparent 70%),linear-gradient(180deg,var(--mx-graphite-900),var(--mx-graphite-950));color:var(--mx-ivory-100);overflow:auto;gap:8px}
body.m-cinema .m-menu-sheet .m-menu-sheet__caption--logo img{filter:brightness(0) invert(1) sepia(.2)}
body.m-cinema .m-menu-sheet .m-menu-close{width:44px;height:44px;border:1px solid rgba(236,215,174,.5);border-radius:50%;background:transparent;color:var(--mx-ivory-50);font:300 26px/1 var(--mx-font-fa);cursor:pointer;transition:transform var(--mx-t-base) var(--mx-ease),background-color var(--mx-t-base)}
body.m-cinema .m-menu-sheet .m-menu-close:hover{background:rgba(236,215,174,.14);transform:rotate(90deg)}
body.m-cinema .m-menu-sheet [role="navigation"]{display:flex;flex-direction:column;justify-content:center;flex:1;gap:0;margin-top:12px}
body.m-cinema .m-menu-sheet [role="navigation"]>a,
body.m-cinema .m-menu-sheet .m9-nav>a,
body.m-cinema .m-menu-sheet .m9-nav>.m9-shop-menu>summary{display:flex;align-items:center;justify-content:space-between;padding:15px 2px;border-bottom:1px solid rgba(236,215,174,.16);
  font:700 clamp(22px,5.4vw,36px)/1.3 var(--mx-font-fa);color:var(--mx-ivory-50)!important;text-decoration:none;list-style:none;cursor:pointer;transition:color var(--mx-t-base) var(--mx-ease),padding var(--mx-t-base) var(--mx-ease)}
body.m-cinema .m-menu-sheet [role="navigation"]>a:hover,body.m-cinema .m-menu-sheet .m9-nav>a:hover,body.m-cinema .m-menu-sheet .m9-nav>.m9-shop-menu>summary:hover{color:var(--mx-champagne-300)!important;padding-inline-start:10px}
body.m-cinema .m-menu-sheet .m9-nav{color:var(--mx-ivory-100);gap:0;font-size:inherit}
body.m-cinema .m-menu-sheet .m9-nav>.m9-shop-menu>summary::-webkit-details-marker{display:none}
body.m-cinema .m-menu-sheet .m9-mega{background:rgba(255,255,255,.05);border:1px solid rgba(236,215,174,.22);border-radius:var(--mx-r-sm);color:var(--mx-ivory-100);padding:var(--mx-s-3) var(--mx-s-4);margin:10px 0 14px}
body.m-cinema .m-menu-sheet .m9-mega a,body.m-cinema .m-menu-sheet .m9-tree-row a{color:var(--mx-ivory-100)!important;font:500 15px/2 var(--mx-font-fa)}
body.m-cinema .m-menu-sheet .m9-mega-heading a{color:var(--mx-champagne-300)!important;font-weight:700}