/* ============================================
   NOVA CASINO — Login Page
   Concept: SUPERNOVA (deep space / star drift /
            nebula breath / nova rays)
   2026-09-17  CSS-only animated background.
   HTML 은 변경하지 않음. 영상 배경은 CSS 로 숨김.
   ============================================ */

@property --nova-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

html, body {
    height: 100%;
}

html {
    background: #07031a;
}

body.login-page {
    --space-deep: #07031a;
    --space-mid: #150b3a;
    --space-violet: #3a1b7a;
    --nova-magenta: #ff2d8a;
    --nova-violet: #b865ff;
    --nova-cyan: #74d3ff;

    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: 'Noto Sans JP', system-ui, -apple-system, sans-serif;
    background:
        radial-gradient(ellipse 80% 60% at 50% 110%, rgba(58, 27, 122, 0.55) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 10% 0%, rgba(255, 45, 138, 0.16) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 95% 10%, rgba(116, 211, 255, 0.14) 0%, transparent 55%),
        linear-gradient(180deg, var(--space-deep) 0%, var(--space-mid) 55%, #0b0524 100%);
    color: var(--text-primary);
    overflow: hidden;
    position: relative;
}

/* 배경 영상은 login.html 에서 <video> 태그 자체를 제거함 (main_bg.mp4 불필요) */

/* ---------- Layer 1: 성운 (nebula breath) ---------- */
body.login-page::before {
    content: "";
    position: fixed;
    inset: -20%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(closest-side at 30% 35%, rgba(184, 101, 255, 0.42), transparent 70%),
        radial-gradient(closest-side at 72% 60%, rgba(255, 45, 138, 0.30), transparent 70%),
        radial-gradient(closest-side at 55% 20%, rgba(116, 211, 255, 0.22), transparent 70%),
        radial-gradient(closest-side at 20% 80%, rgba(90, 40, 200, 0.35), transparent 70%);
    background-size: 70% 70%, 60% 60%, 50% 50%, 65% 65%;
    background-repeat: no-repeat;
    animation: nebulaBreath 28s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes nebulaBreath {
    0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); opacity: 0.85; }
    50%  { transform: translate3d(3%, -2%, 0) scale(1.08) rotate(2deg); opacity: 1; }
    100% { transform: translate3d(-3%, 2%, 0) scale(1.03) rotate(-2deg); opacity: 0.9; }
}

/* ---------- Layer 2: 초신성 광선 (nova rays) ---------- */
body.login-page::after {
    content: "";
    position: fixed;
    left: 50%;
    top: 50%;
    width: 140vmax;
    height: 140vmax;
    margin: -70vmax 0 0 -70vmax;
    z-index: 0;
    pointer-events: none;
    background:
        repeating-conic-gradient(from var(--nova-angle),
            rgba(255, 255, 255, 0) 0deg,
            rgba(255, 255, 255, 0.045) 3deg,
            rgba(255, 255, 255, 0) 7deg,
            rgba(184, 101, 255, 0.06) 11deg,
            rgba(255, 255, 255, 0) 15deg);
    -webkit-mask-image: radial-gradient(circle at center, #000 0%, rgba(0, 0, 0, 0.6) 22%, transparent 55%);
    mask-image: radial-gradient(circle at center, #000 0%, rgba(0, 0, 0, 0.6) 22%, transparent 55%);
    animation: novaSpin 90s linear infinite, novaPulse 6s ease-in-out infinite;
    will-change: transform;
}

@keyframes novaSpin {
    to { --nova-angle: 360deg; }
}

@keyframes novaPulse {
    0%, 100% { transform: scale(1);    opacity: 0.75; }
    50%      { transform: scale(1.06); opacity: 1; }
}

/* ---------- Layer 3·4: 별밭 (star drift, 2겹 시차) ---------- */
.login-bg-overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 45, 138, 0.18) 0%, rgba(184, 101, 255, 0.10) 18%, transparent 42%);
    animation: coreGlow 6s ease-in-out infinite;
}

