/* Homepage sea layers and live motion, with a stationary skerry added behind them.
   Heights: /assets/mockup/v9-loki/logbook.css; vessel geometry/motion: /assets/mockup/v9-loki/refinements.css. */
.bonus-sea{margin:0;scroll-margin-top:var(--route-offset)}
.bonus-sea .sea-scene{height:220px;margin:0}
.bonus-sea .sea-stage .vessel{inset:auto auto 30px 8%;width:260px;height:auto;aspect-ratio:1.57638;transform-origin:50% 83%;animation:bonus-sea-rock-v2 6s ease-in-out infinite}
.bonus-sea .sea-stage .island{inset:auto 2% 38px auto;width:340px;height:auto;aspect-ratio:1381/342}
.bonus-sea .sea-stage .ocean{inset:auto -1% 0;width:102%;height:55px;transform-origin:center bottom;animation:bonus-sea-breathe-v2 8s ease-in-out infinite}
.bonus-sea-end .sea-scene{height:230px}
.bonus-sea-end .sea-stage .island{width:366.154px;bottom:44px}
/* Bow overlaps the near end of the left-facing pier, with the island behind. */
.bonus-sea-end .sea-stage .vessel{left:auto;right:calc(2% + 366.154px - 54px);width:280px;bottom:36px}
.bonus-sea-end .sea-stage .ocean{height:58px}
@keyframes bonus-sea-rock-v2{0%,100%{transform:translateY(4px) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
@keyframes bonus-sea-breathe-v2{0%,100%{transform:translateX(-.35%) scaleY(1)}50%{transform:translateX(.35%) scaleY(1.05)}}
@media(max-width:720px){
 .bonus-sea .sea-scene{height:180px}
 /* A single stage transform scales the brig, island, water and motion together. */
 .bonus-sea .sea-stage{inset:auto auto 0 0;width:133.333333%;height:133.333333%;transform:scale(.75);transform-origin:left bottom}
 .bonus-sea .sea-stage .vessel{width:190px;bottom:26px;left:3%}
 .bonus-sea .sea-stage .island{width:248.462px;bottom:31.846px}
 .bonus-sea .sea-stage .ocean{height:42px}
 .bonus-sea-end .sea-scene{height:190px}
 .bonus-sea-end .sea-stage .island{width:287.692px;bottom:34.286px}
 .bonus-sea-end .sea-stage .vessel{left:auto;right:calc(2% + 287.692px - 42.429px);width:220px;bottom:28px}
 .bonus-sea-end .sea-stage .ocean{height:45px}
}