/* ===========================================================================
   LANDING COMPANY · DISCOVER MEN'S JEWELRY — EDGE ELEMENTS (mens-elements.css)  (v4.3.0)
   ---------------------------------------------------------------------------
   G Scrub Manifesto · H The Deck · I The Sidelong · J Gram Index.
   Loaded by lc-mens.php AFTER mens.css (the .lc-mens-page tokens cascade
   from there). Filemtime-versioned — saving this file busts caches itself.
   =========================================================================== */

/* ============ G — THE SCRUB MANIFESTO ============
   Each word inks in from ghost as you scroll — the reveal is
   scrubbed by scroll position, not triggered. Native CSS
   scroll-driven animation; unsupported browsers see solid text. */
.lc-mens-page .mj-scrub { background: var(--mj-sand); padding: 22vh 24px; }
.lc-mens-page .mj-scrub-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.lc-mens-page .mj-scrub p {
  font-family: var(--mj-head); font-weight: 400; letter-spacing: -1px;
  text-transform: uppercase; font-size: clamp(30px, 4.6vw, 58px);
  line-height: 1.18; margin: 0; color: var(--mj-ink);
}
.lc-mens-page .mj-scrub .mj-w { display: inline-block; }
@supports (animation-timeline: view()) {
  .lc-mens-page .mj-scrub .mj-w {
    opacity: 0.14;
    animation: mj-ink linear both;
    animation-timeline: view();
    /* each word completes at a different point of its travel — the stagger */
    animation-range: cover 10% cover 42%;
  }
  .lc-mens-page .mj-scrub .mj-w:nth-child(3n)   { animation-range: cover 16% cover 48%; }
  .lc-mens-page .mj-scrub .mj-w:nth-child(3n+1) { animation-range: cover 12% cover 44%; }
  @keyframes mj-ink { to { opacity: 1; } }
}
.lc-mens-page .mj-scrub .mj-w.mj-gold-w { color: var(--mj-gold); font-family: var(--mj-accent); font-style: italic; text-transform: none; letter-spacing: 0; }

/* ============ H — THE DECK ============
   Panels stack and pin over one another as you scroll — each new
   chapter slides up and covers the last. position: sticky only;
   no JS, no libraries, silk on mobile. */
.lc-mens-page .mj-deck { position: relative; }
.lc-mens-page .mj-deck-panel {
  position: sticky;
  top: 0;
  min-height: 80vh;
  min-height: 80dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 96px 24px;
  overflow: hidden;
}
.lc-mens-page .mj-deck-panel figure { position: absolute; inset: 0; }
.lc-mens-page .mj-deck-panel figure img { width: 100%; height: 100%; object-fit: cover; }
.lc-mens-page .mj-deck-veil { position: absolute; inset: 0; z-index: 2; background: rgba(74,69,65,0.38); }
.lc-mens-page .mj-deck-content { position: relative; z-index: 3; max-width: 720px; }
.lc-mens-page .mj-deck-content .mj-display { color: #FBF8F2; font-size: clamp(40px, 6vw, 84px); }
.lc-mens-page .mj-deck-content .mj-accent { display: block; color: rgba(251,248,242,0.85); font-size: 20px; margin-top: 22px; }
.lc-mens-page .mj-deck-content .mj-link { color: #FBF8F2; margin-top: 40px; }
.lc-mens-page .mj-deck-panel:nth-child(2) .mj-deck-veil { background: rgba(35,40,45,0.42); }
.lc-mens-page .mj-deck-panel:nth-child(3) .mj-deck-veil { background: rgba(121,113,107,0.46); }

/* ============ I — THE SIDELONG ============
   Vertical scroll drives a horizontal journey: the strip is
   pinned while your scroll slides it sideways. Native scroll-
   timeline; where unsupported it renders as a normal drag rail. */
.lc-mens-page .mj-side { position: relative; }
.lc-mens-page .mj-side-head { text-align: center; padding: 132px 24px 64px; }
.lc-mens-page .mj-side-head .mj-display { font-size: clamp(36px, 4.8vw, 64px); }
/* fallback: plain drag rail */
.lc-mens-page .mj-side-viewport { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.lc-mens-page .mj-side-viewport::-webkit-scrollbar { display: none; }
.lc-mens-page .mj-side-strip { display: flex; gap: 32px; padding: 0 max(24px, calc(50vw - 640px)) 48px; width: max-content; }
.lc-mens-page .mj-side-card { flex: 0 0 min(74vw, 420px); scroll-snap-align: center; }
.lc-mens-page .mj-side-card figure { aspect-ratio: 3 / 4; }
.lc-mens-page .mj-side-card h3 { font-family: var(--mj-head); font-weight: 400; letter-spacing: -1px; text-transform: uppercase; font-size: 27px; margin: 20px 0 4px; color: var(--mj-ink); }
.lc-mens-page .mj-side-card .mj-accent { color: var(--mj-ink-soft); font-size: 17px; }
/* the upgrade: pin + scroll-driven horizontal drive */
@supports (animation-timeline: view()) {
  .lc-mens-page .mj-side-scroller { height: 320vh; }
  .lc-mens-page .mj-side-viewport {
    position: sticky; top: 0;
    height: 100vh; height: 100dvh;
    display: flex; align-items: center;
    overflow-x: clip;
  }
  .lc-mens-page .mj-side-strip {
    padding-bottom: 0;
    animation: mj-side-drive linear both;
    animation-timeline: view();
    animation-range: contain 0% contain 100%;
    will-change: transform;
  }
  @keyframes mj-side-drive {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-100% + 100vw - 48px)); }
  }
}

