/* ووموو — صفحه اصلی */
/* توکن‌ها در tokens.css، قواعد پایه در base.css */

/* ————————————————————————————— پایه صفحه */

.is-home{overflow-x:hidden}

/* پس‌زمینه یکدست تیره است — هیچ لایه‌ی نوری پشت صفحه نیست.
   زمینه فقط از body می‌آید (base.css). */

/* منوی بالا، فقط روی صفحه اصلی: پشتش مدام عوض می‌شود (محصول،
   ورق سفید، ورق‌های نوشته)، پس نوشته‌اش با blend-mode همیشه معکوس
   و خوانا می‌ماند. حالت پیش‌فرض بدون blend در base.css است. */
.is-home .site-head{mix-blend-mode:difference}
.is-home .brand,
.is-home .nav-list a:hover,
.is-home .tswitch button.on,
.is-home .tool-btn:hover{color:var(--mod-white)}

/* ————————————————————————————— دکمه‌های صفحه اصلی */

/* دکمه‌ی خطی — روی زمینه‌ی مشکی، فقط یک قوس بسته دور متن */
.btn-line{display:inline-block;
  border:var(--hair) solid var(--gline);border-radius:var(--r-full);
  padding:var(--s3) var(--s5);
  font-size:var(--fs-body-s);color:var(--ink);
  transition:border-color var(--t-fast) var(--e),color var(--t-fast) var(--e)}
.btn-line:hover{border-color:var(--signal);color:var(--signal)}

/* دکمه‌ی توپر — فقط داخل ورق سفید، جایی که زمینه روشن است */
.btn-solid{display:inline-block;border-radius:var(--r-full);
  background:var(--mod-black);color:var(--mod-white);
  padding:var(--s3) var(--s5);font-size:var(--fs-body-s);
  transition:opacity var(--t-fast) var(--e)}
.btn-solid:hover{opacity:.78}

/* ————————————————————————————— هیرو */

/* تمام‌صفحه، مشکی خالی. محصول از پشتِ متن، از پایین بالا می‌آید —
   خودش در .stage است، نه اینجا. */
.hero{position:relative;z-index:20;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:22vh clamp(var(--s5),5vw,var(--s9)) var(--s9);
  pointer-events:none}
.hero-inner,.hero-note,.hero-scroll{pointer-events:auto}

/* max-width بر حسب ch نیست — با فونت فارسی در اندازه غول
   محاسبه‌اش نامنظم است و کلمه را می‌شکست. */
/* کارت شیشه‌ای هیرو — پس‌زمینه، لبه، شعاع و سایه از .glass در
   base.css می‌آید؛ اینجا فقط عرض و فاصله‌ی داخلی.
   عرض به محتوا بند است نه به قاب: max-content تا کارت دور متن
   جمع شود، وگرنه روی صفحه‌ی پهن یک مستطیل خالی کنار تیتر می‌ماند. */
.hero-inner{position:relative;z-index:2;
  width:max-content;max-width:min(100%,880px);
  padding:clamp(var(--s5),4vw,var(--s7)) clamp(var(--s5),3.5vw,var(--s6))}

/* شیشه‌ی این کارت غلیظ‌تر از بقیه است. دلیلش سلیقه نیست: کارت
   دقیقاً روی سطح روشن محصول می‌نشیند و با شیشه‌ی معمولی، کنتراست
   برچسب ریز به ۱.۲ و دکمه به ۳.۵ می‌افتاد — هر دو زیر حد خوانایی. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hero-inner.glass{background:var(--glass-deep)}
}

/* برچسب بالای تیتر روشن شد — با رنگ فرعی، حتی روی شیشه‌ی غلیظ
   هم به حد خوانایی نمی‌رسید. */
.hero-inner .label{color:var(--ink)}

/* حاشیه‌ی بالای تیتر داخل کارت لازم نیست — padding کارت جایش را
   گرفته. حاشیه‌ی پایین می‌ماند تا دکمه بچسبد به تیتر. */
.hero-h{margin:0 0 var(--s6)}
.hero-h .w{display:block;overflow:hidden;padding-bottom:.06em}
.hero-h .w > i{display:block;font-style:normal;
  transform:translateY(105%);transition:transform var(--t-slow) var(--e)}
.hero.in .hero-h .w > i{transform:translateY(0)}
.hero-h .w:nth-child(2) > i{transition-delay:80ms}
/* خط دوم به بعد سبک‌تر است — دو وزن در یک صفحه، نه بیشتر */
.hero-h .w:nth-child(n+2){font-weight:400}
.hero-h .w:nth-child(3) > i{transition-delay:160ms}

.hero-cta{opacity:0;transform:translateY(var(--s4));
  transition:opacity var(--t-mid) var(--e) 320ms,transform var(--t-mid) var(--e) 320ms,
    border-color var(--t-fast) var(--e),color var(--t-fast) var(--e)}
.hero.in .hero-cta{opacity:1;transform:none}

