/* =========================================================
   The Keya Himalayan Retreat — shared luxury layer (all pages)
   Tokens, type, buttons, nav skin, cursor, curtain, progress, mist,
   realistic peaks, footer. Loaded after style.css.
   ========================================================= */

.lux {
  --night: #0b1518;
  --night-2: #0f1d21;
  --night-3: #18292e;
  --ivory: #f6f1e8;
  --cream: #eee5d6;
  --paper: #fbf8f2;
  --gold: #c8a265;
  --gold-hi: #e6cb94;
  --gold-lo: #94723f;
  --ink-w: #1d1a16;
  --text: #4d463d;
  --text-l: rgba(246, 241, 232, .72);
  --hair: rgba(29, 26, 22, .14);
  --hair-l: rgba(246, 241, 232, .16);
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-io: cubic-bezier(.7, 0, .2, 1);
  --round: clamp(22px, 3vw, 40px);
  --edge: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter) / 2));
  background: var(--night);
  color: var(--text);
}
.lux ::selection { background: var(--gold-hi); color: var(--ink-w); }
.lux :focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 8px; }
html.is-leaving body.lux { opacity: 1; transform: none; }

/* ---------- Type ---------- */
.eyebrow-k {
  display: inline-flex; align-items: center; gap: 14px; margin-bottom: 22px;
  font-size: .7rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--gold-lo);
}
.eyebrow-k b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.15rem; letter-spacing: 0; }
.eyebrow-k i { width: 44px; height: 1px; background: currentColor; opacity: .55; transform-origin: left; }
.js .eyebrow-k i { transform: scaleX(0); transition: transform 1.2s var(--e-out) .2s; }
.js .eyebrow-k.is-in i, .js [data-words].is-in ~ .eyebrow-k i, .js .is-in .eyebrow-k i { transform: none; }
.eyebrow-k--gold, .dark .eyebrow-k { color: var(--gold); }

.ktitle {
  font-family: var(--serif); font-weight: 300; color: var(--ink-w);
  font-size: clamp(2.6rem, 1.5rem + 4.2vw, 5.6rem); line-height: 1.02; letter-spacing: -.015em; max-width: 15ch;
}
.ktitle em { font-style: italic; color: var(--gold-lo); }
.dark .ktitle { color: var(--ivory); }
.dark .ktitle em { color: var(--gold-hi); }
.dark { color: var(--text-l); }

[data-words] .wd { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .1em; margin-bottom: -.1em; }
.js [data-words] .wd > span { display: inline-block; transform: translateY(108%) rotate(4deg); transform-origin: 0 100%; transition: transform 1.25s var(--e-out); transition-delay: calc(var(--wi) * 55ms); }
.js [data-words].is-in .wd > span { transform: none; }

