/* ==========================================================================
   Darun Nashr motion (1.1.0): drawn rules, rising cards, unveiled photos,
   the word band, the page turn between pages (cross-document view
   transitions), the attar cabinet stage and the 3D layers' frames.
   ========================================================================== */

.js .draw-rule .rule__l { transform: scaleX(0); transition: transform 1.3s var(--ease-out) .15s; }
.js .draw-rule .rule__l:first-child { transform-origin: 100% 50%; }
.js .draw-rule .rule__l:last-child { transform-origin: 0 50%; }
.js .draw-rule .rule__star { opacity: 0; transform: rotate(-90deg) scale(.4); transition: opacity .6s var(--ease), transform 1.1s var(--ease-out); }
.js .draw-rule.is-in .rule__l { transform: none; }
.js .draw-rule.is-in .rule__star { opacity: 1; transform: none; }
.js .reveal--card { transform: translateY(34px); transition: opacity .8s var(--ease), transform 1.1s var(--ease-out); transition-delay: calc(var(--d, 0) * 80ms); }
.js .unveil { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s var(--ease-out); }
.js .unveil.is-in { clip-path: inset(0 0 0 0); }
.js .reveal--card .unveil { transition-delay: calc(var(--d, 0) * 80ms + 80ms); }
.btn { transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .35s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
	.js .draw-rule .rule__l, .js .draw-rule .rule__star { transform: none; opacity: 1; }
	.js .unveil { clip-path: none; }
}

/* ---------- The word band ---------- */
.wordband { position: relative; display: flex; overflow: hidden; padding-block: clamp(14px, 2vw, 22px); background: var(--cloth); color: var(--gilt-l); border-block: 1px solid var(--gilt); }
.wordband::before, .wordband::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: rgba(226, 194, 122, .35); }
.wordband::before { top: 5px; }
.wordband::after { bottom: 5px; }
.wordband__track { display: flex; flex: none; align-items: center; gap: clamp(26px, 3.4vw, 54px); padding-right: clamp(26px, 3.4vw, 54px); will-change: transform; }
.wordband__item { display: inline-flex; align-items: baseline; gap: 14px; white-space: nowrap; }
.wordband__ar { font: 700 clamp(1.7rem, 1.2rem + 1.6vw, 2.7rem)/1.3 var(--f-ar); }
.wordband__en { font: italic 400 clamp(1.05rem, .9rem + .6vw, 1.45rem)/1 var(--f-serif); color: var(--on-cloth); }
.wordband .star { width: 18px; height: 18px; color: var(--gilt); flex: none; align-self: center; }
.hero + .wordband { margin-bottom: 0; }

/* ---------- Page turn ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { transform-origin: 0 50%; animation: dn-turn-out .8s cubic-bezier(.65, .05, .3, 1) both; z-index: 2; }
::view-transition-new(root) { animation: dn-turn-in .8s cubic-bezier(.65, .05, .3, 1) both; z-index: 1; }
@keyframes dn-turn-out {
	0% { transform: perspective(2400px) rotateY(0); filter: brightness(1); }
	60% { filter: brightness(.92); }
	100% { transform: perspective(2400px) rotateY(-100deg); filter: brightness(.8); }
}
@keyframes dn-turn-in {
	0% { transform: scale(.982); filter: brightness(.88); }
	100% { transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- Calligraphy that draws ---------- */
.callig { display: block; width: 100%; height: auto; overflow: visible; }
.callig path { fill: currentColor; stroke: currentColor; stroke-width: 0; }

/* Where the calligraphy sits (sizes by width: the SVG keeps its own proportions). */
.callig-wrap { display: block; pointer-events: none; color: var(--gilt); }
.callig-wrap .callig path { fill: currentColor; }
.hero__callig { width: clamp(150px, 15vw, 230px); color: var(--gilt-ink); margin-bottom: -6px; }
.shop-head__ar.callig-wrap, .page-head__ar.callig-wrap { position: absolute; right: var(--gutter); top: 50%; width: clamp(180px, 30vw, 460px); transform: translateY(-50%); opacity: .2; }
.season__ar.callig-wrap { position: absolute; right: var(--gutter); top: clamp(10px, 3vw, 40px); width: clamp(220px, 44vw, 720px); opacity: .17; }
.corner__ar.callig-wrap { position: absolute; top: 18px; right: 20px; width: clamp(140px, 22vw, 300px); opacity: .28; }
.corner--ramadan .corner__ar.callig-wrap { color: var(--gilt-l); }
.hello__ar.callig-wrap { width: min(220px, 100%); color: var(--gilt-ink); }
.cabinet__ar.callig-wrap { width: clamp(90px, 10vw, 150px); margin: 0 auto 6px; color: var(--gilt-ink); }
@media (max-width: 599px) { .shop-head__ar.callig-wrap, .page-head__ar.callig-wrap { top: 18px; transform: none; width: 46vw; } }

/* ---------- Alignment fixes (1.1.0) ---------- */
/* One photo: no empty thumbnail column, so the photo sits on the page edge like everything else. */
.pdp__gallery:not(:has(.pdp__thumbs)) { grid-template-columns: minmax(0, 1fr); }
.pdp__gallery:not(:has(.pdp__thumbs)) .pdp__stage { grid-column: 1; }
/* Rows of cards: titles wrap differently, so the price line is pinned to the bottom of every card and a row lines up. */
.grid--products > .card, .rail__track > .card { grid-template-rows: auto 1fr; height: 100%; }
.card__body { display: flex; flex-direction: column; }
.card__foot { margin-top: auto; }
.card__line { margin-bottom: 6px; }
.matches > .match { grid-template-rows: auto 1fr auto; }
.gpick { align-items: stretch; }
/* Gift box on phones: grid children may shrink, so long option text never widens the page. */
.gbox__build > *, .gbox__grid > *, .gbox__panel, .gpick > * { min-width: 0; }
.gpick__body .select, .gpick__body select { max-width: 100%; min-width: 0; width: 100%; }
/* The item that just arrived from a product page. */
.gpick__item.is-arrived { animation: dn-arrived 2.4s var(--ease-out); }
@keyframes dn-arrived { 0%, 30% { box-shadow: inset 3px 0 0 var(--gilt), 0 0 0 3px rgba(184, 137, 59, .45); } 100% { box-shadow: inset 3px 0 0 var(--gilt), 0 0 0 0 rgba(184, 137, 59, 0); } }
/* The box panel travels with the list: the aside stretches to the row so its sticky child can move. */
.gbox__side { align-self: stretch; }