/* جمله‌ی ریز، زیر کارت — نه وسطِ قاب.
   پیش‌تر absolute و روی left:50% بود، یعنی دقیقاً وسطِ پایینِ قاب
   و روی خودِ محصول، آن هم با رنگ --muted؛ همان «متن روی تصویر
   محصول» که قواعد پروژه ممنوع کرده و کم‌کنتراست‌ترین متن صفحه هم
   بود.
   حالا در جریانِ همان ستونِ هیرو می‌نشیند، زیر کارت و هم‌ترازِ
   شروع با آن — روی زمینه‌ای که با جابه‌جایی محصول در home.js
   خالی شده. */
.hero-note{position:relative;z-index:2;
  margin:var(--s5) 0 0;max-width:min(46ch,100%);
  text-align:start;color:var(--muted);font-size:var(--fs-micro);
  opacity:0;transition:opacity var(--t-mid) var(--e) 420ms}
.hero.in .hero-note{opacity:1}

/* بازدید دوم به بعد در همان نشست: تیتر همان‌جا که باید باشد
   ظاهر می‌شود، بدون نوشته‌شدنِ دوباره. کلاس را home.js از روی
   sessionStorage می‌گذارد و دلیلش همان‌جا نوشته شده. */
.hero.seen .hero-h .w > i,
.hero.seen .hero-cta,
.hero.seen .hero-note{transition:none}

.hero-scroll{position:absolute;z-index:2;bottom:var(--s8);inset-inline-start:clamp(var(--s5),5vw,var(--s9));
  display:flex;align-items:center;gap:var(--s3);
  opacity:1;transition:opacity var(--t-mid) var(--e)}
/* با اولین اسکرول می‌رود — وگرنه از زیر هدر رد می‌شود */
.hero-scroll.hide{opacity:0;pointer-events:none}
.hero-line{display:block;width:var(--s8);height:var(--hair);background:var(--gline);position:relative;overflow:hidden}
.hero-line::after{content:"";position:absolute;inset:0;background:var(--signal);
  transform:translateX(-100%);animation:sweep 2.4s var(--e) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ————————————————————————————— صحنه ثابت */

/* هیچ لایه‌ای پشت محصول نیست: نه نوار، نه دایره، نه شبکه.
   خودِ کانواس پس‌زمینه‌ی شفاف دارد و زیرش زمینه‌ی مشکی صفحه است. */
.stage{position:fixed;inset:0;z-index:10;
  opacity:0;visibility:hidden;
  transition:opacity var(--t-mid) var(--e),visibility var(--t-mid) var(--e)}
.stage.live{opacity:1;visibility:visible}
/* جابه‌جایی و بزرگ‌نمایی افقی با transform در home.js تنظیم می‌شود */
.stage-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* بدون WebGL صحنه اصلاً نمی‌آید؛ متن‌ها خودشان می‌ایستند */
.stage.no-gl{display:none}

/* حالت ویدیو — همان قاب، همان جای صحنه.
   ویدیو قاب را کامل پر می‌کند تا مثل صحنه سه‌بعدی لبه نداشته باشد؛
   جابه‌جایی و شفافیت اسکرول در home.js روی خودِ همین تگ می‌نشیند.
   کانواس در این حالت ساخته نمی‌شود، ولی تگش در صفحه می‌ماند. */
.stage-video{position:absolute;inset:0;width:100%;height:100%;
  display:block;object-fit:cover;background:transparent}
.stage.video .stage-canvas{display:none}

/* ————————————————————————————— اکت اسکرول */

/* ۵۶۰vh بود: چهار جمله در پنج‌ونیم صفحه اسکرول، با فاصله‌های
   ۸۰۰ تا ۱۲۰۰ پیکسلی که در آن‌ها هیچ متنی روی صفحه نیست. کل
   سند ۷۸۷۸ پیکسل می‌شد و رسیدن به انتخابگر حدود ۹ صفحه اسکرول
   می‌خواست — در حالی که طبق نقشه‌ی صفحات، اقدامِ بعدیِ کاربر
   دقیقاً همان انتخابگر است.
   کلیدفریم‌های دوربین بر حسب «پیشرفت» صفرتایکِ همین ارتفاع‌اند،
   پس با کوتاه‌شدنِ اکت، کل رقص دوربین به همان نسبت فشرده می‌شود
   و ترتیبش دست‌نخورده می‌ماند — فقط زودتر اتفاق می‌افتد.
   اگر ریتم تند شد، همین یک عدد را بالا ببر. */
.act{position:relative;z-index:30;height:360vh}

.beat{position:absolute;width:100%;
  padding-inline:clamp(var(--s5),5vw,var(--s9));
  pointer-events:none}
.beat-inner{pointer-events:auto}

.beat h2{margin:var(--s4) 0 var(--s3)}
.beat p{color:var(--muted);font-size:var(--fs-body)}

/* هر بیت از پایین، با پرده‌ی برش، بالا می‌آید */
.beat{opacity:0}
.beat .beat-inner{transform:translateY(var(--s6))}
.beat.on{opacity:1}
.beat.on .beat-inner{transform:none}
.beat,.beat .beat-inner{transition:opacity var(--t-mid) var(--e),
  transform var(--t-slow) var(--e)}

/* ۰۰۲ — وسط، بالای محصول. دو خط: تیتر و زیرش یک جمله. */
.mid{text-align:center}
.mid .beat-inner{max-width:min(46ch,90vw);margin-inline:auto}
.mid h2{font-size:var(--fs-title)}
.mid h2 + p{margin-inline:auto;max-width:36ch}

/* ۰۰۳ — ورق سفید. تنها سطح روشن این بخش؛ محصول طرف دیگر می‌ایستد.
   عرض ثابت نیست تا روی موبایل تمام‌عرض شود. */
.panel .beat-inner{margin-inline-end:0;margin-inline-start:auto;
  width:min(420px,86vw)}
/* ۰۰۳ — اتصال. کارت شیشه‌ای است، مثل باقی کارت‌های سایت؛ دیگر
   ورق سفید نیست. پس‌زمینه، لبه، شعاع و سایه همه از کلاس .glass
   در base.css می‌آیند — اینجا فقط چیدمان و رنگ متن می‌ماند.
   متن روشن شد چون زمینه دیگر سفید نیست. */
.sheet-card{color:var(--ink);
  padding:var(--s7) var(--s6);
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2)}

