/* ============================================================
   MOTION & DEPTH LAYER
   Adds: scroll reveal, parallax hero, Ken Burns, 3D tilt cards,
   glassmorphism panels, magnetic/ripple buttons, animated nav
   underline, sticky mobile reservation bar, photo lightbox.
   Loaded after css/style.css — only adds to / overrides it.
   ============================================================ */

:root{
  --shadow-sm:0 2px 14px rgba(22,34,47,.07);
  --shadow-md:0 16px 38px rgba(22,34,47,.11);
  --shadow-lg:0 26px 64px rgba(22,34,47,.16);
  --glass-bg:rgba(255,255,255,.55);
}

/* ---------- Ken Burns slow zoom (hero + feature photos) ---------- */
@media (prefers-reduced-motion: no-preference){
  #heroMain.real-photo{animation:kenburns 14s ease-in-out infinite alternate;}
  .feat-row .ph.real-photo{animation:kenburnsSoft 18s ease-in-out infinite alternate;}
}
@keyframes kenburns{from{transform:scale(1);}to{transform:scale(1.07);}}
@keyframes kenburnsSoft{from{transform:scale(1);}to{transform:scale(1.045);}}

/* ---------- hero parallax layers ---------- */
.hero-photo-wrap{will-change:transform;}
.hero-top{will-change:transform;}

/* ---------- scroll reveal (JS adds .is-visible once in view) ---------- */
@media (prefers-reduced-motion: no-preference){
  [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.65,.3,1),transform .8s cubic-bezier(.2,.65,.3,1);}
  [data-reveal].is-visible{opacity:1;transform:translateY(0);}
  [data-reveal="scale"]{transform:translateY(24px) scale(.97);}
  [data-reveal="scale"].is-visible{transform:translateY(0) scale(1);}
}

/* ---------- eyebrow letter stagger ---------- */
.eyebrow .letter{display:inline-block;}
@media (prefers-reduced-motion: no-preference){
  .eyebrow .letter{opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease;}
  .eyebrow.is-visible .letter{opacity:1;transform:translateY(0);}
}

/* ---------- depth cards: lift + shadow on hover ---------- */
.grid3-min > div,
.reserve-grid > div,
.book-grid > div,
.note-grid > div,
.news-item,
.facility-card,
.amenity-item{
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,border-color .4s ease;
}
@media (hover:hover){
  .grid3-min > div:hover,
  .reserve-grid > div:hover,
  .book-grid > div:hover,
  .note-grid > div:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-md);
    position:relative;z-index:2;background:var(--cream);
  }
  .amenity-item:hover,.facility-card:hover{
    background:var(--cream);box-shadow:var(--shadow-sm);position:relative;z-index:2;
  }
}
.feat-row .ph{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease;}
@media (hover:hover){
  .feat-row .ph:hover{box-shadow:var(--shadow-lg);}
}

/* 3D tilt (JS sets transform via inline style on mousemove) */
.tilt-card{transition:transform .25s ease,box-shadow .25s ease;transform-style:preserve-3d;}

/* ---------- glassmorphism panels ---------- */
.panel{
  background:linear-gradient(135deg,rgba(238,241,239,.92),rgba(238,241,239,.62));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:var(--shadow-sm);
  border-left:3px solid var(--accent);
}
.final-panel{
  background:linear-gradient(135deg,rgba(234,237,232,.9),rgba(234,237,232,.6));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.accordion{position:relative;}
.hero-caption-row,.thumbstrip{position:relative;}

/* ---------- animated nav underline (center-out) ---------- */
nav.gnav a{position:relative;padding-bottom:3px;}
nav.gnav a::after{
  content:'';position:absolute;left:50%;right:50%;bottom:-1px;height:1px;background:var(--ink);
  transition:left .32s cubic-bezier(.2,.8,.2,1),right .32s cubic-bezier(.2,.8,.2,1);
}
nav.gnav a:hover::after{left:0;right:0;}

/* ---------- button ripple + magnetic hover ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;will-change:transform;}
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.4),transparent 60%);
  opacity:0;transform:scale(.5);transition:opacity .45s ease,transform .55s ease;
}
.btn-outline::before{background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(22,34,47,.08),transparent 60%);}
.btn:hover::before{opacity:1;transform:scale(1.6);}
.btn:hover{box-shadow:var(--shadow-sm);}

/* ---------- sticky mobile reservation bar ---------- */
.sticky-reserve{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  display:none;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(250,248,242,.9);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  box-shadow:0 -8px 24px rgba(22,34,47,.08);
  transform:translateY(100%);
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.sticky-reserve.show{transform:translateY(0);}
.sticky-reserve a.btn{width:100%;justify-content:center;}
@media (max-width:860px){
  .sticky-reserve{display:block;}
}

/* ---------- lightbox ---------- */
.lb-overlay{
  position:fixed;inset:0;z-index:300;background:rgba(14,19,24,.92);
  display:flex;align-items:center;justify-content:center;padding:28px;
  opacity:0;visibility:hidden;transition:opacity .35s ease;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.lb-overlay.open{opacity:1;visibility:visible;}
.lb-overlay .lb-img{
  max-width:92vw;max-height:86vh;border-radius:4px;box-shadow:var(--shadow-lg);
  opacity:0;transform:scale(.96);transition:opacity .35s ease,transform .35s ease;
}
.lb-overlay.open .lb-img{opacity:1;transform:scale(1);}
.lb-close{
  position:absolute;top:22px;right:26px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);
  color:#fff;width:40px;height:40px;border-radius:50%;font-size:20px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s ease;
}
.lb-close:hover{background:rgba(255,255,255,.18);}
.lightbox-trigger{cursor:zoom-in;}

@media (prefers-reduced-motion: reduce){
  #heroMain.real-photo,.feat-row .ph.real-photo{animation:none;}
  .btn,.grid3-min > div,.reserve-grid > div,.book-grid > div,.note-grid > div{transition:none;}
}