/* Mobile design pass (Emil Kowalski design-engineering review). Loaded after the page styles. */
:root{
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-drawer:cubic-bezier(0.32,0.72,0,1);
}

/* 3. Press feedback on everything tappable (the `scale` property composes with GSAP's transforms) */
.btn,.pill,.x,.rev-arrows button,.car-ctrl button,.ig a,.pass,.day,.faq summary,.trow,.offer,.sheet a{-webkit-tap-highlight-color:transparent}
.btn{transition:background-color 200ms ease,color 200ms ease,border-color 200ms ease,transform 250ms var(--ease-out),scale 160ms var(--ease-out)}
.btn:active{scale:.97}
.pill{transition:background-color 200ms ease,color 200ms ease,border-color 200ms ease,scale 160ms var(--ease-out)}
.pill:active{scale:.97}
.x,.rev-arrows button,.car-ctrl>button{transition:background-color 200ms ease,scale 160ms var(--ease-out)}
.x:active,.rev-arrows button:active,.car-ctrl>button:active{scale:.94}
.ig a{transition:scale 160ms var(--ease-out)}
.ig a:active{scale:.97}
.day b{transition:color 200ms ease,scale 160ms var(--ease-out)}
.day:active b{scale:.9}
.faq summary{transition:opacity 160ms ease}
.faq summary:active{opacity:.6}
.trow:active{background:var(--peach)}
.sheet a:active{opacity:.6}

/* 13. Choosing a pass in the booking panel */
.pass{transition:border-color 150ms var(--ease-out),background-color 150ms var(--ease-out),box-shadow 150ms var(--ease-out),scale 150ms var(--ease-out)}
.pass:active{scale:.98}

/* 5. Menu sheet: fades and drops in, links stagger; exits faster than it enters */
.sheet{opacity:0;transform:translateY(-8px);visibility:hidden;transition:opacity 160ms ease,transform 160ms var(--ease-out),visibility 0s linear 160ms}
.sheet.open{opacity:1;transform:none;visibility:visible;transition:opacity 220ms ease,transform 220ms var(--ease-out),visibility 0s}
.sheet a{opacity:0;transform:translateY(10px);transition:opacity 200ms ease,transform 260ms var(--ease-out)}
.sheet.open a{opacity:1;transform:none;transition-delay:calc(60ms + var(--i,0) * 40ms)}

/* 2. Booking panel: transitions instead of keyframes (interruptible); bottom sheet on phones */
.panel{opacity:0;visibility:hidden;pointer-events:none;transition:opacity 200ms ease,visibility 0s linear 260ms}
.panel.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 240ms ease,visibility 0s}
.panel-in{animation:none;transform:translateX(28px);opacity:0;transition:transform 200ms var(--ease-out),opacity 160ms ease}
.panel.open .panel-in{transform:none;opacity:1;transition:transform 300ms var(--ease-out),opacity 220ms ease}
.grab{display:none}
@media (max-width:760px){
  .panel{align-items:flex-end;justify-content:center;-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(35,25,15,.5)}
  .panel-in{width:100%;height:auto;max-height:92svh;border-radius:24px 24px 0 0;opacity:1;transform:translateY(100%);transition:transform 240ms var(--ease-out);padding-top:10px;overscroll-behavior:contain}
  .panel.open .panel-in{transform:translateY(0);opacity:1;transition:transform 400ms var(--ease-drawer)}
  .grab{display:block;flex:0 0 auto;width:44px;height:5px;border-radius:3px;background:var(--greige);margin:0 auto -4px}
}

