/* ================================================================
   HubBits & MorDocs — Customer Registration: Invitation Portal v1
   Page-scoped presentation only. Existing registration logic,
   validation, password hashing, database writes, header/footer,
   and the global arcane submit-button system are preserved.
   ================================================================ */

.auth-page--register{
    --invite-violet:#a772ff;
    --invite-violet-soft:#d8c1ff;
    --invite-gold:#d8bc78;
    --invite-rose:#d98bb9;
    --invite-ivory:#f3eef5;
}

.auth-page--register::before{
    border-color:rgba(216,188,120,.060);
    box-shadow:
        0 0 0 92px rgba(167,114,255,.018),
        0 0 0 182px rgba(216,188,120,.010),
        0 0 98px rgba(115,57,200,.060);
}

.auth-page--register .auth-shell{
    padding-top:58px !important;
    padding-bottom:82px !important;
}

/* ----------------------------------------------------------------
   Invitation Portal panel
   ---------------------------------------------------------------- */

.auth-page--register .auth-invitation-portal{
    isolation:isolate;
    width:min(100%, 760px);
    max-width:760px;
    padding:50px 54px 44px;
    border-color:rgba(216,188,120,.22);
    background:
        radial-gradient(circle at 88% 12%, rgba(167,114,255,.145), transparent 31%),
        radial-gradient(circle at 10% 92%, rgba(217,139,185,.055), transparent 28%),
        linear-gradient(145deg, rgba(255,255,255,.048), rgba(255,255,255,.010)),
        rgba(14,11,20,.965);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.055),
        inset 0 0 0 1px rgba(216,188,120,.018),
        0 30px 92px rgba(0,0,0,.47),
        0 0 62px rgba(109,51,211,.082);
}

.auth-page--register .auth-invitation-portal::before{
    right:9%;
    left:9%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(167,114,255,.24),
        rgba(232,207,151,.72),
        rgba(217,139,185,.15),
        rgba(167,114,255,.24),
        transparent
    );
    box-shadow:
        0 0 9px rgba(216,188,120,.065),
        0 0 15px rgba(167,114,255,.05);
}

.auth-page--register .auth-invitation-portal::after{
    content:"";
    position:absolute;
    z-index:0;
    inset:10px;
    pointer-events:none;
    border:1px solid rgba(216,188,120,.054);
    border-radius:calc(var(--hb-radius-lg) - 7px);
    background:
        linear-gradient(135deg,rgba(216,188,120,.20) 0 1px,transparent 1px) top left / 19px 19px no-repeat,
        linear-gradient(225deg,rgba(216,188,120,.20) 0 1px,transparent 1px) top right / 19px 19px no-repeat,
        linear-gradient(45deg,rgba(217,139,185,.10) 0 1px,transparent 1px) bottom left / 19px 19px no-repeat,
        linear-gradient(315deg,rgba(167,114,255,.11) 0 1px,transparent 1px) bottom right / 19px 19px no-repeat;
    opacity:.74;
}

.auth-page--register .auth-invitation-portal > *{
    position:relative;
    z-index:2;
}

.auth-page--register .auth-invitation-portal h1{
    color:#f5eff7;
    text-shadow:
        0 0 22px rgba(167,114,255,.055),
        0 1px 0 rgba(255,255,255,.025);
}

.auth-page--register .auth-invitation-portal .form-intro{
    max-width:650px;
    margin-bottom:22px;
    color:#aaa1b2;
}

/* ----------------------------------------------------------------
   Invitation / traveler sigil
   ---------------------------------------------------------------- */

.auth-page--register .invitation-sigil{
    position:relative;
    width:68px;
    height:68px;
    margin-bottom:24px;
    border-color:rgba(216,188,120,.50);
    border-radius:50%;
    background:
        radial-gradient(circle at 50% 44%, rgba(167,114,255,.22), transparent 61%),
        radial-gradient(circle at 50% 80%, rgba(217,139,185,.06), transparent 45%),
        #0c0912;
    box-shadow:
        inset 0 0 0 5px rgba(255,255,255,.012),
        0 0 0 6px rgba(167,114,255,.034),
        0 0 31px rgba(167,114,255,.13);
    color:#e4d1ff;
    transform:none;
    animation:hbInvitationSigilArrival 1.5s cubic-bezier(.18,.72,.22,1) .12s both;
}