/* مثل کارت هیرو، شیشه‌ی غلیظ: این کارت هم متن اصلی حمل می‌کند و
   روی محصول می‌افتد. با شیشه‌ی معمولی کنتراست دکمه در حالت روشن
   روی محصول تیره به ۴.۴۵ می‌رسید — زیر حد. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sheet-card.glass{background:var(--glass-deep)}
}
/* برچسب و متن با رنگ فرعی نوشته نمی‌شوند: پشت این کارت گاهی سطح
   روشن محصول است و گاهی زمینه‌ی تیره، و --muted در یکی از آن دو
   حالت همیشه زیر حد خوانایی می‌افتاد (۲.۷۵ و ۳.۱۹ سنجیده شد).
   جدایی متن از تیتر با اندازه انجام می‌شود، نه با کم‌رنگی. */
.sheet-card .label{color:var(--ink)}
.sheet-card h2{font-size:var(--fs-card);margin:var(--s3) 0 var(--s2)}
.sheet-card p{color:var(--ink);font-size:var(--fs-body-s)}
.sheet-card .btn-line{margin-top:var(--s5)}

/* ۰۰۴ — بیانیه. متن غول، تمام‌عرض؛ محصول پشتش کم‌نور می‌شود. */
.say .beat-inner{max-width:min(30ch,92vw);margin-inline:auto}
.say-t{font-size:clamp(26px,4.2vw,64px);line-height:1.35;
  font-weight:500;color:var(--ink)}
.beat .say-t{color:var(--ink)}

/* ۰۰۵ — ترکیب کامل. تیتر و دکمه بالا، محصول زیرشان. */
.lead .beat-inner{max-width:min(30ch,90vw);
  margin-inline-start:0;margin-inline-end:auto}
.lead h2{font-size:var(--fs-title)}
.lead .btn-line{margin-top:var(--s5)}

/* ————————————————————————————— کارت شیشه‌ای بیت‌ها

   هر سه بیتِ باقی‌مانده هم کارت شیشه‌ای‌اند، مثل ۰۰۳.
   عرض به اندازه‌ی محتوا جمع می‌شود تا کارت یک نوار تمام‌عرضِ
   خالی نشود؛ max-width هر بیت که بالاتر تعریف شده سر جایش است. */
.mid .beat-inner,
.say .beat-inner,
.lead .beat-inner{
  width:max-content;
  padding:clamp(var(--s5),3.5vw,var(--s7)) clamp(var(--s5),3vw,var(--s6))}

@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .beat-inner.glass{background:var(--glass-deep)}
}

/* متن و برچسبِ داخل کارت با رنگ اصلی — پشت این کارت‌ها گاهی سطح
   روشن محصول است و --muted آنجا زیر حد خوانایی می‌افتد. همان
   دلیلی که برای کارت ۰۰۳ و هیرو هم اعمال شد. */
.beat-inner.glass p,
.beat-inner.glass .label{color:var(--ink)}

/* ————————————————————————————— موبایل، اکت */

@media (max-width:900px){
  /* همان نسبتِ کوتاه‌شدنِ دسکتاپ — دلیلش بالای .act نوشته شده */
  .act{height:300vh}
  .panel .beat-inner{width:min(100%,92vw);margin-inline:auto}
  .lead .beat-inner{margin-inline:auto;text-align:center}
}

/* ————————————————————————————— ۰۰۵ صحنه‌ی خانه

   کاروسلی از عکس‌های فضای واقعی، با نشانه روی هر محصول. تنها جای
   صفحه اصلی که محصول از انتزاعِ مشکی بیرون می‌آید و اندازه و جایش
   در یک اتاق دیده می‌شود.

   داخل قاب عکس همه‌چیز با left/right چیده می‌شود نه با
   inset-inline: مختصات به خودِ عکس بند است، و عکس با راست‌چین
   شدنِ متنِ صفحه آینه نمی‌شود.

   z-index بالای .stage (۱۰) می‌ماند تا در لحظه‌ی محو شدن صحنه‌ی
   سه‌بعدی، عکس از پشت آن بیرون نزند. */
.room{position:relative;z-index:40;background:var(--page);
  padding:var(--s9) 0 var(--s8);
  /* اندازه‌ی هدفِ نشانه — روی موبایل بزرگ‌تر می‌شود */
  --pin:var(--s7)}