[data-chars] .ch { display: inline-block; }
[data-chars] .chw { display: inline-block; white-space: nowrap; overflow: hidden; padding-bottom: .08em; vertical-align: top; }
.js [data-chars] .ch { transform: translateY(105%) rotate(8deg); transform-origin: 0 100%; transition: transform 1.5s var(--e-out) calc(.25s + var(--i) * 45ms); }
.js [data-chars].is-in .ch { transform: none; }
[data-chars] em .ch { background: linear-gradient(100deg, var(--gold-hi), #fff4dc 50%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* scroll-lit statement */
.statement { font-family: var(--serif); font-weight: 300; font-size: clamp(1.9rem, 1.1rem + 2.7vw, 3.7rem); line-height: 1.18; color: var(--ink-w); max-width: 24ch; }
.statement em { font-style: italic; color: var(--gold-lo); }
.js [data-fill] .fw { opacity: .16; transition: opacity .5s ease; }
.js [data-fill] .fw.on { opacity: 1; }

/* ---------- Buttons & links ---------- */
.kbtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px; overflow: hidden; isolation: isolate;
  padding: 17px 30px; border-radius: 999px; font-size: .72rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
  transition: transform .6s var(--e-out), translate .6s var(--e-out), box-shadow .6s var(--e-out), background .4s, color .4s;
}
.kbtn i { position: relative; width: 22px; height: 1px; background: currentColor; transition: width .5s var(--e-out); }
.kbtn i::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.kbtn:hover i { width: 32px; }
.kbtn:hover { transform: translateY(-2px); }
.kbtn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-120%); transition: transform 1s var(--e-out); }
.kbtn:hover::before { transform: translateX(120%); }
.kbtn--gold { background: linear-gradient(135deg, var(--gold-hi), var(--gold) 55%, #b58d52); color: var(--ink-w); box-shadow: 0 18px 36px -18px rgba(200, 162, 101, .75); }
.kbtn--gold:hover { box-shadow: 0 24px 44px -18px rgba(200, 162, 101, .9); }
.kbtn--ghost { color: var(--ivory); box-shadow: inset 0 0 0 1px rgba(246, 241, 232, .4); background: rgba(246, 241, 232, .06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.kbtn--ghost:hover { background: var(--ivory); color: var(--ink-w); }
.kbtn--ink { background: var(--ink-w); color: var(--ivory); }
.kbtn--ink:hover { background: #000; }
.kbtn--line { color: var(--ink-w); box-shadow: inset 0 0 0 1px var(--hair); }
.kbtn--line:hover { background: var(--ink-w); color: var(--ivory); }
.kbtn--sm { padding: 12px 22px; font-size: .66rem; }

.klink { position: relative; display: inline-flex; padding: 6px 0; font-size: .72rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-w); }
.klink::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: right; transition: transform .6s var(--e-out); }
.klink:hover::after { transform: scaleX(0); }
.klink--light, .dark .klink { color: var(--ivory); }

.kcircle {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: var(--ivory);
  box-shadow: inset 0 0 0 1px var(--hair-l); transition: background .4s, color .4s, transform .5s var(--e-out), translate .5s var(--e-out), box-shadow .4s;
}
.kcircle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.kcircle:hover { background: var(--gold-hi); color: var(--ink-w); box-shadow: inset 0 0 0 1px var(--gold-hi); transform: scale(1.06); }
.kcircle--ink { color: var(--ink-w); box-shadow: inset 0 0 0 1px var(--hair); }
.kcircle--ink:hover { background: var(--ink-w); color: var(--ivory); box-shadow: inset 0 0 0 1px var(--ink-w); }
.is-magnet { transition-duration: .15s, .15s, .15s, .15s, .15s !important; }

/* ---------- Reveals & scroll effects ---------- */
.cine { overflow: hidden; }
.cine img { width: 100%; height: 100%; object-fit: cover; }
.js .cine { clip-path: inset(100% 0 0 0 round var(--cr, 0px)); }
.js .cine img { transform: scale(1.3); }
.js .cine.is-in { clip-path: inset(0 0 0 0 round var(--cr, 0px)); transition: clip-path 1.5s var(--e-io); }
.js .cine.is-in img { transform: scale(1); transition: transform 2.2s var(--e-out); }
[data-par] img, img[data-par] { translate: 0 var(--py, 0px); }
[data-zoom] { scale: var(--zs, 1); }
[data-skew] { transform: skewY(var(--skew, 0deg)); transform-origin: 50% 0; }
[data-drift] { translate: var(--dx, 0px) var(--dy, 0px); }

.sprog { position: fixed; left: 0; top: 0; right: 0; z-index: 70; height: 2px; pointer-events: none; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); transform-origin: left; transform: scaleX(var(--sp, 0)); }

/* spotlight that follows the mouse on dark surfaces */
[data-spot] { position: relative; isolation: isolate; }
[data-spot]::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: var(--so, 0); transition: opacity .6s;
  background: radial-gradient(520px circle at var(--sx, 50%) var(--sy, 50%), rgba(230, 203, 148, .11), transparent 60%); border-radius: inherit; }

/* curtain between pages */
.curtain { position: fixed; inset: 0; z-index: 250; pointer-events: none; background: var(--night); display: grid; place-items: center; transform: translateY(-101%); transition: transform 1.05s var(--e-io); }
.curtain::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.curtain img { width: 70px; height: auto; opacity: .9; }
.js.is-entering .curtain { transform: none; transition: none; }
html.is-leaving .curtain { animation: curtainIn .5s var(--e-io) forwards; }
@keyframes curtainIn { from { transform: translateY(101%); } to { transform: none; } }

/* hover preview that trails the cursor */
.follow { position: fixed; left: 0; top: 0; z-index: 90; width: clamp(220px, 20vw, 320px); aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; pointer-events: none; opacity: 0; scale: .7; transition: opacity .45s, scale .7s var(--e-out); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); background: var(--night); }
.follow.is-on { opacity: 1; scale: 1; }
.follow img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; scale: 1.2; transition: opacity .5s, scale 1.2s var(--e-out); }
.follow img.is-on { opacity: 1; scale: 1; }
[data-swapmain] img { transition: opacity .3s, transform 2.2s var(--e-out); }
[data-swapmain] img.is-swapping { opacity: 0; }

