/* ==========================================================
   NOVA MUSIC – LOGIN "DER WORTKOERPER"
   Eigenstaendige, neue Login-Design-Datei.
   Wird NACH app.css geladen und ersetzt/ueberschreibt
   das alte Login-Design schrittweise.
   Aktuell: nur Platzhalter, noch kein Design-Code.
   ========================================================== */

/* === NOVA WORDBODY: LEGACY LOGIN STAGE OFF === */

#loginScreen .nova-login-stage,
#loginScreen .login-glow,
#loginScreen .login-glow-2 {
    display: none !important;
}

/* === NOVA WORDBODY: STATISCHER ZUSTAND (Position/Groesse/Typografie) === */

.nova-wordbody{
    position:absolute;
    inset:0;
    z-index:1;
    overflow:hidden;
    pointer-events:none;
}

.nova-wordbody{
    position:absolute;
    inset:0;
    perspective:1400px;
    pointer-events:none;
    overflow:hidden;
}

.nova-wordbody-stack{
    position:absolute;
    inset:0;
    transform-style:preserve-3d;
    transform:scaleX(0.82) rotateY(-8deg) rotateX(2deg) rotateZ(-1deg);
    transform-origin:left top;
}

.nova-wordbody-depth,
.nova-wordbody-base,
.nova-wordbody-light{
    position:absolute;
    top:8vh;
    left:34vw;

    font-family:var(--font-display, 'Sora', sans-serif);
    font-weight:800;
    font-size:48vh;
    line-height:1;
    letter-spacing:-0.04em;
    white-space:nowrap;
    user-select:none;
}

.nova-wordbody-base{
    color:#15111f;
    opacity:.38;
}

.nova-wordbody-light{
    background:linear-gradient(115deg,#8b5cf6 0%,#c026d3 35%,#0ea5e9 75%,#38bdf8 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    opacity:.70;
}

@media (max-width:900px){
    .nova-wordbody{
        display:none;
    }
}

/* === NOVA WORDBODY: STATISCHE LICHTMASKE (noch ohne Animation) === */

.nova-wordbody-light{
    -webkit-mask-image:
        linear-gradient(
            45deg,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,0) 15%,
            rgba(0,0,0,1) 38%,
            rgba(0,0,0,1) 62%,
            rgba(0,0,0,0) 85%,
            rgba(0,0,0,0) 100%
        );
    mask-image:
        linear-gradient(
            45deg,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,0) 15%,
            rgba(0,0,0,1) 38%,
            rgba(0,0,0,1) 62%,
            rgba(0,0,0,0) 85%,
            rgba(0,0,0,0) 100%
        );
    mask-repeat:no-repeat;
    -webkit-mask-repeat:no-repeat;
    mask-size:260% 260%;
    -webkit-mask-size:260% 260%;
    mask-position:10% 90%;
    -webkit-mask-position:10% 90%;
    animation:nova-light-sweep 45s ease-in-out infinite alternate;

    -webkit-mask-size:100% 100%;
    mask-size:100% 100%;

    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;

    -webkit-mask-position:center;
    mask-position:center;
}


/* ============================================================
   LAYER-STACK - echte translate3d-Extrusion ueber 12 Depth-Spans
   --d (1 = vorderste Depth-Stufe, 12 = hinterste) steuert
   sowohl den raeumlichen Versatz als auch die Farbe (dunkler nach hinten).
   Kein text-shadow, kein box-shadow, keine ::before/::after-Hacks.
   ============================================================ */
.nova-wordbody-depth{
    transform:translate3d(calc(var(--d) * 2px), calc(var(--d) * 2px), calc(var(--d) * -2px));
    color:hsl(270, 45%, calc(22% - (var(--d) * 1.5%)));
}

.nova-wordbody-base{
    transform:translateZ(0px);
}

.nova-wordbody-light{
    transform:translateZ(0.5px);
}


/* ============================================================
   LICHT-SWEEP - bewegt ausschliesslich die Maskenposition
   der Light-Ebene. Kein transform, keine Geometrie-Aenderung,
   keine neue Farbe. 45s pro Richtung, alternate = Hin-und-Zurueck.
   ============================================================ */
@keyframes nova-light-sweep{
    0%{
        mask-position:10% 90%;
        -webkit-mask-position:10% 90%;
    }
    100%{
        mask-position:90% 10%;
        -webkit-mask-position:90% 10%;
    }
}

@media (prefers-reduced-motion: reduce){
    .nova-wordbody-light{
        animation:none;
        mask-position:50% 50%;
        -webkit-mask-position:50% 50%;
    }
}


/* ============================================================
   BUTTON-HOVER-SWEEP - einmaliger, nicht wiederholender
   Licht-Sweep fuer den Submit-Button. Nur bei :hover, kein
   infinite, keine Aenderung des normalen Button-Designs.
   ============================================================ */
.login-form button[type="submit"]{
    position:relative;
    overflow:hidden;
}

.login-form button[type="submit"]::before{
    content:"";
    position:absolute;
    top:-20%;
    bottom:-20%;
    left:-30%;
    width:22%;
    pointer-events:none;
    background:linear-gradient(100deg,
        rgba(168,85,247,0) 0%,
        rgba(168,85,247,0.5) 45%,
        rgba(34,211,238,0.5) 55%,
        rgba(34,211,238,0) 100%
    );
    transform:translateX(0%) skewX(-12deg);
    opacity:0;
}

.login-form button[type="submit"]:hover::before{
    animation:nova-button-sweep .72s ease-out 1;
}

@keyframes nova-button-sweep{
    0%{
        transform:translateX(0%) skewX(-12deg);
        opacity:0;
    }
    15%{
        opacity:.5;
    }
    50%{
        opacity:.5;
    }
    100%{
        transform:translateX(600%) skewX(-12deg);
        opacity:0;
    }
}