.room-head{padding-inline:clamp(var(--s5),5vw,var(--s9));margin-bottom:var(--s7)}
.room-title{font-size:var(--fs-title);margin-top:var(--s4)}
.room-lede{color:var(--muted);margin-top:var(--s2);max-width:44ch}

/* ————————————————— قاب و اسلایدها

   نسبت قاب ثابت است و عکس با cover داخلش برش می‌خورد. دو دلیل:
   با عوض شدن صحنه ارتفاع صفحه نمی‌پرد، و مختصات نشانه‌ها درصدِ
   همین قاب است — همان قاب و همان برشی که در ابزار نقطه‌گذاری
   پیشخوان دیده شده. اگر این نسبت عوض شود، باید در inc/room.php
   (ثابت VOMOVO_ROOM_RATIO) هم عوض شود، وگرنه نقطه‌ها جابه‌جا
   می‌شوند. */
.room-frame{position:relative;width:100%;aspect-ratio:16 / 9;
  border-block:var(--hair) solid var(--gline);
  overflow:hidden}

/* اسلاید غیرفعال visibility:hidden است نه display:none —
   هم از ترتیب تب و درخت دسترس‌پذیری بیرون می‌رود، هم محو شدنش
   حرکت دارد. */
.room-slide{position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity var(--t-slow) var(--e),visibility var(--t-slow) var(--e)}
.room-slide.on{opacity:1;visibility:visible}

.room-img{display:block;width:100%;height:100%;object-fit:cover}

/* ————————————————— نشانه */

/* وسط‌چین‌شدنِ نشانه روی مختصاتش با حاشیه‌ی منفی است، نه با
   transform: عنصرِ transform‌دار برای فرزندِ position:fixed خودش
   بلوکِ دربرگیرنده می‌شود، و کارتِ موبایل که باید به کفِ صفحه
   بچسبد، به جایش داخلِ همین نشانه‌ی ۶۴ پیکسلی جمع می‌شد. */
.room-spot{position:absolute;top:var(--y);left:var(--x);
  margin-top:calc(var(--pin) / -2);margin-left:calc(var(--pin) / -2);
  z-index:2}

/* هدف لمسی بزرگ است، ولی چیزی که دیده می‌شود نقطه‌ی وسط آن است.
   کاملاً گرد — زبان فرم برند. */
.room-pin{position:relative;display:grid;place-items:center;
  width:var(--pin);height:var(--pin);border-radius:var(--r-full);
  background:none;border:0;padding:0;cursor:pointer}

/* نقطه سفید است نه رنگ متن: پشتش عکس است، نه زمینه‌ی سایت، و در
   حالت روشن و تیره یک‌جور دیده می‌شود.

   هاله‌ی تیره‌ی نرم دورش لازم است، نه تزئین: روی دیوارِ روشنِ عکس،
   سفیدِ خالی روی سفید گم می‌شد. */
.room-pin-dot{display:block;width:var(--s3);height:var(--s3);
  border-radius:var(--r-full);background:var(--mod-white);
  box-shadow:0 0 var(--s2) var(--mod-black);
  transition:transform var(--t-fast) var(--e),background var(--t-fast) var(--e)}

/* حلقه‌ی نازک دور نقطه — همان هاله را دارد، به همان دلیل */
.room-pin::before{content:"";position:absolute;
  width:var(--s5);height:var(--s5);border-radius:var(--r-full);
  border:var(--hair) solid var(--mod-white);opacity:.5;
  box-shadow:0 0 var(--s2) var(--mod-black);
  transition:transform var(--t-mid) var(--e),opacity var(--t-fast) var(--e)}

.room-pin:hover .room-pin-dot{transform:scale(1.25)}
.room-pin:hover::before{transform:scale(1.3);opacity:.85}
.room-pin:focus-visible{outline:1.5px solid var(--signal);outline-offset:var(--s1)}

/* نشانه‌ی باز: تنها جای این بخش که رنگ تأکیدی می‌آید — «گزینه
   فعال»، یکی از سه جای مجاز. */
.room-spot.on .room-pin-dot{background:var(--signal);transform:scale(1.25)}
.room-spot.on .room-pin::before{transform:scale(1.3);opacity:.9}

/* نام محصول فقط برای صفحه‌خوان — روی صفحه، کارت آن را می‌گوید */
.room-pin-name{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

/* ————————————————— کارت */

/* display:flex بر [hidden] پیش‌فرض مرورگر می‌چربد، پس کارتِ بسته
   باید صریح برداشته شود — وگرنه نادیدنی می‌ماند ولی جلوی کلیک روی
   عکس را می‌گیرد. همان کاری که .search-panel و .vbtn در base.css
   و product.css کرده‌اند. */
.room-card[hidden]{display:none}

/* کنار نشانه می‌ایستد، نه رویش: چیزی که کاربر نشانه‌اش کرده باید
   پیدا بماند. اگر جا نبود js/room.js کلاس flip می‌گذارد و کارت
   از سمت دیگر باز می‌شود. */
.room-card{position:absolute;z-index:3;
  top:50%;left:calc(100% + var(--s3));
  width:min(300px,66vw);padding:var(--s5);
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);
  opacity:0;transform:translateY(calc(-50% + var(--shift,0px))) scale(.97);
  transition:opacity var(--t-fast) var(--e),transform var(--t-fast) var(--e)}
