/* Water, time and original artwork form the motion system. Text does not drift. */
.water-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;contain:strict}.water-atmosphere *{pointer-events:none}.hero>.water-atmosphere{z-index:0}.water-caustics{position:absolute;inset:-35%;opacity:.32;background:repeating-radial-gradient(ellipse at 35% 45%,transparent 0 65px,#ffffffc9 68px 69px,transparent 73px 125px);filter:blur(2px);transform:rotate(-18deg) scale(1.1);animation:caustic-drift 28s ease-in-out infinite;mask-image:linear-gradient(transparent,#0008 35%,#000,transparent)}.caustics-second{opacity:.15;transform:rotate(24deg) scale(.85);animation:caustic-drift-reverse 32s ease-in-out infinite;background-size:115% 90%;inset:-20% -35%}.ambient-bubble{position:absolute;bottom:-90px;left:var(--bubble-x);width:var(--bubble-size);height:var(--bubble-size);border:1px solid #ffffffba;border-radius:50%;background:radial-gradient(circle at 28% 23%,#fff9 0 4%,transparent 14%),radial-gradient(circle at 70% 75%,transparent 25%,#a8dff527 65%,#fff5);box-shadow:inset 0 -4px 12px #84cee42e,0 0 12px #b8eaff22;animation:ambient-rise var(--bubble-time) linear infinite;animation-delay:var(--bubble-delay)}.bubble-0{--bubble-x:6%;--bubble-size:21px;--bubble-time:21s;--bubble-delay:-4s}.bubble-1{--bubble-x:17%;--bubble-size:47px;--bubble-time:32s;--bubble-delay:-21s}.bubble-2{--bubble-x:31%;--bubble-size:11px;--bubble-time:23s;--bubble-delay:-16s}.bubble-3{--bubble-x:43%;--bubble-size:28px;--bubble-time:28s;--bubble-delay:-8s}.bubble-4{--bubble-x:61%;--bubble-size:14px;--bubble-time:22s;--bubble-delay:-5s}.bubble-5{--bubble-x:74%;--bubble-size:38px;--bubble-time:31s;--bubble-delay:-23s}.bubble-6{--bubble-x:89%;--bubble-size:19px;--bubble-time:26s;--bubble-delay:-12s}.bubble-7{--bubble-x:96%;--bubble-size:61px;--bubble-time:35s;--bubble-delay:-29s}.tide-orbit{position:absolute;width:540px;height:540px;border:1px solid #7cb9d344;border-radius:50%;box-shadow:0 0 0 14px #ffffff14,0 0 0 38px #ffffff12;animation:tide-rotation 95s linear infinite}.tide-orbit:after{content:'';position:absolute;inset:28px;border:1px dashed #5190b228;border-radius:50%}.tide-orbit i{position:absolute;left:50%;top:-5px;width:10px;height:10px;background:#dfc386;border:2px solid #fffa;border-radius:50%;box-shadow:0 0 12px #fff8}.orbit-one{left:-340px;top:90px}.orbit-two{right:-250px;bottom:-320px;width:680px;height:680px;animation-direction:reverse;animation-duration:120s}.page-mast .water-caustics{opacity:.15}.page-mast .orbit-one{width:350px;height:350px;left:60%;top:-230px}.page-mast .orbit-two{right:-180px;bottom:-400px}.page-mast .ambient-bubble{animation-name:mast-rise;opacity:.7}.waterline{position:absolute;left:0;right:0;top:-22px;height:48px;overflow:hidden;pointer-events:none;z-index:0}.waterline svg{width:100%;height:100%;overflow:visible}.waterline path{fill:none;stroke:#72b9d848;stroke-width:1.2;animation:waterline-drift 12s ease-in-out infinite}.waterline path+path{stroke:#d3b98055;stroke-width:.7;animation-direction:reverse;animation-duration:17s}.tinted>.container,.site-footer>.footer-top,.site-footer>.footer-bottom{position:relative;z-index:1}
.motion-reveal{opacity:0;translate:0 22px;transition:opacity .65s ease,translate .8s cubic-bezier(.16,1,.3,1)}.motion-reveal.motion-in-view,.motion-reveal:focus-within{opacity:1;translate:0 0}
.hero-person.illustration-drift{animation:hero-art-appear .65s ease-out both,artwork-drift 8s ease-in-out infinite;will-change:translate}.right-person.illustration-drift{animation-duration:.65s,9.2s;animation-delay:0s,-3.5s}.illustration-note>img.illustration-drift,.mini-art>img.illustration-drift,.packing-art.illustration-drift,.contact-art.illustration-drift,.bottom-guide>img.illustration-drift{animation:artwork-drift 9s ease-in-out infinite;animation-delay:-2s}.staff-avatar.illustration-drift{animation:avatar-drift 10s ease-in-out infinite}.staff-grid article:nth-child(2) .staff-avatar{animation-delay:-3s}.staff-grid article:nth-child(3) .staff-avatar{animation-delay:-7s}
.motion-card{transition:translate .32s cubic-bezier(.2,.7,.2,1),box-shadow .32s,border-color .32s}.site-header .icon-button{transition:background .2s,scale .25s,border-color .25s}.site-header .icon-button:hover{scale:1.07;border-color:#6eafcc}.site-header nav a>.ui-icon{transition:rotate .3s,translate .3s}.site-header nav a:hover>.ui-icon{rotate:-9deg;translate:0 -2px}.site-header nav a:active>.ui-icon{rotate:4deg;translate:0 1px}.button:active,.icon-button:active{scale:.97}.text-link,.text-button{transition:color .2s,translate .25s}.text-link:hover{translate:3px 0}.news-row{transition:background .25s}.faq-item summary{transition:background .25s,color .25s}.faq-item summary:hover{color:var(--blue);background:var(--surface)}.gallery-image:before{transition:border-color .35s}.gallery-image:hover:before{border-color:#c4a66f}.service-buttons button:hover{border-color:#71b6d5;box-shadow:inset 4px 0 #71b6d5}.water-clock svg .falling-drop{animation-duration:2.4s}.scroll-label span{animation:scroll-drop 2.4s ease-in-out infinite}
@media(hover:hover) and (pointer:fine){.motion-card:is(:hover,.lift-hold){translate:0 -5px;box-shadow:0 16px 35px #24557817;border-color:#71b6d5}.motion-card:active{translate:0 -1px}.gallery-image:hover img{transform:translateY(-5px) rotate(2deg) scale(1.025)}}
.floating-top{position:fixed;bottom:max(24px,env(safe-area-inset-bottom));right:max(22px,env(safe-area-inset-right));width:54px;height:54px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink);z-index:90;box-shadow:0 6px 24px #16446726;transition:translate .25s,box-shadow .25s}.floating-top svg{width:100%;height:100%;overflow:visible}.top-track{fill:none;stroke:var(--line);stroke-width:1}.top-progress{fill:none;stroke:#bd9d62;stroke-width:2.3;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--page-progress,0));transform:rotate(-90deg);transform-origin:center}.top-arrow{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.floating-top:is(:hover,.lift-hold){translate:0 -4px;box-shadow:0 10px 30px #16446730}.floating-top:active{translate:0 -1px}.interaction-ripple{position:fixed;width:18px;height:18px;margin:-9px;z-index:1000;pointer-events:none;border:1.5px solid #55a8cf;border-radius:50%;box-shadow:0 0 0 5px #fff5,inset 0 0 12px #89deff44;animation:control-ripple .8s cubic-bezier(.1,.65,.2,1) forwards}
.motion-asleep,.motion-asleep *,.motion-asleep:before,.motion-asleep:after,.motion-asleep *:before,.motion-asleep *:after,.motion-tab-hidden *,.motion-tab-hidden *:before,.motion-tab-hidden *:after{animation-play-state:paused!important}
[data-theme=dark] .water-caustics{opacity:.1}[data-theme=dark] .caustics-second{opacity:.07}[data-theme=dark] .ambient-bubble{border-color:#9edff86b;background:radial-gradient(circle at 28% 23%,#c4efff66 0 4%,transparent 14%),radial-gradient(circle at 70% 75%,transparent 25%,#a8dff512 65%,#a8e9ff30)}[data-theme=dark] .tide-orbit{border-color:#6ab4d52b;box-shadow:0 0 0 14px #70caff05,0 0 0 38px #70caff05}[data-theme=dark] .tide-orbit i{background:#c2a366;border-color:#203c53}[data-theme=dark] .motion-card:is(:hover,.lift-hold){box-shadow:0 18px 38px #0003}[data-theme=dark] .floating-top{box-shadow:0 6px 25px #0005}
[data-contrast=high] .water-atmosphere{opacity:.28}[data-contrast=high] .waterline{opacity:.4}[data-contrast=high] .floating-top{border:2px solid var(--ink)}[data-contrast=high] .motion-card{border-color:var(--line)}
[data-motion=off] .motion-reveal{opacity:1!important;translate:none!important}[data-motion=off] .water-caustics{opacity:.09}[data-motion=off] .ambient-bubble{display:none}[data-motion=off] .interaction-ripple{display:none}[data-motion=off] .hero-person.illustration-drift,[data-motion=off] .illustration-drift{translate:none!important}
@keyframes hero-art-appear{from{opacity:0}to{opacity:1}}
@keyframes artwork-drift{0%,100%{translate:0 0}45%{translate:0 -11px}70%{translate:2px -5px}}
@keyframes avatar-drift{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes caustic-drift{0%,100%{transform:rotate(-18deg) scale(1.1) translate(-2%,0)}50%{transform:rotate(-9deg) scale(1.18) translate(3%,3%)}}
@keyframes caustic-drift-reverse{0%,100%{transform:rotate(24deg) scale(.85) translate(0,2%)}50%{transform:rotate(16deg) scale(.94) translate(-2%,-3%)}}
@keyframes ambient-rise{0%{transform:translate(0,0) scale(.8);opacity:0}10%{opacity:.65}80%{opacity:.55}100%{transform:translate(26px,-880px) scale(1.1);opacity:0}}
@keyframes mast-rise{0%{transform:translate(0,0) scale(.8);opacity:0}10%{opacity:.65}80%{opacity:.55}100%{transform:translate(26px,-420px) scale(1.1);opacity:0}}
@keyframes tide-rotation{to{transform:rotate(360deg)}}
@keyframes waterline-drift{0%,100%{transform:translateX(-6%)}50%{transform:translateX(6%)}}
@keyframes scroll-drop{0%,100%{translate:0 -3px;opacity:.6}50%{translate:0 5px;opacity:1}}
@keyframes control-ripple{0%{transform:scale(.8);opacity:.9}100%{transform:scale(4.5);opacity:0}}
@container site (max-width:600px){.water-caustics{filter:none;opacity:.2}.ambient-bubble:nth-of-type(n+6){display:none}.tide-orbit{opacity:.7}.waterline{height:35px;top:-16px}.waterline svg{height:35px}.hero-person.illustration-drift{animation-name:hero-art-appear,artwork-drift-small}}
@keyframes artwork-drift-small{0%,100%{translate:0 0}50%{translate:0 -6px}}
@media(max-width:600px){.floating-top{right:14px;bottom:max(18px,env(safe-area-inset-bottom));width:47px;height:47px}}
@media print{.water-atmosphere,.waterline,.floating-top,.interaction-ripple{display:none!important}.motion-reveal{opacity:1!important;translate:none!important}.motion-scene *{animation:none!important}}

/* Same-origin page changes get a short crossfade where supported. No routing shim. */
@view-transition{navigation:auto}
.site-header{view-transition-name:site-header}
::view-transition-group(root),::view-transition-group(site-header){animation-duration:.18s;animation-timing-function:ease-out}
::view-transition-old(root){animation:page-fade-out .14s ease-out both}
::view-transition-new(root){animation:page-fade-in .18s ease-out both}
::view-transition-old(site-header){display:none}
::view-transition-new(site-header){animation:none}
@keyframes page-fade-out{to{opacity:0}}
@keyframes page-fade-in{from{opacity:0}}
:root[data-motion=off]::view-transition-group(*),:root[data-motion=off]::view-transition-old(*),:root[data-motion=off]::view-transition-new(*){animation:none!important}
:root[data-motion=off]::view-transition-old(root){display:none}
:root[data-motion=off] .hero-person{will-change:auto}
@media(prefers-reduced-motion:reduce){
  :root:not([data-motion=on]) .hero-person.illustration-drift{animation:none!important;translate:none!important;opacity:1;will-change:auto}
  :root:not([data-motion=on])::view-transition-group(*),:root:not([data-motion=on])::view-transition-old(*),:root:not([data-motion=on])::view-transition-new(*){animation:none!important}
  :root:not([data-motion=on])::view-transition-old(root){display:none}
}
/* 2026-10-18 phone: decorative layers (clock aura, ripples, orbits) must never create a horizontal scrollbar. overflow-x:clip does not make a scroll container, so the sticky header keeps working. */
#site-frame,.time-and-tide,.clock-assembly{overflow-x:clip}body{overflow-x:clip}