@charset "UTF-8";
/* ================================================================
   whale.css — ホエール坊やのイラスト（ショートコード [whale]）
   Cocoon には依存しない。[whale] を使ったページでだけ読み込む。
   大きさは --whale-w（横幅）で決まり、泡や光は横幅に対する割合で置く。
   元の大きさは横 180px・縦 130px（Blogger のプロフィールページと同じ）。
   ================================================================ */
.wa-whale {
  --whale-w: 180px;
  display: block;
  width: var(--whale-w);
  max-width: 100%;
  margin: 24px auto;
}
.wa-whale--left  { margin-left: 0; }
.wa-whale--right { margin-right: 0; }

/* ゆらゆら泳ぐ */
.wa-whale-swim {
  position: relative;
  aspect-ratio: 180 / 130;
  animation: wa-whale-swim 4.5s var(--ease-float) infinite;
}
.wa-whale-swim svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
@keyframes wa-whale-swim {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(calc(var(--whale-w) * -0.06)) rotate(1.5deg); }
}

/* 後ろで脈打つ光 */
.wa-whale-glow {
  position: absolute;
  inset: -13.3%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-blue-a20) 0%, transparent 68%);
  animation: wa-whale-glow 3.5s ease-in-out infinite;
}
@keyframes wa-whale-glow {
  0%, 100% { transform: scale(1);    opacity: 0.5; }
  50%      { transform: scale(1.18); opacity: 1; }
}

/* 上っていく泡（位置・大きさ・速さは HTML の --x / --y / --s / --d / --delay） */
.wa-whale-bubble {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  aspect-ratio: 1;
  border: 1px solid var(--glow-blue-a30);
  border-radius: 50%;
  animation: wa-whale-bubble var(--d, 2.5s) var(--delay, 0s) ease-in infinite;
}
@keyframes wa-whale-bubble {
  0%   { transform: translateY(0); opacity: 0.7; }
  100% { transform: translateY(calc(var(--whale-w) * -0.36)); opacity: 0; }
}

/* 目で追う（js/eyes.js が --ex / --ey を渡す）とまばたき */
.wa-whale-eye {
  transform: translate(var(--ex, 0px), var(--ey, 0px));
  transition: transform 0.18s ease-out;
}
.wa-whale-eyeball {
  transform-box: fill-box;
  transform-origin: center;
  animation: wa-whale-blink 5.5s ease-in-out infinite;
}
@keyframes wa-whale-blink {
  0%, 94%, 100% { transform: scaleY(1); }
  96%           { transform: scaleY(0.1); }
}

/* 動きを減らす設定の人には止めて見せる */
@media (prefers-reduced-motion: reduce) {
  .wa-whale-swim,
  .wa-whale-glow,
  .wa-whale-bubble,
  .wa-whale-eyeball {
    animation: none;
  }
  .wa-whale-bubble {
    display: none;
  }
}