@keyframes coreGlow {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}

.login-bg-overlay::before,
.login-bg-overlay::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -100%;
    height: 200%;
    background-repeat: repeat;
    pointer-events: none;
}

/* 먼 별: 작고 많고 느림 */
.login-bg-overlay::before {
    background-image:
        radial-gradient(1px 1px at 12px 18px,  rgba(255,255,255,0.9), transparent 2px),
        radial-gradient(1px 1px at 78px 62px,  rgba(255,255,255,0.7), transparent 2px),
        radial-gradient(1px 1px at 145px 30px, rgba(214,200,238,0.8), transparent 2px),
        radial-gradient(1px 1px at 200px 120px,rgba(255,255,255,0.6), transparent 2px),
        radial-gradient(1px 1px at 40px 160px, rgba(116,211,255,0.8), transparent 2px),
        radial-gradient(1px 1px at 110px 210px,rgba(255,255,255,0.75), transparent 2px),
        radial-gradient(1px 1px at 230px 40px, rgba(255,255,255,0.5), transparent 2px),
        radial-gradient(1px 1px at 170px 180px,rgba(255,255,255,0.85), transparent 2px),
        radial-gradient(1px 1px at 60px 240px, rgba(255,255,255,0.6), transparent 2px),
        radial-gradient(1px 1px at 250px 230px,rgba(214,200,238,0.7), transparent 2px);
    background-size: 260px 260px;
    opacity: 0.8;
    animation: starDrift 140s linear infinite;
}

/* 가까운 별: 크고 적고 빠름 + 반짝임 */
.login-bg-overlay::after {
    background-image:
        radial-gradient(1.6px 1.6px at 60px 40px,  rgba(255,255,255,1), transparent 2.5px),
        radial-gradient(1.4px 1.4px at 220px 150px,rgba(255,255,255,0.9), transparent 2.5px),
        radial-gradient(1.8px 1.8px at 330px 80px, rgba(184,101,255,0.95), transparent 3px),
        radial-gradient(1.4px 1.4px at 140px 300px,rgba(255,255,255,0.85), transparent 2.5px),
        radial-gradient(2px 2px at 400px 260px,    rgba(116,211,255,0.9), transparent 3px),
        radial-gradient(1.5px 1.5px at 290px 360px,rgba(255,255,255,0.8), transparent 2.5px);
    background-size: 440px 440px;
    opacity: 0.9;
    animation: starDrift 80s linear infinite, starTwinkle 4s ease-in-out infinite;
}

@keyframes starDrift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, 50%, 0); }
}

@keyframes starTwinkle {
    0%, 100% { opacity: 0.9; }
    50%      { opacity: 0.55; }
}

/* ---------- Layer 5: 유성 (shooting star) ---------- */
.login-wrap::before {
    content: "";
    position: fixed;
    top: 8%;
    left: -12%;
    width: 220px;
    height: 2px;
    z-index: -1;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 60%, rgba(116,211,255,0) 100%);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
    transform: rotate(28deg);
    opacity: 0;
    pointer-events: none;
    animation: shootingStar 11s linear infinite;
    animation-delay: 3s;
}

.login-wrap::after {
    content: "";
    position: fixed;
    top: 55%;
    left: -12%;
    width: 150px;
    height: 1.5px;
    z-index: -1;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 60%, rgba(255,45,138,0) 100%);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    transform: rotate(24deg);
    opacity: 0;
    pointer-events: none;
    animation: shootingStar 17s linear infinite;
    animation-delay: 9s;
}

@keyframes shootingStar {
    0%    { transform: translate3d(0, 0, 0) rotate(26deg); opacity: 0; }
    2%    { opacity: 1; }
    9%    { transform: translate3d(70vw, 40vh, 0) rotate(26deg); opacity: 0; }
    100%  { transform: translate3d(70vw, 40vh, 0) rotate(26deg); opacity: 0; }
}

/* ============================================
   Content
   ============================================ */