/* ---------- Mist, grain, motes ---------- */
.mist { position: absolute; left: 0; right: 0; bottom: -6%; height: 62%; pointer-events: none; transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); z-index: 1; }
.mist__l { position: absolute; left: -50%; bottom: 0; width: 300%; height: 100%; filter: blur(34px); opacity: .55; will-change: transform;
  background:
    radial-gradient(28% 40% at 8% 80%, rgba(255, 255, 255, .85), transparent 70%),
    radial-gradient(24% 36% at 26% 92%, rgba(240, 244, 246, .8), transparent 70%),
    radial-gradient(30% 42% at 46% 84%, rgba(255, 255, 255, .7), transparent 70%),
    radial-gradient(22% 34% at 64% 94%, rgba(236, 241, 244, .85), transparent 70%),
    radial-gradient(30% 40% at 84% 82%, rgba(255, 255, 255, .75), transparent 70%);
  animation: drift 70s ease-in-out infinite alternate; }
.mist__l--2 { opacity: .35; height: 80%; animation-duration: 95s; animation-direction: alternate-reverse; }
.mist__l--3 { opacity: .5; height: 40%; filter: blur(22px); animation-duration: 55s; }
.mist--soft .mist__l { opacity: .3; }
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-22%, -4%, 0); } }
.grain { position: absolute; inset: -50%; opacity: .07; pointer-events: none; animation: grain 1.2s steps(6) infinite; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }
.motes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