.room-spot.flip .room-card{left:auto;right:calc(100% + var(--s3))}
.room-spot.on .room-card{opacity:1;transform:translateY(calc(-50% + var(--shift,0px))) scale(1)}

/* شیشه‌ی غلیظ‌تر: این کارت روی عکس می‌افتد و پشتش هر روشنایی‌ای
   ممکن است باشد. همان کاری که کارت هیرو و بیت ۰۰۳ کردند.

   یک لایه --glass هم روی --glass-deep می‌نشیند. کارت‌های دیگر پشتشان
   محصولِ خودمان است با روشناییِ معلوم؛ اینجا پشت کارت یک عکسِ
   واقعی است و می‌تواند هر چیزی باشد — با شیشه‌ی معمول، متن روی
   دیوارِ روشن زیر حد خوانایی می‌افتاد. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .room-card.glass{background:var(--glass-deep);
    box-shadow:inset 0 0 0 100vmax var(--glass)}
}

/* متن با رنگ اصلی، نه فرعی — پشت کارت گاهی سطح روشن عکس است و
   --muted آنجا زیر حد خوانایی می‌افتد. همان دلیل کارت‌های اکت. */
.room-card .label,
.room-card p,
.room-card .mono{color:var(--ink)}
.room-name{font-size:var(--fs-card);font-weight:500;margin:0}
.room-line{font-size:var(--fs-body-s);margin:0}
.room-price{font-size:var(--fs-body-s);color:var(--ink)}
.room-price del{opacity:.55}
.room-go{margin-top:var(--s2)}
.room-out{color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  .room-card,
  .room-spot.on .room-card{transform:translateY(calc(-50% + var(--shift,0px)))}
}

/* ————————————————— ناوبری صحنه‌ها

   زیر قاب، نه رویش: روی عکس، دکمه هم جای محصول را می‌گیرد هم
   باید پس‌زمینه‌ی خودش را داشته باشد. */
.room-nav{display:flex;align-items:center;justify-content:center;
  gap:var(--s5);margin-top:var(--s5);
  padding-inline:clamp(var(--s5),5vw,var(--s9))}

.room-arrow{display:inline-flex;align-items:center;
  border:var(--hair) solid var(--gline);border-radius:var(--r-full);
  background:none;padding:var(--s2) var(--s4);cursor:pointer;
  transition:border-color var(--t-fast) var(--e)}
.room-arrow:hover{border-color:var(--signal)}
.room-arrow:hover .label{color:var(--signal)}
.room-arrow:focus-visible{outline:1.5px solid var(--signal);outline-offset:var(--s1)}

/* شاخص‌ها: خط کوتاه، مثل شاخص انتخابگر. شاخصِ فعال رنگ تأکیدی
   می‌گیرد — یکی از سه جای مجاز. */
.room-ticks{display:flex;gap:var(--s2)}
.room-tick{width:var(--s6);height:var(--s5);
  background:none;border:0;padding:0;cursor:pointer;
  display:grid;place-items:center}
.room-tick::before{content:"";display:block;
  width:100%;height:var(--hair);background:var(--gline);
  transition:background var(--t-fast) var(--e)}
