/* Keep the supplied mark intact. Black blends away on dark surfaces;
   its inverse blends away on the paper header. */
.logo{background:transparent;mix-blend-mode:screen}
.header .logo{mix-blend-mode:multiply}
.header .logo img{filter:invert(1)}
.brand .logo{transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.brand:hover .logo{transform:rotate(-4deg)}

.booking{isolation:isolate;background:radial-gradient(ellipse at 10% 75%,#244c3a 0,transparent 54%),var(--green)}
.booking-intro{display:flex;flex-direction:column;align-items:flex-start}
.booking-intro>h2,.booking-intro>p,.booking-intro>a,.booking-intro>.small{position:relative;z-index:2}
.sakura-scene{position:relative;align-self:stretch;aspect-ratio:1.45;min-height:290px;margin:12px -9% -32px;pointer-events:none;isolation:isolate;mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 78%,transparent 100%)}
.sakura-branch{display:block;width:100%;height:100%;object-fit:contain;opacity:.8;transform-origin:18% 82%;animation:branch-breathe 12s ease-in-out infinite;animation-play-state:paused}
.petals{position:absolute;inset:0;overflow:hidden;mask-image:linear-gradient(180deg,#000 65%,transparent 100%)}
.petal{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:calc(var(--size)*1.35);object-fit:contain;opacity:0;animation:petal-fall var(--duration) linear infinite;animation-delay:var(--delay);animation-play-state:paused;will-change:transform,opacity}
.sakura-scene.is-active .sakura-branch,.sakura-scene.is-active .petal{animation-play-state:running}
.button{transition:background .35s,transform .35s,box-shadow .35s}
.button:hover{box-shadow:0 6px 18px #061c1314}
.button span,.text-link span{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.button:hover span,.text-link:hover span{transform:translate(3px,-3px)}
input,textarea,select{transition:border-color .3s,background .3s,box-shadow .3s}
input:focus,textarea:focus,select:focus{background:#2a523f;box-shadow:0 0 0 5px #d2dfbb0b}
.work img{transition:filter .6s,translate .6s cubic-bezier(.2,.7,.2,1)}
.work:hover img{translate:0 -5px}
dialog[open]{animation:dialog-enter .32s cubic-bezier(.2,.7,.2,1)}
dialog[open]::backdrop{animation:backdrop-enter .32s ease}
@keyframes branch-breathe{0%,100%{transform:rotate(-.7deg) translateY(0)}50%{transform:rotate(.9deg) translateY(-3px)}}
@keyframes petal-fall{
 0%{opacity:0;transform:translate3d(0,0,0) rotate(0deg) rotateY(0deg)}
 9%{opacity:.72}
 30%{transform:translate3d(calc(var(--drift)*.3 + 12px),65px,0) rotate(65deg) rotateY(70deg)}
 58%{opacity:.65;transform:translate3d(calc(var(--drift)*.55 - 12px),140px,0) rotate(145deg) rotateY(160deg)}
 80%{opacity:.38;transform:translate3d(calc(var(--drift)*.85 + 8px),210px,0) rotate(230deg) rotateY(235deg)}
 100%{opacity:0;transform:translate3d(var(--drift),285px,0) rotate(310deg) rotateY(310deg)}
}
@keyframes dialog-enter{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes backdrop-enter{from{opacity:0}to{opacity:1}}
@media(max-width:760px){.sakura-scene{display:block;min-height:0;aspect-ratio:1.55;width:100%;margin:4px 0 -36px}.booking-grid{gap:26px}.booking-intro>p{max-width:34em}.petal{max-width:36px}.header nav.open{animation:dialog-enter .28s ease-out}}
@media(prefers-reduced-motion:reduce){.sakura-branch,.petal,dialog[open],dialog[open]::backdrop,.header nav.open{animation:none!important}.petals{display:none}.brand:hover .logo,.work:hover img{transform:none;translate:none}}