/* TerraPeeps motion layer. Everything here is decoration: the site works without it, and it switches off for people who prefer reduced motion. */
@view-transition { navigation: auto; }
::view-transition-old(root){animation:vt-out .35s ease both}
::view-transition-new(root){animation:vt-in .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}
/* scroll progress */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--clay),#E0A57C);z-index:60;pointer-events:none}
/* header that tucks away while you read down and returns when you scroll up */
header.site{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .3s,background .3s}
header.site.hide{transform:translateY(-110%)}
header.site.scrolled{box-shadow:0 10px 30px -24px rgba(30,20,8,.5)}
header.site .brand img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
header.site .brand:hover img{transform:rotate(-4deg) scale(1.06)}
nav.main a{position:relative;text-decoration:none!important}
nav.main a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;background:no-repeat center/100% 100% url("data:image/svg+xml;utf8,");clip-path:inset(0 100% 0 0);transition:clip-path .45s cubic-bezier(.2,.8,.2,1)}
nav.main a:not(.btn):hover::after,nav.main a[aria-current]::after{clip-path:inset(0 0 0 0)}
/* buttons: a colour sweep, an arrow that slides, and a gentle magnetic pull */
.btn{position:relative;overflow:hidden;isolation:isolate;transform:translate(var(--mx,0px),var(--my,0px));transition:transform .35s cubic-bezier(.2,.8,.2,1),color .35s,border-color .35s,background .35s,box-shadow .35s;will-change:transform}
.btn:hover{transform:translate(var(--mx,0px),var(--my,0px)) translateY(-2px);box-shadow:0 14px 26px -16px rgba(30,20,8,.55)}
.btn:active{transform:translate(var(--mx,0px),var(--my,0px)) scale(.97)}
.btn::before{content:"";position:absolute;inset:-2px;background:var(--clay);transform:translateY(102%);border-radius:40% 40% 0 0/22% 22% 0 0;transition:transform .55s cubic-bezier(.2,.8,.2,1),border-radius .55s;z-index:-1}
.btn:hover::before{transform:translateY(0);border-radius:0}
.btn.clay::before{background:var(--forest)}
.btn.light::before{background:var(--sand)}
.btn.light:hover{color:var(--forest)}
.btn.ghost:hover{color:var(--parch);border-color:var(--clay)}
.btn.ghost-light:hover{color:var(--parch);border-color:var(--clay)}
.btn:not(.small)::after{content:"→";display:inline-block;transition:transform .4s cubic-bezier(.2,.8,.2,1);margin-left:2px}
.btn:not(.small):hover::after{transform:translateX(5px)}
.btn.disabled::before{display:none}
.btn.shimmer{background-image:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.25) 50%,transparent 65%);background-size:250% 100%;animation:shimmer 2.8s ease-in-out infinite}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
/* hero: slow drift, parallax, words that rise */
.hero{overflow:hidden;background-attachment:scroll}
.hero::after{content:"";position:absolute;inset:-7% 0;background:inherit;transform:translate3d(0,var(--py,0px),0) scale(1.08);animation:drift 22s ease-in-out infinite alternate;z-index:0}
.hero::before{z-index:1}.hero .wrap{z-index:2}
@keyframes drift{from{transform:translate3d(0,var(--py,0px),0) scale(1.08)}to{transform:translate3d(-1.5%,var(--py,0px),0) scale(1.16)}}
.hero .logo-big{animation:float 7s ease-in-out infinite alternate}
@keyframes float{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-10px) rotate(1deg)}}
.fig{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.hero .scroll-hint{position:absolute;right:max(20px,4vw);bottom:34px;z-index:2;display:flex;align-items:center;gap:10px;font-family:var(--hand);font-size:28px;color:#E8DFC8}
.hero .scroll-hint i{display:block;width:2px;height:46px;background:linear-gradient(#E8DFC8,transparent);animation:scrollcue 2s ease-in-out infinite;transform-origin:top}
@keyframes scrollcue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.ev-hero{overflow:hidden}
.ev-hero::after{content:"";position:absolute;inset:0;background:inherit;animation:kb 2.6s cubic-bezier(.2,.8,.2,1) both;z-index:0}
.ev-hero::before{z-index:1}.ev-hero .wrap{z-index:2}
@keyframes kb{from{transform:scale(1.18)}to{transform:scale(1)}}
.split .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.split .w>span{display:inline-block;transform:translateY(108%) rotate(3deg);transition:transform 1.1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*80ms + .3s)}
.split.in .w>span{transform:none}
/* reveal on scroll */
@media (scripting:enabled){
[data-r]{opacity:0;transform:translateY(34px) scale(.985);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*90ms)}
[data-r].in{opacity:1;transform:none}
}
.scribble{position:relative;display:inline-block;white-space:nowrap}
.scribble::after{content:"";position:absolute;left:-3%;right:-3%;bottom:-.16em;height:.34em;background:no-repeat center/100% 100% url("data:image/svg+xml;utf8,");clip-path:inset(0 100% 0 0);transition:clip-path 1.1s .5s cubic-bezier(.2,.8,.2,1)}
.in .scribble::after,.scribble.in::after{clip-path:inset(0 0 0 0)}
section.forest .scribble::after{filter:brightness(1.5)}
/* cards: tilt, glare and image zoom */
.act,.ev{--rx:0deg;--ry:0deg;transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .4s;will-change:transform}
.act:hover,.ev:hover{transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.02);box-shadow:0 30px 50px -28px rgba(30,20,8,.6)}
.act::before,.ev .img::before{content:"";position:absolute;inset:0;background:inherit;transform:scale(1);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.act:hover::before,.ev:hover .img::before{transform:scale(1.12)}
.ev .img{overflow:hidden}.ev .img .tag{z-index:2}
.act::after{z-index:1;background:linear-gradient(0deg,rgba(12,18,10,.88),rgba(12,18,10,0) 62%),radial-gradient(circle at var(--mx2,50%) var(--my2,0%),rgba(255,236,200,.22),transparent 45%)}
.act .t{z-index:2;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.act:hover .t{transform:translateY(-6px)}
.act .t p{max-height:0;opacity:0;overflow:hidden;transition:max-height .5s,opacity .5s,margin .5s;margin-top:0}
.act:hover .t p,.act:focus-visible .t p{max-height:90px;opacity:1;margin-top:6px}
@media (hover:none){.act .t p{max-height:none;opacity:1;margin-top:6px}}
.ev .foot span:last-child{transition:transform .35s}
.ev:hover .foot span:last-child{transform:translateX(5px)}
.ev .tag{transition:transform .4s}.ev:hover .tag{transform:translateY(-2px) rotate(-1.5deg)}
.zoomscroll{transform:scale(var(--z,1));transition:transform .15s linear;will-change:transform}
.zoomwrap{overflow:hidden;border-radius:3px}
/* word marquee */
.marquee{overflow:hidden;background:var(--forest);color:var(--parch);padding-block:20px;border-block:1px solid rgba(255,255,255,.08)}
.marquee .track{display:flex;width:max-content;animation:marq 38s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee span{font-family:var(--brush);font-size:clamp(34px,5vw,58px);padding-inline:26px;white-space:nowrap;display:inline-flex;align-items:center;gap:52px;line-height:1.1}
.marquee span::after{content:"";width:46px;height:40px;background:#E0A57C;-webkit-mask:url(/img/logo/figure-people-parchment.png) center/contain no-repeat;mask:url(/img/logo/figure-people-parchment.png) center/contain no-repeat}
@keyframes marq{to{transform:translateX(-50%)}}
/* photo mosaic */
.mosaic{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px;align-items:stretch}
.mosaic .zoomwrap{aspect-ratio:3/4;position:relative}
.mosaic .zoomwrap:nth-child(2){margin-top:46px}.mosaic .zoomwrap:nth-child(3){margin-top:-18px}
.mosaic figure{margin:0}
.mosaic img{width:100%;height:100%;object-fit:cover}
.mosaic figcaption{position:absolute;left:16px;bottom:14px;font-family:var(--hand);font-size:28px;color:var(--parch);text-shadow:0 2px 20px rgba(0,0,0,.6)}
@media(max-width:700px){.mosaic{grid-template-columns:1fr 1fr}.mosaic .zoomwrap:nth-child(1){grid-column:span 2;aspect-ratio:4/3}.mosaic .zoomwrap:nth-child(n){margin-top:0}}
/* intro: the peeps run in, dance and settle into the logo, over a blurred, darkened view of the site */
.intro{position:fixed;inset:0;z-index:100;display:none;place-items:center;overflow:hidden;background:rgba(8,12,7,.5);-webkit-backdrop-filter:blur(30px) saturate(.8);backdrop-filter:blur(30px) saturate(.8);cursor:pointer}
.intro::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(8,12,7,0) 35%,rgba(8,12,7,.6));pointer-events:none}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
.intro{display:grid;animation:introOut .9s ease 3.7s forwards}
.intro.skip{animation:introOut .4s ease 0s forwards}
html:has(.intro){overflow:hidden}
}
.intro .stage{position:relative;width:min(560px,78vw);animation:stageOut .9s cubic-bezier(.5,0,.2,1) 3.7s forwards}
.intro .l{position:absolute;display:block}
.intro .l img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 6px 22px rgba(0,0,0,.35))}
.intro .l.word{animation:wordin .9s cubic-bezier(.2,.8,.2,1) var(--d) both}
.intro .l.run{animation:drop .7s cubic-bezier(.3,1.3,.5,1) var(--d) both}
.intro .l.run img{animation:dance .8s ease-in-out calc(var(--d) + 1.2s) 3 alternate}
.intro .l.fin{animation:wordin .7s ease var(--d) both}
.intro .l.tag{animation:wordin .8s ease var(--d) both}
@keyframes drop{from{transform:translateY(-45vh);opacity:0}25%{opacity:1}to{transform:none;opacity:1}}
@keyframes dance{0%{transform:none}50%{transform:translateY(-1.4vh) rotate(7deg)}100%{transform:rotate(-5deg)}}
@keyframes wordin{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@keyframes introOut{to{opacity:0;-webkit-backdrop-filter:blur(0) saturate(1);backdrop-filter:blur(0) saturate(1);visibility:hidden}}
@keyframes stageOut{to{transform:scale(1.14);opacity:0;filter:blur(8px)}}
/* custom cursor */
.cur{position:fixed;left:0;top:0;pointer-events:none;z-index:90;mix-blend-mode:normal;opacity:0;transition:opacity .3s}
.cur.on{opacity:1}
.cur .dot{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--clay)}
.cur .ring{position:absolute;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;border:1.5px solid rgba(154,91,59,.7);transition:width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1),margin .35s cubic-bezier(.2,.8,.2,1),background .3s,border-color .3s}
.cur.hover .ring{width:74px;height:74px;margin:-37px 0 0 -37px;background:rgba(154,91,59,.14)}
.cur.card .ring{width:92px;height:92px;margin:-46px 0 0 -46px;background:rgba(239,231,211,.85);border-color:transparent}
.cur .lbl{position:absolute;transform:translate(-50%,-50%);font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--forest);opacity:0;transition:opacity .25s}
.cur.card .lbl{opacity:1}
@media (hover:none),(pointer:coarse){.cur{display:none}}
/* stick figures that pop when someone books */
.pop{position:fixed;z-index:95;pointer-events:none;width:46px;height:40px;background:var(--clay);-webkit-mask:url(/img/logo/figure-people-parchment.png) center/contain no-repeat;mask:url(/img/logo/figure-people-parchment.png) center/contain no-repeat;animation:pop 1.1s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes pop{0%{transform:translate(0,0) scale(.2) rotate(0);opacity:1}60%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1.1) rotate(var(--rot));opacity:0}}
/* the booking card breathes a little so it is easy to find */
.book{transition:box-shadow .4s,transform .4s}
.book:hover{box-shadow:0 30px 56px -28px rgba(40,28,10,.65)}
.chip{transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s,color .25s}
.chip:hover{transform:translateY(-2px) rotate(-1deg)}
details.acc summary{transition:color .25s,padding-left .3s}
details.acc summary:hover{color:var(--clay);padding-left:6px}
details.acc[open]>.a{animation:accin .5s cubic-bezier(.2,.8,.2,1)}
@keyframes accin{from{opacity:0;transform:translateY(-8px)}}
.ticks li{transition:transform .3s}.ticks li:hover{transform:translateX(6px)}
.person .ph{transition:transform .6s cubic-bezier(.2,.8,.2,1)}.person:hover .ph{transform:scale(1.07) rotate(-3deg)}
footer.site a{transition:color .25s,transform .25s;display:inline-block}footer.site a:hover{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
[data-r]{opacity:1!important;transform:none!important}
.split .w>span{transform:none!important}
.scribble::after{clip-path:none!important}
.intro,.cur,.progress{display:none!important}
}