.login-wrap {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    /* fill-mode 를 backwards 로: 끝난 뒤 transform 이 남으면 내부 fixed pseudo(유성·버스트·화이트아웃)가
       뷰포트가 아닌 이 박스 기준으로 잡혀 '네모'로 보이는 버그가 생김 */
    animation: wrapRise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

@keyframes wrapRise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Logo — 별빛 shimmer */
.login-logo {
    position: relative;
    margin-bottom: 36px;
    font-size: 46px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    text-decoration: none;
    line-height: 1;
    text-shadow:
        0 0 24px rgba(184, 101, 255, 0.55),
        0 8px 30px rgba(0, 0, 0, 0.6);
}

.login-logo b {
    background: linear-gradient(90deg, var(--nova-violet) 0%, #e2a7ff 35%, var(--nova-cyan) 50%, #e2a7ff 65%, var(--nova-violet) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--nova-violet);
    animation: logoShimmer 5s linear infinite;
}

@keyframes logoShimmer {
    from { background-position: 0% 50%; }
    to   { background-position: 220% 50%; }
}

/* 로고 옆 4각 별 글린트 */
.login-logo::after {
    content: "";
    position: absolute;
    top: -14px;
    right: -22px;
    width: 18px;
    height: 18px;
    background: radial-gradient(circle, #fff 0%, rgba(255,255,255,0.9) 30%, rgba(184,101,255,0) 70%);
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
    animation: glint 3.2s ease-in-out infinite;
}

@keyframes glint {
    0%, 100% { transform: scale(0.6) rotate(0deg);   opacity: 0.4; }
    50%      { transform: scale(1.15) rotate(45deg); opacity: 1; }
}

/* Login card — glass + 회전 광테두리 */
.login-card {
    width: 100%;
    position: relative;
    border: 1px solid transparent;
    border-radius: 22px;
    padding: 40px 36px 32px;
    background:
        linear-gradient(160deg, rgba(31, 19, 66, 0.86) 0%, rgba(14, 6, 40, 0.90) 100%) padding-box,
        conic-gradient(from var(--nova-angle),
            rgba(184, 101, 255, 0.05) 0deg,
            rgba(184, 101, 255, 0.9) 60deg,
            rgba(116, 211, 255, 0.9) 120deg,
            rgba(255, 45, 138, 0.9) 200deg,
            rgba(184, 101, 255, 0.05) 300deg,
            rgba(184, 101, 255, 0.05) 360deg) border-box;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.65),
        0 0 60px rgba(184, 101, 255, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    animation: borderSpin 8s linear infinite;
}

@keyframes borderSpin {
    to { --nova-angle: 360deg; }
}

/* 카드 상단 하이라이트 */
.login-card::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    pointer-events: none;
}

.login-title {
    margin: 0 0 8px;
    font-size: 30px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: 0.03em;
}

.login-subtitle {
    margin: 0 0 28px;
    font-size: 16px;
    color: var(--text-muted);
    font-weight: 500;
}

.login-field {
    margin-bottom: 18px;
}

.login-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
}

.login-field input {
    width: 100%;
    height: 56px;
    padding: 0 18px;
    font-size: 18px;
    font-family: inherit;
    color: var(--text-primary);
    background: rgba(5, 2, 20, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    outline: none;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.login-field input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

.login-field input:hover {
    border-color: rgba(184, 101, 255, 0.5);
}

.login-field input:focus {
    border-color: var(--nova-violet);
    background: rgba(5, 2, 20, 0.6);
    box-shadow:
        0 0 0 4px rgba(184, 101, 255, 0.16),
        0 0 24px rgba(184, 101, 255, 0.35);
}

.login-error {
    display: none;
    margin: 0 0 16px;
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 600;
    color: #ff8497;
    background: rgba(255, 45, 138, 0.12);
    border: 1px solid rgba(255, 45, 138, 0.35);
    border-radius: 10px;
    line-height: 1.5;
}

.login-error.is-visible {
    display: block;
    animation: loginShake 0.35s ease;
}

.login-error::before {
    content: "\26A0";
    display: inline-block;
    margin-right: 6px;
    font-size: 14px;
}

@keyframes loginShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.login-card.has-error .login-field input {
    border-color: rgba(255, 45, 138, 0.6);
}

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 6px 0 24px;
    font-size: 15px;
}

.login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.login-remember input {
    width: 18px;
    height: 18px;
    accent-color: var(--nova-violet);
    cursor: pointer;
}

/* CTA — 마젠타→바이올렛, hover 시 광택 스윕 */
.login-btn {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 58px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--nova-magenta) 0%, var(--nova-violet) 100%);
    color: #ffffff;
    font-size: 19px;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: 0.08em;
    font-family: inherit;
    box-shadow:
        0 12px 28px rgba(255, 45, 138, 0.38),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    transition: transform 0.18s, box-shadow 0.2s, filter 0.2s;
}