.auth-page--register .invitation-sigil svg{
    width:37px;
    height:37px;
    overflow:visible;
    fill:none;
    stroke:currentColor;
    stroke-width:1.45;
    stroke-linecap:round;
    stroke-linejoin:round;
    filter:
        drop-shadow(0 0 7px rgba(167,114,255,.31))
        drop-shadow(0 0 3px rgba(216,188,120,.11));
}

.auth-page--register .invitation-sigil__ring{
    position:absolute;
    inset:-8px;
    border:1px solid rgba(216,188,120,.22);
    border-radius:50%;
    background:
        conic-gradient(
            from 20deg,
            transparent 0 18%,
            rgba(216,188,120,.16) 18% 19%,
            transparent 19% 48%,
            rgba(217,139,185,.11) 48% 49%,
            transparent 49% 74%,
            rgba(167,114,255,.14) 74% 75%,
            transparent 75%
        );
    opacity:.72;
    transform:rotate(22deg);
    transition:
        opacity .34s ease,
        transform .62s cubic-bezier(.2,.74,.2,1),
        box-shadow .36s ease;
}

.auth-page--register .invitation-sigil::after{
    content:"";
    position:absolute;
    right:-5px;
    bottom:-5px;
    width:9px;
    height:9px;
    border:1px solid rgba(232,207,151,.56);
    background:linear-gradient(135deg,#8a55ce,#b96b9d);
    box-shadow:0 0 13px rgba(167,114,255,.25);
    transform:rotate(45deg);
}

/* ----------------------------------------------------------------
   Background invitation geometry
   ---------------------------------------------------------------- */

.auth-page--register .invitation-ward-field{
    position:absolute;
    z-index:0 !important;
    right:-70px;
    top:49%;
    width:310px;
    height:310px;
    pointer-events:none;
    opacity:.43;
    transform:translateY(-50%);
}

.auth-page--register .invitation-ward-field > span{
    position:absolute;
    inset:0;
    border:1px solid rgba(167,114,255,.072);
    border-radius:50%;
}

.auth-page--register .invitation-ward-field > span:nth-child(1){
    background:
        repeating-conic-gradient(
            from 9deg,
            rgba(167,114,255,.070) 0 1deg,
            transparent 1deg 20deg
        );
    -webkit-mask:radial-gradient(circle,transparent 0 41%,#000 42% 43%,transparent 44%);
    mask:radial-gradient(circle,transparent 0 41%,#000 42% 43%,transparent 44%);
    animation:hbInvitationWardDrift 22s linear infinite;
}

.auth-page--register .invitation-ward-field > span:nth-child(2){
    inset:52px;
    border-color:rgba(216,188,120,.075);
    box-shadow:
        0 0 0 20px rgba(167,114,255,.008),
        0 0 24px rgba(167,114,255,.024);
    animation:hbInvitationWardDriftReverse 28s linear infinite;
}

.auth-page--register .invitation-ward-field > span:nth-child(3){
    inset:105px;
    border-color:rgba(217,139,185,.080);
    box-shadow:inset 0 0 20px rgba(167,114,255,.022);
}

/* ----------------------------------------------------------------
   Invitation status strip
   ---------------------------------------------------------------- */

.auth-page--register .invitation-status{
    display:flex;
    align-items:center;
    gap:11px;
    margin:0 0 22px;
    padding:10px 12px;
    border:1px solid rgba(216,188,120,.11);
    border-radius:11px;
    background:
        radial-gradient(circle at 8% 0%, rgba(167,114,255,.072), transparent 44%),
        linear-gradient(90deg,rgba(217,139,185,.018),transparent 30%),
        rgba(8,6,11,.24);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.018),
        0 8px 18px rgba(0,0,0,.10);
}

.auth-page--register .invitation-status__mark{
    display:grid;
    place-items:center;
    width:31px;
    height:31px;
    flex:0 0 31px;
    border:1px solid rgba(216,188,120,.25);
    border-radius:50%;
    background:rgba(167,114,255,.055);
    color:#d8bc78;
    box-shadow:0 0 13px rgba(167,114,255,.06);
}

.auth-page--register .invitation-status small,
.auth-page--register .invitation-status strong{
    display:block;
}

.auth-page--register .invitation-status small{
    color:#77707f;
    font-size:8px;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.auth-page--register .invitation-status strong{
    margin-top:2px;
    color:#bdb4c5;
    font-size:11.5px;
}

/* ----------------------------------------------------------------
   Registration form refinement
   ---------------------------------------------------------------- */

.auth-page--register .auth-form--register{
    gap:18px;
}

.auth-page--register .auth-form--register .form-field{
    position:relative;
}

.auth-page--register .auth-form--register input{
    border-color:rgba(211,196,226,.18);
    background:
        linear-gradient(90deg, rgba(167,114,255,.018), transparent 34%),
        rgba(5,4,8,.62);
}

.auth-page--register .auth-form--register input:focus-visible{
    border-color:rgba(190,151,250,.72);
    box-shadow:
        0 0 0 3px rgba(156,108,255,.13),
        0 0 25px rgba(114,56,218,.10),
        inset 0 0 18px rgba(167,114,255,.025);
}

.auth-page--register .form-help{
    color:#756d7b;
}

.auth-page--register .auth-invitation-portal:focus-within{
    border-color:rgba(216,188,120,.28);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.060),
        inset 0 0 0 1px rgba(216,188,120,.022),
        0 30px 92px rgba(0,0,0,.47),
        0 0 66px rgba(109,51,211,.102);
}

.auth-page--register .auth-invitation-portal:focus-within .invitation-sigil{
    border-color:rgba(204,169,255,.70);
    color:#fff2ff;
    box-shadow:
        inset 0 0 0 5px rgba(167,114,255,.045),
        0 0 0 6px rgba(167,114,255,.046),
        0 0 34px rgba(167,114,255,.22);
}

.auth-page--register .auth-invitation-portal:focus-within .invitation-sigil__ring{
    opacity:.95;
    transform:rotate(122deg);
    box-shadow:0 0 19px rgba(167,114,255,.11);
}

/* Existing global arcane-button behavior remains in charge. */
.auth-page--register .form-submit{
    margin-top:4px;
    border-color:rgba(201,169,107,.35);
    background:
        radial-gradient(circle at 16% 0%, rgba(170,111,255,.18), transparent 44%),
        linear-gradient(135deg,#1b1126,#291637 56%,#18101f);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.11),
        inset 0 -1px 0 rgba(216,188,120,.09),
        0 12px 28px rgba(51,21,91,.22);
    color:#f8edff;
}

.auth-page--register .auth-alternate{
    margin-top:27px;
    border-top-color:rgba(216,188,120,.085);
}

/* ----------------------------------------------------------------
   Arrival / ward awakening
   ---------------------------------------------------------------- */

@keyframes hbInvitationSigilArrival{
    0%{
        opacity:.45;
        transform:scale(.92);
        box-shadow:
            inset 0 0 0 5px rgba(255,255,255,.008),
            0 0 0 4px rgba(167,114,255,.025),
            0 0 12px rgba(167,114,255,.04);
    }
    42%{
        opacity:1;
        transform:scale(1.045);
        box-shadow:
            inset 0 0 0 5px rgba(167,114,255,.035),
            0 0 0 7px rgba(167,114,255,.050),
            0 0 35px rgba(167,114,255,.21);
    }
    100%{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes hbInvitationWardDrift{
    to{transform:rotate(360deg);}
}

@keyframes hbInvitationWardDriftReverse{
    to{transform:rotate(-360deg);}
}

/* ----------------------------------------------------------------
   Responsive / accessibility
   ---------------------------------------------------------------- */

@media(max-width:700px){
    .auth-page--register .auth-shell{
        padding-top:44px !important;
        padding-bottom:62px !important;
    }

    .auth-page--register .auth-invitation-portal{
        padding:39px 25px 35px;
    }

    .auth-page--register .invitation-ward-field{
        right:-125px;
        width:270px;
        height:270px;
        opacity:.32;
    }

    .auth-page--register .invitation-sigil{
        width:62px;
        height:62px;
    }

    .auth-page--register .invitation-sigil svg{
        width:34px;
        height:34px;
    }

    .auth-page--register .invitation-status{
        padding:9px 10px;
    }
}

@media(max-width:440px){
    .auth-page--register .auth-invitation-portal{
        padding:34px 20px 32px;
    }

    .auth-page--register .auth-form--register{
        gap:16px;
    }
}

@media(prefers-reduced-motion:reduce){
    .auth-page--register .invitation-sigil,
    .auth-page--register .invitation-sigil__ring,
    .auth-page--register .invitation-ward-field > span{
        animation:none !important;
        transition:none !important;
    }
}