@import url('../v05/home.css');

/* Animate the art, never the button or the camera anchor. */
.island-visual{position:absolute;inset:0;display:block;pointer-events:none;animation:island-float var(--float-duration,8s) ease-in-out var(--float-delay,0s) infinite;transform-origin:50% 60%}
.island-visual>img{display:block}
@keyframes island-float{0%,100%{transform:translateY(4px) rotate(-.25deg)}50%{transform:translateY(-7px) rotate(.25deg)}}
.mam-scene{position:absolute;inset:0;display:block;pointer-events:none;opacity:0}
.island-visual[data-live=true]>.mam-scene{opacity:1}
.island-visual[data-live=true]>img{visibility:hidden}
.mam-scene svg{fill:black;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter}
.screen[data-motion=paused] .island-visual{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.island-visual{animation:none;transform:none}}

/* iPhone: avoid giant composited image/grid surfaces. */
.terrain-viewport{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.world{background:transparent;will-change:auto}
.world:before{display:none}
.miniature .terrain{display:block}
.terrain-tile{position:absolute;background:url('../../assets/world-terrain-v02.png') center/100% 100% no-repeat}
.mam-scene{transition:opacity 180ms ease-out}
@media(max-width:600px){.island-label{bottom:204px}}
@media(prefers-reduced-motion:reduce){.mam-scene{transition:none}}
/* Cross-fade from the decoded snapshot without a blank first frame. */
.island-visual>img{transition:opacity 180ms ease-out}
.island-visual[data-live=true]>img{visibility:visible;opacity:0}
@media(prefers-reduced-motion:reduce){.island-visual>img{transition:none}}

/* Center the fixed landmass, not the frame including the ferry travel corridor. */
#dao-mam-xanh .island-visual>img,#dao-mam-xanh .mam-scene{transform:translateX(var(--land-offset))}
#dao-mam-xanh .mx-stage,#dao-mam-xanh .mx-stage>svg{overflow:visible}

/* Travel with one bitmap: remove SVG/WebGL surfaces from compositing entirely. */
.mam-scene[data-render=flat]{display:none}
.screen[data-travel=true] #dao-mam-xanh .island-visual>img{opacity:1;transition:none}

/* Explicit icon centering avoids native Safari button/grid padding offsets. */
#btn-chuyen-dong{appearance:none;-webkit-appearance:none;padding:0;display:block;line-height:0}
#btn-chuyen-dong>svg{position:absolute;left:50%;top:50%;width:24px;height:24px;margin:0;display:block;transform:translate(-50%,-50%);pointer-events:none}