.room-tick:hover::before{background:var(--ink)}
.room-tick.on::before{background:var(--signal)}
.room-tick:focus-visible{outline:1.5px solid var(--signal);outline-offset:var(--s1)}
.room-tick-name{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

/* ————————————————— موبایل

   کارتِ شناور کنارِ نشانه روی صفحه‌ی باریک جا نمی‌شود. پس به لبه‌ی
   پایینِ دید می‌چسبد و تمام‌عرض می‌شود. همیشه فقط یک کارت باز است،
   پس جای همه یکی است و روی هم نمی‌افتند.

   اگر نشانه پایینِ عکس باشد، کارت بالا می‌رود (کلاس up از
   js/room.js) تا خودِ محصولی که کاربر لمس کرده پوشیده نشود. */
@media (max-width:900px){
  .room{padding:var(--s8) 0 var(--s7);--pin:var(--s8)}
  .room-head{margin-bottom:var(--s6)}

  .room-card{position:fixed;z-index:60;
    top:auto;bottom:var(--s5);left:var(--s4);right:var(--s4);
    width:auto;transform:translateY(var(--s4)) scale(1)}
  .room-spot.flip .room-card{left:var(--s4);right:var(--s4)}
  .room-spot.on .room-card{transform:none}
  .room-spot.up .room-card{bottom:auto;top:var(--s8)}

  @media (prefers-reduced-motion:reduce){
    .room-card,
    .room-spot.on .room-card{transform:none}
  }
}

/* ————————————————————————————— انتخابگر محصول */

/* کل بخش با translateY در home.js از پایین بالا می‌آید: تا وقتی
   اکت تمام نشده پایین‌تر از جای خودش ایستاده، و هم‌زمان با اسکرول
   آخرِ اکت بالا می‌آید و سر جایش می‌نشیند. */
/* padding پایین جا برای کارت باز می‌کند — کارت زیر نمایشگر است.
   پس‌زمینه‌ی وجه‌دار تا شیشه‌ی کارت چیزی برای تار کردن داشته باشد. */
.sel{position:relative;z-index:40;padding-bottom:var(--s8);
  background:var(--page)}

/* جعبه محصول — دایره، نیم‌دایره‌ها، مدل، قوس‌ها، نام، ناوبری.
   روی دسکتاپ کارت هم رویش می‌نشیند (position:absolute نسبت به
   همین جعبه). روی موبایل کارت بیرونش، در جریان عادی صفحه می‌آید. */
.sel-viewport{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;isolation:isolate}

/* نوار و دایره — به خواست کارفرما دیده نمی‌شوند: انتخابگر هم باید
   یکدست تیره باشد. هر دو عنصر سر جایشان می‌مانند و فقط رنگشان
   همان زمینه است، چون قوس‌ها شعاع دایره را از هندسه‌ی همین عنصر
   می‌خوانند؛ با حذفش قوس‌ها می‌شکنند. */
.sel-viewport::before{content:"";position:absolute;inset:calc(50% - var(--band-h) / 2) 0 auto 0;
  height:var(--band-h);background:var(--page);z-index:1}
.sel-circle{position:absolute;top:50%;left:50%;
  width:var(--circle-sel);aspect-ratio:1;border-radius:50%;
  background:var(--page);transform:translate(-50%,-50%);z-index:2;
  pointer-events:none}

/* نیم‌دایره‌های کناری — روی دایره بزرگ می‌آیند */
.sel-win{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:clamp(104px,15vw,200px);height:clamp(240px,30vw,400px);
  background:var(--page);border:0;padding:0;cursor:pointer;
  display:grid;place-items:center;overflow:hidden;
  transition:width var(--t-mid) var(--e)}
.sel-win.l{left:0;border-radius:0 999px 999px 0}
.sel-win.r{right:0;border-radius:999px 0 0 999px}
.sel-win canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.85}
.sel-win .label{position:relative;z-index:2;opacity:0;transition:opacity var(--t-fast) var(--e)}
.sel-win:hover .label{opacity:1}
.sel-win:hover{width:clamp(112px,16vw,216px)}

/* محصول مرکزی */
/* pointer-events:none چون این جعبه با inset:0 کل بخش را می‌گیرد،
   حتی جایی که چیزی توش نیست — همان چیزی که کلیک روی دکمه‌های
   قبل/بعد را می‌گرفت. فقط خودِ کانواس auto می‌شود. */
.sel-stage{position:absolute;inset:0;z-index:6;display:grid;place-items:center;
  pointer-events:none}
/* pan-y یعنی اسکرول عمودی صفحه آزاد می‌ماند و فقط کشیدن افقی
   محصول را می‌چرخاند. با touch-action:none روی موبایل نمی‌شد
   از انتخابگر رد شد. */
#sel-main{width:min(76vh,80vw);height:min(76vh,80vw);
  display:block;cursor:grab;touch-action:pan-y;pointer-events:auto}
#sel-main.grabbing{cursor:grabbing}
.sel-hint{position:absolute;top:calc(var(--s9) + var(--s5));left:50%;
  transform:translateX(-50%);opacity:.5}

/* قوس‌ها — یک SVG تمام‌بخش، هم‌مرکز با دایره بزرگ.
   pointer-events:none روی خودِ svg تا کادرش جلوی درگ محصول مرکزی
   را نگیرد؛ auto فقط روی نقطه‌های قابل‌کلیک برمی‌گردد. */
.arcs{position:absolute;inset:0;width:100%;height:100%;z-index:8;
  overflow:visible;pointer-events:none}
.arcs .item{pointer-events:auto}
.arcs .curve{stroke:var(--gline);fill:none;stroke-width:.9}
.arcs .cap{fill:var(--muted);font-family:var(--fa);font-size:var(--fs-micro);letter-spacing:.22em}
.arcs .lbl{fill:var(--muted);font-family:var(--fa);font-size:var(--fs-body-s);
  transition:fill var(--t-fast) var(--e),font-size var(--t-mid) var(--e)}
.arcs .dot{stroke:var(--gline);stroke-width:.9;cursor:pointer;
  transform-box:fill-box;transform-origin:center;
  transition:transform var(--t-mid) var(--e),stroke var(--t-fast) var(--e)}
.arcs .item{cursor:pointer}

/* هاور: نقطه بزرگ می‌شود و به سمت محصول جلو می‌آید */
.arcs .l .item:hover .dot{transform:scale(1.9) translateX(6px);stroke:var(--ink)}
.arcs .r .item:hover .dot{transform:scale(1.9) translateX(-6px);stroke:var(--ink)}
.arcs .item:hover .lbl{fill:var(--ink);font-size:var(--fs-body)}

.arcs .item.on .dot{stroke:var(--signal);stroke-width:1.6;transform:scale(1.3)}
.arcs .item.on .lbl{fill:var(--ink)}
.arcs .l .item.on:hover .dot{transform:scale(1.95) translateX(6px)}
.arcs .r .item.on:hover .dot{transform:scale(1.95) translateX(-6px)}

