/* =========================================================
   AVGUST ROLE PLAY — UCP LOGIN V16
   ========================================================= */

.ucp-login-page{
    min-height:calc(100vh - 190px);
    display:grid;
    place-items:center;
    padding:34px 0 52px;
}

.ucp-login-shell{
    position:relative;
    width:min(1120px,100%);
    min-height:470px;
    display:grid;
    grid-template-columns:minmax(0,1.36fr) minmax(330px,.64fr);
    overflow:hidden;
    border:1px solid rgba(190,79,235,.20);
    border-radius:28px;
    background:
        radial-gradient(circle at 22% 0%,rgba(178,64,224,.10),transparent 30%),
        linear-gradient(125deg,rgba(17,8,24,.96),rgba(10,5,15,.97) 62%,rgba(19,8,26,.96));
    box-shadow:
        0 28px 80px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.025);
}

.ucp-login-shell::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(115deg,transparent 0 48%,rgba(206,91,246,.035) 48.2% 48.6%,transparent 48.8% 100%);
    background-size:160px 160px;
    opacity:.55;
}

.ucp-login-copy{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:48px 52px 46px;
}

.ucp-login-kicker{
    display:inline-flex;
    align-items:center;
    gap:11px;
    width:max-content;
    margin-bottom:12px;
    color:#c47ee7;
    font:900 10px/1 Montserrat,Inter,sans-serif;
    letter-spacing:1.8px;
}
.ucp-login-kicker span{
    width:28px;height:1px;
    background:linear-gradient(90deg,#c84ef1,transparent);
}

.ucp-login-copy h1{
    margin:0;
    color:#f8f1fb;
    font:900 clamp(34px,4vw,50px)/1.03 Montserrat,Inter,sans-serif;
    letter-spacing:-1.8px;
}

.ucp-login-lead{
    max-width:610px;
    margin:13px 0 0;
    color:#9f91a9;
    font-size:13px;
    line-height:1.65;
}

.ucp-login-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:18px 0 22px;
}
.ucp-login-meta span{
    padding:6px 9px;
    border:1px solid rgba(188,77,232,.12);
    border-radius:999px;
    background:rgba(184,72,226,.035);
    color:#a991b4;
    font-size:8px;
    font-weight:800;
    letter-spacing:.45px;
    text-transform:uppercase;
}

.ucp-login-error{margin:0 0 14px!important}

.ucp-login-form{
    width:100%;
    max-width:640px;
    display:grid;
    gap:13px;
}

.ucp-login-field{
    display:grid;
    gap:7px;
}
.ucp-login-field>span{
    color:#c5b7cc;
    font-size:9px;
    font-weight:800;
}

