/* ===================================================================
   JARN 4.0 — Elevation layer
   A coherent refinement pass over the 3.0 design. Additive only:
   everything is prefixed .j4-* or scoped to existing hooks so it can
   never fight the base styles. Goals: depth, tactile feedback, smoother
   section transitions, richer reveals, premium polish — no gadgets.
   Identity preserved: quiet-luxury, editorial, warm boutique hospitality.
   =================================================================== */

:root{
  --j4-ease: cubic-bezier(.22,1,.36,1);
  --j4-ease-out: cubic-bezier(.16,1,.3,1);
  --j4-gold: var(--gold, #C4A165);
  --j4-terra: var(--terra, #B56B4E);
  --j4-teal: var(--teal, #3BADA8);
}

/* ===================================================================
   1. GLOBAL FEEL — smoother momentum, no horizontal bleed, clean focus
   =================================================================== */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{ overflow-x:hidden; }                 /* belt-and-suspenders vs. bleed */

/* Refined keyboard focus — gold ring, never on mouse users */
:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--j4-gold);
  outline-offset:3px;
  border-radius:3px;
}

/* Selection in brand gold */
::selection{ background:rgba(196,161,101,.26); }

/* ===================================================================
   2. SECTION TRANSITIONS — soften the hard dark↔light seams
   A whisper-thin gradient lip + hairline above light sections that
   follow a dark one. Pure decoration, pointer-safe.
   =================================================================== */
.place::before,
.studios::before,
#values::before,
#follow::before,
.booking-bar::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:80px;
  background:linear-gradient(to bottom, rgba(15,12,8,.05), transparent);
  pointer-events:none; z-index:1;
}
.place, .studios, #values, #follow, .booking-bar{ position:relative; }

/* A centered gold hairline accent that some section headers can host */
.j4-seam{
  width:42px; height:1px; margin:0 auto;
  background:linear-gradient(90deg,transparent,var(--j4-gold),transparent);
  opacity:.7;
}

/* ===================================================================
   3. TACTILE BUTTONS — press feedback (scale + shadow), richer hover
   Works on top of existing .btn-fill / .btn-ghost / .btn-primary /
   .btn-airbnb / .nav-cta without touching their base rules.
   =================================================================== */
.btn-fill, .btn-ghost, .btn-primary, .btn-airbnb, .btn-link,
.nav-cta, .cta-actions a, .mm-cta, .booking-actions a, .boutique-cta{
  will-change: transform;
  transition: transform .32s var(--j4-ease),
              box-shadow .32s var(--j4-ease),
              background .32s var(--j4-ease),
              color .32s var(--j4-ease),
              border-color .32s var(--j4-ease);
}
/* Solid CTAs lift on hover */
.btn-fill:hover, .btn-primary:hover, .btn-airbnb:hover, .nav-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -8px rgba(0,0,0,.45);
}
/* Tactile press — every important CTA dips slightly */
.btn-fill:active, .btn-ghost:active, .btn-primary:active, .btn-airbnb:active,
.btn-link:active, .nav-cta:active, .cta-actions a:active, .mm-cta:active,
.booking-actions a:active, .boutique-cta:active{
  transform: translateY(0) scale(.975);
  box-shadow: 0 3px 10px -6px rgba(0,0,0,.4);
  transition-duration:.08s;
}

/* ===================================================================
   4. COLLECTION / STUDIO CARDS — depth + tactile tap (no layout shift)
   These overlap the existing card hooks. Transform only on the wrapper,
   never on cs3d-m-slide (JS owns that transform via rAF).
   =================================================================== */
.coll-card, .gallery-item{
  transition: transform .5s var(--j4-ease), box-shadow .5s var(--j4-ease);
}
.coll-card:hover{ box-shadow:0 30px 60px -28px rgba(0,0,0,.6); }

/* Gallery tiles: gentle lift + shadow on hover, crisp press on touch */
.gallery-item:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -16px rgba(0,0,0,.5); }
.gallery-item:active{ transform:scale(.985); transition-duration:.09s; }

/* Studio "wi-card" feature panels — soften + lift */
.wi-card{
  transition: transform .4s var(--j4-ease), box-shadow .4s var(--j4-ease),
              border-color .4s var(--j4-ease);
}
.wi-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 32px -18px rgba(0,0,0,.22);
  border-color:rgba(196,161,101,.35);
}

/* ===================================================================
   5. J4 REVEAL — directional, staggered entrance for opted-in elements
   Opt-in via [data-j4] so it never collides with the base .reveal.
   JS adds .j4-in when the element enters the viewport (once).
   =================================================================== */
[data-j4]{
  opacity:0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .9s var(--j4-ease), transform 1s var(--j4-ease);
  will-change: opacity, transform;
}
[data-j4="left"]{ transform: translate3d(-26px,0,0); }
[data-j4="right"]{ transform: translate3d(26px,0,0); }
[data-j4="scale"]{ transform: scale(.96); }
[data-j4].j4-in{ opacity:1; transform:none; }