/* 1. Sticky booking bar in the thumb zone (phones only) */
.bookbar{display:none}
@media (max-width:760px){
  .bookbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:55;padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));transform:translateY(115%);transition:transform 200ms var(--ease-out);pointer-events:none}
  .bookbar.show{transform:translateY(0);transition:transform 280ms var(--ease-drawer);pointer-events:auto}
  .bookbar-in{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--brown-deep);color:var(--peach);border-radius:22px;padding:10px 10px 10px 18px;box-shadow:0 12px 32px rgba(35,25,15,.28)}
  .bookbar b{display:block;font:400 18px/1.15 var(--display)}
  .bookbar small{display:block;font-size:12px;color:var(--on-dark-soft);margin-top:3px}
  .bookbar .btn{background:var(--peach);color:var(--brown);flex:0 0 auto;min-height:44px}
}

/* 8. FAQ: open and close with a grid-row transition instead of animating height */
.faq .ans{display:grid;grid-template-rows:1fr;transition:grid-template-rows 220ms var(--ease-out),opacity 200ms ease}
.faq .ans>div{min-height:0;overflow:hidden}
.faq details.shut .ans{grid-template-rows:0fr;opacity:0}

/* 10. The bindu (centre point) settles in from a visible size, never from scale(0) */
.qtl-bindu{transform:scale(.6);opacity:0;transition:transform .55s var(--ease-out) .8s,opacity .3s ease .8s}
.qt-loader.is-in .qtl-bindu{transform:scale(1);opacity:1}
.foot-brand.will-animate .fb-bindu{transform:scale(.6);opacity:0;transition:transform .6s var(--ease-out) 1.35s,opacity .3s ease 1.35s}
.foot-brand.will-animate.is-in .fb-bindu{transform:scale(1);opacity:1}

/* 9. Shorter logo intro on phones (about 1.2s) */
@media (max-width:760px){
  .qtl-mark g>*{transition-duration:.7s}
  .qtl-mark g>path:nth-child(2){transition-delay:.05s!important}
  .qtl-mark g>path:nth-child(3){transition-delay:.08s!important}
  .qtl-mark g>path:nth-child(4){transition-delay:.11s!important}
  .qtl-mark g>path:nth-child(5){transition-delay:.14s!important}
  .qtl-mark g>path:nth-child(6){transition-delay:.17s!important}
  .qtl-mark g>path:nth-child(7){transition-delay:.20s!important}
  .qtl-mark g>path:nth-child(8){transition-delay:.23s!important}
  .qtl-mark g>path:nth-child(9){transition-delay:.26s!important}
  .qtl-mark g>path:nth-child(10){transition-delay:.29s!important}
  .qtl-mark g>path:nth-child(11){transition-delay:.32s!important}
  .qtl-l{transition-duration:.8s;transition-delay:calc(.18s + var(--i) * .035s)}
  .qtl-bindu{transition-delay:.55s}
  .qt-loader{transition-duration:.6s}
  .qt-loader.is-out .qtl-inner>*{transition-duration:.45s}
}

/* 11. Readable two-line headline on phones; the moving ticker stays on wider screens */
.hero-h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
@media (max-width:760px){
  .ticker{display:none}
  .hero-h1{position:relative;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;padding-left:var(--gut);padding-right:var(--gut-r);font:400 clamp(28px,8.6vw,44px)/1.08 var(--display);letter-spacing:-.01em;color:var(--peach)}
  .hero-h1 span{display:block;white-space:nowrap}
  .hero-h1 em{font-style:italic;color:var(--tan)}
}

/* 12. Carousel position dots; on phones people swipe, so the arrows step aside */
.car-ctrl{align-items:center}
.car-ctrl .dots{margin-right:auto}
.sessions .dots button::before{background:var(--peach);opacity:.4}
.sessions .dots button[aria-current="true"]::before{background:var(--peach);opacity:1}
@media (max-width:760px){
  .car-ctrl>button,.rev-arrows{display:none}
  .car-ctrl,.rev-ctrl{justify-content:center}
  .car-ctrl .dots{margin-right:0}
}

/* 14. Press marquee: slower, and holds still under a finger */
.press-track{animation-duration:40s}
.press-marquee.held .press-track{animation-play-state:paused}