.ucp-login-input-wrap{
    position:relative;
}
.ucp-login-input-wrap .input{
    width:100%;
    min-height:54px;
    padding:0 16px 0 48px!important;
    border:1px solid rgba(187,76,230,.18)!important;
    border-radius:13px!important;
    background:linear-gradient(180deg,rgba(25,12,34,.92),rgba(17,8,24,.96))!important;
    color:#f4ebf8!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.02)!important;
    transition:border-color .18s ease,box-shadow .18s ease,background .18s ease,transform .18s ease!important;
}
.ucp-login-input-wrap .input::placeholder{color:#665b6e!important}
.ucp-login-input-wrap .input:focus{
    outline:none!important;
    border-color:rgba(205,91,246,.50)!important;
    background:linear-gradient(180deg,rgba(31,14,42,.98),rgba(19,9,28,.98))!important;
    box-shadow:0 0 0 4px rgba(181,66,224,.08),0 12px 30px rgba(83,19,107,.12)!important;
    transform:translateY(-1px);
}

.ucp-login-input-icon{
    position:absolute;
    left:14px;top:50%;
    width:25px;height:25px;
    transform:translateY(-50%);
    display:grid;place-items:center;
    z-index:2;
    border:1px solid rgba(190,79,235,.18);
    border-radius:8px;
    background:rgba(186,72,229,.06);
    color:#d38cf1;
    font-size:9px;
    font-weight:900;
    pointer-events:none;
}
.ucp-login-input-icon--lock{font-size:7px;color:#b985cf}

.ucp-login-submit{
    min-height:54px;
    margin-top:2px;
    display:flex!important;
    align-items:center;
    justify-content:center;
    gap:11px;
    border-radius:13px!important;
    background:linear-gradient(95deg,#7929a7 0%,#ad42cf 55%,#df805b 100%)!important;
    box-shadow:0 14px 32px rgba(129,38,164,.17),inset 0 1px 0 rgba(255,255,255,.12)!important;
    transition:transform .18s ease,filter .18s ease,box-shadow .18s ease!important;
}
.ucp-login-submit:hover{
    transform:translateY(-2px);
    filter:brightness(1.05);
    box-shadow:0 19px 38px rgba(129,38,164,.24),inset 0 1px 0 rgba(255,255,255,.14)!important;
}
.ucp-login-submit b{font-size:16px;transition:transform .18s ease}
.ucp-login-submit:hover b{transform:translateX(3px)}

.ucp-login-note{
    margin-top:13px;
    color:#706677;
    font-size:8px;
    line-height:1.5;
}

.ucp-login-art{
    position:relative;
    overflow:hidden;
    border-left:1px solid rgba(187,77,230,.10);
    background:
        radial-gradient(circle at 50% 38%,rgba(185,73,228,.14),transparent 34%),
        linear-gradient(180deg,rgba(19,9,27,.60),rgba(8,4,13,.72));
}

.ucp-login-art-grid{
    position:absolute;
    inset:-20%;
    opacity:.18;
    background-image:
        linear-gradient(rgba(197,86,237,.12) 1px,transparent 1px),
        linear-gradient(90deg,rgba(197,86,237,.12) 1px,transparent 1px);
    background-size:42px 42px;
    transform:perspective(500px) rotateX(62deg) translateY(36%);
    transform-origin:center bottom;
    mask-image:linear-gradient(to top,#000,transparent 76%);
}

.ucp-login-art-orb{
    position:absolute;
    left:50%;top:48%;
    width:280px;height:280px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle,rgba(186,73,228,.23),rgba(186,73,228,.07) 42%,transparent 70%);
    filter:blur(10px);
}

.ucp-login-art-line{
    position:absolute;
    width:320px;height:60px;
    background:linear-gradient(90deg,transparent,rgba(188,72,228,.12),transparent);
    transform:rotate(-24deg);
}
.ucp-login-art-line--one{right:-95px;top:78px}
.ucp-login-art-line--two{left:-120px;bottom:90px;opacity:.55}

.ucp-login-art img{
    position:absolute;
    left:50%;bottom:0;
    z-index:3;
    width:auto;
    max-width:115%;
    height:91%;
    object-fit:contain;
    object-position:center bottom;
    transform:translateX(-50%);
    filter:drop-shadow(0 28px 26px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(181,71,222,.12));
}

.ucp-login-art-caption{
    position:absolute;
    left:22px;right:22px;bottom:20px;
    z-index:5;
    padding:13px 15px;
    border:1px solid rgba(207,96,246,.14);
    border-radius:12px;
    background:rgba(11,6,16,.64);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
}
.ucp-login-art-caption small{
    display:block;
    margin-bottom:5px;
    color:#9a70aa;
    font-size:7px;
    font-weight:900;
    letter-spacing:1.2px;
}
.ucp-login-art-caption strong{
    color:#eadcf0;
    font:900 13px/1.25 Montserrat,Inter,sans-serif;
}

@media (max-width:920px){
    .ucp-login-page{padding:22px 0 38px}
    .ucp-login-shell{grid-template-columns:1fr;min-height:0}
    .ucp-login-copy{padding:34px 28px}
    .ucp-login-art{min-height:310px;border-left:0;border-top:1px solid rgba(187,77,230,.10)}
    .ucp-login-art img{height:108%;max-width:430px}
}

@media (max-width:560px){
    .ucp-login-copy{padding:27px 18px}
    .ucp-login-shell{border-radius:20px}
    .ucp-login-copy h1{font-size:32px;letter-spacing:-1px}
    .ucp-login-meta{margin:15px 0 18px}
    .ucp-login-meta span:nth-child(3){display:none}
    .ucp-login-art{min-height:250px}
    .ucp-login-art-caption{left:14px;right:14px;bottom:12px}
}


/* =========================================================
   V16 — CURSOR PARALLAX / FULL LOGIN WINDOW TILT
   ========================================================= */
.ucp-login-shell{
    --login-rx:0deg;
    --login-ry:0deg;
    --login-x:0px;
    --login-y:0px;
    --login-glow-x:50%;
    --login-glow-y:35%;
    transform:
        perspective(1250px)
        translate3d(var(--login-x),var(--login-y),0)
        rotateX(var(--login-rx))
        rotateY(var(--login-ry));
    transform-style:preserve-3d;
    transform-origin:center center;
    backface-visibility:hidden;
    transition:transform .16s cubic-bezier(.22,.72,.24,1),border-color .2s ease,box-shadow .2s ease;
}

.ucp-login-shell::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    border-radius:inherit;
    background:
        radial-gradient(
            380px circle at var(--login-glow-x) var(--login-glow-y),
            rgba(205,91,246,.11),
            transparent 62%
        );
    opacity:.95;
}

.ucp-login-shell.is-cursor-moving{
    transition:transform .055s linear,border-color .18s ease,box-shadow .18s ease;
    border-color:rgba(205,91,246,.28);
    box-shadow:
        0 32px 88px rgba(0,0,0,.34),
        0 0 38px rgba(154,45,201,.08),
        inset 0 1px 0 rgba(255,255,255,.03);
}

.ucp-login-copy,
.ucp-login-art{
    transform:translateZ(18px);
}

.ucp-login-art img{
    --login-art-x:0px;
    --login-art-y:0px;
    transform:translateX(calc(-50% + var(--login-art-x))) translateY(var(--login-art-y));
    transition:transform .08s linear,filter .2s ease;
}

.ucp-login-art-caption{
    transform:translateZ(28px);
}

@media (pointer:coarse),(prefers-reduced-motion:reduce){
    .ucp-login-shell,
    .ucp-login-shell.is-cursor-moving{
        transform:none!important;
        transition:none!important;
    }
    .ucp-login-copy,
    .ucp-login-art,
    .ucp-login-art-caption{
        transform:none!important;
    }
    .ucp-login-art img{
        transform:translateX(-50%)!important;
        transition:none!important;
    }
}