/* ===================================================================
   JARN — global enhancements (shared across all pages)
   1. Editorial chapter navigator  (desktop rail + mobile capsule/sheet)
   2. Arrival animation
   3. Mobile "Our Collections" legibility fix (home only — scoped to cs3d)
   Self-contained, prefixed .jchap-* — no collision with existing styles.
   =================================================================== */

:root{
  --jchap-gold: var(--gold, #C4A165);
  --jchap-ink:  var(--ink,  #0F0C08);
  --jchap-paper:var(--paper,#FAF7F2);
  --jchap-ease: var(--ease, cubic-bezier(.2,.7,.3,1));
  --jchap-offset: 96px; /* scroll offset under the fixed nav (refined by JS) */
}

/* Clean anchors despite the fixed header (applies to JS-registered sections) */
.jchap-target{ scroll-margin-top: var(--jchap-offset); }

/* ===================================================================
   DESKTOP RAIL — discreet ticks at rest, expands left on hover
   =================================================================== */
.jchap-rail{
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: none;                 /* shown >768px via media query */
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  padding: 10px 6px 10px 28px;   /* left padding = hover hit-area for labels */
  perspective: 600px;            /* very subtle 3D */
  /* Fades out while the hero is in view (rail isn't useful at the very top and
     would otherwise sit over a large hero title on narrower desktops). */
  transition: opacity .45s var(--jchap-ease), transform .45s var(--jchap-ease);
}
.jchap-rail[hidden]{ display:none !important; }
.jchap-rail.jchap-rail--hidden{
  opacity: 0; pointer-events: none;
  transform: translateY(-50%) translateX(14px);
}

.jchap-item{
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 4px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  color: inherit;
  font-family: var(--sans, "DM Sans", system-ui, sans-serif);
  transform-style: preserve-3d;
}

/* Label (revealed to the LEFT on hover) */
.jchap-label{
  font-size: 10.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
  color: #fff;
  background: rgba(15,12,8,.62);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 100px;
  padding: 6px 13px;
  opacity: 0;
  transform: translateX(10px);
  pointer-events: none;
  max-width: 0;
  overflow: hidden;
  transition: opacity .42s var(--jchap-ease),
              transform .42s var(--jchap-ease),
              max-width .42s var(--jchap-ease),
              color .3s ease;
  box-shadow: 0 8px 26px rgba(0,0,0,.18);
}

/* Tick — gold mark, visible on light & dark backgrounds */
.jchap-tick{
  position: relative;
  flex: none;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--jchap-gold);
  opacity: .42;
  transition: width .4s var(--jchap-ease), opacity .3s ease, background .3s ease;
}

/* Hover the whole rail -> reveal every label, lift slightly (depth) */
.jchap-rail:hover,
.jchap-rail:focus-within{ transform: translateY(-50%) translateX(-2px); }
.jchap-rail:hover .jchap-label,
.jchap-rail:focus-within .jchap-label{
  opacity: 1;
  transform: translateX(0);
  max-width: 240px;
}

/* Per-item hover */
.jchap-item:hover .jchap-tick{ width: 24px; opacity: .85; }
.jchap-item:hover .jchap-label{ color: var(--jchap-gold); }
.jchap-item:focus-visible{ outline: none; }
.jchap-item:focus-visible .jchap-label{ color: var(--jchap-gold); }
.jchap-item:focus-visible .jchap-tick{ width: 24px; opacity: .9; }

/* Active chapter — longer gold tick, gold label */
.jchap-item.is-active .jchap-tick{ width: 30px; opacity: 1; }
.jchap-item.is-active .jchap-label{ color: var(--jchap-gold); }

/* Tick "stretch" pulse on click (the gold line that lengthens) */
@keyframes jchapTick{ 0%{transform:scaleX(1)} 45%{transform:scaleX(1.6)} 100%{transform:scaleX(1)} }
.jchap-item.is-firing .jchap-tick{ transform-origin:right center; animation: jchapTick .6s var(--jchap-ease); }

/* ===================================================================
   ARRIVAL — gold marker under the nav + subtle title reveal
   =================================================================== */
.jchap-arrival-bar{
  position: fixed;
  left: 50%;
  top: var(--jchap-offset);
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--jchap-gold), transparent);
  transform: translateX(-50%);
  opacity: 0;
  z-index: 89;
  pointer-events: none;
}
.jchap-arrival-bar.is-on{ animation: jchapArrive 1s var(--jchap-ease); }
@keyframes jchapArrive{
  0%{ width:0; opacity:0; }
  35%{ width:180px; opacity:.95; }
  100%{ width:220px; opacity:0; }
}
/* Subtle, self-resetting reveal of the arrived section's heading */
.jchap-arrived :is(h1,h2,.eyebrow,.lbl,.h-tag){
  animation: jchapReveal .85s var(--jchap-ease) both;
}
@keyframes jchapReveal{
  0%{ opacity:.6; transform: translateY(8px) scale(.99); }
  100%{ opacity:1; transform: none; }
}

