/* ============================================================
   DESK TO DIVA — LUX LAYER
   Purely additive. Delete this file and lux.js and the site still
   works exactly as before — nothing here is load-bearing.

   Everything is transform/opacity only (compositor-friendly), capped
   on mobile, and fully disabled under prefers-reduced-motion.
   ============================================================ */

/* ---------- 1. Intro curtain ----------
   First impression. Two panels part to reveal the page, with the brand
   mark drawing itself in the middle. Runs once per session. */
.lux-intro {
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
  display: grid;
  place-items: center;
}
.lux-intro__panel {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50.5%;
  background: linear-gradient(160deg, #5b1f35 0%, #7a2a45 55%, #3d1424 100%);
  will-change: transform;
}
.lux-intro__panel--t { top: 0; transform-origin: top; }
.lux-intro__panel--b { bottom: 0; transform-origin: bottom; }
.lux-intro__mark {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  opacity: 0;
  transform: translateY(10px);
}
.lux-intro__mark img {
  width: 74px; height: 74px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6), 0 18px 50px -12px rgba(0, 0, 0, 0.6);
}
.lux-intro__word {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);
  color: #fff;
  letter-spacing: 0.02em;
  overflow: hidden;
}
.lux-intro__word i {
  display: inline-block;
  font-style: normal;
  transform: translateY(110%);
}
.lux-intro__rule {
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}

/* the sequence */
.lux-intro.go .lux-intro__mark { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .7s var(--ease); }
.lux-intro.go .lux-intro__word i { transform: none; transition: transform .8s .1s var(--ease); }
.lux-intro.go .lux-intro__rule { width: 190px; transition: width .9s .25s var(--ease); }
.lux-intro.out .lux-intro__mark { opacity: 0; transform: translateY(-14px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.lux-intro.out .lux-intro__panel--t { transform: translateY(-100%); transition: transform 1s .15s cubic-bezier(.76,0,.24,1); }
.lux-intro.out .lux-intro__panel--b { transform: translateY(100%);  transition: transform 1s .15s cubic-bezier(.76,0,.24,1); }
.lux-intro.done { display: none; }

/* Scroll is locked only while the curtain is up. A stuck lock is worse than
   no intro, so lux.js clears it on a hard timeout and on pageshow. */
html.lux-lock, html.lux-lock body { overflow: hidden; }

/* ---------- 2. Sparkle field ----------
   The "animated background" — slow drifting motes of light over the mesh.
   Canvas, DPR-capped, count scales with viewport, pauses off-tab. */
.lux-sparks {
  position: fixed;
  inset: 0;
  z-index: -1;          /* same plane as .atmos, above html background */
  pointer-events: none;
  opacity: 0.55;
}

/* ---------- 3. Scroll-scrubbed hero exit ----------
   The hero recedes as you scroll past it instead of just scrolling away.
   Driven by a CSS var lux.js writes (0 → 1). */
.hero {
  --lux-exit: 0;
}
.js .hero .wrap {
  transform: scale(calc(1 - (var(--lux-exit) * 0.06))) translateY(calc(var(--lux-exit) * -26px));
  opacity: calc(1 - (var(--lux-exit) * 0.85));
  will-change: transform, opacity;
}

/* ---------- 4. Clip-path heading wipe ----------
   Upgrades the word reveal from a slide to a mask wipe — the detail that
   separates "animated" from "designed". */
.js .lux-wipe {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.15s cubic-bezier(.65,0,.35,1);
}
.js .lux-wipe.is-in { clip-path: inset(0 0 0 0); }

/* ---------- 5. Image reveal curtain ----------
   A brass panel slides off each photo as it enters. */
.lux-veil { position: relative; overflow: hidden; }
.lux-veil::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(120deg, var(--plum) 0%, #8c3550 60%, var(--gold) 140%);
  transform: translateX(0);
  pointer-events: none;
}
.js .lux-veil.is-in::after {
  transform: translateX(101%);
  transition: transform 1.05s cubic-bezier(.76,0,.24,1);
}
/* without JS the veil must never sit over the picture */
html:not(.js) .lux-veil::after { display: none; }

/* ---------- 6. Cursor-follow peek ----------
   Hovering a design name floats its photo beside the cursor. Desktop only. */
.lux-peek {
  position: fixed;
  top: 0; left: 0;
  width: 190px;
  aspect-ratio: 4 / 5;
  border-radius: var(--r);
  overflow: hidden;
  pointer-events: none;
  z-index: 95;
  opacity: 0;
  transform: translate3d(-999px, -999px, 0) scale(0.9);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  box-shadow: var(--sh-3);
  border: 3px solid var(--cream);
}
.lux-peek img { width: 100%; height: 100%; object-fit: cover; }
.lux-peek.on { opacity: 1; }

/* ---------- 7. Section entrance polish ---------- */
.js .lux-rise {
  opacity: 0;
  transform: translateY(38px) scale(0.985);
  transition: opacity .9s var(--ease), transform 1.1s var(--ease);
}
.js .lux-rise.is-in { opacity: 1; transform: none; }

/* ---------- 8. Gold hairline that draws itself ---------- */
.lux-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--petal) 20%, var(--gold-soft) 50%, var(--petal) 80%, transparent);
  transform: scaleX(0);
  transform-origin: left;
}
.js .lux-line.is-in { transform: scaleX(1); transition: transform 1.4s var(--ease); }

/* ---------- Motion opt-out ---------- */
@media (prefers-reduced-motion: reduce) {
  .lux-intro { display: none !important; }
  .lux-sparks { display: none !important; }
  .js .hero .wrap { transform: none !important; opacity: 1 !important; }
  .js .lux-wipe { clip-path: none !important; transition: none !important; }
  .lux-veil::after { display: none !important; }
  .lux-peek { display: none !important; }
  .js .lux-rise { opacity: 1 !important; transform: none !important; }
  .lux-line { transform: scaleX(1) !important; }
  html.lux-lock, html.lux-lock body { overflow: auto !important; }
}

/* Coarse pointers don't get the cursor peek at all */
@media (hover: none), (pointer: coarse) {
  .lux-peek { display: none !important; }
}