/* ====== 位置と基本設定 ====== */

.owl-container {
  position: relative;
  width: 100%;
  height: 260px;
  overflow: visible;
}

.owl {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  width: 180px;  /* サイズは好みで調整 */
  pointer-events: none;
}

/* ====== 1：上から舞い降りる ====== */

.owl-main {
  top: -260px;
  animation: owlFall 1.3s ease-out forwards 0.3s;
}

@keyframes owlFall {
  0% { top: -260px; opacity: 0; }
  80% { opacity: 1; }
  100% { top: 40px; opacity: 1; }
}

/* ====== 2：着地の “ふにっ” ====== */

.owl-main.land-pop {
  animation: landPop 0.25s ease-out forwards;
}

@keyframes landPop {
  0% { transform: translateX(-50%) scale(1); }
  40% { transform: translateX(-50%) scale(0.92); }
  100% { transform: translateX(-50%) scale(1); }
}

/* ====== 3：カバーオール姿へ変身 ====== */

.owl-change {
  top: 40px;
  opacity: 0;
  animation: fadeIn 0.4s ease-out forwards 1.6s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ====== 4：覗き込みポーズへ移行 ====== */

.owl-look {
  top: 40px;
  opacity: 0;
  animation: fadeIn 0.4s ease-out forwards 2.2s;
}

/* ====== 5：虫メガネで片目拡大 ====== */

.owl-eye {
  position: absolute;
  width: 48px;
  left: calc(50% + 26px);  /* 位置は調整 */
  top: 88px;               /* 位置は調整 */
  opacity: 0;
  animation: eyeZoom 0.25s ease-out forwards 2.5s;
}

@keyframes eyeZoom {
  from { transform: scale(1); opacity: 0; }
  to { transform: scale(1.4); opacity: 1; }
}

/* ====== 全体アニメ終了後、安定ポーズ ====== */
/* ロゴは最初非表示 */
body.login-page .login-left .login-title {
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

/* Owl の最終移動用 */
.owl-move {
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

/* ロゴはアニメ終了まで非表示 */
body.login-page #partnerLogo {
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

/* Owl 移動時のアニメ */
.owl-move {
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

/* Owl を画面上で自由に動かすため絶対配置 */
#owlAnim {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: auto;
    z-index: 9999; /* 最前面 */
    pointer-events: none; 
}

#owlAnim img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}