/* bodhi.css — style 15, "one breath per screen".

   Every other page in this portfolio drives an effect from how far you are
   THROUGH a section. This one drives it from how close a panel is to the middle
   of the screen. Each picture eases as it settles into the centre and relaxes
   again as it leaves, so scrolling feels like breathing rather than travelling.

   The page also snaps, gently. scroll-snap-type proximity, not mandatory, so
   long text is never trapped and you can still scroll straight past.

   Palette off the photographs: bamboo and teak, jungle green, pool water,
   and the orange of the loungers and the yoga hammocks. */

:root{
  --paper  :#F7F4ED;
  --paper-2:#EDE7DA;
  --ink    :#1D2A22;               /* deep jungle green, almost black */
  --ink-d  :rgba(29,42,34,.62);
  --ink-f  :rgba(29,42,34,.36);
  --teak   :#B0763F;
  --leaf   :#3E6A4A;
  --water  :#2AA3B0;
  --sun    :#DE7A32;               /* the loungers and the hammocks */
  --hair   :rgba(29,42,34,.14);
  --pad    :clamp(22px,5vw,96px);
  --serif  :"Canela","Didot",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(--paper);color:var(--ink);font-family:var(--sans);
  font-size:clamp(.95rem,1.05vw,1.05rem);line-height:1.7;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:.34em;text-transform:uppercase;color:var(--ink-f)}
.display{font-family:var(--serif);font-weight:400;line-height:1.03;
  letter-spacing:-.018em;font-size:clamp(2.4rem,7vw,5.6rem)}
.display em{font-style:italic;color:var(--teak)}
.h2{font-family:var(--serif);font-weight:400;line-height:1.08;
  font-size:clamp(1.6rem,3.6vw,2.9rem)}

/* ---------- 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:18px var(--pad);
  background:linear-gradient(180deg,rgba(247,244,237,.92),rgba(247,244,237,0))}
.nav__brand{font-family:var(--serif);font-size:1.05rem}
.nav__brand span{color:var(--leaf)}
.nav__cta{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  border:1px solid var(--hair);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(--ink);color:var(--paper)}

/* ---------- 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(12,20,15,.32) 0%,rgba(12,20,15,0) 38%,rgba(12,20,15,.72) 100%)}
.hero__in{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(50px,10vh,116px);
  z-index:2;color:#fff}
.hero__in .tag{color:rgba(255,255,255,.72)}
.hero h1{margin:16px 0 18px}
.hero h1 em{color:#F0C79A}
.hero__sub{color:rgba(255,255,255,.84);max-width:44ch}

/* ---------- lead in ---------- */
.intro{padding:clamp(76px,14vh,168px) var(--pad);max-width:1120px;margin:0 auto}
.intro p{font-family:var(--serif);font-weight:400;line-height:1.2;
  font-size:clamp(1.5rem,3.6vw,2.7rem);max-width:23ch}
.intro p em{font-style:italic;color:var(--leaf)}
.intro small{display:block;margin-top:26px;font-size:1rem;color:var(--ink-d);max-width:54ch}

/* ---------- THE BREATH: one panel per screen ----------

   --near is 1 when the panel is dead centre and 0 when it is a full viewport
   away, set from JS. Everything here reads off that one number.            */

.breath{scroll-snap-type:y proximity}     /* gentle, never traps you */

/* exactly one screen tall, so a panel is never taller than the thing it is
   trying to centre itself in */
.panel{--near:0;height:100svh;min-height:520px;scroll-snap-align:center;
  display:grid;grid-template-rows:1fr auto;gap:clamp(16px,3vh,34px);
  padding:clamp(70px,11vh,120px) var(--pad) clamp(40px,8vh,90px)}
/* min-height:0 is what actually lets the 1fr row shrink. Without it the image's
   own height wins and every panel overflows its screen. */
.panel__shot{min-height:0;overflow:hidden;background:var(--paper-2);border-radius:2px;
  display:flex;align-items:center;justify-content:center}
.panel__shot img{width:100%;height:100%;object-fit:cover;
  transform:scale(calc(1.07 - var(--near) * .07));
  transition:transform .1s linear;will-change:transform}
.panel__body{display:grid;grid-template-columns:1fr auto;gap:clamp(14px,4vw,60px);
  align-items:end;
  opacity:calc(.42 + var(--near) * .58);
  transform:translateY(calc((1 - var(--near)) * 14px));
  transition:opacity .18s linear,transform .18s linear}
.panel__body h2{margin:10px 0 8px}
.panel__body p{color:var(--ink-d);max-width:46ch}
.panel__no{font-family:var(--serif);color:var(--ink-f);font-size:.9rem;
  white-space:nowrap;padding-bottom:4px}
@media (max-width:700px){
  .panel__body{grid-template-columns:1fr}
  .panel__no{display:none}
}


/* ---------- the four halls ---------- */
.halls{padding:clamp(76px,13vh,170px) var(--pad);max-width:1180px;margin:0 auto}
.halls__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,28px);
  margin-top:clamp(24px,4vh,46px)}
.halls__grid div{border-top:1px solid var(--hair);padding-top:16px}
.halls__grid b{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.05rem,1.8vw,1.35rem)}
.halls__grid span{display:block;margin-top:7px;font-size:.58rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-f)}
@media (max-width:760px){ .halls__grid{grid-template-columns:1fr 1fr} }

/* ---------- a statement ---------- */
.say{padding:clamp(20px,5vh,60px) var(--pad) clamp(76px,13vh,170px);
  max-width:1180px;margin:0 auto}
.say p{font-family:var(--serif);font-weight:400;line-height:1.16;
  font-size:clamp(1.6rem,4.2vw,3.2rem);max-width:21ch}
.say p em{font-style:italic;color:var(--sun)}
.say small{display:block;margin-top:24px;font-size:1rem;color:var(--ink-d);max-width:52ch}

/* ---------- the live 360 ---------- */
.pano{position:relative;background:var(--paper-2)}
.pano__track{height:220vh}
.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}
.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(12,20,15,.34) 0%,rgba(12,20,15,0) 34%,rgba(12,20,15,.74) 100%)}
.pano__copy{position:absolute;left:var(--pad);right:var(--pad);
  bottom:clamp(52px,10vh,112px);z-index:2;pointer-events:none;color:#fff}
.pano__copy .tag{color:rgba(255,255,255,.7)}
.pano__copy h2{max-width:16ch;margin:12px 0 18px}
.pano__hint{display:inline-flex;align-items:center;gap:11px;
  border:1px solid rgba(255,255,255,.44);border-radius:100px;padding:11px 20px;
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.pano__hint i{width:16px;height:16px;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}
.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:var(--ink)}

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

.foot{border-top:1px solid var(--hair);padding:32px var(--pad);display:flex;
  flex-wrap:wrap;gap:9px 28px;justify-content:space-between;color:var(--ink-f);font-size:.72rem}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .breath{scroll-snap-type:none}
  .js-anim [data-rise]{opacity:1;transform:none;transition:none}
  .panel__shot img{transform:none}
  .panel__body{opacity:1;transform:none}
  .pano__hint i::after{animation:none}
}

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