/**
 * login.css – TerraLayer GIS ログイン画面専用スタイル
 *
 * 配置: terralayer/static/terralayer/css/login.css
 * 要件:
 *   - 背景画像をビューポート全面に表示（スクロール厳禁）
 *   - 左寄せで "TERRA LAYER" が上からフェードイン
 *   - 続いて "GIS" が右から左にフェードイン
 *   - ロゴの右側にグラスモーフィズムのログインカード
 */

/* ============================================================
   Google Fonts (Inter)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ============================================================
   Reset & base
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden !important;
    /* スクロール厳禁 */
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   Full-viewport page wrapper
   ============================================================ */
.login-page {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    padding-bottom: 44px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   Background image (full-bleed)
   ============================================================ */
.login-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.login-bg--night {
    background-image: url("../img/login_bg.jpg");
}

.login-bg--day {
    background-image: url("../img/daytime_city.jpg");
}

/* no overlay – show original image brightness */

/* ============================================================
   Content layout (branding left · login right)
   ============================================================ */
.login-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15vw;
    /* 重ならないように十分な距離を確保 */
    width: 90%;
    max-width: 1400px;
    /* 全体を広げてレイアウト余裕を持たせる */
    padding: 0 2rem;
}

/* ---- Branding column (left side, centered-left) ---- */
.login-branding {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

/* Wrapper for title + accent line to keep them width-constrained together */
.login-branding__wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    /* 左揃え */
    width: max-content;
    max-width: 100%;
}

/* Desktop adjustment removed: transform causes overlap issues. Native flex gap is safer. */

/* "TERRA LAYER" — fade-in from top */
/* "TERRA LAYER" — fade-in from top */
.login-branding__title {
    /* SVG Container Styles */
    display: block;
    width: auto;
    /* Revert to original height scale */
    height: clamp(2.8rem, 5.5vw, 5.6rem);
    max-width: none;
    opacity: 0;
    transform: translateY(-40px);
    animation: fadeInDown 1s cubic-bezier(0.23, 1, 0.32, 1) 0.3s forwards;
    filter: drop-shadow(0 2px 10px rgba(0, 200, 255, 0.3)) drop-shadow(0 0 20px rgba(0, 100, 200, 0.2));
}

.branding-text {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    letter-spacing: 0.1em;
    font-size: 80px;
    /* Fits the 95px viewBox */
}

.branding-text--fill {
    fill: #fff;
}

.branding-text--stroke {
    fill: none;
    stroke: #00C8FF;
    stroke-width: 4px;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    opacity: 0;
    animation: strokeAnim 1.8s ease-in-out 1.5s forwards;
}

/* Day Mode: Dark Gray Stroke */
.login-theme--day .branding-text--stroke {
    stroke: #333333;
}

/* Accent line below title — draws left to right, fades to transparent */
.login-branding__accent {
    display: block;
    height: 4px;
    width: 100%;
    margin-top: 0.5rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #00C8FF 0%, rgba(0, 200, 255, 0) 100%);
    opacity: 0.9;
    transform: scaleX(0);
    transform-origin: left center;
    /* Delayed to start after stroke animation */
    animation: drawLine 1s cubic-bezier(0.19, 1, 0.22, 1) 3.1s forwards;
}

/* ============================================================
   Login card (glassmorphism)
   ============================================================ */
.login-card {
    flex: 0 0 380px;
    max-width: 400px;
    background: rgba(10, 20, 45, 0.55);
    backdrop-filter: blur(30px) saturate(1.4);
    -webkit-backdrop-filter: blur(30px) saturate(1.4);
    border: 1px solid rgba(100, 200, 255, 0.12);
    border-radius: 1.25rem;
    padding: 2.5rem 2rem 2rem;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.6s forwards;
}

.login-card__language {
    display: flex;
    justify-content: flex-end;
    margin: -0.55rem 0 0.85rem;
}

/* Card header */
.login-card__header {
    text-align: center;
    margin-bottom: 1.8rem;
}

.login-card__header-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0, 180, 255, 0.2), rgba(0, 100, 200, 0.15));
    border: 1px solid rgba(100, 200, 255, 0.2);
    border-radius: 0.75rem;
}

.login-card__header-icon i {
    font-size: 1.4rem;
    color: rgba(130, 220, 255, 0.9);
}

.login-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
}

.login-card__subtitle {
    font-size: 0.75rem;
    color: rgba(180, 210, 240, 0.6);
    margin-top: 0.3rem;
    font-weight: 400;
}

/* ============================================================
   Alerts (errors / info)
   ============================================================ */
.login-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
    padding: 0.65rem 0.85rem;
    border-radius: 0.65rem;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
}

