/* =============================================================
   認証画面（ログイン / 新規登録）— 演出強度 90/100
   ・デスクトップ：左=色面と大型タイポ / 右=フォーム面
   ・切替：フォーム面が横移動、背景色面は逆方向へ（450–600ms）
   ・スマホ：タブ + フェード + 高さアニメーション
   ・使用プロパティは transform / opacity のみ（レイアウト再計算なし）
   ・エントランス演出は読み込み後に1回だけ
   ============================================================= */

.auth-body {
    min-height: 100dvh;
    display: grid;
    background: var(--ivory);
}

.auth-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    min-height: 100dvh;
    overflow: clip;
}

/* ---------- 左：ビジュアル面 ---------- */
.auth-visual {
    position: relative;
    background: var(--ink);
    color: var(--ivory);
    display: grid;
    align-content: end;
    gap: var(--space-4);
    padding: clamp(var(--space-6), 5vw, var(--space-8));
    overflow: clip;
    transition: transform var(--motion);
    will-change: transform;
}
.auth-visual .planes { position: absolute; inset: 0; transition: transform var(--motion); }
.auth-visual .plane { position: absolute; border-radius: var(--radius-l); }
.auth-visual .plane-cobalt  { background: var(--cobalt);  width: 70%; height: 54%; top: -8%; right: -18%; transform: rotate(6deg); }
.auth-visual .plane-apricot { background: var(--apricot); width: 46%; height: 34%; bottom: 16%; left: -12%; transform: rotate(-7deg); }
.auth-visual .plane-lime    { background: var(--lime);    width: 128px; height: 128px; border-radius: 50%; top: 24%; left: 34%; }
.auth-visual > * { position: relative; }

.auth-visual .micro-en { color: rgba(255, 253, 247, .72); }
.auth-visual .brand-lockup { font-size: clamp(2.6rem, 5.2vw, 4.6rem); }
.auth-visual .lead { font-weight: 700; font-size: clamp(1rem, 1.6vw, 1.2rem); max-width: 24em; }

/* ---------- 右：フォーム面 ---------- */
.auth-panel {
    position: relative;
    display: grid;
    align-content: center;
    padding: clamp(var(--space-6), 5vw, var(--space-8));
    background: var(--ivory);
    transition: transform var(--motion);
    will-change: transform;
}
.auth-forms { position: relative; max-width: 420px; width: 100%; margin-inline: auto; }

.auth-form {
    display: grid;
    gap: var(--space-4);
    transition: opacity var(--motion), transform var(--motion), visibility 0s linear 0s;
}
.auth-form .form-title { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; }
.auth-form .form-note { color: var(--ink-60); font-size: 0.92rem; }

/* 非表示側のフォーム */
.auth-form[hidden] { display: grid; }           /* hidden属性でも重ね置きを維持 */
.auth-form.is-hidden {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(32px);
    pointer-events: none;
    transition: opacity var(--motion), transform var(--motion), visibility 0s linear 480ms;
}
.stage-register .form-register.is-hidden,
.auth-stage:not(.stage-register) .form-login.is-hidden { position: static; }

/* ---------- 切替（デスクトップ）：面が入れ替わる ---------- */
@media (min-width: 768px) {
    .stage-register .auth-visual { transform: translateX(100%); }
    .stage-register .auth-panel  { transform: translateX(-100%); }
    /* 背景の色面は逆方向へ（“背景は逆方向に動かす”） */
    .stage-register .auth-visual .planes { transform: translateX(-14%); }
}

/* 入力欄・必須ラベル・エラー表示の基本形は app.css の「フォーム共通部品」に集約 */

.auth-switch-note { text-align: center; font-size: 0.95rem; }
.auth-switch-note button {
    background: none;
    border: 0;
    color: var(--cobalt);
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: var(--space-2);
    min-height: 44px;
}

/* ---------- エントランス演出（読み込み後1回のみ） ---------- */
@keyframes rise-in {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes plane-in {
    from { opacity: 0; transform: translateY(30px) rotate(0deg) scale(.94); }
    to   { opacity: 1; }
}
.auth-visual .plane { animation: plane-in 700ms cubic-bezier(.32,.72,.24,1) backwards; }
.auth-visual .plane-cobalt  { animation-delay: 60ms; }
.auth-visual .plane-apricot { animation-delay: 160ms; }
.auth-visual .plane-lime    { animation-delay: 260ms; }
.auth-visual .brand-lockup,
.auth-visual .lead,
.auth-visual .micro-en { animation: rise-in 620ms cubic-bezier(.32,.72,.24,1) backwards; }
.auth-visual .micro-en      { animation-delay: 200ms; }
.auth-visual .brand-lockup  { animation-delay: 300ms; }
.auth-visual .lead          { animation-delay: 420ms; }
.auth-forms > .auth-form:not(.is-hidden) > * { animation: rise-in 560ms cubic-bezier(.32,.72,.24,1) backwards; }
.auth-forms > .auth-form:not(.is-hidden) > *:nth-child(1) { animation-delay: 240ms; }
.auth-forms > .auth-form:not(.is-hidden) > *:nth-child(2) { animation-delay: 320ms; }
.auth-forms > .auth-form:not(.is-hidden) > *:nth-child(3) { animation-delay: 380ms; }
.auth-forms > .auth-form:not(.is-hidden) > *:nth-child(4) { animation-delay: 440ms; }
.auth-forms > .auth-form:not(.is-hidden) > *:nth-child(5) { animation-delay: 500ms; }
.auth-forms > .auth-form:not(.is-hidden) > *:nth-child(n+6) { animation-delay: 560ms; }
/* 切替後は再生しない：.is-settled で無効化 */
.auth-stage.is-settled * { animation: none !important; }

/* ---------- タブ（スマホ） ---------- */
.auth-tabs { display: none; }

@media (max-width: 767px) {
    .auth-stage { grid-template-columns: 1fr; }
    .auth-visual {
        min-height: 34dvh;
        align-content: center;
        padding: var(--space-6) var(--space-5);
    }
    .auth-visual .lead { display: none; }
    .auth-panel { padding: var(--space-5) var(--space-4) calc(var(--space-7) + env(safe-area-inset-bottom)); }

    /* デスクトップ用の面移動は無効化し、タブ+フェード+高さで切替 */
    .stage-register .auth-visual,
    .stage-register .auth-panel,
    .stage-register .auth-visual .planes { transform: none; }

    .auth-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        border: 2px solid var(--ink);
        border-radius: 999px;
        padding: 4px;
        margin-bottom: var(--space-5);
        position: relative;
    }
    .auth-tabs .thumb {
        position: absolute;
        top: 4px; bottom: 4px; left: 4px;
        width: calc(50% - 4px);
        background: var(--ink);
        border-radius: 999px;
        transition: transform var(--motion);
    }
    .stage-register .auth-tabs .thumb { transform: translateX(100%); }
    .auth-tabs button {
        position: relative;
        background: none;
        border: 0;
        min-height: 46px;
        font-weight: 800;
        border-radius: 999px;
        cursor: pointer;
        color: var(--ink);
        transition: color 240ms ease;
    }
    .auth-tabs button[aria-selected="true"] { color: var(--ivory); }

    /* 高さアニメーション：grid-rows 0fr→1fr + フェード */
    .auth-forms { display: grid; }
    .auth-form-slot { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--motion); }
    .auth-form-slot.is-collapsed { grid-template-rows: 0fr; }
    .auth-form-slot > .auth-form { overflow: hidden; }
    .auth-form.is-hidden { position: static; transform: translateY(10px); }
}