/* bucura.css — style 4, luxury agency.

   Pinned full screen photographs that cross-fade, a custom cursor, numbers that
   count up, and a rail of cards you drag sideways. Palette taken from the hotel
   itself: dark timber, grey stone, one warm amber.

   Crossfade rule, learned the hard way: never do opacity = 1 - |pos - i|, two
   half transparent photos blend into grey mush. Give frame i z-index i and
   opacity clamp(pos - (i - 1)), so each new frame fades in ON TOP of a fully
   opaque stack. */

:root{
  --ink     :#0E0C0A;
  --ink-2   :#17140F;
  --sand    :#EFE7DA;
  --sand-dim:rgba(239,231,218,.64);
  --sand-fnt:rgba(239,231,218,.38);
  --amber   :#C98B3A;
  --line    :rgba(239,231,218,.16);
  --pad     :clamp(22px,5vw,88px);
  --serif   :"Canela","Didot","Bodoni 72",Georgia,serif;
  --sans    :-apple-system,BlinkMacSystemFont,"Inter","Helvetica Neue",Arial,sans-serif;
  --ease    :cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--ink);color:var(--sand);font-family:var(--sans);
  font-size:clamp(.95rem,1.05vw,1.04rem);line-height:1.62;font-weight:300;
  -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

.tag{font-size:.6rem;letter-spacing:.32em;text-transform:uppercase;color:var(--sand-fnt)}
.display{font-family:var(--serif);font-weight:400;line-height:1.02;
  letter-spacing:-.02em;font-size:clamp(2.5rem,7vw,6rem)}
.h2{font-family:var(--serif);font-weight:400;line-height:1.06;
  letter-spacing:-.015em;font-size:clamp(1.8rem,4vw,3.4rem)}

/* ---------- custom cursor, fine pointers only ---------- */
.cursor{position:fixed;top:0;left:0;z-index:90;pointer-events:none;mix-blend-mode:difference;
  opacity:0;transition:opacity .4s var(--ease)}
.cursor.is-on{opacity:1}
.cursor__ring{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;
  border:1px solid rgba(255,255,255,.7);border-radius:50%;
  transition:transform .3s var(--ease)}
.cursor.is-big .cursor__ring{transform:scale(1.9)}
@media (hover:none),(max-width:760px){ .cursor{display:none} }

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;gap:14px;padding:20px var(--pad);
  background:linear-gradient(180deg,rgba(14,12,10,.8),rgba(14,12,10,0))}
.nav__brand{font-family:var(--serif);font-size:1.05rem;letter-spacing:.02em}
.nav__brand span{color:var(--amber)}
.nav__cta{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:100px;padding:0 20px;min-height:44px;
  display:inline-flex;align-items:center;
  transition:background .35s var(--ease),color .35s var(--ease)}
.nav__cta:hover{background:var(--sand);color:var(--ink)}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden}
.hero__shot{position:absolute;inset:0}
.hero__shot img{width:100%;height:100%;object-fit:cover}
.hero__scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,12,10,.5) 0%,rgba(14,12,10,.05) 42%,rgba(14,12,10,.82) 100%)}
.hero__in{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(52px,10vh,120px);z-index:2}
.hero h1{margin:16px 0 18px}
.hero h1 em{font-style:italic;color:var(--amber)}
.hero__sub{color:var(--sand-dim);max-width:46ch}

/* ---------- pinned crossfade chapters ---------- */
.chapters{position:relative}
.chapters__track{height:520vh}
.chapters__sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.chapters__stage{position:absolute;inset:0;z-index:0}
.chap{position:absolute;inset:0;margin:0;opacity:0}
.chap img{width:100%;height:100%;object-fit:cover}
.chapters__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,12,10,.46) 0%,rgba(14,12,10,.04) 38%,rgba(14,12,10,.84) 100%)}
.chapters__copy{position:absolute;left:var(--pad);right:var(--pad);
  bottom:clamp(56px,11vh,130px);z-index:2;height:clamp(150px,22vh,210px)}
.chapcopy{position:absolute;inset:0;opacity:0;transform:translateY(16px);
  transition:opacity .22s linear,transform .22s var(--ease);pointer-events:none;max-width:34ch}
.chapcopy.is-active{opacity:1;transform:none;
  transition:opacity .45s var(--ease) .16s,transform .55s var(--ease) .16s}
.chapcopy h2{margin:12px 0 12px}
.chapcopy p{color:var(--sand-dim)}
.chapters__rail{position:absolute;right:var(--pad);bottom:clamp(56px,11vh,130px);z-index:2;
  list-style:none;display:grid;gap:11px;text-align:right}
