/* Motion typography and camera framing are frozen from the approved film.
   Gup Orange and HOME surfaces: app/src/styles/tokens.css. */
.motion-login { --gup-p-orange-500: #FD5E00; color-scheme: dark; background: #080b0e; color: #e8edf2; }
.login-layout { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 3fr) minmax(380px, 2fr); }
.login-motion { min-width: 0; display: grid; align-content: center; background: #000; font-family: Arial, "Yu Gothic UI", sans-serif; }
.login-motion .film { position: relative; width: 100%; aspect-ratio: 8 / 5; background: #000; overflow: hidden; isolation: isolate; }
.login-motion .shot { position: absolute; inset: 0; opacity: 0; overflow: hidden; }
.login-motion .shot img { display: block; width: 100%; height: 100%; object-fit: contain; transform-origin: center; }
.login-motion .intro-card { position: absolute; inset: 0; display: grid; place-items: center; background: #000; padding: 24px; text-align: center; }
.login-motion .intro-card p { margin: 0; }
.login-motion .intro-card .product-name { font-size: 26px; font-weight: 700; margin-bottom: 24px; }
.login-motion .intro-copy { font-size: 44px; font-weight: 800; line-height: 1.2; }
.login-motion .caption { position: absolute; inset: auto 0 0; padding: 64px 32px 32px; background: linear-gradient(transparent, rgba(0,0,0,.88) 58%); opacity: 0; }
.login-motion .caption p { margin: 0; color: #fff; font-weight: 700; }
.login-motion .feature-label { font-size: 28px; line-height: 1.2; margin-bottom: 12px !important; }
.login-motion .feature-copy { font-size: 44px; line-height: 1.18; font-weight: 800 !important; overflow-wrap: anywhere; }
.login-motion .feature-copy span { display: inline-block; max-width: 100%; }
.login-motion .end-card { position: absolute; inset: 0; display: grid; place-items: center; background: #000; opacity: 0; }
.login-motion .end-card p { margin: 0; text-align: center; font-size: 88px; font-weight: 700; line-height: 1.12; color: #fff; }
.login-motion .end-card .product-name { font-size: 26px; margin-bottom: 30px; }
.login-motion .end-card .brand-line { color: var(--gup-p-orange-500); margin-top: 8px; }
.login-motion .film.is-ended .shot { visibility: hidden; }
.login-motion .film.is-ended .end-card { opacity: 1; }
.login-motion [hidden] { display: none !important; }
.login-panel { display: flex; flex-direction: column; justify-content: center; padding: 48px 48px; min-width: 0; border-left: 1px solid #28323c; }
.login-panel header { width: 100%; max-width: 384px; margin: 0 auto 44px; padding: 0; border: 0; background: transparent; color: #b6c4d0; font-size: 16px; }
.login-panel .brand { display: block; color: #e8edf2; line-height: 0; }
.login-panel .brand-mark { width: 68px; height: 51px; }
.login-panel main { width: 100%; max-width: 384px; margin: 0 auto; }
.login-panel h1 { font-size: 28px; font-weight: 600; margin: 0 0 28px; }
.login-panel label { font-size: 18px; font-weight: 600; margin: 22px 0 10px; }
.login-panel input { min-height: 54px; font-size: 18px; background: #101820; color: #e8edf2; border-color: #667888; border-radius: 4px; }
.login-panel input::placeholder { color: #a6b6c5; opacity: 1; }
.login-panel button { font-size: 16px; min-height: 54px; border-radius: 4px; border-color: #667888; background: #19242e; color: #e8edf2; }
.login-panel button:hover { background: #2a3947; }
.login-panel .copy-row button { flex-basis: 68px; }
.login-panel .primary { min-height: 54px; background: #e8edf2; color: #101820; border-color: #e8edf2; font-size: 18px; margin-top: 28px; }
.login-panel .primary:hover { background: #c9d8e5; }
.login-panel nav { gap: 8px; margin-top: 22px; }
.login-panel nav a { display: flex; align-items: center; min-height: 44px; font-size: 16px; color: #b9d3ed; text-underline-offset: 4px; }
/* INVITE-ONLY1：登録の入口を閉じているときの案内（リンクではない） */
.nav-note { display: block; padding: 10px 0; font-size: 14px; line-height: 1.7; color: #9fb0c3; }
.login-panel footer { width: 100%; max-width: 384px; margin: 28px auto 0; padding-top: 20px; border-top: 1px solid #34424e; color: #b6c4d0; font-size: 16px; line-height: 1.6; }
.login-panel .error { font-size: 16px; color: #ffb4ab; border-color: #ffb4ab; }
.login-panel :focus-visible { outline: 3px solid #8cbcf0; outline-offset: 3px; }
@media (max-width: 1000px) and (min-width: 761px) {
  .login-panel { padding: 32px 24px; }
  .login-layout { grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr); }
  .login-motion .feature-copy, .login-motion .intro-copy { font-size: 32px; }
  .login-motion .end-card p { font-size: 64px; }
  .login-motion .end-card .product-name { font-size: 26px; }
  .login-motion .caption { padding: 48px 20px 24px; }
}
@media (max-width: 760px) {
  .login-layout { display: block; }
  .login-motion { width: 100%; }
  .login-motion .film { width: min(100%, 42svh); aspect-ratio: 1 / 1; margin-inline: auto; }
  .login-motion .shot img { object-fit: cover; object-position: 60% center; }
  .login-motion .caption { padding: 64px 16px 22px; }
  .login-motion .feature-label { font-size: 21px; margin-bottom: 10px !important; }
  .login-motion .feature-copy { font-size: 28px; }
  .login-motion .intro-copy { font-size: 30px; }
  .login-motion .intro-card .product-name, .login-motion .end-card .product-name { font-size: 21px; }
  .login-motion .end-card p { font-size: 50px; }
  .login-panel { padding: 28px 24px 32px; border-left: 0; border-top: 1px solid #28323c; }
  .login-panel header { margin-bottom: 28px; }
  .login-panel .brand-mark { width: 56px; height: 42px; }
  .login-panel h1 { margin-bottom: 22px; }
}