.login-alert i {
    flex-shrink: 0;
    font-size: 1rem;
    margin-top: 1px;
}

.login-alert--error {
    background: rgba(220, 40, 40, 0.15);
    border: 1px solid rgba(255, 80, 80, 0.25);
    color: #fca5a5;
}

.login-alert--info {
    background: rgba(40, 120, 220, 0.15);
    border: 1px solid rgba(80, 160, 255, 0.25);
    color: #93c5fd;
}

/* ============================================================
   Form controls
   ============================================================ */
.login-field {
    margin-bottom: 1.25rem;
}

.login-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(180, 210, 240, 0.8);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.45rem;
}

.login-input-wrap {
    position: relative;
}

.login-input-icon {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: rgba(130, 190, 240, 0.45);
    transition: color 0.25s;
}

.login-input-icon i {
    font-size: 1.05rem;
}

.login-input {
    display: block;
    width: 100%;
    padding: 0.7rem 0.9rem 0.7rem 2.8rem;
    font-size: 0.88rem;
    font-family: inherit;
    color: #e8f0fe;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(100, 200, 255, 0.12);
    border-radius: 0.7rem;
    outline: none;
    transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}

.login-input::placeholder {
    color: rgba(160, 200, 230, 0.35);
}

.login-input:focus {
    border-color: rgba(0, 180, 255, 0.5);
    background: rgba(255, 255, 255, 0.09);
    box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.1);
}

.login-input:focus~.login-input-icon {
    color: rgba(0, 200, 255, 0.8);
}

/* Place icon after input for sibling selector, but visually positioned left */
.login-input-wrap {
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
}

.login-input-wrap .login-input-icon {
    position: absolute;
    left: 0;
}

.login-input-wrap .login-input {
    flex: 1;
}

.login-links {
    display: flex;
    justify-content: flex-end;
    margin: -0.25rem 0 0.8rem;
}

.login-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: rgba(160, 220, 255, 0.9);
    font-size: 0.78rem;
    text-decoration: none;
}

.login-link:hover {
    color: #fff;
    text-decoration: underline;
}

/* ============================================================
   Submit button
   ============================================================ */
.login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1.5rem;
    margin-top: 0.5rem;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #0070d4 0%, #0050a0 100%);
    border: 1px solid rgba(0, 160, 255, 0.3);
    border-radius: 0.7rem;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.25s, background 0.25s;
    box-shadow: 0 4px 15px rgba(0, 100, 200, 0.3);
}

.login-btn:hover {
    background: linear-gradient(135deg, #0080ee 0%, #0060b8 100%);
    box-shadow: 0 6px 25px rgba(0, 120, 230, 0.4);
}

.login-btn:active {
    transform: scale(0.98);
}

.login-btn i {
    font-size: 1.1rem;
}

/* ============================================================
   Signup link section
   ============================================================ */
.login-divider {
    margin-top: 1.6rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(100, 200, 255, 0.1);
    text-align: center;
}

.login-divider__text {
    font-size: 0.72rem;
    color: rgba(160, 200, 230, 0.5);
    margin-bottom: 0.7rem;
}

.login-signup-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 1rem;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    color: rgba(180, 220, 255, 0.8);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(100, 200, 255, 0.12);
    border-radius: 0.7rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.25s, border-color 0.25s, color 0.25s;
}

.login-signup-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(100, 200, 255, 0.25);
    color: #fff;
}

.login-signup-btn i {
    font-size: 1.1rem;
}

/* ============================================================
   Password reset pages
   ============================================================ */
.login-bg--gradient {
    background-image:
        radial-gradient(circle at 20% 25%, rgba(0, 160, 255, 0.35), transparent 38%),
        radial-gradient(circle at 80% 15%, rgba(0, 100, 190, 0.3), transparent 34%),
        linear-gradient(140deg, #081021 0%, #10213f 45%, #0f3055 100%);
}

.login-content--single {
    justify-content: center;
    gap: 0;
}

.login-card--single {
    flex: 0 1 460px;
    max-width: 460px;
}

.login-help-text {
    color: rgba(190, 215, 240, 0.88);
    font-size: 0.84rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.login-form-errors {
    margin: 0 0 1rem;
    padding-left: 1rem;
    color: #fca5a5;
    font-size: 0.78rem;
    line-height: 1.4;
}

.login-actions {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.9rem;
}

.login-btn--secondary {
    color: rgba(185, 220, 255, 0.92);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(125, 205, 255, 0.2);
    box-shadow: none;
    text-decoration: none;
}

.login-btn--secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}

.login-status-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(38, 118, 206, 0.2);
    border: 1px solid rgba(120, 195, 255, 0.35);
    color: #d8eeff;
    font-size: 1.9rem;
}

