/* ============================================================================
   OUTSYD LOOKBOOK — editorial 3D experience styles
   Only the scroll-driven WebGL stage + its overlays live here. All site chrome
   (nav, footer, cart, theme) is inherited from outsyd-layout.css.
   ============================================================================ */

:root {
  --lb-studio: #faf9f7;
  --lb-ink: #171717;
  --lb-ink-soft: #737373;
  --lb-ink-faint: #a3a3a3;
  --lb-line: #d4d4d4;
}

/* The experience is a light "studio" canvas by art direction; the OUTSYD nav
   sits on top of it, so pin it to its solid treatment for legibility instead of
   the transparent-at-top homepage behaviour. */
.lb-page #mainNav {
  background: rgba(10, 10, 10, 0.94);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
[data-theme="day"].lb-page #mainNav,
[data-theme="day"] .lb-page #mainNav {
  background: rgba(244, 242, 238, 0.98);
  border-bottom-color: rgba(30, 20, 5, 0.12);
}

/* kill the homepage smooth-scroll so Lenis owns the scroll on this page */
.lb-page { scroll-behavior: auto; }
.lb-page main { display: block; }

/* ── scroll runway + pinned stage ──────────────────────────────────────── */
.lb-section {
  position: relative;
  background: var(--lb-studio);
}
.lb-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--lb-studio);
}
#lb-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* ── left column: live collection index ────────────────────────────────── */
.lb-collection {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  pointer-events: none;
  user-select: none;
  color: var(--lb-ink);
}
.lb-collection .lb-eyebrow { font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--lb-ink-faint); }
.lb-collection .lb-heading { margin-top: 8px; font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--lb-ink); }
.lb-collection .lb-season { margin-top: 4px; font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--lb-ink-faint); }

.lb-index { list-style: none; margin: 44px 0 0; padding: 0; display: none; }
.lb-index-item { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.lb-index-bar { height: 1px; width: 0; background: var(--lb-line); transition: width 0.5s ease, background 0.5s ease; }
.lb-index-num { font-size: 10px; font-variant-numeric: tabular-nums; color: var(--lb-ink-faint); transition: color 0.5s; }
.lb-index-name { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lb-ink-faint); transition: color 0.5s; }
.lb-index-item.is-active .lb-index-bar { width: 24px; background: var(--lb-ink); }
.lb-index-item.is-active .lb-index-num,
.lb-index-item.is-active .lb-index-name { color: var(--lb-ink); }

.lb-detail-wrap { margin-top: 44px; height: 20px; overflow: hidden; }
#lb-detail {
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--lb-ink-faint);
  opacity: 0; transform: translateY(12px); transition: opacity 0.45s ease, transform 0.45s ease;
}
#lb-detail.is-in { opacity: 1; transform: translateY(0); }

/* ── bottom rail: scroll hint · progress · counter ─────────────────────── */
.lb-progress {
  position: absolute; left: 24px; right: 24px; bottom: 30px; z-index: 10;
  display: flex; align-items: flex-end; justify-content: space-between;
  pointer-events: none;
}
#lb-hint { font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--lb-ink-faint); }
.lb-bar { position: absolute; left: 50%; bottom: 6px; height: 1px; width: 128px; transform: translateX(-50%); background: var(--lb-line); }
#lb-bar-fill { height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: var(--lb-ink); }
.lb-counter { display: flex; align-items: baseline; gap: 4px; font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: 0.25em; }
#lb-counter-cur { color: var(--lb-ink); }
.lb-counter .sep { color: var(--lb-ink-faint); }
#lb-counter-total { color: var(--lb-ink-soft); }

/* ── film grain + vignette (pure CSS/SVG, off the WebGL budget) ─────────── */
.lb-grain { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.lb-grain::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 90% at 50% 45%, transparent 55%, rgba(20, 20, 18, 0.09) 100%);
}
.lb-grain::after {
  content: ""; position: absolute; inset: -100px; opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  animation: lb-grain-jitter 0.5s steps(2) infinite;
}
@keyframes lb-grain-jitter {
  0% { transform: translate(0, 0); } 50% { transform: translate(-4px, 3px); } 100% { transform: translate(3px, -2px); }
}

/* ── floating editorial CTA ────────────────────────────────────────────── */
.lb-cta {
  position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  z-index: 15; display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  text-align: right; color: var(--lb-ink);
}
.lb-cta .lb-cta-brand { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 4px; color: var(--lb-ink); }
.lb-cta #lb-cta-name { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--lb-ink-soft); min-height: 12px; }
.lb-cta #lb-cta-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 11px 22px;
  background: var(--lb-ink); color: var(--lb-studio); text-decoration: none;
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase; font-weight: 600;
  transition: background 0.2s, transform 0.2s;
}
.lb-cta #lb-cta-link:hover { background: #000; transform: translateY(-1px); }

/* ── loader veil (white curtain that dissolves once textures are warm) ──── */
#lb-veil {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background: var(--lb-studio);
  transition: opacity 1.1s ease;
}
#lb-veil.is-gone { opacity: 0; pointer-events: none; }
.lb-veil-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.lb-veil-mark { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 8px; color: var(--lb-ink); }
#lb-veil-pct { font-size: 10px; font-variant-numeric: tabular-nums; letter-spacing: 0.3em; color: var(--lb-ink-faint); }

/* ── editorial cursor (fine pointers only) ─────────────────────────────── */
.lb-cursor { position: fixed; inset: 0; z-index: 50; pointer-events: none; display: none; }
html.lb-cursor-on .lb-cursor { display: block; }
html.lb-cursor-on, html.lb-cursor-on * { cursor: none !important; }
#lb-cursor-dot { position: absolute; left: 0; top: 0; width: 6px; height: 6px; border-radius: 50%; background: #fff; mix-blend-mode: difference; }
#lb-cursor-ring { position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #fff; mix-blend-mode: difference; }

/* ── desktop refinements ───────────────────────────────────────────────── */
@media (min-width: 768px) {
  .lb-collection { left: 56px; }
  .lb-index { display: block; }
  .lb-progress { left: 56px; right: 56px; bottom: 40px; }
  .lb-bar { width: 192px; }
  .lb-cta { right: 56px; }
}

/* ── reduced motion: still the grain jitter, keep everything legible ────── */
@media (prefers-reduced-motion: reduce) {
  .lb-grain::after { animation: none; }
}