.login-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -70%;
    width: 50%;
    height: 100%;
    background: linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
    pointer-events: none;
}

.login-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow:
        0 18px 36px rgba(255, 45, 138, 0.5),
        0 0 30px rgba(184, 101, 255, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

.login-btn:hover::after {
    left: 130%;
}

.login-btn:active {
    transform: translateY(1px);
    box-shadow: 0 6px 16px rgba(255, 45, 138, 0.3);
}

.login-hint {
    margin-top: 18px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
}

.login-hint code {
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--nova-violet);
    font-family: 'Courier New', monospace;
    font-size: 12px;
}

/* ============================================
   Responsive / Motion
   ============================================ */
@media (max-width: 480px) {
    .login-card {
        padding: 30px 22px 26px;
        border-radius: 18px;
    }

    .login-logo {
        font-size: 36px;
        margin-bottom: 26px;
    }

    .login-logo::after {
        right: -16px;
        top: -10px;
        width: 14px;
        height: 14px;
    }

    .login-title {
        font-size: 26px;
    }

    body.login-page::after {
        width: 220vmax;
        height: 220vmax;
        margin: -110vmax 0 0 -110vmax;
    }
}


/* ============================================
   [2026-09-17] 로그인 처리중 / 성공 애니메이션
   - 처리중: 개발자 login.js 가 submit 시 버튼을 disabled 로 바꿈 → :disabled 로 감지 (JS 변경 불필요)
   - 성공:   body.is-success 클래스가 붙으면 워프 연출. 개발자 login.js 의
             `window.location.href = '/'` 직전에 아래 2줄 추가 요청:
               document.body.classList.add('is-success');
               setTimeout(function(){ window.location.href = '/'; }, 950); return;
   ============================================ */