.chapters__rail li{font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--sand-fnt);display:flex;align-items:center;gap:10px;justify-content:flex-end;
  transition:color .4s var(--ease)}
.chapters__rail li i{width:14px;height:1px;background:currentColor;
  transition:width .5s var(--ease)}
.chapters__rail li.is-on{color:var(--sand)}
.chapters__rail li.is-on i{width:34px;background:var(--amber)}
@media (max-width:760px){ .chapters__rail{display:none} }

/* ---------- numbers that count ---------- */
.count{padding:clamp(70px,12vh,150px) var(--pad);max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:30px;text-align:center}
.count b{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(2.4rem,6vw,4.6rem);line-height:1;color:var(--amber)}
.count span{display:block;margin-top:10px;font-size:.58rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--sand-fnt)}
@media (max-width:700px){ .count{grid-template-columns:1fr;gap:34px} }

/* ---------- the sideways rail ---------- */
.rail{padding:0 0 clamp(70px,12vh,150px)}
.rail__head{padding:0 var(--pad) clamp(24px,4vh,40px);max-width:1180px;margin:0 auto}
.rail__head p{color:var(--sand-dim);max-width:52ch;margin-top:12px}
.rail__vp{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;padding:0 var(--pad)}
.rail__vp::-webkit-scrollbar{display:none}
.rail__track{display:flex;gap:clamp(12px,1.6vw,22px);width:max-content}
.card{width:clamp(250px,32vw,420px);flex:0 0 auto}
.card img{width:100%;aspect-ratio:4/5;object-fit:cover}
.card figcaption{margin-top:13px;font-size:.58rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--sand-fnt)}

/* ---------- the live 360 ---------- */
.pano{position:relative;background:var(--ink-2)}
.pano__track{height:230vh}
.pano__sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.pano__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  cursor:grab;touch-action:pan-y;opacity:0;transition:opacity .8s var(--ease)}
.pano.is-loaded .pano__canvas{opacity:1}
.pano.is-dragging .pano__canvas{cursor:grabbing}
.pano__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.8)}
.pano.is-loaded .pano__poster{opacity:0;transition:opacity .8s var(--ease)}
.pano__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,12,10,.66) 0%,rgba(14,12,10,0) 36%,rgba(14,12,10,.84) 100%)}
.pano__copy{position:absolute;left:var(--pad);right:var(--pad);
  bottom:clamp(56px,10vh,120px);z-index:2;pointer-events:none}
.pano__copy h2{max-width:16ch;margin:12px 0 18px}
.pano__hint{display:inline-flex;align-items:center;gap:11px;border:1px solid var(--line);
  border-radius:100px;padding:11px 20px;font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sand-dim)}
.pano__hint i{width:17px;height:17px;border:1px solid currentColor;border-radius:50%;
  position:relative;flex:0 0 auto}
.pano__hint i::after{content:"";position:absolute;top:50%;left:50%;width:7px;height:1px;
  background:currentColor;transform:translate(-50%,-50%);animation:nudge 2.2s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translate(-140%,-50%)}50%{transform:translate(40%,-50%)}}
.pano.is-fallback .pano__canvas,.pano.is-fallback .pano__hint{display:none}
.pano.is-fallback .pano__poster{opacity:1}

/* ---------- reveal, visible by default ---------- */
.js-anim [data-rise]{opacity:0;transform:translateY(18px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js-anim [data-rise].is-in{opacity:1;transform:none}

.foot{border-top:1px solid var(--line);padding:34px var(--pad);display:flex;
  flex-wrap:wrap;gap:9px 30px;justify-content:space-between;color:var(--sand-fnt);font-size:.72rem}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-anim [data-rise]{opacity:1;transform:none;transition:none}
  .chapters__track{height:auto}
  .chapters__sticky{position:static;height:auto}
  .pano__hint i::after{animation:none}
}

/* ---------- the form ---------- */
.lead{
  --lf-bg     :var(--ink-2);
  --lf-fg     :var(--sand);
  --lf-accent :var(--amber);
  --lf-line   :var(--line);
  --lf-muted  :var(--sand-dim);
}
.lead__title{font-family:var(--serif);font-weight:400}
.lead__btn{color:var(--ink);font-weight:500}
.lead__field select option{background:var(--ink-2);color:var(--sand)}

/* the link out to the full tour. The copy block ignores pointer events so
   the 360 stays draggable underneath, so the link has to take them back. */
.pano__copy a{pointer-events:auto}
.pano__hint--go{margin-left:10px;transition:background .3s ease,color .3s ease}
.pano__hint--go:hover{background:#fff;color:#111}