/* ============================================================
   luxe.css — site-wide luxury layer
   gold cursor · page transitions · heading stitch reveal · texture
   (loads AFTER brand/site/shop/contact css)
   ============================================================ */

/* ---------- 1 · Custom gold cursor (pointer devices only) ---------- */
@media (hover: hover) and (pointer: fine) {
  .luxe-cursor, .luxe-cursor body { cursor: none; }
  .luxe-cursor a, .luxe-cursor button, .luxe-cursor [data-goto],
  .luxe-cursor .lang-btn, .luxe-cursor label, .luxe-cursor .pin { cursor: none; }
  .luxe-cursor input, .luxe-cursor textarea, .luxe-cursor select { cursor: text; }
  .cursor-dot, .cursor-ring {
    position: fixed; top: 0; left: 0; z-index: 2000; pointer-events: none;
    border-radius: 50%; transform: translate(-50%, -50%); will-change: transform;
  }
  .cursor-dot { width: 7px; height: 7px; background: var(--gold-bright);
    box-shadow: 0 0 8px 1px color-mix(in srgb, var(--gold) 70%, transparent); }
  .cursor-ring { width: 34px; height: 34px; border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
    transition: width .3s var(--ease), height .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), opacity .3s var(--ease); }
  .cursor-ring.hot { width: 54px; height: 54px; border-color: var(--gold-bright);
    background: color-mix(in srgb, var(--gold) 9%, transparent); }
  .cursor-ring.down { width: 26px; height: 26px; }
}

/* ---------- 2 · Page transition curtain ---------- */
.page-curtain {
  position: fixed; inset: 0; z-index: 3000; pointer-events: none;
  background: var(--ink); transform: scaleY(0); transform-origin: bottom;
  display: grid; place-items: center;
}
.page-curtain .pc-crest { width: 84px; opacity: 0; transform: translateY(8px) scale(.9); }
.page-curtain.enter { transform: scaleY(1); transform-origin: top;
  animation: curtainLift .85s cubic-bezier(.7,0,.2,1) .15s forwards; }
.page-curtain.enter .pc-crest { animation: pcCrest .7s var(--ease) forwards; }
.page-curtain.leave { animation: curtainCover .55s cubic-bezier(.7,0,.2,1) forwards; }
.page-curtain.leave .pc-crest { animation: pcCrest .5s var(--ease) forwards; }
@keyframes curtainCover { from { transform: scaleY(0); transform-origin: bottom; } to { transform: scaleY(1); transform-origin: bottom; } }
@keyframes curtainLift { from { transform: scaleY(1); transform-origin: top; } to { transform: scaleY(0); transform-origin: top; } }
@keyframes pcCrest { 0% { opacity: 0; transform: translateY(8px) scale(.9); } 45%,70% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-6px) scale(1); } }

/* ---------- 3 · Heading stitch reveal (applied to the heading itself) ---------- */
.stitch { clip-path: inset(0 100% 0 0); position: relative; }
.stitch.in { clip-path: inset(0 0 0 0); animation: stitchWipe 1.1s cubic-bezier(.33,0,.12,1) forwards; }
html[dir="rtl"] .stitch { clip-path: inset(0 0 0 100%); }
html[dir="rtl"] .stitch.in { clip-path: inset(0 0 0 0); animation: stitchWipe 1.1s cubic-bezier(.33,0,.12,1) forwards; }
@keyframes stitchWipe { to { clip-path: inset(0 0 0 0); } }
.stitch::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--gold-bright)); opacity: 0;
}
.stitch.in::after { animation: stitchNeedle 1.1s cubic-bezier(.33,0,.12,1) forwards; }
html[dir="rtl"] .stitch::after { left: auto; right: 0; background: linear-gradient(270deg, transparent, var(--gold-bright)); }
@keyframes stitchNeedle { 0% { width: 0; opacity: 1; } 82% { opacity: 1; } 100% { width: 100%; opacity: 0; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .stitch { clip-path: none !important; animation: none !important; }
  .stitch::after { display: none; }
  .page-curtain { display: none !important; }
}

/* ---------- 4 · Texture pass — woven thread grain on ink surfaces ---------- */
.chapter--ink {
  background-image:
    repeating-linear-gradient(45deg, rgba(201,164,90,.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(201,164,90,.016) 0 1px, transparent 1px 3px);
}
.shop-hero {
  background-image:
    repeating-linear-gradient(45deg, rgba(201,164,90,.03) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(201,164,90,.022) 0 1px, transparent 1px 3px);
}
/* keep the gold Fil tonal motif winning where it's already set */
#prestige, #catalogue {
  background-image:
    repeating-linear-gradient(45deg, rgba(201,164,90,.02) 0 1px, transparent 1px 3px),
    linear-gradient(rgba(26, 26, 26, 0.85), rgba(26, 26, 26, 0.85)),
    url("/assets/pattern-damask-ink.webp");
  background-repeat: repeat, no-repeat, repeat;
  background-size: auto, auto, 540px auto;
}