/* Nato Perde · catalogue site
   One idea runs through the page: real curtains. Pleats are gradients, opening is scaleX
   (so the folds bunch up the way fabric does), and every motion is transform or opacity. */

:root {
  --navy: #12306f;
  --brass: #b08a45;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-draw: cubic-bezier(.76, 0, .18, 1);
  --sans: "Montserrat", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --gut: clamp(16px, 4vw, 44px);
  --open: .21;
  color-scheme: light;

  --bg: #f3f1ec;
  --paper: #fbfaf7;
  --ink: #0e1c3d;
  --ink-2: #47526d;
  --line: rgb(18 48 111 / .14);
  --accent: var(--navy);
  --on-accent: #fff;
  --chip: #e9e6de;
  --focus: #1f56d6;
  --sky: linear-gradient(180deg, #c9dcec 0%, #e6eef3 62%, #f1f2ee 100%);
  --frame: #f7f5f0;
  --view-fill: #b9c8d3;
  --shaft: #fffdf8;
  --shaft-o: .9;
  --hero-cloth: #f8f5ee;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a1330;
  --paper: #0f1a3e;
  --ink: #eef0f7;
  --ink-2: #aab4cf;
  --line: rgb(220 228 255 / .13);
  --accent: #d2b06c;
  --on-accent: #0a1330;
  --chip: #16224a;
  --focus: #9fb8ff;
  --sky: linear-gradient(180deg, #050b20 0%, #13224c 70%, #24366a 100%);
  --frame: #1b2752;
  --view-fill: #0a1230;
  --shaft: #a9bfff;
  --shaft-o: .1;
  --hero-cloth: #1a2b66;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-color: color-mix(in srgb, var(--ink) 30%, transparent) var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  transition: background-color .01s;
}
html:lang(ckb) body, html:lang(ar) body { font-family: "Vazirmatn", var(--sans); }
::selection { background: var(--navy); color: #fff; }
[data-theme="dark"] ::selection { background: var(--accent); color: var(--on-accent); }
img, svg { display: block; }
a { color: inherit; text-underline-offset: .2em; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h2 { font-size: clamp(1.9rem, 4.2vw, 3.2rem); line-height: 1.06; font-weight: 750; letter-spacing: -.03em; }
html:lang(ckb) h2, html:lang(ar) h2 { letter-spacing: 0; line-height: 1.3; }
p { margin: 0; }
.wrap { max-width: 1240px; margin: 0 auto; padding-inline: var(--gut); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip { position: fixed; top: 8px; inset-inline-start: 8px; z-index: 200; padding: 10px 14px; background: var(--ink); color: var(--bg); transform: translateY(-160%); }
.skip:focus { transform: none; }
.ic { width: 20px; height: 20px; flex: none; }
[dir="rtl"] .ic.flip { transform: scaleX(-1); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  font-weight: 650; font-size: 15px; text-decoration: none; letter-spacing: .01em;
  transition: transform .4s var(--ease), background-color .3s, color .3s, box-shadow .3s;
}
.btn:active { transform: scale(.97); }
.btn-solid { background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--accent) 80%, #000); }
.btn-solid:hover { box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--accent) 90%, #000); transform: translateY(-1px); }
.btn-line { box-shadow: inset 0 0 0 1.5px currentColor; }
.btn-line:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.btn.wide { width: 100%; }

/* ---------- header ---------- */
.top {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 72px;
  display: flex; align-items: center; gap: 28px; padding-inline: var(--gut);
  transition: background-color .35s, box-shadow .35s;
}
.top.solid { background: color-mix(in srgb, var(--bg) 94%, transparent); box-shadow: 0 1px 0 var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-mark { width: 34px; height: 34px; fill: var(--navy); }
[data-theme="dark"] .brand-mark { fill: var(--accent); }
.brand-word { font: 400 15px/1 var(--sans); letter-spacing: .16em; white-space: nowrap; }
.brand-word b { font-weight: 800; }
.nav { display: flex; gap: 26px; margin-inline-start: auto; }
.nav a { text-decoration: none; font-size: 14px; font-weight: 550; color: var(--ink-2); padding: 6px 0; background: linear-gradient(currentColor 0 0) 0 100% / 0 1.5px no-repeat; transition: background-size .4s var(--ease), color .2s; }
[dir="rtl"] .nav a { background-position: 100% 100%; }
.nav a:hover { color: var(--ink); background-size: 100% 1.5px; }
.top-tools { display: flex; align-items: center; gap: 18px; }
.langs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.langs button { font-size: 12.5px; font-weight: 600; padding: 6px 10px; border-radius: 999px; color: var(--ink-2); line-height: 1.2; }
.langs button[lang="ckb"], .langs button[lang="ar"] { font-family: "Vazirmatn", sans-serif; }
.langs button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* the pull cord that changes the theme */
.cord { position: relative; width: 30px; height: 72px; align-self: flex-start; touch-action: none; }
.cord-line, .cord-tassel { position: absolute; left: 50%; transition: transform .5s var(--ease); }
.cord-line { top: 0; width: 1.5px; height: 70px; margin-left: -.75px; background: var(--ink-2); transform-origin: top; }
.cord-tassel { top: 64px; width: 18px; height: 40px; margin-left: -9px; fill: var(--navy); }
.cord-thread { stroke: rgb(255 255 255 / .35); stroke-width: .8; fill: none; }
[data-theme="dark"] .cord-tassel { fill: var(--accent); }
[data-theme="dark"] .cord-thread { stroke: rgb(0 0 0 / .3); }
.cord:hover .cord-tassel { transform: translateY(3px) rotate(4deg); }
.cord.pull .cord-tassel { animation: tug .7s var(--ease); }
.cord.pull .cord-line { animation: tugl .7s var(--ease); }
@keyframes tug { 30% { transform: translateY(22px); } 62% { transform: translateY(-5px); } }
@keyframes tugl { 30% { transform: scaleY(1.31); } 62% { transform: scaleY(.93); } }

/* ---------- fabric (shared by every curtain on the page) ---------- */
.fab {
  --c: var(--k, #ddd);
  --p: 42px; --sh: .34; --hl: .2;
  position: relative;
  background: var(--tex, linear-gradient(#0000 0 0)), var(--c);
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 6px) no-repeat, radial-gradient(52% 6px at 50% 0, #000 95%, #0000) 0 100% / var(--p) 6px repeat-x;
          mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 6px) no-repeat, radial-gradient(52% 6px at 50% 0, #000 95%, #0000) 0 100% / var(--p) 6px repeat-x;
}
/* the shop's fabric photo is the cloth; folds and hem shadows are a see-through layer on top of it */
.fab::before, .fab::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.fab::before { background: var(--photo, none) 50% 50% / cover no-repeat; opacity: var(--po, 1); }
.fab::after {
  background:
    linear-gradient(180deg, rgb(0 0 0 / .2), #0000 4% 91%, rgb(0 0 0 / .16)),
    linear-gradient(90deg, rgb(0 0 0 / var(--sh)), #0000 26%, rgb(255 255 255 / var(--hl)) 48%, #0000 70%, rgb(0 0 0 / var(--sh))) 0 0 / var(--p) 100%;
}
.fab.sheer { --c: color-mix(in srgb, var(--k) 52%, #0000); --sh: .1; --hl: .42; --po: .58; }
.fab.velvet { --sh: .58; --hl: .17; }
.fab.linen { --tex: repeating-linear-gradient(0deg, rgb(255 255 255 / .07) 0 1px, #0000 1px 3px), repeating-linear-gradient(90deg, rgb(0 0 0 / .05) 0 1px, #0000 1px 4px); }
.fab.jacq { --tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='52'%3E%3Cg fill='%23fff' fill-opacity='.2'%3E%3Cpath d='M18 4 24 16 18 24 12 16Z'/%3E%3Cpath d='M0 28 6 40 0 48ZM36 28 30 40 36 48Z' fill-opacity='.14'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 36px 52px; }
.fab.satin { --sh: .4; --hl: .38; }

/* ---------- hero stage ---------- */
.stage { position: relative; min-height: max(640px, 100svh); display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.wall { position: absolute; inset: 0; z-index: -1; }
.shafts {
  position: absolute; top: -12%; inset-inline-end: -4%; width: 66vw; height: 128%;
  background:
    linear-gradient(90deg, #0000 31%, var(--bg) 31% 34%, #0000 34% 64%, var(--bg) 64% 67%, #0000 67%),
    linear-gradient(180deg, #0000 44%, var(--bg) 44% 47%, #0000 47%),
    var(--shaft);
  transform: skewX(-20deg) rotate(3deg);
  filter: blur(22px);
  opacity: var(--shaft-o);
  -webkit-mask: linear-gradient(100deg, #0000 4%, #000 34%, #000 72%, #0000 96%);
          mask: linear-gradient(100deg, #0000 4%, #000 34%, #000 72%, #0000 96%);
  animation: drift 22s ease-in-out infinite alternate;
}
[data-theme="light"] .wall { background: radial-gradient(120% 90% at 70% 10%, #f5f3ee, #e8e5dd); }
[dir="rtl"] .shafts { transform: skewX(20deg) rotate(-3deg); }
@keyframes drift { to { translate: -3% 1.5%; } }
.lamp { position: absolute; inset: 0; opacity: 0; background: radial-gradient(42% 52% at 18% 92%, rgb(255 190 110 / .2), #0000 70%), radial-gradient(60% 70% at 80% 0%, rgb(120 150 255 / .12), #0000 70%); transition: opacity .2s; }
[data-theme="dark"] .lamp { opacity: 1; }

.hero { position: relative; z-index: 1; width: min(880px, 100% - 2 * var(--gut)); text-align: center; padding: 120px 0 80px; }
.hero-title { font-size: clamp(2.7rem, 7.4vw, 6rem); line-height: .98; font-weight: 780; letter-spacing: -.04em; }
.hero-title em { font: italic 400 1.14em/0 var(--serif); letter-spacing: -.01em; color: var(--navy); padding-inline: .04em; }
[data-theme="dark"] .hero-title em { color: var(--accent); }
html:lang(ckb) .hero-title, html:lang(ar) .hero-title { letter-spacing: 0; line-height: 1.25; font-weight: 800; font-size: clamp(2.3rem, 6vw, 4.8rem); }
html:lang(ckb) .hero-title em, html:lang(ar) .hero-title em { font: 300 1em/inherit "Vazirmatn", sans-serif; }
.hero-sub { max-width: 54ch; margin: 26px auto 0; font-size: clamp(1rem, 1.6vw, 1.18rem); color: var(--ink-2); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px; }
.hero-places { margin-top: 30px; font-size: 12.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
html:lang(ckb) .hero-places, html:lang(ar) .hero-places { letter-spacing: 0; font-size: 14px; }

/* hero curtains */
.drapes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.drapes::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(40 30 10 / .1), #0000 calc(var(--open) * 50% + 6%), #0000 calc(100% - var(--open) * 50% - 6%), rgb(40 30 10 / .1)); }
[data-theme="dark"] .drapes::before { background: linear-gradient(90deg, rgb(0 0 0 / .35), #0000 calc(var(--open) * 50% + 8%), #0000 calc(100% - var(--open) * 50% - 8%), rgb(0 0 0 / .35)); }
.panel { position: absolute; top: 0; bottom: 0; width: 50.6%; transform: scaleX(var(--open)); transition: transform 1.6s var(--ease-draw); }
.panel.l { left: 0; transform-origin: 0 50%; }
.panel.r { right: 0; transform-origin: 100% 50%; }
.gather { height: 100%; transform-origin: inherit; }
.panel.l .gather { transform-origin: 0 50%; }
.panel.r .gather { transform-origin: 100% 50%; }
.cloth { height: 100%; transform-origin: 50% 0; }
.stage .cloth { --k: var(--hero-cloth); --p: 116px; }
[data-theme="light"] .stage .cloth { --c: color-mix(in srgb, var(--k) 84%, #0000); --sh: .12; --hl: .5; animation: sway 7s ease-in-out infinite; }
[data-theme="light"] .stage .panel.r .cloth { animation-delay: -3.5s; }
[data-theme="dark"] .stage .cloth { --p: 136px; --sh: .62; --hl: .15; }
@keyframes sway { 50% { transform: skewX(.9deg) scaleX(1.015); } }
.stage.off .cloth, .stage.off .shafts { animation-play-state: paused; }

@supports (animation-timeline: scroll()) {
  .gather { animation: gather linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
  @keyframes gather { to { transform: scaleX(1.85); } }
}

/* intro: the same curtains start closed with the mark split across them */
html.intro .stage:not(.opened) .panel { transform: none; }
.seal { position: absolute; inset: 0; display: grid; place-items: center; }
.seal-half { position: absolute; top: 50%; left: 50%; width: 132px; height: 132px; margin: -66px 0 0 -66px; transition: transform 1.6s var(--ease-draw), opacity 1s .5s; opacity: 0; }
.seal-half svg { width: 100%; height: 100%; fill: var(--navy); }
[data-theme="dark"] .seal-half svg { fill: var(--accent); }
.seal-half.l { clip-path: inset(0 50% 0 0); }
.seal-half.r { clip-path: inset(0 0 0 50%); }
html.intro .seal-half { opacity: 1; }
html.intro .stage.opened .seal-half { opacity: 0; }
html.intro .stage.opened .seal-half.l { transform: translateX(-38vw); }
html.intro .stage.opened .seal-half.r { transform: translateX(38vw); }
html.intro .hero > * { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
html.intro .stage.opened .hero > * { opacity: 1; transform: none; transition-delay: calc(.55s + var(--i, 0) * .09s); }
.hero > :nth-child(2) { --i: 1; } .hero > :nth-child(3) { --i: 2; } .hero > :nth-child(4) { --i: 3; }

/* theme veil */
.veil { position: fixed; inset: 0; z-index: 120; pointer-events: none; }
.vp { position: absolute; top: 0; bottom: 0; width: 50.6%; transform: scaleX(0); transition: transform .62s var(--ease-draw); }
.vp.l { left: 0; transform-origin: 0 50%; }
.vp.r { right: 0; transform-origin: 100% 50%; }
.veil.on .vp { transform: scaleX(1); }
.veil.on { pointer-events: auto; }
.veil[data-to="dark"] .vp { --k: #1a2b66; --p: 66px; --sh: .62; --hl: .15; }
.veil[data-to="light"] .vp { --k: #f1ece1; --p: 54px; --sh: .16; --hl: .5; --tex: repeating-linear-gradient(0deg, rgb(0 0 0 / .025) 0 1px, #0000 1px 3px); }

/* ---------- section heads ---------- */
section { position: relative; }
.head { display: grid; gap: 14px; max-width: 640px; }
.head p { color: var(--ink-2); font-size: 17px; max-width: 58ch; }
.head-row { display: flex; justify-content: space-between; align-items: end; gap: 24px; max-width: none; }
.head-row > div { display: grid; gap: 14px; max-width: 640px; }
.count { color: var(--ink-2); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- collections rail ---------- */
.collections { padding: clamp(90px, 12vw, 150px) 0 40px; }
.rod-wrap { position: relative; margin-top: 54px; }
.rod { position: absolute; top: 0; left: var(--gut); right: var(--gut); height: 7px; border-radius: 4px; background: linear-gradient(180deg, #d9c08a, var(--brass) 55%, #6e5427); box-shadow: 0 4px 8px -3px rgb(0 0 0 / .35); z-index: 2; }
.finial { position: absolute; top: -6px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f2e1b4, var(--brass) 55%, #5b4520); }
.finial:first-child { left: -14px; } .finial:last-child { right: -14px; }
.swatches { list-style: none; margin: 0; padding: 0 calc(var(--gut) + 16px) 24px; display: flex; gap: clamp(10px, 1.6vw, 22px); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.swatches::-webkit-scrollbar { display: none; }
.swatches li { flex: 1 0 150px; scroll-snap-align: start; }
.sw { position: relative; display: block; width: 100%; padding-top: 3px; text-align: start; transform-origin: 50% 0; transition: transform .9s var(--ease); }
.sw::before { content: ""; position: absolute; top: -6px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; border: 2.5px solid var(--brass); z-index: 3; }
.sw .fab { height: clamp(220px, 26vw, 320px); border-radius: 0 0 2px 2px; box-shadow: 0 18px 30px -22px rgb(0 0 0 / .55); }
.sw-zebra { height: clamp(220px, 26vw, 320px); background: repeating-linear-gradient(180deg, var(--k) 0 22px, color-mix(in srgb, var(--k) 40%, #0000) 22px 44px); box-shadow: 0 18px 30px -22px rgb(0 0 0 / .55); }
.sw-roller { height: clamp(220px, 26vw, 320px); background: radial-gradient(circle, rgb(0 0 0 / .14) .8px, #0000 1.2px) 0 0 / 4px 4px, var(--k); box-shadow: inset 0 -10px 0 #8d8478, 0 18px 30px -22px rgb(0 0 0 / .55); }
.sw-track .trk { position: absolute; inset: 0 0 auto; height: 10px; z-index: 1; background: linear-gradient(180deg, #4a4f5b, #1f222a); }
.sw-track .trk::after { content: ""; position: absolute; top: 2px; right: 8px; width: 26px; height: 15px; border-radius: 3px; background: #2b2f38; box-shadow: inset 6px 5px 0 -3px #5df08b; }
.sw-name { display: block; margin-top: 16px; font-weight: 700; font-size: 16px; }
.sw-n { display: block; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sw:hover, .sw:focus-visible { transform: rotate(-2.2deg); }
[dir="rtl"] .sw:hover, [dir="rtl"] .sw:focus-visible { transform: rotate(2.2deg); }
.sw[aria-pressed="true"] .sw-name { color: var(--accent); }
.sw[aria-pressed="true"] .sw-name::after { content: ""; display: block; width: 26px; height: 2px; margin-top: 6px; background: currentColor; }

/* ---------- catalogue ---------- */
.catalogue { padding: clamp(70px, 9vw, 120px) 0 clamp(80px, 10vw, 140px); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 34px 0 30px; }
.filters button { padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; background: var(--chip); color: var(--ink-2); transition: background-color .25s, color .25s; }
.filters button:hover { color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 40px 22px; }
.card { display: block; width: 100%; text-align: start; }
.card .win { border-radius: 3px; transition: box-shadow .5s var(--ease); }
.card:hover .win { box-shadow: 0 26px 40px -30px rgb(0 0 0 / .6); }
.card-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 14px; }
.card-name { font-weight: 700; font-size: 17px; }
.card-code { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.card-sub { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; font-size: 13.5px; color: var(--ink-2); }
.dots { display: flex; gap: 5px; }
.dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--k); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .14); }
.card.hide { display: none; }
.grid li { animation: rise .6s var(--ease) both; animation-delay: calc(var(--n, 0) * 35ms); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

/* window scene shared by cards, sheet and swatch previews */
.win { --rail: 9px; position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sky); isolation: isolate; contain: paint; }
.win::before { content: ""; position: absolute; inset: auto 0 0; height: 34%; background: var(--view-fill); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 38C30 30 50 34 70 28V18h6v-4h10v4h22v-4h10v4h6v10c20 4 40-2 76 6v26H0Z'/%3E%3C/svg%3E") 0 100% / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 38C30 30 50 34 70 28V18h6v-4h10v4h22v-4h10v4h6v10c20 4 40-2 76 6v26H0Z'/%3E%3C/svg%3E") 0 100% / 100% 100% no-repeat; opacity: .6; }
.win::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 9px var(--frame); background: linear-gradient(90deg, #0000 calc(50% - 2.5px), var(--frame) 0 calc(50% + 2.5px), #0000 0), linear-gradient(#0000 calc(40% - 2.5px), var(--frame) 0 calc(40% + 2.5px), #0000 0); z-index: 0; }
[data-theme="dark"] .win .moon { opacity: 1; }
.moon { position: absolute; top: 14%; right: 22%; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset -5px 2px 0 0 #f4ecd2; opacity: 0; z-index: 0; }
.win .rail { position: absolute; inset: 0 0 auto; height: var(--rail); background: linear-gradient(180deg, #e8e4dc, #b9b2a4); z-index: 3; }
[data-theme="dark"] .win .rail { background: linear-gradient(180deg, #4b5167, #23283a); }
.win .p { position: absolute; top: var(--rail); bottom: 0; width: 51%; z-index: 2; transition: transform 1s var(--ease-draw); }
.win .p.l { left: 0; transform-origin: 0 50%; }
.win .p.r { right: 0; transform-origin: 100% 50%; }
.card:hover .win .p, .card:focus-visible .win .p, .win.open .p { transform: scaleX(.27); }
.win.fixed .p { transform: scaleX(.34); }
.card:hover .win.fixed .p, .win.fixed.open .p { transform: scaleX(.22); }

.zclip { position: absolute; top: 15px; left: 7%; right: 7%; bottom: 10%; overflow: hidden; z-index: 2; }
.zclip.roll { bottom: 5%; }
.zb, .zf { position: absolute; inset: 0 0 -28px; }
.rb { position: absolute; inset: 0; }
.zb, .zf { background: var(--photo, none) 50% 0 / cover, var(--k); -webkit-mask: repeating-linear-gradient(180deg, #000 0 14px, rgb(0 0 0 / .26) 14px 28px); mask: repeating-linear-gradient(180deg, #000 0 14px, rgb(0 0 0 / .26) 14px 28px); }
.zf { background: repeating-linear-gradient(180deg, rgb(0 0 0 / .1) 0 1px, #0000 1px 14px), var(--photo, none) 50% 0 / cover, var(--k); transform: translateY(10px); transition: transform .9s var(--ease-draw); box-shadow: 0 1px 0 rgb(0 0 0 / .06); }
.card:hover .zf, .card:focus-visible .zf, .win.open .zf { transform: translateY(0); }
.cassette { position: absolute; top: 0; left: 5%; right: 5%; height: 16px; border-radius: 0 0 4px 4px; background: linear-gradient(180deg, #fbfaf7, #d8d3c9); box-shadow: 0 3px 6px -3px rgb(0 0 0 / .4); z-index: 4; }
[data-theme="dark"] .cassette { background: linear-gradient(180deg, #59607a, #2a3046); }
.rb { transition: transform 1s var(--ease-draw); background: radial-gradient(circle, rgb(0 0 0 / .1) .8px, #0000 1.2px) 0 0 / 4px 4px, var(--photo, none) 50% 50% / cover, var(--k); }
.rb::after { content: ""; position: absolute; inset: auto 0 0; height: 9px; background: color-mix(in srgb, var(--k) 70%, #000); border-radius: 0 0 2px 2px; }
.rb.roman { background: linear-gradient(180deg, #0000 0 70%, rgb(0 0 0 / .2) 92%, rgb(255 255 255 / .1)) 0 0 / 100% 46px, var(--photo, none) 50% 50% / cover, var(--tex, linear-gradient(#0000 0 0)), var(--k); }
.rb.roman.linen { --tex: repeating-linear-gradient(0deg, rgb(255 255 255 / .08) 0 1px, #0000 1px 3px); }
.card:hover .rb, .card:focus-visible .rb, .win.open .rb { transform: translateY(-62%); }
.motor { position: absolute; top: 0; right: 6%; width: 26px; height: 14px; border-radius: 3px; background: #2b2f38; z-index: 4; box-shadow: 0 2px 5px rgb(0 0 0 / .4); }
.motor::after { content: ""; position: absolute; top: 5px; left: 5px; width: 4px; height: 4px; border-radius: 50%; background: #5df08b; }
.win .rail.dark { background: linear-gradient(180deg, #4a4f5b, #1f222a); }
.rings { position: absolute; top: 2px; left: 3%; right: 3%; height: 14px; z-index: 4; background: radial-gradient(circle at 50% 50%, #0000 3.2px, var(--brass) 3.6px 5.2px, #0000 5.6px) 0 0 / 26px 14px repeat-x; }
.win .rail.rod { height: 6px; top: 5px; border-radius: 3px; background: linear-gradient(180deg, #e3cd97, var(--brass) 55%, #6f5428); }
.tassel { position: absolute; top: 46%; left: 12%; width: 22px; height: 64px; z-index: 5; transform-origin: 50% 0; transition: transform 1.2s var(--ease); fill: var(--brass); }
.tassel.r { left: auto; right: 12%; }
.tassel svg { width: 100%; height: 100%; }
.card:hover .tassel { transform: rotate(10deg); }
.card:hover .tassel.r { transform: rotate(-10deg); }

/* ---------- sheet ---------- */
.sheet { width: min(1020px, 100% - 24px); max-height: min(92svh, 760px); padding: 0; border: 0; border-radius: 6px; background: var(--paper); color: var(--ink); overflow: auto; box-shadow: 0 40px 80px -30px rgb(0 0 0 / .6); }
.sheet::backdrop { background: rgb(5 10 28 / .55); }
.sheet[open] { animation: sheetIn .55s var(--ease); }
@keyframes sheetIn { from { opacity: 0; transform: translateY(24px) scale(.985); } }
.sheet-in { display: grid; grid-template-columns: 1.05fr 1fr; }
.sheet-view { position: relative; padding: 22px; background: color-mix(in srgb, var(--ink) 5%, var(--paper)); display: grid; align-content: start; gap: 14px; }
.sheet-view .win { border-radius: 3px; }
.views { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); justify-self: start; }
.views button { padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.views button[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 2px 8px -4px rgb(0 0 0 / .3); }
.pane { display: grid; gap: 14px; align-content: start; }
.loupe { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px; background: var(--k); cursor: zoom-in; touch-action: pan-y; }
.loupe img { width: 100%; height: 100%; object-fit: cover; transform-origin: var(--ox, 50%) var(--oy, 50%); transition: transform .5s var(--ease); }
.loupe.on img { transform: scale(2.6); }
.loupe-tag { position: absolute; inset: auto 12px 12px auto; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: rgb(255 255 255 / .9); color: #0e1c3d; pointer-events: none; }
[dir="rtl"] .loupe-tag { inset: auto auto 12px 12px; }
.hint { font-size: 13px; color: var(--ink-2); }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; background: var(--chip); }
.gallery img:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.draw { justify-self: start; font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); }
.draw:hover { box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.sheet-info { padding: 44px 36px 32px; display: grid; align-content: start; gap: 14px; }
.sheet-info .code { font-size: 12.5px; font-weight: 650; letter-spacing: .1em; color: var(--ink-2); }
.sheet-info h2:focus { outline: none; }
.sheet-info h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.sheet-info > p:not(.code) { color: var(--ink-2); }
.sheet-info h3 { font-size: 13px; font-weight: 700; margin-top: 8px; color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 6px; border-radius: 999px; font-size: 13.5px; font-weight: 550; box-shadow: inset 0 0 0 1px var(--line); }
[dir="rtl"] .chips button { padding: 6px 6px 6px 13px; }
.chips button i { width: 22px; height: 22px; border-radius: 50%; background: var(--ph, none) 50% 50% / 300%, var(--k); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15); }
.chips button[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--ink); }
.specs { margin: 8px 0 10px; display: grid; }
.specs div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.specs dt { color: var(--ink-2); }
.specs dd { margin: 0; display: flex; align-items: center; gap: 10px; }
.meter { display: inline-flex; gap: 3px; }
.meter i { width: 16px; height: 6px; border-radius: 2px; background: var(--line); }
.meter[data-v="1"] i:nth-child(-n+1), .meter[data-v="2"] i:nth-child(-n+2), .meter[data-v="3"] i:nth-child(-n+3) { background: var(--accent); }
.sheet-x { position: absolute; top: 14px; inset-inline-end: 14px; z-index: 6; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); box-shadow: 0 4px 14px -6px rgb(0 0 0 / .4); }
.sheet-x svg { width: 20px; height: 20px; }
.sheet .sheet-in { position: relative; }

/* ---------- light lab ---------- */
.lab { padding: clamp(80px, 10vw, 140px) 0; background: var(--paper); content-visibility: auto; contain-intrinsic-size: auto 760px; }
.lab-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.lab-copy { display: grid; gap: 18px; }
.lab-copy > p { color: var(--ink-2); font-size: 17px; }
.lab-fabrics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.lab-fabrics button { padding: 9px 15px; border-radius: 999px; font-size: 14px; font-weight: 600; background: var(--chip); color: var(--ink-2); }
.lab-fabrics button[aria-checked="true"] { background: var(--ink); color: var(--bg); }
.range { display: grid; gap: 8px; font-size: 14px; font-weight: 600; }
.range > span { display: flex; justify-content: space-between; color: var(--ink-2); }
.range output { font-variant-numeric: tabular-nums; color: var(--ink); }
input[type="range"] { width: 100%; accent-color: var(--accent); height: 28px; }
.lab-result { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; min-height: 2em; }

.room { --sun: .9; --day: 1; --dusk: 0; --night: 0; --t: .72; --sx: 50%; --sy: 30%; --skew: 0deg;
  position: relative; aspect-ratio: 5 / 4; overflow: hidden; border-radius: 4px; background: #e9e3d7; isolation: isolate; }
.room-wall { position: absolute; inset: 0; background: linear-gradient(180deg, #ece6da, #ddd5c6); }
.room-win { position: absolute; left: 31%; width: 38%; top: 9%; height: 52%; overflow: hidden; background: #0b1430; box-shadow: 0 0 0 10px #f6f2ea, 0 0 0 11px rgb(0 0 0 / .08); }
.sky { position: absolute; inset: 0; }
.sky.day { background: linear-gradient(180deg, #8fb9e3, #d7e7f2); opacity: var(--day); }
.sky.dusk { background: linear-gradient(180deg, #4c5a8c, #f0a46b 85%); opacity: var(--dusk); }
.sky.night { background: linear-gradient(180deg, #050a1d, #172452); opacity: var(--night); }
.sun { position: absolute; left: var(--sx); top: var(--sy); width: 26px; height: 26px; margin: -13px; border-radius: 50%; background: #fff6d6; box-shadow: 0 0 30px 10px rgb(255 236 170 / .7); opacity: calc(var(--day) + var(--dusk)); }
.room-win .hills { position: absolute; inset: auto 0 0; height: 30%; background: #6f7f8f; opacity: calc(.25 + var(--sun) * .5); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 38C30 30 50 34 70 28V18h6v-4h10v4h22v-4h10v4h6v10c20 4 40-2 76 6v26H0Z'/%3E%3C/svg%3E") 0 100% / 100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 38C30 30 50 34 70 28V18h6v-4h10v4h22v-4h10v4h6v10c20 4 40-2 76 6v26H0Z'/%3E%3C/svg%3E") 0 100% / 100% 100%; }
.mullions { position: absolute; inset: 0; background: linear-gradient(90deg, #0000 calc(50% - 3px), #f6f2ea 0 calc(50% + 3px), #0000 0); }
.lab-cover { position: absolute; inset: 0; z-index: 2; }
.lab-cover .fab { position: absolute; top: 0; bottom: 0; width: 51%; }
.lab-cover .fab.l { left: 0; } .lab-cover .fab.r { right: 0; }
.lab-cover .zclip { inset: 0; }
.lab-cover .zf { transform: translateY(calc(var(--bands, .5) * 14px)); transition: none; }
.room-floor { position: absolute; inset: 72% 0 0; background: linear-gradient(180deg, #b48d62, #8d6a45); }
.room-floor::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, #0000 0 70px, rgb(0 0 0 / .08) 70px 72px); }
.patch { position: absolute; left: 26%; width: 48%; top: 72%; height: 26%; background: linear-gradient(180deg, rgb(255 244 214 / .95), rgb(255 236 190 / .5)); clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); transform: skewX(var(--skew)); opacity: calc(var(--sun) * var(--t)); filter: blur(4px); mix-blend-mode: screen; }
.room-sofa { position: absolute; left: 8%; bottom: 14%; width: 26%; height: 17%; border-radius: 12px 12px 6px 6px; background: linear-gradient(180deg, #33456f, #22325a); box-shadow: inset 0 -14px 0 #1b284c; z-index: 1; }
.room-sofa::before { content: ""; position: absolute; left: -6%; right: -6%; bottom: 0; height: 58%; border-radius: 10px; background: #2b3c66; }
.room-dim { position: absolute; inset: 0; background: #050b1e; opacity: calc(.82 - (.18 + var(--sun) * .8) * (.12 + var(--t) * .88) * .82 - var(--sun) * .06); pointer-events: none; z-index: 3; }

/* ---------- measure ---------- */
.measure { padding: clamp(80px, 10vw, 140px) 0; content-visibility: auto; contain-intrinsic-size: auto 1100px; }
.measure-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(30px, 6vw, 90px); align-items: start; }
.measure-wrap > div > p { color: var(--ink-2); font-size: 17px; margin-top: 16px; max-width: 54ch; }
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 34px; }
.calc label { display: grid; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.calc input { height: 56px; padding: 0 16px; border-radius: 4px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); font: 650 20px var(--sans); font-variant-numeric: tabular-nums; caret-color: var(--accent); }
.calc input:focus { outline: none; border-color: var(--accent); }
.calc input[aria-invalid="true"] { border-color: #c2412b; }
.calc fieldset { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.calc legend { font-size: 14px; font-weight: 600; color: var(--ink-2); padding: 0; margin-bottom: 8px; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg button { flex: 1 1 120px; padding: 12px 14px; border-radius: 4px; text-align: start; box-shadow: inset 0 0 0 1.5px var(--line); }
.seg button b { display: block; font-size: 15px; }
.seg button span { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.seg button[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--accent); }
.ticket { position: relative; padding: 30px 28px 26px; border-radius: 6px; background: var(--paper); box-shadow: 0 30px 60px -40px rgb(0 0 0 / .5), 0 0 0 1px var(--line); display: grid; gap: 18px; }
.ticket::before { content: ""; position: absolute; top: 14px; inset-inline-end: 18px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 1px 3px rgb(0 0 0 / .3); }
.ticket-preview { position: relative; height: 130px; border-radius: 3px; background: var(--sky); overflow: hidden; }
.tp-track { position: absolute; top: 10px; left: 8%; right: 8%; height: 5px; border-radius: 3px; background: #3a3f4b; z-index: 2; transition: left .6s var(--ease), right .6s var(--ease); }
.tp-cloth { --k: #efe9dc; position: absolute; top: 13px; bottom: 0; left: 9%; right: 9%; transition: left .6s var(--ease), right .6s var(--ease); }
.ticket-rows { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.ticket-rows div { padding: 12px 0; border-top: 1px dashed var(--line); }
.ticket-rows dt { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.ticket-rows dd { margin: 2px 0 0; font-size: 26px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ticket-err { color: #c2412b; font-size: 14px; font-weight: 600; }
[data-theme="dark"] .ticket-err, [data-theme="dark"] .calc input[aria-invalid="true"] { color: #ff9b85; border-color: #ff9b85; }
.fine { font-size: 13px; color: var(--ink-2); }
.steps-title { margin-top: clamp(90px, 11vw, 150px); }
.steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; counter-reset: s; }
.steps li { counter-increment: s; padding-top: 22px; border-top: 1.5px solid var(--ink); display: grid; gap: 8px; align-content: start; }
.steps li::before { content: counter(s); font: italic 400 44px/1 var(--serif); color: var(--accent); }
html:lang(ckb) .steps li::before, html:lang(ar) .steps li::before { font: 300 36px/1 "Vazirmatn"; content: counter(s, arabic-indic); }
.steps h3 { font-size: 19px; }
.steps p { color: var(--ink-2); font-size: 15px; }

/* ---------- visit ---------- */
.visit { padding: clamp(80px, 10vw, 140px) 0; background: var(--navy); color: #eef1fa; content-visibility: auto; contain-intrinsic-size: auto 600px; --ink-2: #b9c4e4; --line: rgb(255 255 255 / .16); }
[data-theme="dark"] .visit { background: #060c22; }
.visit ::selection { background: #fff; color: var(--navy); }
.shops { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.shop { display: grid; align-content: start; gap: 12px; padding-top: 22px; border-top: 1px solid var(--line); }
.shop h3 { font-size: 24px; letter-spacing: -.01em; }
.shop p { color: var(--ink-2); max-width: 32ch; }
.link { display: inline-flex; align-items: center; gap: 10px; width: fit-content; font-weight: 600; text-decoration: none; padding: 4px 0; }
.link:hover span, .link:hover { text-decoration: underline; }
.link.big { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.visit :focus-visible { outline-color: #fff; }

.foot { padding: 34px 0 40px; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; font-size: 14px; color: var(--ink-2); }
.credit { margin-inline-start: auto; }
.credit a { color: var(--ink); font-weight: 650; }

.wa-float { position: fixed; bottom: 20px; inset-inline-end: 20px; z-index: 40; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #1fa855; color: #fff; box-shadow: 0 14px 30px -12px rgb(0 0 0 / .55); transform: translateY(120px); transition: transform .6s var(--ease); }
.wa-float svg { width: 28px; height: 28px; }
.wa-float.show { transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .nav { display: none; }
  .top-tools { margin-inline-start: auto; }
  .sheet-in { grid-template-columns: 1fr; }
  .sheet-view .win { aspect-ratio: 5 / 4; }
  .lab-wrap, .measure-wrap { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .shops { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  :root { --open: .11; }
  .top { height: 64px; gap: 10px; }
  .brand-mark { width: 28px; height: 28px; }
  .brand-word { font-size: 13px; letter-spacing: .12em; }
  .top-tools { gap: 8px; }
  .langs button { padding: 5px 7px; font-size: 11.5px; }
  .cord { height: 64px; width: 24px; }
  .cord-line { height: 62px; }
  .cord-tassel { top: 56px; }
  .hero { padding: 110px 0 70px; width: calc(100% - 64px); }
  .hero-cta .btn { width: 100%; }
  .head-row { flex-direction: column; align-items: start; }
  .grid { grid-template-columns: 1fr 1fr; gap: 30px 12px; }
  .card-name { font-size: 15px; }
  .card-sub .light { display: none; }
  .swatches li { flex-basis: 132px; }
  .sheet { width: 100%; max-height: 100svh; height: 100svh; border-radius: 0; margin: 0; max-width: none; }
  .sheet-info { padding: 26px 20px 30px; }
  .sheet-view { padding: 14px; }
  .calc { grid-template-columns: 1fr; }
  .steps, .shops { grid-template-columns: 1fr; }
  .credit { margin-inline-start: 0; }
}
@media (max-width: 380px) {
  .brand-word { display: none; }
}
@media (hover: none) {
  .card:hover .win .p { transform: none; }
  .card:hover .zf { transform: translateY(10px); }
  .card:hover .rb { transform: none; }
  .card:hover .win.fixed .p { transform: scaleX(.34); }
  .card.peek .win .p { transform: scaleX(.27); }
  .card.peek .zf { transform: none; }
  .card.peek .rb { transform: translateY(-62%); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .gather { animation: none !important; }
}