/* ===================================================================
   MOBILE CAPSULE — floating "03 / 06 · Label"
   =================================================================== */
.jchap-capsule{
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  transform: translateX(-50%) translateY(8px);
  z-index: 95;
  display: none;                 /* shown <=768px via media query */
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 36px);
  padding: 10px 16px;
  border-radius: 100px;
  background: rgba(15,12,8,.82);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 34px rgba(0,0,0,.34);
  color: #fff;
  cursor: pointer;
  font-family: var(--sans, "DM Sans", system-ui, sans-serif);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--jchap-ease), transform .5s var(--jchap-ease);
}
.jchap-capsule.is-ready{ opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.jchap-capsule__idx{
  font-size: 10px; letter-spacing:.12em; font-weight:600;
  color: var(--jchap-gold);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.jchap-capsule__dot{ width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.45); flex:none; }
.jchap-capsule__label{
  font-size: 11px; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  white-space: nowrap; overflow:hidden; text-overflow: ellipsis; max-width: 56vw;
}
.jchap-capsule__chev{ width:9px; height:9px; flex:none; opacity:.7; transition: transform .4s var(--jchap-ease); }
.jchap-capsule.is-open .jchap-capsule__chev{ transform: rotate(180deg); }

/* Hide capsule when mobile menu / gallery is open */
body.menu-open .jchap-capsule,
body.jchap-suppress .jchap-capsule{ opacity:0 !important; pointer-events:none !important; transform: translateX(-50%) translateY(8px) !important; }

/* ===================================================================
   MOBILE SHEET — bottom panel with chapter list
   =================================================================== */
.jchap-backdrop{
  position: fixed; inset: 0; z-index: 1190;
  background: rgba(10,8,5,.42);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  opacity: 0; pointer-events: none;
  transition: opacity .32s var(--jchap-ease);
}
.jchap-backdrop.is-open{ opacity: 1; pointer-events: auto; }

.jchap-sheet{
  position: fixed; left: 50%; bottom: 0; z-index: 1200;
  width: 100%; max-width: 480px;
  transform: translateX(-50%) translateY(102%);
  background: var(--jchap-paper);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -14px 40px rgba(0,0,0,.22);
  padding: 6px 18px calc(env(safe-area-inset-bottom, 0px) + 16px);
  /* Lighter, snappier spring on open/close. */
  transition: transform .34s cubic-bezier(.22,1,.30,1);
  will-change: transform;
  touch-action: none;            /* lets the grip drag work cleanly */
}
.jchap-sheet.is-open{ transform: translateX(-50%) translateY(0); }
/* Real drag handle — a wider tap zone + a clear grip bar that signals "pull". */
.jchap-sheet__grip{
  position: relative; height: 22px; margin: 2px auto 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: grab; touch-action: none;
}
.jchap-sheet__grip::before{
  content:""; width: 40px; height: 4px; border-radius: 4px;
  background: rgba(15,12,8,.22);
  transition: background .25s ease, width .25s var(--jchap-ease);
}
.jchap-sheet__grip:active{ cursor: grabbing; }
.jchap-sheet__grip:active::before{ background: rgba(15,12,8,.34); width: 52px; }
.jchap-sheet__head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 4px 12px; margin-bottom: 6px;
  border-bottom: 1px solid rgba(15,12,8,.08);
}
.jchap-sheet__title{
  font-size: 10px; letter-spacing:.3em; text-transform:uppercase;
  color: var(--jchap-gold); font-weight:600;
  display:flex; align-items:center; gap:10px;
}
.jchap-sheet__title::before{ content:""; width:18px; height:1px; background:var(--jchap-gold); display:inline-block; }
.jchap-sheet__close{
  appearance:none; background:none; border:0; cursor:pointer;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color: var(--jchap-ink); opacity:.6; transition: opacity .25s ease, background .25s ease;
}
.jchap-sheet__close:hover{ opacity:1; background:rgba(15,12,8,.05); }
.jchap-sheet__list{ list-style:none; margin:0; padding:6px 0 0; }
.jchap-srow{
  display:flex; align-items:center; gap:14px;
  width:100%; text-align:left;
  appearance:none; background:none; border:0; cursor:pointer;
  padding: 14px 6px;
  color: var(--jchap-ink);
  font-family: var(--sans, "DM Sans", system-ui, sans-serif);
  border-bottom: 1px solid rgba(15,12,8,.05);
  transition: padding-left .3s var(--jchap-ease);
}
.jchap-srow:last-child{ border-bottom: 0; }
.jchap-srow__num{
  font-size: 11px; font-weight:600; letter-spacing:.06em;
  color: rgba(15,12,8,.4); font-variant-numeric: tabular-nums; min-width: 22px;
}
.jchap-srow__name{ font-size: 16px; font-weight:400; letter-spacing:.01em; flex:1; }
.jchap-srow__line{ width:0; height:1px; background:var(--jchap-gold); transition: width .35s var(--jchap-ease); }
.jchap-srow.is-active .jchap-srow__num{ color: var(--jchap-gold); }
.jchap-srow.is-active .jchap-srow__name{ color: var(--jchap-gold); }
.jchap-srow.is-active .jchap-srow__line{ width: 22px; }
.jchap-srow:active{ padding-left: 12px; }