.login-inline-link {
    color: rgba(180, 220, 255, 0.92);
    text-decoration: underline;
}

.login-inline-link:hover {
    color: #fff;
}

/* ============================================================
   Footer
   ============================================================ */
.login-legal-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    height: 44px;
    background: #000;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
}

.login-legal-footer__inner {
    width: 100%;
    padding: 0 1rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.login-legal-footer__link {
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.7rem;
    text-decoration: none;
    white-space: nowrap;
}

.login-legal-footer__link:hover {
    text-decoration: underline;
}

.login-legal-footer__copy {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.66rem;
    font-family: 'Courier New', monospace;
    white-space: nowrap;
}

/* ============================================================
   Keyframe animations
   ============================================================ */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes drawLine {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes strokeAnim {
    0% {
        stroke-dashoffset: 600;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

/* Wrapper moves up early to set the stage */
.login-branding__wrapper {
    width: 100%;
    /* Start sliding up much earlier, or even be positioned there if no jump is desired?
       User said "initially go up", probably means after logo construction but BEFORE typing.
       Let's move it up shortly after logo stroke is done and accent line appears.
       Accent line starts at 3.1s and takes 1s (ends 4.1s).
       Let's slide up at 4.2s. */
    animation: slideUpWrapper 0.8s cubic-bezier(0.23, 1, 0.32, 1) 4.2s forwards;
}

@keyframes slideUpWrapper {
    to {
        transform: translateY(-120px);
    }
}

/* Catchphrase container - Card Style */
.login-catchphrase {
    margin-top: 2rem;
    text-align: left;
    width: 100%;
    max-width: 650px;

    /* Card look - matching login-card */
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 2rem;

    /* Fixed min-height to prevent layout shift during typing */
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Center text vertically if short, or just start from top */

    /* Animation: Fade in and expand height or just fade in? 
       User wants it to appear before typing. */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInCatchphrase 0.8s ease-out 5.0s forwards;
}

@keyframes fadeInCatchphrase {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Typography for catchphrase lines */
.catchphrase-main {
    font-size: 1.8rem;
    /* Larger impact */
    font-weight: 800;
    /* Extra bold */
    line-height: 1.4;
    margin-bottom: 2rem;

    /* Gradient Text Effect */
    background: linear-gradient(180deg, #FFFFFF 0%, #caf0f8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;
    /* Fallback */

    /* Subtle glow/shadow for depth */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));

    display: inline-block;
    /* Required for gradient text functioning correctly */
}

.catchphrase-sub {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
}

/* Cursor effect for typing */
.typing-cursor::after {
    content: '|';
    display: inline-block;
    vertical-align: middle;
    width: 4px;
    height: 1em;
    background-color: #00C8FF;
    margin-left: 2px;
    animation: blinkCursor 0.8s step-end infinite;
}

@keyframes blinkCursor {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* ============================================================
   Responsive – mobile / narrow viewport
   ============================================================ */
@media (max-width: 820px) {
    .login-page {
        padding-bottom: 72px;
    }

    .login-branding__wrapper {
        animation: none;
        /* Disable slide-up on mobile */
        transform: translateY(0);
    }

    .login-catchphrase {
        display: none;
        /* Hide lengthy text on mobile for cleaner UI, or adjust if requested */
    }

    .login-content {
        flex-direction: column;
        gap: 2rem;
        justify-content: center;
        text-align: center;
        padding: 0 1.2rem;
    }

    .login-branding {
        align-items: center;
    }

    .login-branding__wrapper {
        align-items: center;
        width: 100%;
    }

    /* .login-branding__accent { margin: 0; } – use default flex alignment */
    .login-branding__accent {
        transform-origin: center center;
    }

    .login-card {
        flex: 0 0 auto;
        width: 100%;
        max-width: 380px;
    }

    .login-branding__title {
        /* Adjust width/size for mobile explicitly if needed */
        max-width: 85vw;
    }

    .login-legal-footer {
        min-height: 72px;
        height: auto;
        padding: 0.35rem 0;
    }

    .login-legal-footer__inner {
        justify-content: center;
        row-gap: 0.4rem;
    }
}

@media (max-height: 640px) {
    .login-card {
        padding: 1.5rem 1.5rem 1.2rem;
    }

    .login-card__language {
        margin-top: -0.2rem;
        margin-bottom: 0.5rem;
    }

    .login-card__header {
        margin-bottom: 1rem;
    }

    .login-card__header-icon {
        display: none;
    }

    .login-field {
        margin-bottom: 0.85rem;
    }
}