/* A handful of real islanders inhabit the margins: no WebGL, no render loop, no server tick load. */
.has-island-cast { position: relative; }
.island-cast {
  --cast-travel: 0px;
  --walk-across: 0px;
  position: absolute;
  z-index: 7;
  top: -84px;
  width: 128px;
  height: 166px;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transform: translate3d(0, var(--cast-travel), 0);
  transition: opacity .5s ease;
  contain: layout style;
}
.island-cast-visible { opacity: 1; }
.island-cast--left { left: max(0px, calc((100vw - 1550px) / 2)); }
.island-cast--right { right: max(0px, calc((100vw - 1550px) / 2)); }
.island-cast-figure {
  position: absolute;
  width: 120px;
  height: 138px;
  object-fit: contain;
  left: 4px;
  top: 23px;
  image-rendering: pixelated;
  filter: drop-shadow(4px 6px 0 #07150bc9) drop-shadow(0 0 9px #b4ec8344);
  animation: cast-bob 4.2s steps(6,end) infinite alternate;
  transform-origin: center 16%;
}
.island-cast-bubble {
  position: absolute;
  z-index: 2;
  top: -6px;
  right: -20px;
  max-width: 172px;
  width: max-content;
  padding: 5px 9px 4px;
  border: 2px solid #c6ee8c;
  background: #142b1ce8;
  box-shadow: 3px 3px 0 #07150b;
  color: #ecf8cf;
  font: 700 11px/1.1 'Pixelify Sans', sans-serif;
  white-space: nowrap;
  letter-spacing: .3px;
  transform: rotate(3deg);
}
.island-cast-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 17px;
  border: 5px solid transparent;
  border-top-color: #c6ee8c;
}
.island-cast-name {
  position: absolute;
  z-index: 3;
  left: 10px;
  bottom: 0;
  padding: 3px 7px;
  min-width: 72px;
  max-width: 132px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 700 13px/1.2 'Pixelify Sans', sans-serif;
  color: #f7e3ab;
  background: #0c1e14ed;
  border: 2px solid #6c9d63;
  box-shadow: 2px 3px #07140b;
}
.island-cast-rope { display: none; }

/* The lookout hangs off the corner of the main island painting. */
.hero-visual .island-cast--perch {
  top: -94px;
  right: 3%;
  width: 142px;
  height: 180px;
}
.hero-visual .island-cast--perch .island-cast-figure { width: 133px; height: 160px; }
.hero-visual .island-cast--perch .island-cast-bubble { right: 35px; top: -12px; }

/* Different sections tell little stories as you descend through the site. */
#hall .island-cast--climb { top: -40px; }
#hall .island-cast--climb .island-cast-figure { transform: rotate(-8deg); animation: cast-climb 4.8s steps(5,end) infinite alternate; }
#chronicle .island-cast--peek { top: -77px; }
#chronicle .island-cast--peek .island-cast-figure { animation-duration: 5.5s; }
#guild .island-cast--rope { top: -50px; }
#guild .island-cast--rope .island-cast-rope {
  display: block;
  position: absolute;
  top: -94px;
  left: 58px;
  height: 168px;
  border-left: 4px dashed #ccdaa2;
  filter: drop-shadow(2px 0 #152c19);
}
#guild .island-cast--rope .island-cast-figure { animation: cast-swing 5s ease-in-out infinite alternate; }
#dungeons .island-cast--peek { top: -65px; }
#dungeons .island-cast--peek .island-cast-figure { animation: cast-peek 4.5s steps(5,end) infinite alternate; }
#world .island-cast--scout { top: -65px; }
#world .island-cast--scout .island-cast-figure { animation-duration: 6s; }
#quests .island-cast--peek { top: -69px; }

/* A wandering player crosses the page while the visitor scrolls past the residents. */
#players .island-cast--walk {
  left: 0;
  top: auto;
  bottom: -30px;
  height: 160px;
  width: 112px;
  transform: translate3d(var(--walk-across), var(--cast-travel), 0);
}
#players .island-cast--walk .island-cast-bubble { top: -10px; right: -58px; }
#players .island-cast--walk .island-cast-figure { animation: cast-walk .55s steps(2,end) infinite alternate; }

@keyframes cast-bob { 0%,100% { translate: 0 0; rotate: -2deg; } 50% { translate: 0 -9px; rotate: 2deg; } }
@keyframes cast-climb { from { translate: 0 13px; rotate: -9deg; } to { translate: 0 -15px; rotate: 4deg; } }
@keyframes cast-swing { from { rotate: -7deg; translate: -5px 0; } to { rotate: 6deg; translate: 5px -5px; } }
@keyframes cast-peek { from { translate: 0 10px; } to { translate: 0 -16px; } }
@keyframes cast-walk { from { translate: 0 0; rotate: -3deg; } to { translate: 0 -11px; rotate: 3deg; } }

@media (max-width: 1180px) {
  #hall > .island-cast, #chronicle > .island-cast, #guild > .island-cast,
  #dungeons > .island-cast, #world > .island-cast,
  #quests > .island-cast { display: none; }
}
@media (max-width: 800px) {
  .hero-visual .island-cast--perch { top: -35px; right: -7px; scale: .65; transform-origin: right top; }
  #players .island-cast--walk { display: none; }
}
@media (max-width: 480px) {
  .hero-visual .island-cast--perch { top: -17px; right: -13px; scale: .48; }
}
@media (prefers-reduced-motion: reduce) {
  .island-cast, .island-cast-figure { animation: none !important; transition: none !important; }
  #players .island-cast--walk { display: none; }
}