/* ===================================================================
   JARN 4.0 — MOTION & DEPTH layer
   A deliberate, perceptible creative pass. Adds cinematic depth without
   ever feeling like a WebGL demo: perspective reveals, subtle image
   parallax, premium 3D card tilt (desktop), cinematic light/dark seams,
   and richer CTA/hover/tap feedback. Mobile gets the SAME language but
   lighter and shorter. Everything degrades to calm under reduced-motion.
   Prefixed .jm-* / [data-jm*] — cannot collide with base or j4 layers.
   =================================================================== */

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

/* ===================================================================
   1. CINEMATIC SECTION REVEAL — perspective + depth, not a flat fade.
   Opt-in via [data-jm-reveal]; JS adds .jm-on when in view (once).
   The element rises, un-tilts on the X axis and pulls forward in Z —
   an editorial "lift into place" rather than a slide.
   =================================================================== */
[data-jm-reveal]{
  opacity: 0;
  transform: perspective(1200px) translate3d(0, 42px, -60px) rotateX(6deg);
  transform-origin: 50% 100%;
  transition: opacity 1s var(--jm-ease), transform 1.15s var(--jm-ease);
  will-change: opacity, transform;
}
[data-jm-reveal="left"]{ transform: perspective(1200px) translate3d(-46px,18px,-50px) rotateY(7deg); transform-origin:0% 50%; }
[data-jm-reveal="right"]{ transform: perspective(1200px) translate3d(46px,18px,-50px) rotateY(-7deg); transform-origin:100% 50%; }
[data-jm-reveal].jm-on{ opacity: 1; transform: none; }

/* Staggered children (cards, gallery tiles, feature panels) with depth */
[data-jm-stagger] > *{
  opacity: 0;
  transform: perspective(1000px) translate3d(0, 34px, -40px) rotateX(5deg);
  transition: opacity .8s var(--jm-ease), transform .95s var(--jm-ease);
  will-change: opacity, transform;
}
[data-jm-stagger].jm-on > *{ opacity: 1; transform: none; }
[data-jm-stagger].jm-on > *:nth-child(1){ transition-delay:.04s; }
[data-jm-stagger].jm-on > *:nth-child(2){ transition-delay:.12s; }
[data-jm-stagger].jm-on > *:nth-child(3){ transition-delay:.20s; }
[data-jm-stagger].jm-on > *:nth-child(4){ transition-delay:.28s; }
[data-jm-stagger].jm-on > *:nth-child(5){ transition-delay:.36s; }
[data-jm-stagger].jm-on > *:nth-child(6){ transition-delay:.44s; }
[data-jm-stagger].jm-on > *:nth-child(7){ transition-delay:.52s; }
[data-jm-stagger].jm-on > *:nth-child(8){ transition-delay:.60s; }

/* ===================================================================
   2. EDITORIAL TITLE REVEAL — line-by-line "mask up" on headings.
   JS wraps eligible headings; words rise out of a clip mask.
   =================================================================== */
.jm-line{ display:block; overflow:hidden; }
.jm-line__inner{
  display:block;
  transform: translateY(110%) rotate(2deg);
  opacity:0;
  transition: transform 1s var(--jm-ease), opacity 1s var(--jm-ease);
  will-change: transform;
}
.jm-on .jm-line__inner,
.jm-line.jm-on .jm-line__inner{ transform: translateY(0) rotate(0); opacity:1; }
.jm-title.jm-on .jm-line:nth-child(2) .jm-line__inner{ transition-delay:.10s; }
.jm-title.jm-on .jm-line:nth-child(3) .jm-line__inner{ transition-delay:.20s; }

/* ===================================================================
   3. IMAGE PARALLAX — subtle vertical drift inside a clipped frame.
   The frame clips; the <img> is slightly oversized and translated by JS
   (--jm-par, in px). Gives photos life on scroll without layout shift.
   =================================================================== */
[data-jm-parallax]{ overflow: hidden; }
[data-jm-parallax] > img,
[data-jm-parallax] .jm-par-img{
  /* v5.2: zoom headroom halved (1.12 → 1.06) — the old value cost real
     sharpness on desktop; JS now clamps drift to the available overflow */
  transform: translate3d(0, var(--jm-par, 0px), 0) scale(1.06);
  will-change: transform;
}
/* Hero photos: a touch more scale headroom so drift never reveals an edge */
.hero [data-jm-parallax] > img{ transform: translate3d(0, var(--jm-par,0px),0) scale(1.08); }

/* ===================================================================
   4. PREMIUM 3D CARD TILT (desktop pointer only) — gallery + studio cards
   JS writes --jm-rx / --jm-ry from pointer position; CSS applies a gentle
   tilt with a glare sweep. Strictly desktop & fine-pointer.
   =================================================================== */