/* ---------- Realistic peaks (WebGL, js/peaks.js) ---------- */
.peaks { position: relative; overflow: hidden; background: linear-gradient(180deg, #0c1a2c 0%, #3b4a63 48%, #8a8494 70%, #2a333a 100%); }
.peaks canvas { position: absolute; left: -3%; top: -3%; width: 106%; height: 106%; opacity: 0; transition: opacity 1.6s ease;
  transform: translate3d(calc(var(--px, 0) * var(--d, 0) * 1px), calc(var(--py, 0) * var(--d, 0) * .5px + var(--ps, 0) * var(--ds, 0) * 1px), 0); will-change: transform; }
.peaks.is-rendered canvas, .peaks canvas.is-ready { opacity: 1; }
.peaks canvas[data-band="far"] { --d: 5; --ds: .22; }
.peaks canvas[data-band="mid"] { --d: 13; --ds: .12; }
.peaks canvas[data-band="near"] { --d: 26; --ds: 0; }
.peaks canvas[data-band="all"] { --d: 8; --ds: .14; }
.peaks--fallback { background: url('../images/scenery/ridge-far.svg') center bottom / cover no-repeat, linear-gradient(180deg, #9fbfd6, #e3edf4); }

/* ---------- Sheets that slide over a sticky hero ---------- */
.sheet { position: relative; z-index: 2; background: var(--ivory); border-radius: var(--round) var(--round) 0 0; margin-top: calc(var(--round) * -1); }
.sheet--night { background: radial-gradient(90% 60% at 80% 0%, #17292e 0%, var(--night) 60%); }
.sheet--cream { background: var(--cream); }
.sheet--first { box-shadow: 0 -40px 80px -30px rgba(0, 0, 0, .45); }
.pad { padding: clamp(90px, 11vw, 160px) 0; }
.shead { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: end; margin-bottom: clamp(44px, 6vw, 84px); }
.shead__side { max-width: 38ch; justify-self: end; font-size: 1.02rem; line-height: 1.75; }

/* ---------- Nav skin ---------- */
.lux .nav { color: var(--ivory); }
.lux .nav.is-scrolled { background: rgba(11, 21, 24, .88); box-shadow: 0 1px 0 var(--hair-l); }
.lux .nav__logo img { height: 62px; filter: none; }
.lux .nav.is-scrolled .nav__logo img { height: 46px; }
.lux .nav__links a { color: rgba(246, 241, 232, .86); }
.lux .nav__links a:hover, .lux .nav__links a[aria-current="page"] { color: var(--gold-hi); }
.lux .nav__burger { background: rgba(246, 241, 232, .08); box-shadow: inset 0 0 0 1px var(--hair-l); }
.lux .nav__burger span { background: var(--ivory); }
.lux .nav__burger[aria-expanded="true"] { background: #fff; }
.lux .nav__burger[aria-expanded="true"] span { background: var(--ink-w); }
.lux .drawer { background: rgba(11, 21, 24, .94); }
.lux .drawer nav a { color: var(--ivory); }
.lux .drawer nav a[aria-current="page"] { color: var(--gold-hi); }
.lux .drawer__foot { color: var(--text-l); }
.lux .drawer .nav__burger span { background: var(--ivory); }
.lux .nav__burger[aria-expanded="true"] { background: var(--gold-hi); }

/* ---------- Cursor ---------- */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .js .cursor {
    display: grid; place-items: center; position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none;
    width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--gold-hi); opacity: 0;
    transition: width .5s var(--e-out), height .5s var(--e-out), margin .5s var(--e-out), opacity .3s, background .4s;
  }
  .js .cursor.is-on { opacity: 1; }
  .cursor span { font-size: .6rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-w); opacity: 0; transition: opacity .3s; }
  .cursor.is-label { width: 88px; height: 88px; margin: -44px 0 0 -44px; background: rgba(230, 203, 148, .94); }
  .cursor.is-label span { opacity: 1; }
  .cursor.is-down { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
  .cursor.is-link { width: 40px; height: 40px; margin: -20px 0 0 -20px; background: transparent; box-shadow: inset 0 0 0 1px var(--gold); }
  .js .ring { position: fixed; left: 0; top: 0; z-index: 299; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(200, 162, 101, .45); opacity: 0; transition: opacity .4s, width .5s, height .5s, margin .5s; }
  .js .ring.is-on { opacity: 1; }
  .js .cursor.is-label ~ .ring, .js .cursor.is-link ~ .ring { opacity: 0; }
}
.ring { display: none; }
@media (hover: hover) and (pointer: fine) { .js .ring { display: block; } }

/* =========================================================
   FOOTER (all pages) — reservations, links, address
   ========================================================= */
.kfoot { position: relative; z-index: 2; background: var(--night); color: var(--text-l); padding: clamp(80px, 9vw, 130px) 0 34px; border-radius: var(--round) var(--round) 0 0; margin-top: calc(var(--round) * -1); overflow: hidden; }
.kfoot::before { content: ''; position: absolute; inset: 0 0 auto; height: 60%; z-index: 1; pointer-events: none; background: radial-gradient(70% 90% at 85% 0%, rgba(200, 162, 101, .08), transparent 70%); }
.kfoot > .wrap { position: relative; z-index: 2; }
/* soft twilight ridge: sits behind the reservation block, fades into the night at both edges */
.kfoot__scape {
  position: absolute; left: 0; top: 0; z-index: 0; width: 100%; max-width: none; height: clamp(300px, 34vw, 520px);
  object-fit: cover; object-position: 50% 58%; opacity: .5; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, rgba(0, 0, 0, .75) 62%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 34%, rgba(0, 0, 0, .75) 62%, transparent 100%);
}
.kfoot__book { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(30px, 5vw, 80px); align-items: end; padding: 0 0 clamp(60px, 7vw, 90px); border-bottom: 1px solid var(--hair-l); }
.kfoot__title { font-family: var(--serif); font-weight: 300; font-size: clamp(2.6rem, 1.6rem + 3.6vw, 5rem); line-height: 1.02; color: var(--ivory); }
.kfoot__title em { font-style: italic; color: var(--gold-hi); }
.kfoot__note { margin-top: 18px; max-width: 42ch; }
.bookbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: stretch; padding: 8px; border-radius: 24px; background: rgba(11, 21, 24, .55); box-shadow: inset 0 0 0 1px var(--hair-l); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.bookbar__f { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 10px 18px; border-right: 1px solid var(--hair-l); min-width: 0; }
.bookbar__f:nth-child(4) { border-right: 0; }
.bookbar label { font-size: .6rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.bookbar input, .bookbar select { width: 100%; padding: 2px 0; border: 0; background: transparent; color: var(--ivory); font-size: .98rem; color-scheme: dark; outline: none; }
.bookbar select option { background: var(--night-2); color: var(--ivory); }
.bookbar .kbtn { border-radius: 18px; }
.kfoot__cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding: clamp(50px, 6vw, 80px) 0; }
.kfoot__logo { display: inline-block; transition: opacity .4s; }
.kfoot__logo:hover { opacity: .85; }
.kfoot__logo img { height: clamp(84px, 7vw, 104px); width: auto; }
.kfoot__brand p { margin-top: 18px; max-width: 32ch; }
.kfoot h3 { margin-bottom: 18px; font-size: .64rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.kfoot ul { display: grid; gap: 10px; }
.kfoot ul a { position: relative; transition: color .3s, padding .4s var(--e-out); }
.kfoot ul a:hover { color: var(--ivory); padding-left: 8px; }
.kfoot address { line-height: 1.8; }
.kfoot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-top: 22px; border-top: 1px solid var(--hair-l); font-size: .8rem; }
.kfoot__base a:hover { color: var(--gold-hi); }

.lux .wa-fab { background: linear-gradient(135deg, var(--gold-hi), var(--gold)); color: var(--ink-w); box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .55); }
.lux .wa-fab:hover { background: var(--ivory); }
.lux .wa-fab::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(230, 203, 148, .6); animation: pulse 2.8s var(--e-out) infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(230, 203, 148, .55); } 100% { box-shadow: 0 0 0 18px rgba(230, 203, 148, 0); } }

/* room photo modal on the luxury skin */
.lux .modal__panel { background: var(--paper); }
.lux .modal .btn { background: var(--ink-w); }
.lux .modal__list li::before { background: var(--gold); }
.lux .room-card__no { color: var(--gold-lo); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .bookbar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .bookbar__f { border-right: 0; border-bottom: 1px solid var(--hair-l); padding: 14px 18px; }
  .bookbar__f:nth-child(odd) { border-right: 1px solid var(--hair-l); }
  .bookbar .kbtn { grid-column: 1 / -1; margin-top: 8px; }
  .kfoot__book { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 960px) {
  .lux .nav__cta { display: none; }
  .shead { grid-template-columns: 1fr; gap: 22px; }
  .shead__side { justify-self: start; }
  .kfoot__cols { grid-template-columns: 1fr 1fr; }
  .kfoot__brand { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .bookbar { grid-template-columns: 1fr; }
  .bookbar__f:nth-child(odd) { border-right: 0; }
  .kfoot__cols { grid-template-columns: 1fr; gap: 30px; }
  .kfoot__base { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .mist__l, .grain, .lux .wa-fab::after { animation: none !important; }
  .js .cine { clip-path: none; }
  .js .cine img { transform: none; }
  .curtain { display: none; }
  .js [data-fill] .fw { opacity: 1; }
}