/* ============ J — THE GRAM INDEX ============
   A brand element no one else has: chain weight as an
   interactive dial. Drag the slider; the bar and figure respond.
   One input, a handful of spans — nothing to slow down. */
.lc-mens-page .mj-gram { padding: 148px 24px; }
.lc-mens-page .mj-gram-inner { max-width: 880px; margin: 0 auto; text-align: center; }
.lc-mens-page .mj-gram-inner .mj-display { font-size: clamp(36px, 4.8vw, 64px); }
.lc-mens-page .mj-gram-readout {
  font-family: var(--mj-head); font-weight: 500; letter-spacing: -2px;
  font-size: clamp(72px, 12vw, 160px); line-height: 1; color: var(--mj-ink);
  margin: 56px 0 8px; font-variant-numeric: tabular-nums;
}
.lc-mens-page .mj-gram-readout small { font-size: 0.32em; letter-spacing: 0; color: var(--mj-gold); font-weight: 400; vertical-align: baseline; }
.lc-mens-page .mj-gram-label { font-family: var(--mj-accent); font-style: italic; font-size: 20px; color: var(--mj-ink-soft); min-height: 1.6em; display: block; }
.lc-mens-page .mj-gram-bar { max-width: 520px; margin: 44px auto 0; }
.lc-mens-page .mj-gram-bar input[type="range"] {
  width: 100%; appearance: none; -webkit-appearance: none;
  height: 1px; background: var(--mj-line); outline: none;
}
.lc-mens-page .mj-gram-bar input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--mj-shell); border: 1px solid var(--mj-gold);
  cursor: grab; transition: transform .2s var(--mj-ease);
}
.lc-mens-page .mj-gram-bar input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.15); }
.lc-mens-page .mj-gram-bar input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--mj-shell); border: 1px solid var(--mj-gold); cursor: grab;
}
.lc-mens-page .mj-gram-scale {
  display: flex; justify-content: space-between; margin-top: 16px;
  font-family: var(--mj-head); font-weight: 400; font-size: 10px;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--mj-stone);
}
.lc-mens-page .mj-gram .mj-link { margin-top: 52px; }

/* keep the supporting paragraph in body voice inside the scrub section */
.lc-mens-page .mj-scrub p.mj-copy {
  font-family: var(--mj-body);
  font-size: 16.5px;
  line-height: 1.9;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mj-ink-soft);
  max-width: 620px;
  margin: 34px auto 0;
}
.lc-mens-page .mj-scrub p.mj-copy .mj-w { animation: none; opacity: 1; }

/* reduced motion — edge elements */
@media (prefers-reduced-motion: reduce) {
  .lc-mens-page .mj-scrub .mj-w { animation: none !important; opacity: 1; }
  .lc-mens-page .mj-side-scroller { height: auto; }
  .lc-mens-page .mj-side-viewport { position: static; height: auto; overflow-x: auto; }
  .lc-mens-page .mj-side-strip { animation: none !important; transform: none; }
  .lc-mens-page .mj-deck-panel { position: relative; min-height: 70vh; }
  .lc-mens-page .mj-gift-row, .lc-mens-page .mj-occ-title { transition: none; }
}