/* Above-water surf world. Only the original high-quality renders supply objects. */
.premium-lineup{position:fixed;inset:0;z-index:1;margin:0;overflow:hidden;opacity:0;pointer-events:none;background:#075170;transition:opacity .7s;transform-origin:60% 50%}
/* Match the *visible* viewport as mobile browser chrome retracts. The artwork,
   shimmer, airplane and hit-map all use this same cover plane. */
:root{--shore-vh:100vh}
@supports(height:100dvh){:root{--shore-vh:100dvh}}
.shore-plane{position:absolute;width:calc(max(100vw,var(--shore-vh)*1.5) + 2px);height:calc(max(66.666667vw,var(--shore-vh)) + 2px);left:50%;top:50%;transform:translate(-50%,-50%);max-width:none;max-height:none}
.premium-lineup img{object-fit:fill}
.waikiki-flight-sky{overflow:hidden;clip-path:polygon(56% 10%,100% 10%,100% 20%,56% 20%);opacity:0}
body[data-place=ocean] .waikiki-flight-sky{opacity:1}
.waikiki-flight{position:absolute;inset:0;transform-origin:0 0;animation:waikiki-departure 30s linear infinite;animation-delay:-5s;will-change:transform}
.waikiki-flight img{display:block;width:6.5%;height:auto;object-fit:contain;max-width:none;opacity:.83}
/* Use the clear sky over the far shore, below the image edge and above the skyline. */
@keyframes waikiki-departure{0%{transform:translate(57%,13.5%);opacity:0}12%{opacity:1}90%{opacity:1}100%{transform:translate(104%,12.5%);opacity:0}}
body:not([data-place=ocean]) .waikiki-flight,body[data-motion=paused] .waikiki-flight,.detail-open .waikiki-flight{animation-play-state:paused}
body:is([data-place=ocean],[data-place=corporate],[data-place=service],[data-place=private]) .premium-lineup{opacity:1}
.scroll-diving .premium-lineup{transition:none}
.surface-shimmer{background:url('assets/waikiki-lineup-v3.webp') center/100% 100%;mask-image:linear-gradient(transparent 46%,#0008 68%,#000b);mix-blend-mode:screen;opacity:.12;animation:surface-light 12s ease-in-out infinite;transform-origin:50% 75%}
@keyframes surface-light{0%,100%{transform:translate(-50%,-50%) scale(1.01)}50%{transform:translate(-49%,-49.7%) scale(1.025)}}
body[data-place=ocean] .screen-tone{background:linear-gradient(0deg,#021a2ae8,transparent 58%),linear-gradient(90deg,#03162477,transparent 62%),linear-gradient(180deg,#031b3766,transparent 19%)}
body[data-place=ocean] .scene-copy{top:53%;max-width:440px}
body[data-place=ocean] .scene-copy h1{font-size:clamp(60px,6.5vw,100px)}
body[data-place=ocean] .scene-caption{max-width:280px;color:#e1f5ff}
.surf-hub{isolation:isolate}
.shore-map{pointer-events:none}
.shore-destination{position:absolute;pointer-events:auto;padding:0;border-radius:12px;min-width:90px;min-height:65px;touch-action:manipulation;z-index:4;color:#fff}
.garage-destination{left:25%;top:19%;width:18%;height:18%}
.deck-destination{left:62%;top:24%;width:15%;height:13%}
.shore-label{position:absolute;left:50%;bottom:0;transform:translate(-50%,80%);font:600 17px/1.4 var(--display);letter-spacing:.13em;white-space:nowrap;text-shadow:0 2px 8px #001527,0 0 16px #001527}
.shore-label>span{font-size:14px;color:#a0e3ff;letter-spacing:0}
.shore-label small{display:block;font:400 14px/1.5 var(--font);letter-spacing:.04em;margin-top:4px;color:#d8f1ff}
.shore-destination:focus-visible,.surf-entry:focus-visible,.garage-target:focus-visible{outline:2px solid #c0efff;outline-offset:5px}
.shore-destination:hover .shore-label{color:#b5edff}
.board-sprite{display:block;width:100%;aspect-ratio:1;background:url('assets/surfboards-atlas-v1.webp') 0 0/200% 200% no-repeat;filter:drop-shadow(0 13px 8px #002e4359)}
.board-two{background-position:100% 0}.board-three{background-position:0 100%}.board-four{background-position:100% 100%}
.surf-entry{position:absolute;left:64%;top:72%;width:clamp(220px,27vw,370px);transform:translate(-50%,-50%);padding:0;pointer-events:auto;touch-action:manipulation;border-radius:45%;color:#fff;z-index:4}
.floating-board{display:block;animation:board-swell 7s ease-in-out infinite;transform-origin:50% 60%}
@keyframes board-swell{0%,100%{transform:translate(-7px,5px) rotate(-2deg)}50%{transform:translate(8px,-7px) rotate(2deg)}}
.surf-entry-label{position:absolute;left:52%;top:72%;transform:translateX(-50%);font:600 24px/1.3 var(--display);letter-spacing:.16em;white-space:nowrap;text-shadow:0 2px 10px #003346}
.surf-entry-label>span{font-size:16px;color:#bfefff}
.surf-entry-label small{display:block;font:400 14px/1.8 var(--font);letter-spacing:.03em;margin-top:5px}
.surf-entry:hover .floating-board,.surf-entry:focus .floating-board,.surf-entry:active .floating-board{animation-play-state:paused}
.surf-hub .ocean-school{inset:66% 5vw 14%;opacity:.24;filter:blur(.5px) saturate(.45);mix-blend-mode:soft-light;mask-image:linear-gradient(transparent,#000 20%,#000 75%,transparent);z-index:1}
.surf-hub .distant-fish{max-width:65px}
.life-sprite{display:block;aspect-ratio:1;background:url('assets/surf-life-atlas-v1.webp') 0 0/200% 200% no-repeat}
.beach-flag{position:absolute;left:43%;top:27%;width:5%;background-position:0 100%;transform-origin:30% 90%;animation:beach-breeze 4s ease-in-out infinite;opacity:.85}
@keyframes beach-breeze{0%,100%{transform:skewX(-1deg)}50%{transform:skewX(3deg)}}

/* Corporate is the same shore seen from the surf garage. */
body[data-place=corporate] .screen-tone{background:linear-gradient(90deg,#031524f2,transparent 72%),linear-gradient(0deg,#021420,transparent 28%)}
body[data-place=corporate] .premium-lineup img{opacity:.25;filter:blur(7px)}
body[data-place=corporate] .surface-shimmer{display:none}
.surf-garage{inset:150px 5vw 118px 43vw}
.garage-target{position:relative;width:100%;height:100%;padding:0;pointer-events:auto;isolation:isolate;border-radius:20%;color:#fff}
.garage-art{position:absolute;inset:-12%;background:url('assets/waikiki-lineup-v3.webp') 24% 24%/320% auto no-repeat;mask-image:radial-gradient(ellipse,#000 27%,#000b 52%,transparent 72%);transition:transform .7s}
.garage-target:hover .garage-art{transform:scale(1.025)}
.garage-target .landmark-caption{bottom:7%}
body[data-place=corporate] .company-signature{bottom:18vh}

/* Services are four boards, not floating dashboard cards. */
body[data-place=service] .screen-tone{background:linear-gradient(90deg,#032031f0,#032b436b 70%),linear-gradient(0deg,#031825,transparent 35%)}
.surf-services .service-current{display:none}
.surf-services .portal-object{width:min(var(--portal-size),calc(100% - 24px));height:auto;aspect-ratio:1;margin:0 auto 16px;animation:board-swell 7s ease-in-out infinite}
.surf-services .service-portal:nth-of-type(2) .portal-object{animation-duration:8.3s;animation-delay:-3s}
.surf-services .service-portal:nth-of-type(3) .portal-object{animation-duration:7.7s;animation-delay:-5s}
.surf-services .service-portal:nth-of-type(4) .portal-object{animation-duration:9s;animation-delay:-1.5s}
.surf-services .portal-brand{top:52%;width:46%;height:22%;padding:5px;border-radius:6px;background:#eaf7f5e8;box-shadow:0 3px 12px #073d4c19;transform:translate(-50%,-50%) rotate(-43deg)}
.surf-services .portal-brand img{width:100%;max-height:34px}
.surf-services .portal-wordmark{font-size:24px}
.surf-services .sns-wordmark>span{font-size:14px}
.surf-services .portal-index{color:#d1effb;text-shadow:0 1px 7px #001a2e}
.surf-services .portal-note{color:#d1e8ef;text-shadow:0 1px 7px #001a2e}
.surf-services .service-portal strong{color:#f1fbff;text-shadow:0 1px 7px #001a2e}
.surf-services .service-portal:hover .portal-object,.surf-services .service-portal:focus .portal-object,.surf-services .service-portal:active .portal-object{animation-play-state:paused;filter:drop-shadow(0 0 20px #93e6f744)}
.text-view .premium-lineup,.world-failed .premium-lineup{display:none}
body[data-motion=paused] :is(.surface-shimmer,.floating-board,.beach-flag,.surf-services .portal-object),.detail-open :is(.surface-shimmer,.floating-board,.beach-flag,.surf-services .portal-object){animation-play-state:paused}
body[data-motion=paused] .premium-lineup{transition:none}

@media(max-width:1100px) and (min-width:901px){.surf-entry{left:67%;width:270px}.shore-label{font-size:15px}.shore-label small{font-size:14px}}
@media(min-width:901px) and (max-height:750px){body[data-place=ocean] .scene-copy{top:52%}body[data-place=ocean] .scene-copy h1{font-size:66px}body[data-place=ocean] .scene-caption{display:none}body[data-place=ocean] .explore-hint{margin-top:20px}}
@media(max-width:900px){
 body[data-place=ocean] .scene-copy{top:100px;left:24px;right:24px;max-width:none}
 body[data-place=ocean] .scene-copy h1{font-size:clamp(43px,8vw,65px)}
 body[data-place=ocean] .scene-caption{display:none}
 body[data-place=ocean] .screen-tone{background:linear-gradient(180deg,#03182dcd,transparent 33%,transparent 81%,#03172580)}
 .premium-lineup img{mask-image:none}
 .surface-shimmer{opacity:.1}
 .shore-label{font-size:16px;letter-spacing:.08em}.shore-label small{font-size:14px}
 .shore-destination{min-width:82px;min-height:58px}
 .shore-label{bottom:-5%;transform:translate(-50%,100%)}
 .surf-entry{left:53%;top:71%;width:280px}
 .surf-entry-label{font-size:23px}
 .surf-hub .ocean-school{inset:65% 20px 18%;opacity:.27}
 .surf-garage{inset:218px 15px 143px}
 .garage-art{inset:-6%;background-size:330% auto;background-position:26% 24%;mask-image:radial-gradient(ellipse,#000 32%,#000b 57%,transparent 75%)}
 .garage-target .landmark-caption{bottom:14%}
 body[data-place=corporate] .company-signature{bottom:0;left:20px}
 .surf-services .portal-brand{width:49%;height:22%;padding:4px}
 .surf-services .portal-brand img{max-height:26px}.surf-services .portal-wordmark{font-size:21px}
 .surf-services .sns-wordmark>span{font-size:12px}
}
@media(max-width:600px) and (orientation:portrait){
 body[data-place=ocean] .scene-copy{top:94px;left:22px;right:22px}
 body[data-place=ocean] .scene-copy h1{font-size:clamp(38px,11.5vw,50px)}
 body[data-place=ocean] .explore-hint{font-size:14px;margin-top:13px;letter-spacing:0}
 .shore-label{font-size:14px;letter-spacing:.06em}
 .shore-label small{font-size:12px;letter-spacing:0}
 .surf-entry{top:72%;width:245px}
 .surf-entry-label{top:71%;font-size:22px;letter-spacing:.12em}
 .surf-entry-label small{font-size:14px}
 .surf-garage{inset:205px 8px 145px}
 .garage-target .landmark-caption{bottom:24%;font-size:14px;right:8px;left:auto;transform:none;align-items:flex-end}
 .surf-services .portal-brand{width:50%;height:22%;padding:3px}
 .surf-services .portal-brand img{max-height:22px}
 .surf-services .portal-wordmark{font-size:19px}
}
@media(max-width:600px) and (orientation:portrait) and (max-height:740px){
 body[data-place=ocean] .scene-copy{top:87px}
 body[data-place=ocean] .scene-copy h1{font-size:36px}
 body[data-place=ocean] .explore-hint{max-width:260px;line-height:1.5;margin-top:10px}
 .surf-entry{top:68%;width:180px}
 .surf-entry-label{font-size:18px;top:70%}.surf-entry-label small{font-size:12px}
 .shore-label small{display:none}
 .surf-services .portal-wordmark{font-size:16px}.surf-services .sns-wordmark>span{font-size:12px}
}
@media(max-width:900px) and (orientation:landscape){
 .shore-plane{top:50%;transform:translate(-50%,-50%)}
 .surface-shimmer{animation-name:surface-light}
 .premium-lineup img{mask-image:none}
 body[data-place=ocean] .scene-copy{top:auto;bottom:132px;max-width:250px}
 body[data-place=ocean] .scene-copy h1{font-size:32px}
 body[data-place=ocean] .explore-hint{display:none}
 .shore-label{font-size:14px}.shore-label small{display:none}
 .surf-entry{left:69%;top:52%;width:150px}.surf-entry-label{font-size:18px;top:73%}.surf-entry-label small{display:none}
 .surf-garage{inset:60px 12px 123px 39%}
 .garage-art{background-size:180% auto;background-position:25% 25%}
 .garage-target .landmark-caption{bottom:2%;font-size:14px}
 .surf-services .portal-brand{width:54%}.surf-services .portal-wordmark{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.premium-lineup{transition:none}.surface-shimmer,.floating-board,.beach-flag,.surf-services .portal-object{animation:none!important}}
@media(forced-colors:active){.shore-label,.surf-entry-label{background:Canvas;color:CanvasText;text-shadow:none}.shore-destination,.surf-entry,.garage-target{border:1px solid ButtonText}}

/* A dedicated 4:7 composition fills the complete phone viewport with real water. */
@media(max-width:900px) and (orientation:portrait){
 .shore-plane{width:calc(max(100vw,var(--shore-vh)*.57142857) + 2px);height:calc(max(175vw,var(--shore-vh)) + 2px);top:50%;transform:translate(-50%,-50%)}
 .surface-shimmer{background-image:url('assets/waikiki-lineup-mobile-v3.webp')}
 .garage-destination{left:7%;top:29%;width:35%;height:11%}
 .deck-destination{left:68%;top:34%;width:23%;height:6%}
 .shore-label{bottom:-5%;transform:translate(-50%,110%)}
 .beach-flag{display:none}
 .waikiki-flight-sky{clip-path:polygon(71% 22%,100% 22%,100% 30%,71% 30%)}
 .waikiki-flight{animation-name:waikiki-departure-mobile;animation-duration:24s;animation-delay:-4s}
 .waikiki-flight img{width:8%}
}
@keyframes waikiki-departure-mobile{0%{transform:translate(73%,25%);opacity:0}12%{opacity:1}90%{opacity:1}100%{transform:translate(104%,24%);opacity:0}}
@media(prefers-reduced-motion:reduce){.waikiki-flight{animation:none;transform:translate(72%,13.2%)}}
@media(prefers-reduced-motion:reduce) and (max-width:900px) and (orientation:portrait){.waikiki-flight{transform:translate(79%,24.8%)}}