/*
 * xs-aquarium-world: 複数枚の水中風景画像を指定秒数でクロスフェードループ表示 +
 * クリック可能な魚のホットスポット。
 *
 * 配置(position/size)はこのプラグインの責務ではなく、呼び出し側(テーマ)が決める。
 * xs-blogテーマでは .xs-main-wrapper > .xs-aquarium-world として、画面幅制約を
 * 持たないラッパーの直接の子になり、画面いっぱいの背景レイヤーになる
 * (templates/index.html + style.css側で position:absolute にして .xs-main-wrapper
 * 全体を覆う。main.xs-containerは同じ.xs-main-wrapper内の兄弟としてコンテンツ幅を
 * 制約する)。ここでは単体ショートコードとして最低限見える汎用スタイルのみ持つ。
 */

.xs-aquarium-world {
  background-color: #04212b;
  height: 100%;
  min-height: 480px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* ---------- 背景動画(優先表示) ---------- */

.xs-aquarium-world__bg-video {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

/* ---------- 背景スライド(コマ送りループ、動画未設定時のフォールバック) ---------- */
/* 通常の背景画像として扱う: background-size:cover で敷き詰め、複数枚を
   フェード無しで瞬時に切り替える(パラパラ漫画的なコマ送りで動画のように見せる)。 */

.xs-aquarium-world__bg-slide {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  inset: 0;
  opacity: 0;
  position: absolute;
}

.xs-aquarium-world__bg-slide.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .xs-aquarium-world__bg-slide {
    transition: none;
  }
}

/* ---------- ホットスポット(魚) ---------- */

.xs-aquarium-world__hotspot {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  position: absolute;
  transform: translate(-50%, -50%);
  transition: transform 200ms ease;
  width: clamp(40px, 5vw, 72px);
}

.xs-aquarium-world__hotspot:hover,
.xs-aquarium-world__hotspot:focus-visible {
  transform: translate(-50%, -50%) scale(1.15);
}

.xs-aquarium-world__hotspot img {
  display: block;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
  width: 100%;
}

/* クリック対象だと分かるよう、常時ごく弱いパルスを添える(reduced-motionでは止める) */
.xs-aquarium-world__hotspot::after {
  animation: xs-aquarium-world-pulse 2.4s ease-in-out infinite;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 70%);
  border-radius: 50%;
  content: "";
  inset: -30%;
  position: absolute;
  z-index: -1;
}

@media (prefers-reduced-motion: reduce) {
  .xs-aquarium-world__hotspot::after {
    animation: none;
  }
}

@keyframes xs-aquarium-world-pulse {
  0%, 100% { opacity: 0.15; transform: scale(0.85); }
  50% { opacity: 0.4; transform: scale(1.05); }
}

/* ---------- 生物 ---------- */

.xs-aquarium-world__creature-layer {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

/* JS(liftCreatureLayer)が .xs-aquarium-world の外(親要素)へこの要素を
   引き上げた後に付与するクラス。xs-blogテーマでは .xs-aquarium-world 自体が
   メインコンテンツの背景としてz-index:0で記事カードの下に敷かれるため、
   生物だけは記事カードより手前に見せるようここでz-indexを底上げする。 */
.xs-aquarium-world__creature-layer--lifted {
  z-index: 5;
}

/* xs-blogのメインコンテンツは max-width:1120px。画面幅がそれ以下だと
   記事カードが画面いっぱいに近くなり、崖沿いに置く余白(背景だけが見える帯)が
   無くなって生物が記事に覆いかぶさってしまう。その画面幅では表示自体をやめる。 */
@media (max-width: 1200px) {
  .xs-aquarium-world__creature-layer--lifted {
    display: none;
  }
}

.xs-aquarium-world__creature {
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3));
  opacity: 1;
  pointer-events: auto;
  position: absolute;
  transition: opacity 500ms ease;
  width: clamp(48px, 8vw, 96px);
}

.xs-aquarium-world__creature.is-flipped {
  transform: scaleX(-1);
}

/* わくポイント内の画像入れ替え演出(JS側が退場する要素にクラスを付ける) */
.xs-aquarium-world__creature.is-leaving {
  opacity: 0;
}

.xs-aquarium-world__creature-idle {
  aspect-ratio: 1;
  display: block;
  height: auto;
  transition: opacity 150ms ease;
  width: 100%;
}

.xs-aquarium-world__creature-idle--image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* 動画は素材ごとに縦横比が違うため、正方形/管理画面指定の矩形どちらの枠でも
   歪まないよう常にcontainで収める。 */
.xs-aquarium-world__creature-idle--video {
  object-fit: contain;
}

/* スプライットシート(横に並んだ複数フレーム)の自動再生。KVプラグインと同じ手法。 */
.xs-aquarium-world__creature-idle--image.is-sprite {
  animation-iteration-count: infinite;
  animation-name: xs-aquarium-world-creature-sprite;
  animation-timing-function: steps(var(--creature-frames, 1), jump-start);
  background-size: calc(var(--creature-frames, 1) * 100%) 100%;
}

@keyframes xs-aquarium-world-creature-sprite {
  from { background-position-x: 0; }
  to { background-position-x: 100%; }
}

.xs-aquarium-world__creature-hover {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  inset: 0;
  opacity: 0;
  position: absolute;
  transition: opacity 150ms ease;
}

.xs-aquarium-world__creature.has-hover:hover .xs-aquarium-world__creature-idle {
  opacity: 0;
}

.xs-aquarium-world__creature.has-hover:hover .xs-aquarium-world__creature-hover {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .xs-aquarium-world__creature-idle--image.is-sprite {
    animation: none;
  }
}

/* ---------- ポップオーバー ---------- */

.xs-aquarium-world__popover {
  background: rgba(8, 18, 22, 0.94);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  bottom: clamp(16px, 4vw, 32px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  color: #fff;
  left: 50%;
  max-width: min(90vw, 360px);
  opacity: 0;
  padding: 20px 24px;
  pointer-events: none;
  position: fixed;
  transform: translate(-50%, 16px);
  transition: opacity 220ms ease, transform 220ms ease;
  visibility: hidden;
  z-index: 200;
}

.xs-aquarium-world__popover.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
  visibility: visible;
}

.xs-aquarium-world__popover-close {
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 4px;
  position: absolute;
  right: 8px;
  top: 8px;
}

.xs-aquarium-world__popover-close:hover {
  color: #fff;
}

.xs-aquarium-world__popover-label {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 24px 0.5rem 0;
}

.xs-aquarium-world__popover-description {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 0 0 0.75rem;
}

.xs-aquarium-world__popover-link {
  color: #7dd8c6;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

@media (prefers-reduced-motion: reduce) {
  .xs-aquarium-world__popover {
    transition: opacity 1ms linear;
  }
}