.sel-err{position:absolute;bottom:var(--s5);left:50%;transform:translateX(-50%);
  color:var(--signal);max-width:60ch;text-align:center;letter-spacing:0;
  text-transform:none;direction:rtl}

/* نام محصول */
.sel-name{position:absolute;z-index:10;bottom:var(--s8);
  inset-inline-start:clamp(var(--s5),5vw,var(--s9));margin:0;
  font-size:clamp(30px,5vw,72px);line-height:.95;
  transition:opacity var(--t-mid) var(--e),transform var(--t-mid) var(--e)}
.sel-name.swap{opacity:0;transform:translateX(calc(var(--s5) * -1))}

/* محصول موقع تعویض کمی محو و جمع می‌شود، بعد مدل تازه باز می‌شود —
   بدون این، تعویض قبل/بعد بی‌هیچ حسی می‌پرید */
#sel-main{transition:opacity var(--t-mid) var(--e),transform var(--t-mid) var(--e)}
#sel-main.swap{opacity:0;transform:scale(.94)}

/* کارت شیشه‌ای — زیر محصول، نه رویش. محصول باید کامل و بدون
   چیزی جلویش دیده شود. نوار افقی است، نه ستون: زیرِ یک نمایشگرِ
   تمام‌صفحه، ستونِ باریکِ وسط بی‌جا می‌افتد. */
.sel-card{position:relative;z-index:1;
  margin:var(--s6) auto 0;width:var(--card-w);
  padding:var(--s4) var(--s5);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);
  transition:transform var(--t-mid) var(--e),opacity var(--t-fast) var(--e)}
.sel-card.swap{transform:translateY(var(--s4));opacity:0}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sel-card{background:var(--glass-thin);
    backdrop-filter:var(--glass-filter);
    -webkit-backdrop-filter:var(--glass-filter)}
}
.sel-card-t{margin:var(--s1) 0 var(--s2)}
.sel-card-l{color:var(--muted);font-size:var(--fs-micro);flex-basis:100%;order:3}
/* خط جداکننده برای چیدمان ستونی بود؛ در نوار افقی جایی ندارد */
.sel-hr{display:none}
/* هر عدد یک قرصِ جدا — در یک ردیف، نه سطرهای پشت‌سرهم */
.sel-card .rowv{display:inline-flex;gap:var(--s1);align-items:baseline;width:auto;
  padding:var(--s1) var(--s3);border:var(--hair) solid var(--gline);
  border-radius:var(--r-full)}
.sel-card .rowv span{font-size:var(--fs-micro);color:var(--muted)}
.sel-card .rowv b{font-weight:400;font-size:var(--fs-body-s);direction:ltr;
  unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.sel-go{display:block;text-align:center;flex-basis:100%;order:5;margin-top:var(--s2);width:100%}

/* ردیف انتخاب متریال/رنگ داخل کارت — جایگزین قوس‌ها زیر ۱۱۵۰px */
.card-picker{display:none}
@media (max-width:1150px){
  .card-picker{display:flex;flex-direction:column;gap:var(--s3);
    flex-basis:100%;order:4;margin:0}
  .picker-row{display:flex;gap:var(--s2);flex-wrap:wrap}
  .pchip{display:inline-flex;align-items:center;gap:var(--s2);cursor:pointer;
    background:none;border:var(--hair) solid var(--gline);border-radius:var(--r-full);
    color:var(--muted);font-family:var(--fa);font-size:var(--fs-micro);
    padding:var(--s2) var(--s4);min-height:36px;
    transition:border-color var(--t-fast) var(--e),color var(--t-fast) var(--e)}
  .pchip.on{border-color:var(--signal);color:var(--ink)}
  .pchip-color i{width:var(--s3);height:var(--s3);border-radius:50%;
    background:var(--sw);display:block;border:var(--hair) solid var(--gline)}
}

/* ناوبری شماره‌ای */
.sel-pager{position:absolute;z-index:10;bottom:var(--s8);
  inset-inline-end:clamp(var(--s5),5vw,var(--s9));
  display:flex;align-items:center;gap:var(--s3)}
.sel-pager .ticks{display:flex;gap:var(--s1)}
.tick{width:var(--s5);height:var(--hair);background:var(--gline);transition:all var(--t-fast) var(--e)}
.tick.on{background:var(--signal);height:1.5px}

.sel-note{position:absolute;z-index:12;top:var(--s9);
  inset-inline-start:clamp(var(--s5),5vw,var(--s9));color:var(--signal);opacity:.7}

/* بدون WebGL: کانواس‌ها حذف، پیام سر جایش */
.sel.no-gl #sel-main,.sel.no-gl .sel-win canvas{display:none}

@media (max-width:1150px){
  .arcs{display:none}
}
@media (max-width:900px){
  /* attachment:fixed روی موبایل هر اسکرول را دوباره رنگ می‌زند */
  .sel{padding-bottom:var(--s7);background-attachment:scroll}
  .sel-name{display:none}
  .sel-hint{display:none}
  .sel-viewport{min-height:auto;height:min(64vh,520px)}
  .sel-pager{bottom:auto;top:calc(var(--s9) + var(--s5));inset-inline-end:50%;
    transform:translateX(50%)}
  #sel-main{width:min(56vh,82vw);height:min(56vh,82vw)}

  /* کارت همان‌جا زیر محصول می‌ماند، فقط باریک‌تر */
  .sel-card{margin:var(--s5) auto 0;width:min(560px,92vw)}
}

/* ————————————————————————————— کاروسل ورقی */

.deck-sec{position:relative;z-index:40;background:var(--page);
  padding:var(--s9) 0 var(--s8)}
.deck-head{padding-inline:clamp(var(--s5),5vw,var(--s9));margin-bottom:var(--s7)}
.deck-title{margin-top:var(--s4)}
.deck-lede{color:var(--muted);margin-top:var(--s2)}
.deck-note{display:block;margin-top:var(--s5);
  padding-inline:clamp(var(--s5),5vw,var(--s9));color:var(--signal);opacity:.7}

/* نوار تمام‌عرض از ورق‌های عمودی. هرکدام هاور شود باز می‌شود. */
.deck{display:flex;width:100%;height:min(62vh,560px);
  border-block:var(--hair) solid var(--gline);overflow:visible;
  perspective:1600px}

/* سه‌بعدی: هر ورق با موقعیت موس کمی خم می‌شود (js/home.js آن را
   با --tilt-x/--tilt-y تنظیم می‌کند؛ پیش‌فرض صفر یعنی صاف) */
.sheet{position:relative;flex:1 1 0;min-width:0;
  display:block;overflow:hidden;isolation:isolate;
  border-inline-start:var(--hair) solid var(--gline);
  background:var(--band) var(--sheet-img,none) center/cover no-repeat;
  transform-style:preserve-3d;will-change:transform;
  transform:rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg));
  transition:flex-grow var(--t-slow) var(--e),transform var(--t-fast) var(--e)}