/* Stagger children of a [data-j4-group] */
[data-j4-group] > *{
  opacity:0; transform:translate3d(0,22px,0);
  transition:opacity .8s var(--j4-ease), transform .9s var(--j4-ease);
}
[data-j4-group].j4-in > *{ opacity:1; transform:none; }
[data-j4-group].j4-in > *:nth-child(1){ transition-delay:.00s; }
[data-j4-group].j4-in > *:nth-child(2){ transition-delay:.08s; }
[data-j4-group].j4-in > *:nth-child(3){ transition-delay:.16s; }
[data-j4-group].j4-in > *:nth-child(4){ transition-delay:.24s; }
[data-j4-group].j4-in > *:nth-child(5){ transition-delay:.32s; }
[data-j4-group].j4-in > *:nth-child(6){ transition-delay:.40s; }

@media (prefers-reduced-motion: reduce){
  [data-j4], [data-j4-group] > *{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ===================================================================
   6. NAV — subtle elevation once the page is scrolled (works with #nav.scrolled)
   =================================================================== */
#nav{ transition: background .5s var(--j4-ease), box-shadow .5s var(--j4-ease), padding .4s var(--j4-ease); }
#nav.j4-lift{ box-shadow:0 10px 30px -16px rgba(0,0,0,.5); }

/* Nav links: animated gold underline grow (additive to existing) */
#nav .nav-links a{ position:relative; }
#nav .nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-3px; height:1px;
  background:var(--j4-gold); transition:right .4s var(--j4-ease); opacity:.9;
}
#nav .nav-links a:hover::after,
#nav .nav-links a.active::after{ right:0; }

/* ===================================================================
   7. MOBILE TOUCH FEEL — light press everywhere it matters
   Small scale + shadow shift; pairs with optional navigator.vibrate.
   =================================================================== */
@media (max-width: 768px){
  .btn-fill, .btn-ghost, .btn-primary, .btn-airbnb, .nav-cta,
  .cta-actions a, .mm-cta, .booking-actions a, .boutique-cta,
  .coll-card, .cs3d-m-slide, .gallery-item, .wi-card,
  .foot-link, .mob-menu-link{
    -webkit-tap-highlight-color: transparent;
  }
  .j4-press{ transition: transform .12s var(--j4-ease), box-shadow .12s var(--j4-ease); }
  .j4-press.j4-pressed{ transform: scale(.97); }

  /* Slightly larger touch targets for footer + menu links */
  .foot-link{ display:inline-block; padding:3px 0; }
}

/* ===================================================================
   8. IMAGES — guard against any inline image causing horizontal bleed
   =================================================================== */
img{ max-width:100%; }

/* ===================================================================
   9. SCROLL PROGRESS — ultra-thin gold bar at the very top (premium cue)
   =================================================================== */
.j4-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg, var(--j4-terra), var(--j4-gold));
  z-index:400; pointer-events:none;
  transition:width .1s linear;
  opacity:.9;
}
@media (prefers-reduced-motion: reduce){ .j4-progress{ display:none; } }

/* ===================================================================
   11. HERO SCROLL CUE — quiet "scroll for more" affordance (home only)
   Injected by JS into #hero. Fades out once the user scrolls.
   =================================================================== */
.j4-scrollcue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:6; display:flex; flex-direction:column; align-items:center; gap:9px;
  color:rgba(255,255,255,.72); pointer-events:none;
  opacity:0; animation:j4CueIn 1s var(--j4-ease) 1.1s forwards;
}
.j4-scrollcue__label{
  font-size:9px; letter-spacing:.34em; text-transform:uppercase; font-weight:500;
  text-shadow:0 1px 8px rgba(0,0,0,.5);
}
.j4-scrollcue__track{
  width:1px; height:42px; position:relative; overflow:hidden;
  background:rgba(255,255,255,.22);
}
.j4-scrollcue__track::after{
  content:""; position:absolute; left:0; top:-50%; width:1px; height:50%;
  background:linear-gradient(to bottom, transparent, var(--j4-gold));
  animation:j4CueRun 1.9s var(--j4-ease) infinite;
}
@keyframes j4CueIn{ to{ opacity:1; } }
@keyframes j4CueRun{ 0%{ transform:translateY(0); } 100%{ transform:translateY(300%); } }
.j4-scrollcue.j4-hide{ opacity:0; transition:opacity .5s var(--j4-ease); }
@media (prefers-reduced-motion: reduce){ .j4-scrollcue{ display:none; } }
/* Mobile: hide the scroll cue — it overlaps the hero CTA on small screens */
@media (max-width: 768px){ .j4-scrollcue{ display:none; } }

/* ===================================================================
   10. MICRO-DETAILS — eyebrow trait grows on its section first reveal
   =================================================================== */
.j4-in .eyebrow::before,
.j4-in .hero-eyebrow::before{ animation: j4LineGrow .9s var(--j4-ease) both; }
@keyframes j4LineGrow{ from{ transform:scaleX(0); transform-origin:left; } to{ transform:scaleX(1); } }