@media (hover:hover) and (pointer:fine){
  .jm-tilt{
    transform: perspective(900px) rotateX(var(--jm-rx,0deg)) rotateY(var(--jm-ry,0deg)) translateZ(0);
    transition: transform .25s var(--jm-ease), box-shadow .3s var(--jm-ease);
    transform-style: preserve-3d;
  }
  .jm-tilt.jm-tilting{ transition: box-shadow .3s var(--jm-ease); } /* live: no lag on rotate */
  .jm-tilt::after{
    content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
    background: radial-gradient(120px 120px at var(--jm-gx,50%) var(--jm-gy,50%), rgba(255,255,255,.16), transparent 60%);
    opacity:0; transition:opacity .3s var(--jm-ease); z-index:3;
  }
  .jm-tilt.jm-tilting::after{ opacity:1; }
}

/* ===================================================================
   5. CINEMATIC SEAM — a luminous divider that breathes between a dark
   and a light section. Decorative, pointer-safe; revealed when in view.
   =================================================================== */
.jm-seam{
  position: relative; height: 0; pointer-events:none; z-index:5;
}
.jm-seam__glow{
  position:absolute; left:50%; top:-1px; width:0; height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, var(--jm-gold), transparent);
  box-shadow:0 0 22px 2px rgba(196,161,101,.35);
  transition: width 1.2s var(--jm-ease), opacity .8s ease;
  opacity:0;
}
.jm-seam.jm-on .jm-seam__glow{ width:min(420px, 60%); opacity:.9; }

/* ===================================================================
   6. CTA — premium sheen sweep on hover (desktop), crisp press (all)
   Layered on top of the existing j4 button feedback; no base edits.
   =================================================================== */
.btn-fill, .btn-primary, .btn-airbnb, .nav-cta, .boutique-cta{
  position: relative; overflow: hidden;
}
.btn-fill::after, .btn-primary::after, .btn-airbnb::after,
.nav-cta::after, .boutique-cta::after{
  content:""; position:absolute; top:0; left:-130%; width:60%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.28), transparent);
  transform:skewX(-18deg); pointer-events:none; transition:none;
}
@media (hover:hover) and (pointer:fine){
  .btn-fill:hover::after, .btn-primary:hover::after, .btn-airbnb:hover::after,
  .nav-cta:hover::after, .boutique-cta:hover::after{
    left:130%; transition:left .75s var(--jm-ease);
  }
}

/* ===================================================================
   7. DEPTH FLOAT — gentle resting elevation on key photo blocks so the
   page reads in layers (desktop). Very small; pure CSS, no JS cost.
   =================================================================== */
@media (min-width:769px){
  .mm-img-wrap, .brand-img-wrap, .studio-img-wrap, .hero-frame{
    box-shadow: 0 30px 70px -40px rgba(0,0,0,.55);
  }
}

/* ===================================================================
   8. REDUCED MOTION — everything calms to a simple opacity fade.
   =================================================================== */
@media (prefers-reduced-motion: reduce){
  [data-jm-reveal], [data-jm-stagger] > *{
    transform:none !important; transition:opacity .4s ease !important;
  }
  .jm-line__inner{ transform:none !important; }
  [data-jm-parallax] > img, [data-jm-parallax] .jm-par-img{ transform:scale(1.02) !important; }
  .jm-tilt{ transform:none !important; }
  .jm-seam__glow{ transition:none !important; }
  .btn-fill::after,.btn-primary::after,.btn-airbnb::after,.nav-cta::after,.boutique-cta::after{ display:none !important; }
}

/* ===================================================================
   9. MOBILE — same language, lighter. Disable tilt + heavy perspective;
   keep short, satisfying reveals and a whisper of parallax.
   =================================================================== */
@media (max-width:768px){
  [data-jm-reveal]{
    transform: translate3d(0,28px,0);          /* flat, fast, no Z */
    transition: opacity .7s var(--jm-ease-soft), transform .8s var(--jm-ease-soft);
  }
  [data-jm-reveal="left"],[data-jm-reveal="right"]{ transform: translate3d(0,28px,0); }
  [data-jm-stagger] > *{
    transform: translate3d(0,22px,0);
    transition: opacity .6s var(--jm-ease-soft), transform .7s var(--jm-ease-soft);
  }
  [data-jm-parallax] > img, .hero [data-jm-parallax] > img{
    transform: translate3d(0, var(--jm-par,0px),0) scale(1.08);   /* lighter drift */
  }
  .jm-tilt{ transform:none !important; }       /* never tilt on touch */
  .jm-tilt::after{ display:none; }
}