.sheet:first-child{border-inline-start:0}

/* ورق باز — روی دسکتاپ با هاور، و یکی همیشه باز است */
.deck:hover .sheet{flex-grow:1}
.deck .sheet.open{flex-grow:5}
.deck:hover .sheet:hover{flex-grow:5}
.deck:hover .sheet.open:not(:hover){flex-grow:1}

/* پرده تیره تا متن روی هر عکسی خوانا بماند */
.sheet-shade{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,var(--win) 0%,transparent 62%);
  opacity:.88;transition:opacity var(--t-mid) var(--e)}
.sheet:hover .sheet-shade{opacity:.72}

.sheet-num{position:absolute;z-index:3;top:var(--s5);inset-inline-start:var(--s5);
  color:var(--mod-white);opacity:.6}

.sheet-body{position:absolute;z-index:3;inset-inline:var(--s5);bottom:var(--s5);
  display:flex;flex-direction:column;gap:var(--s2)}

/* تیتر عمودی می‌ماند تا در ورق باریک هم خوانده شود،
   و با باز شدن ورق افقی می‌شود. */
.sheet-title{font-size:var(--fs-card);font-weight:500;color:var(--mod-white);
  writing-mode:vertical-rl;transform:rotate(180deg);
  max-height:min(46vh,420px);
  transition:font-size var(--t-mid) var(--e)}
.sheet.open .sheet-title,.sheet:hover .sheet-title{writing-mode:horizontal-tb;transform:none}

.sheet-ex,.sheet-go{opacity:0;max-height:0;overflow:hidden;
  transition:opacity var(--t-mid) var(--e)}
.sheet-ex{font-size:var(--fs-micro);color:var(--mod-white);max-width:44ch;line-height:1.7}
.sheet-go{color:var(--signal)}
.sheet.open .sheet-ex,.sheet:hover .sheet-ex,
.sheet.open .sheet-go,.sheet:hover .sheet-go{opacity:1;max-height:var(--s10)}

.sheet:focus-visible{outline:1.5px solid var(--signal);outline-offset:calc(var(--s1) * -1)}

/* بدون عکس شاخص، ورق یک سطح خنثی می‌ماند */
.sheet[style*="url('')"]{background-image:none}

@media (max-width:900px){
  /* روی موبایل هاور نیست — ورق‌ها عمودی روی هم می‌نشینند */
  .deck{flex-direction:column;height:auto}
  .sheet{flex:none;height:min(38vh,280px);
    border-inline-start:0;border-block-start:var(--hair) solid var(--gline)}
  .sheet:first-child{border-block-start:0}
  .sheet-title{writing-mode:horizontal-tb;transform:none}
  .sheet-ex,.sheet-go{opacity:1;max-height:var(--s10)}
}


/* ————————————————————————————— موبایل */

@media (max-width:900px){
  .hero-scroll{bottom:var(--s7)}
  /* .hero-note دیگر absolute نیست، پس bottom بی‌اثر بود و برداشته
     شد — حالا در جریانِ ستون زیر کارت می‌نشیند. */
  .deck-sec{padding-top:var(--s9)}
}

/* ————————————————————————————— حرکت کمتر */

@media (prefers-reduced-motion:reduce){
  .hero-h .w > i{transform:none}
  .hero-cta,.hero-note{opacity:1;transform:none}
  .hero-line::after{animation:none;transform:translateX(0);opacity:.4}
  .beat{opacity:1}
  .beat .beat-inner{transform:none}
}