/* ---- 처리중: 버튼 그라디언트 흐름 + 카드 글로우 맥동 ---- */
.login-btn:disabled {
    cursor: progress;
    background: linear-gradient(90deg, var(--nova-magenta) 0%, var(--nova-violet) 35%, #74d3ff 50%, var(--nova-violet) 65%, var(--nova-magenta) 100%);
    background-size: 220% 100%;
    animation: loginProcessing 1.1s linear infinite;
    transform: none;
    box-shadow: 0 12px 30px rgba(184, 101, 255, 0.5), 0 0 30px rgba(116, 211, 255, 0.35);
}

.login-btn:disabled::after {
    display: none;
}

@keyframes loginProcessing {
    from { background-position: 0% 0; }
    to   { background-position: 220% 0; }
}

.login-card:has(.login-btn:disabled) {
    animation: borderSpin 1.6s linear infinite, loginCardPulse 1.1s ease-in-out infinite;
}

@keyframes loginCardPulse {
    0%, 100% { box-shadow: 0 30px 80px rgba(0,0,0,0.65), 0 0 60px rgba(184,101,255,0.22), inset 0 1px 0 rgba(255,255,255,0.08); }
    50%      { box-shadow: 0 30px 80px rgba(0,0,0,0.65), 0 0 90px rgba(184,101,255,0.55), 0 0 40px rgba(116,211,255,0.3), inset 0 1px 0 rgba(255,255,255,0.12); }
}

body.login-page:has(.login-btn:disabled) .login-bg-overlay {
    animation: coreGlow 1.2s ease-in-out infinite;
}

/* ---- 성공: 워프 점프 ---- */
body.login-page.is-success .login-card {
    animation: loginWarpOut 0.95s cubic-bezier(0.55, 0, 0.85, 0.35) forwards;
    pointer-events: none;
}

@keyframes loginWarpOut {
    0%   { transform: scale(1);    opacity: 1; filter: blur(0); }
    45%  { transform: scale(1.04); opacity: 1; filter: blur(0); }
    100% { transform: scale(1.7);  opacity: 0; filter: blur(8px); }
}

body.login-page.is-success .login-logo {
    animation: loginLogoFlare 0.95s ease-out forwards;
}

@keyframes loginLogoFlare {
    0%   { transform: scale(1);    letter-spacing: 0.06em; text-shadow: 0 0 24px rgba(184,101,255,0.55), 0 8px 30px rgba(0,0,0,0.6); }
    40%  { transform: scale(1.12); letter-spacing: 0.14em; text-shadow: 0 0 40px rgba(255,255,255,0.9), 0 0 80px rgba(184,101,255,0.9); }
    100% { transform: scale(1.25); letter-spacing: 0.22em; opacity: 0; text-shadow: 0 0 60px rgba(255,255,255,1), 0 0 120px rgba(184,101,255,1); }
}

/* 별밭이 세로로 늘어나며 쏟아짐 (워프 스트릭) */
body.login-page.is-success .login-bg-overlay::before,
body.login-page.is-success .login-bg-overlay::after {
    animation: loginWarpStars 0.95s cubic-bezier(0.5, 0, 1, 0.5) forwards;
}

@keyframes loginWarpStars {
    0%   { transform: translate3d(0, 0, 0) scaleY(1);   opacity: 0.9; }
    100% { transform: translate3d(0, 80%, 0) scaleY(16); opacity: 1; }
}

/* 초신성 광선 폭발 (밝아지며 확대) */
body.login-page.is-success::after {
    animation: novaSpin 90s linear infinite, loginRaysBurst 0.95s ease-out forwards;
}

@keyframes loginRaysBurst {
    0%   { transform: scale(1);   opacity: 0.8; filter: brightness(1); }
    100% { transform: scale(1.5); opacity: 1;   filter: brightness(2.4); }
}

/* 중앙 버스트 링 (유성 2 pseudo 재활용) */
body.login-page.is-success .login-wrap::after {
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: 0;
    z-index: 3;
    border-radius: 50%;
    background: transparent;
    /* scale 대신 width/height 를 키워 테두리가 두꺼워지지 않게 (얇은 링이 퍼져나감) */
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 30px 6px rgba(184, 101, 255, 0.7), inset 0 0 24px rgba(255, 45, 138, 0.5);
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: loginBurst 0.85s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
    animation-delay: 0.05s;
}

@keyframes loginBurst {
    0%   { width: 40px;    height: 40px;    opacity: 0; transform: translate(-50%, -50%); }
    12%  { opacity: 1; }
    100% { width: 240vmax; height: 240vmax; opacity: 0; transform: translate(-50%, -50%); }
}

/* 화면 전체 화이트아웃 → 홈으로 자연스럽게 연결 */
body.login-page.is-success .login-wrap::before {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 4;
    border-radius: 0;
    box-shadow: none;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,1) 0%, rgba(226,167,255,0.9) 40%, rgba(11,5,36,0.95) 100%);
    opacity: 0;
    transform: none;
    animation: loginWhiteout 0.95s ease-in forwards;
}

@keyframes loginWhiteout {
    0%   { opacity: 0; filter: brightness(1); }
    55%  { opacity: 0; filter: brightness(1); }
    80%  { opacity: 1; filter: brightness(1); }
    100% { opacity: 1; filter: brightness(0.08); }
}