/* LATVERA FX — the Capsules motion layer (see lux/fx.js). Nothing here hides content: the from-states live in GSAP. */

/* ── Word masks for [data-fx-drop] / [data-fx-fill] ─────────────────────────────────────────────────────────────── */
.fx-w { display:inline-block; overflow:hidden; vertical-align:top; padding:.07em 0 .12em; margin:-.07em 0 -.12em; }
.fx-wi { display:inline-block; will-change:transform; }
[data-fx-fill] .fx-w { overflow:visible; }

/* ── Giant sliding bands ([data-fx-marquee]) ─────────────────────────────────────────────────────────────────────── */
.fx-band {
  position:relative; overflow:hidden; white-space:nowrap; user-select:none;
  padding:clamp(28px, 4.4vw, 84px) 0; margin:0; color:var(--lux-cream, #f4efe7);
  background:var(--lux-ground, #181717);
}
.fx-band .fx-mq-track { display:flex; width:max-content; will-change:transform; }
.fx-band .fx-mq-group { display:flex; align-items:center; flex:none; }
.fx-band .fx-mq-item {
  font-family:inherit; font-weight:400; font-size:clamp(64px, calc(230 * 100vw / 1920), 250px);
  line-height:.92; letter-spacing:-.045em; padding:0 .16em;
}
.fx-band .fx-mq-sep {
  font-size:clamp(34px, calc(110 * 100vw / 1920), 120px); line-height:1; color:var(--lux-taupe, #b1a696);
  padding:0 .28em; transform:translateY(-.08em);
}
.fx-band--taupe .fx-mq-item { color:var(--lux-taupe, #b1a696); }
.fx-band--mid .fx-mq-item { font-size:clamp(44px, calc(120 * 100vw / 1920), 140px); letter-spacing:-.03em; }
.fx-band--mid { padding:clamp(18px, 2.6vw, 48px) 0; }
.fx-band--rule { border-top:1px solid rgba(244,239,231,.14); border-bottom:1px solid rgba(244,239,231,.14); }
.fx-band a { color:inherit; text-decoration:none; }

/* ── Cursor pill (fine pointers; created by fx.js) ───────────────────────────────────────────────────────────────── */
.fx-cursor {
  position:fixed; left:0; top:0; z-index:2147483000; pointer-events:none;
  height:48px; padding:0 24px; border-radius:999px; display:flex; align-items:center;
  background:rgba(244,239,231,.84); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  color:#181717; font:500 14px/1 "Host Grotesk", system-ui, sans-serif; letter-spacing:-.01em; white-space:nowrap;
}
@media (hover:none), (pointer:coarse) { .fx-cursor { display:none; } }
[data-fx-cursor] { cursor:none; }
@media (hover:none), (pointer:coarse) { [data-fx-cursor] { cursor:auto; } }
html:not(.is-motion) [data-fx-cursor] { cursor:pointer; }

/* ── Floating hover image ([data-fx-hoverlist]) ──────────────────────────────────────────────────────────────────── */
.fx-float {
  position:fixed; left:0; top:0; z-index:60; pointer-events:none; overflow:hidden;
  width:clamp(240px, 24vw, 460px); aspect-ratio:4/5; border-radius:clamp(22px, 2.4vw, 45px); background:#2a2724;
}
.fx-float img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.12);
  transition:opacity .5s cubic-bezier(.45,0,.55,1), transform 1.2s cubic-bezier(.16,1,.3,1); }
.fx-float img.is-on { opacity:1; transform:scale(1); }

/* ── Media frames that reveal / drift ────────────────────────────────────────────────────────────────────────────── */
[data-fx-reveal] { overflow:hidden; transform-origin:50% 60%; will-change:transform; }
[data-fx-reveal] img, [data-fx-reveal] video { transform-origin:50% 50%; }
[data-fx-parallax] { overflow:hidden; }

/* ── Homepage: "Find your system." becomes the Capsules menu-list with a floating image ──────────────────────────── */
html #systems[data-lux="systems"] .lux-index { gap:0; width:100%; }
html #systems[data-lux="systems"] .lux-index-row {
  font-size:clamp(44px, calc(118 * 100vw / 1920), 128px); line-height:1.02; letter-spacing:-.035em;
  color:var(--lux-cream, #f4efe7); padding:.1em 0 .12em; width:100%;
  border-top:1px solid rgba(244,239,231,.12); transition:opacity .45s cubic-bezier(.45,0,.55,1), color .3s;
}
html #systems[data-lux="systems"] .lux-index-row:last-child { border-bottom:1px solid rgba(244,239,231,.12); }
html #systems[data-lux="systems"] .lux-index-row .lux-paren { font-size:clamp(14px, calc(22 * 100vw / 1920), 24px); letter-spacing:0; color:var(--lux-taupe, #b1a696); align-self:flex-start; margin-top:.9em; }
html #systems[data-lux="systems"] .lux-systems-row { grid-template-columns:minmax(0, 3fr) minmax(0, 1fr); align-items:end; }
html #systems[data-lux="systems"] .lux-systems-row > .lux-link { justify-self:end; margin-bottom:.6em; }
@media (hover:hover) and (pointer:fine) {
  html #systems[data-lux="systems"] .lux-index:hover .lux-index-row:not(:hover) { opacity:.28; }
}
@media (max-width:700px) {
  html #systems[data-lux="systems"] .lux-index-row { font-size:40px; }
  html #systems[data-lux="systems"] .lux-systems-row { grid-template-columns:minmax(0, 1fr); }
  html #systems[data-lux="systems"] .lux-systems-row > .lux-link { justify-self:start; }
}

/* ── Homepage: the statement fills with the scroll; partners slide ───────────────────────────────────────────────── */
[data-lux="partners"] .lux-statement[data-fx-fill] { font-size:clamp(34px, calc(100 * 100vw / 1920), 104px); line-height:1.02; letter-spacing:-.035em; max-width:16.5em; }
[data-lux="partners"] .lux-partners-block { width:100%; }
[data-lux="partners"] .fx-band { background:transparent; padding:clamp(20px, 3vw, 56px) 0; margin:0 calc(-1 * var(--lux-edge, 32px)); }

/* ── Reduced motion: bands sit still, first phrase visible from the edge ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fx-band .fx-mq-track { transform:none !important; }
  .fx-float, .fx-cursor { display:none !important; }
}

/* ── Pinned horizontal gallery strip ([data-fx-hscroll]) ─────────────────────────────────────────────────────────── */
.fx-hscroll { position:relative; background:var(--lux-ground, #181717); }
.fx-hscroll-sticky { overflow-x:auto; padding:clamp(56px, 7vw, 140px) 0; scrollbar-width:none; }
.fx-hscroll.fx-live .fx-hscroll-sticky { position:sticky; top:0; height:100vh; height:100dvh; overflow:hidden; display:flex; flex-direction:column; justify-content:center; padding:0; box-sizing:border-box; }
dialog .fx-hscroll.fx-live .fx-hscroll-sticky { height:100%; max-height:100dvh; }
.fx-strip-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding:0 var(--lux-edge, 32px) clamp(20px, 2.4vw, 44px); color:var(--lux-cream, #f4efe7); }
.fx-strip-head h3 { margin:0; }
.fx-strip-row { display:flex; align-items:center; gap:clamp(8px, .8vw, 16px); width:max-content; padding:0 var(--lux-edge, 32px); will-change:transform; }
.fx-strip-item { flex:none; display:block; overflow:hidden; border-radius:clamp(20px, 2.35vw, 45px); width:clamp(240px, 26vw, 520px); aspect-ratio:4/5; background:#2a2724; }
.fx-strip-item:nth-child(3n+2) { width:clamp(320px, 40vw, 780px); aspect-ratio:3/2; }
.fx-strip-item:nth-child(3n) { width:clamp(220px, 22vw, 440px); aspect-ratio:1/1; }
.fx-strip-item img { display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.14); }
@media (max-width:700px) { .fx-strip-item, .fx-strip-item:nth-child(3n+2), .fx-strip-item:nth-child(3n) { width:78vw; aspect-ratio:4/5; } }

/* ── Next system card ────────────────────────────────────────────────────────────────────────────────────────────── */
.fx-next { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr); align-items:end; gap:var(--lux-edge, 32px);
  padding:clamp(72px, 9vw, 180px) var(--lux-edge, 32px) clamp(40px, 5vw, 96px); color:var(--lux-cream, #f4efe7); text-decoration:none;
  background:linear-gradient(var(--lux-ground, #181717), #2a2724); }
.fx-next-label { grid-column:1 / -1; color:var(--lux-taupe, #b1a696); }
.fx-next-name { font-size:clamp(64px, calc(230 * 100vw / 1920), 250px); line-height:.9; letter-spacing:-.045em; }
.fx-next-media { display:block; aspect-ratio:16/10; border-radius:clamp(24px, 2.35vw, 45px); overflow:hidden; background:#2a2724; }
.fx-next-media img { display:block; width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
@media (hover:hover) and (pointer:fine) { .fx-next:hover .fx-next-media img { transform:scale(1.05); } }
@media (max-width:700px) { .fx-next { grid-template-columns:minmax(0, 1fr); } }
#detailDialog .lux-name-band { margin:0; }
.fx-band--cta { display:block; width:100%; border:0; cursor:pointer; font:inherit; text-align:left; }
.fx-band--cta .fx-mq-item { transition:color .4s cubic-bezier(.45,0,.55,1); }
@media (hover:hover) and (pointer:fine) { .fx-band--cta:hover .fx-mq-item { color:var(--lux-taupe, #b1a696); } }
.fx-band .fx-mq-track, .fx-band .fx-mq-group { white-space:nowrap; }

/* ── Catalog pages: big index names with the floating image (fine pointers), the small sticky preview retires ─────── */
@media (hover:hover) and (pointer:fine) {
  html.is-motion #detailDialog .lv-catalog[data-fx-decorated] .lv-preview { display:none !important; }
  html.is-motion #detailDialog .lv-catalog[data-fx-decorated] .lv-index-group[data-fx-hoverlist]:hover .lv-index-row:not(:hover) { opacity:.3; }
}
#detailDialog .lv-catalog[data-fx-decorated] .lv-index-row { transition:opacity .45s cubic-bezier(.45,0,.55,1); }
#detailDialog .lv-catalog[data-fx-decorated] .lv-index-name { font-size:clamp(40px, calc(104 * 100vw / 1920), 112px); line-height:1; letter-spacing:-.035em; }
#detailDialog .fx-band--catalog { background:transparent; margin:clamp(12px, 2vw, 32px) 0; }
#detailContent > .fx-next--project { margin-top:clamp(40px, 6vw, 120px); }
#detailContent > .selected-work-detail-hero[data-fx-parallax] { overflow:hidden; }
@media (max-width:700px) { #detailDialog .lv-catalog[data-fx-decorated] .lv-index-name { font-size:34px; } }

/* ── "Why" slides ([data-fx-stack]) ──────────────────────────────────────────────────────────────────────────────── */
.fx-why { background:linear-gradient(var(--lux-ground, #181717), #221f1d 30%, var(--lux-ground, #181717)); padding-bottom:8px; }
.fx-stack-stage { display:grid; gap:8px; padding:0 8px; }
.fx-slide {
  position:relative; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:8px;
  min-height:calc(100vh - 16px); min-height:calc(100dvh - 16px); padding:8px; box-sizing:border-box;
  background:#2a2724; border-radius:clamp(26px, 2.35vw, 45px); overflow:hidden; transform-origin:50% 0%;
}
.fx-slide::after { content:""; position:absolute; inset:0; background:#0d0c0c; opacity:var(--fx-dim, 0); pointer-events:none; border-radius:inherit; }
.fx-slide-media { position:relative; overflow:hidden; border-radius:clamp(20px, 1.6vw, 34px); min-height:40vh; }
.fx-slide-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fx-slide-copy { display:flex; flex-direction:column; justify-content:space-between; padding:clamp(20px, 2.6vw, 50px); color:var(--lux-cream, #f4efe7); }
.fx-slide-title { margin:0; font-weight:400; font-size:clamp(40px, calc(100 * 100vw / 1920), 104px); line-height:1; letter-spacing:-.035em; }
.fx-slide-text { margin:0; max-width:30em; font-size:clamp(17px, calc(34 * 100vw / 1920), 30px); line-height:1.18; letter-spacing:-.01em; color:var(--lux-taupe, #b1a696); }
.fx-slide .lux-chips { align-self:flex-start; }
.fx-stack.fx-live .fx-stack-stage { position:sticky; top:0; height:100vh; height:100dvh; display:block; padding:0; }
.fx-stack.fx-live .fx-slide { position:absolute; inset:8px; min-height:0; }
@media (max-width:700px) {
  .fx-slide { grid-template-columns:minmax(0, 1fr); grid-template-rows:minmax(0, 1.1fr) auto; }
  .fx-slide-copy { gap:18px; padding:16px 12px 20px; }
  .fx-slide-title { font-size:34px; }
  .fx-slide-text { font-size:17px; }
  html #systems[data-lux="systems"] .lux-index-row { font-size:34px; }
}
.fx-why .lux-sr { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.fx-slide .lux-chips { display:inline-flex; gap:0; }
.fx-slide .lux-chips > span { display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:30px; padding:0 10px; box-sizing:border-box;
  border:1px solid rgba(244,239,231,.9); border-radius:999px; font-size:13px; line-height:1; letter-spacing:0; color:var(--lux-cream, #f4efe7); }
.fx-slide .lux-chips > span + span { border-color:rgba(244,239,231,.24); color:rgba(244,239,231,.4); margin-left:-1px; }