/* Living panorama: preserve source models and let only light, air and water move. */
.hero-sky-picture {display:contents;}
.hero .hero-team,
.storybook .hero .hero-team {
  filter: none;
}
.hero-weather-canvas,
.hero-character-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
  display: block;
}
.hero-weather-canvas {z-index: -1;}
.hero-character-canvas {z-index: 0;}
.hero-motion-ready .hero-team {opacity: 0;}
.hero-motion-toggle {
  position: absolute;
  right: 28px;
  bottom: 28px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 11px;
  color: #fff1d8;
  border: 1px solid #f3d1aa88;
  border-radius: 50%;
  background: #2c1c38a8;
  box-shadow: inset 0 1px 0 #ffffff13;
  backdrop-filter: blur(8px);
  cursor: pointer;
  visibility: hidden;
}
.hero-motion-ready .hero-motion-toggle {visibility:visible;}
.hero-motion-toggle:hover {background: #53324dda;border-color: #ffe0ae;}
.hero-motion-toggle svg {
  display: block;
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-motion-toggle .motion-play {display: none;fill: currentColor;stroke-width: 1.2;}
.hero-motion-toggle[aria-pressed="true"] .motion-play {display: block;}
.hero-motion-toggle[aria-pressed="true"] .motion-pause {display: none;}
@media(max-width:580px) {
  .hero-motion-toggle {right:16px;bottom:16px;width:44px;height:44px;}
}
@media(prefers-reduced-motion:reduce) {
  .hero-motion-toggle {backdrop-filter:none;}
}
/* Portrait devices use their own complete sky composition, not a wide crop. */
@media(max-width:1024px) and (orientation:portrait) {
  .storybook .hero {height:clamp(710px,90vw,920px);}
  .storybook .hero .hero-sky {inset:0;left:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%;}
  .storybook .hero .hero-team {width:min(700px,calc(100% - 12px));bottom:17px;}
  .storybook .hero .hero-logo {width:clamp(195px,56vw,280px);top:55px;}
}
@media(max-width:580px) and (orientation:portrait) {.storybook .hero {height:570px;}}
@media(max-width:370px) and (orientation:portrait) {.storybook .hero {height:540px;}}