/* ===================================================================
   DESKTOP vs MOBILE switch
   =================================================================== */
@media (min-width: 769px){
  .jchap-rail{ display: flex; }
  .jchap-capsule, .jchap-backdrop, .jchap-sheet{ display: none !important; }
}
@media (max-width: 768px){
  .jchap-rail{ display: none !important; }
  .jchap-capsule{ display: flex; }
}

/* ===================================================================
   HOME — mobile "Our Collections" legibility (keeps teal/gold/terra)
   Strong text halos so the big number + "0X · Place" read on bright photos.
   =================================================================== */
@media (max-width: 768px){
  /* Keep the elegant OUTLINED numerals (transparent fill) but anchor them on a
     soft dark halo so 01 (teal / Bayté) and 03 (terracotta / Mountain) read on
     bright photos. Colour identity is preserved via the accent stroke. */
  #collections .cs3d-m-num{
    -webkit-text-stroke-width: 1.4px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.6))
            drop-shadow(0 3px 12px rgba(0,0,0,.5))
            drop-shadow(0 0 22px rgba(0,0,0,.4)) !important;
  }
  #collections .cs3d-m-slide[data-ch="1"] .cs3d-m-num{ -webkit-text-stroke-color: rgba(95,201,194,1); }
  #collections .cs3d-m-slide[data-ch="3"] .cs3d-m-num{ -webkit-text-stroke-color: rgba(224,140,104,1); }
  /* "01 · Beirut" / "03 · The Mountains" — brighter accent + dark halo */
  #collections .cs3d-m-loc{
    text-shadow: 0 1px 2px rgba(0,0,0,.72),
                 0 2px 11px rgba(0,0,0,.55),
                 0 0 4px rgba(0,0,0,.4) !important;
  }
  #collections .cs3d-m-slide[data-ch="1"] .cs3d-m-loc{ color:#7FD7D0 !important; }
  #collections .cs3d-m-slide[data-ch="3"] .cs3d-m-loc{ color:#E89670 !important; }
  #collections .cs3d-m-name{ text-shadow: 0 2px 14px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.6); }
}

/* Whole-card click affordance for collection cards */
.cs3d-m-slide[data-href], .cs3d-ch[data-href], .property-card, .coll-card{ cursor: pointer; }

/* ===================================================================
   Reduced motion — disable non-essential animation
   =================================================================== */
@media (prefers-reduced-motion: reduce){
  .jchap-label, .jchap-tick, .jchap-capsule, .jchap-backdrop, .jchap-sheet,
  .jchap-srow, .jchap-srow__line, .jchap-capsule__chev{ transition: none !important; }
  .jchap-arrival-bar, .jchap-item.is-firing .jchap-tick,
  .jchap-arrived :is(h1,h2,.eyebrow,.lbl,.h-tag){ animation: none !important; }
}