/* ログイン画面だけの動き。style.css（sites/0033 のコピー）には手を入れず、ここで足す。
   transform / opacity だけを動かすので、レイアウトは再計算されない。 */

/* 背景: 色面がゆっくり流れる層と、ふわふわ漂う 4 つの円 */
.page { position: relative; }
.page::before {
  content: ""; position: fixed; inset: -20%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(40% 40% at 20% 30%, rgba(255,214,190,.55), rgba(255,214,190,0) 70%),
    radial-gradient(36% 36% at 80% 25%, rgba(190,216,255,.55), rgba(190,216,255,0) 70%),
    radial-gradient(44% 44% at 70% 80%, rgba(214,255,230,.5), rgba(214,255,230,0) 70%),
    radial-gradient(34% 34% at 25% 80%, rgba(232,214,255,.5), rgba(232,214,255,0) 70%);
  animation: login-drift 24s ease-in-out infinite alternate;
}
.section-login__orb { animation: login-float 12s ease-in-out infinite alternate; will-change: transform; }
.section-login__orb:nth-child(2) { animation-duration: 9s; animation-delay: -3s; }
.section-login__orb:nth-child(3) { animation-duration: 14s; animation-delay: -6s; }
.section-login__orb:nth-child(4) { animation-duration: 11s; animation-delay: -9s; }

@keyframes login-drift {
  0% { transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(3%, 4%, 0) rotate(8deg) scale(1.08); }
  100% { transform: translate3d(5%, -4%, 0) rotate(-6deg) scale(1.02); }
}
@keyframes login-float {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(24px, -32px, 0) scale(1.06); }
  100% { transform: translate3d(-20px, 24px, 0) scale(.96); }
}

/* 項目を 1 つずつ下からフェードイン（JS 不要。順番は animation-delay で決める） */
.login-card { animation: login-in .7s cubic-bezier(.2,.7,.2,1) backwards; }
.login-card__title, .login-card__lead, .login-form__field, .login-form__submit {
  animation: login-in .6s cubic-bezier(.2,.7,.2,1) backwards;
}
.login-card__title { animation-delay: .25s; }
.login-card__lead { animation-delay: .4s; }
.login-form__field:nth-of-type(1) { animation-delay: .55s; }
.login-form__field:nth-of-type(2) { animation-delay: .7s; }
.login-form__submit { animation-delay: .85s; }

@keyframes login-in {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ログインボタン: ホバーで少し浮き、光がひと筋走る */
.login-form__submit { position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; }
.login-form__submit::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0));
  transform: translate3d(-120%, 0, 0) skewX(-20deg); pointer-events: none;
}
@media (hover: hover) {
  .login-form__submit:hover { transform: translate3d(0, -2px, 0); box-shadow: 0 12px 24px rgba(29,59,74,.28); background-color: #25495c; }
  .login-form__submit:hover::after { animation: login-sheen .8s ease; }
}
.login-form__submit:active { transform: translate3d(0, 0, 0) scale(.98); box-shadow: 0 4px 8px rgba(29,59,74,.2); }
.login-form__submit:focus-visible::after { animation: login-sheen .8s ease; }

@keyframes login-sheen {
  from { transform: translate3d(-120%, 0, 0) skewX(-20deg); }
  to { transform: translate3d(380%, 0, 0) skewX(-20deg); }
}

/* 動きを減らす設定の人には止める */
@media (prefers-reduced-motion: reduce) {
  .page::before, .section-login__orb, .login-card, .login-card__title, .login-card__lead,
  .login-form__field, .login-form__submit { animation: none; }
  .login-form__submit, .login-form__submit:hover, .login-form__submit:active { transition: none; transform: none; }
  .login-form__submit::after { display: none; }
}