/* الورشة الإسلامية للنجارة — approved ornaments (6 Nov 2026).
   Walnut with mother-of-pearl inlay, taken from Egyptian woodwork references: crests (شرافات), carved cells,
   hexagon inlay, thin chain, and the tumbling blocks of old tables. Drawings: /assets/ornaments/*.svg.
   Light slides over the shell and the wood as the page scrolls (ornaments.js). Load after components.css.
   Approved settings: size 40%, a divider between every section in rotating shapes, light side panels
   (not on the hero), ornament frame on the Beit Tolba photo only. The builder for trying other settings
   lives at /lab/islamic/. */

:root{
  --ix-p:.5;
  --ix-scale:.4;
  --ix-side-op:.5;
  /* walnut */
  --w1:#5E3522; --w2:#7A4A2E; --w3:#B07A50;
  /* aged shell: beige, never white */
  --i1:#D8CCB6; --i2:#E0D5C1; --i3:#D2D0BE; --i4:#E8DCC6;
  --ground:#3E2419;
}

.ix-orn{pointer-events:none;background-size:300% 100%;background-position:calc(var(--ix-p) * 100%) 0}
.ix-wood{background-image:linear-gradient(100deg,var(--w1) 0%,var(--w2) 38%,var(--w3) 50%,var(--w2) 62%,var(--w1) 100%)}
.ix-inlay{background-image:linear-gradient(100deg,var(--i1) 0%,var(--i2) 22%,var(--i3) 36%,var(--i2) 44%,var(--i4) 50%,var(--i2) 56%,var(--i3) 64%,var(--i2) 78%,var(--i1) 100%)}

/* ---------- Dividers: flush between sections ---------- */
.ix-div{position:relative;height:calc(var(--h) * var(--ix-scale));margin:0;background:var(--art) repeat-x left top / auto 100%}
.ix-div__shine{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.7;
  background-image:linear-gradient(100deg,transparent 0%,transparent 40%,rgba(214,190,170,.35) 45%,rgba(205,214,196,.55) 50%,rgba(212,196,206,.35) 55%,transparent 60%,transparent 100%);
  background-size:300% 100%;background-position:calc(var(--ix-p) * 100%) 0;
  -webkit-mask:var(--shine) repeat-x left top / auto 100%;mask:var(--shine) repeat-x left top / auto 100%}
.ix-div__gloss{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;
  background-image:linear-gradient(100deg,rgba(0,0,0,.18) 0%,transparent 35%,rgba(236,214,180,.75) 50%,transparent 65%,rgba(0,0,0,.18) 100%);
  background-size:300% 100%;background-position:calc(var(--ix-p) * 100%) 0;
  -webkit-mask:var(--art) repeat-x left top / auto 100%;mask:var(--art) repeat-x left top / auto 100%}
.ix-div[data-style="crest"]{--h:96px;--art:url("/assets/ornaments/crest.svg");--shine:url("/assets/ornaments/crest-shine.svg")}
.ix-div[data-style="cells"]{--h:44px;--art:url("/assets/ornaments/cells.svg");--shine:url("/assets/ornaments/cells-shine.svg")}
.ix-div[data-style="hexband"]{--h:40px;--art:url("/assets/ornaments/hexband.svg");--shine:url("/assets/ornaments/hexband-shine.svg")}
.ix-div[data-style="chain"]{--h:22px;--art:url("/assets/ornaments/chain.svg");--shine:url("/assets/ornaments/chain-shine.svg")}
.ix-div[data-style="blocks"]{--h:40px;--art:url("/assets/ornaments/blocks.svg");--shine:url("/assets/ornaments/blocks-shine.svg")}
/* Crests are see-through between the crests, so they rise over the bottom of the section above:
   only the rail (10.4% of the drawing) takes space, and the gaps show that section's own background. */
.ix-div[data-style="crest"]{z-index:2;margin-top:calc(var(--h) * var(--ix-scale) * -.896)}
.ws-section:has(+ .ix-div[data-style="crest"]){padding-bottom:max(var(--space-24),calc(96px * var(--ix-scale) * .896 + 32px))}

/* ---------- Ornament frame around a photo ---------- */
.ix-frame{position:relative;margin:0;isolation:isolate;padding:16px;background:var(--ground)}
.ix-frame > .ix-frame__bar{position:absolute;inset:0;z-index:0;padding:4px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.ix-frame > .ix-frame__ring{position:absolute;inset:4px;z-index:0}
.ix-frame__ring > span{position:absolute;inset:0;
  -webkit-mask:url("/assets/ornaments/rosette.svg") repeat center / 46px 79.7px;
          mask:url("/assets/ornaments/rosette.svg") repeat center / 46px 79.7px}
.ix-frame > img{position:relative;z-index:1;display:block;outline:1.5px solid var(--w3);box-shadow:0 0 0 4px var(--ground)}

/* ---------- Side panels: faint rosette fading toward the content ---------- */
.ix-has-sides{position:relative;isolation:isolate;overflow:hidden}
.ix-has-sides > .ws-container{position:relative;z-index:1}
.ix-side{position:absolute;top:0;bottom:0;width:min(22vw,300px);z-index:0;opacity:var(--ix-side-op)}
.ix-side > span{position:absolute;inset:0;
  -webkit-mask-image:url("/assets/ornaments/rosette.svg"),linear-gradient(var(--fade),#000 0%,rgba(0,0,0,.5) 40%,transparent 100%);
  -webkit-mask-size:58px 100.5px,100% 100%;-webkit-mask-repeat:repeat,no-repeat;-webkit-mask-composite:source-in;
  mask-image:url("/assets/ornaments/rosette.svg"),linear-gradient(var(--fade),#000 0%,rgba(0,0,0,.5) 40%,transparent 100%);
  mask-size:58px 100.5px,100% 100%;mask-repeat:repeat,no-repeat;mask-composite:intersect}
.ix-side--right{right:0;--fade:to left}
.ix-side--left{left:0;--fade:to right}

@media (max-width:1100px){.ix-side{width:18vw}}
@media (max-width:760px){
  .ws-section:has(+ .ix-div[data-style="crest"]){padding-bottom:max(var(--space-12),calc(96px * var(--ix-scale) * .896 + 32px))}
  .ix-side{width:auto;left:0;right:0;bottom:auto;height:200px}
  .ix-side--left{display:none}
  .ix-side--right{--fade:to bottom}
}
@media (prefers-reduced-motion:reduce){.ix-orn,.ix-div__shine,.ix-div__gloss{background-position:50% 0!important}}