/* =========================================================
   INTRO SCREEN
========================================================= */

#introScreen {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(326deg, #150f4a, #f36b6b);
    overflow: hidden;
    z-index: 9999;
}


/* =========================================================
   INTRO CONTAINER
========================================================= */

.intro-container {
    width: 100%;
    max-width: 1200px;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}


/* =========================================================
   HEADER
========================================================= */

.intro-header h1 {
    color: #fff;
    font-size: 48px;
    font-weight: 700;
    margin: 0 0 8px;
}

.intro-header p {
    color: rgba(255, 255, 255, .90);
    font-size: 20px;
    margin: 0 0 15px;
}


/* =========================================================
   ERP BADGE
========================================================= */

.erp-badge {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 30px;
    background: rgba(255, 255, 255, .12);
    color: rgb(255 219 5 / 23%);
    backdrop-filter: blur(20px);
    border: 1px solid rgb(255 219 5 / 84%);
    font-size: 13px;
    letter-spacing: 2px;
}


/* =========================================================
   ENVELOPE AREA
========================================================= */

.envelope-wrapper {
    margin-top: 35px;
    min-height: 380px;
}


/* =========================================================
   ENVELOPE
========================================================= */

.envelope {
    position: relative;
    width: 520px;
    height: 340px;
    margin: auto;
    perspective: 1200px;
    transform-style: preserve-3d;
    cursor: pointer;
    animation: envelopeFloat 4s ease-in-out infinite;
    transition: transform .45s ease, filter .45s ease;
}


/* =========================================================
   ENVELOPE SHADOW
========================================================= */

.env-shadow {
    position: absolute;
    width: 420px;
    height: 45px;
    left: 50%;
    bottom: -28px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(0, 0, 0, .28);
    filter: blur(28px);
    z-index: 0;
}


/* =========================================================
   ENVELOPE BACK / BODY
========================================================= */

.env-back {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 18px;
    background: linear-gradient( 145deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .10) );
    border: 1px solid rgba(255, 255, 255, .28);
    backdrop-filter: blur(20px);
    box-shadow: 0 35px 70px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -20px 35px rgba(0, 0, 0, .08);
    z-index: 1;
}


    /* =========================================================
   LIGHT SHINE
========================================================= */

    .env-back::before {
        content: "";
        position: absolute;
        top: -60px;
        left: -120%;
        width: 70%;
        height: 450px;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .30), transparent );
        transform: rotate(25deg);
        animation: shine 5s linear infinite;
    }


/* =========================================================
   LEFT FOLD
========================================================= */

.fold-left {
    position: absolute;
    left: 0;
    top: 0;
    width: 52%;
    height: 100%;
    background: linear-gradient( 135deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .04) );
    clip-path: polygon( 0 0, 100% 50%, 0 100% );
    z-index: -1;
    border-radius:15px;
}


/* =========================================================
   RIGHT FOLD
========================================================= */

.fold-right {
    position: absolute;
    right: 0;
    top: 0;
    width: 52%;
    height: 100%;
    background: linear-gradient( 225deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04) );
    clip-path: polygon( 100% 0, 0 50%, 100% 100% );
    z-index: -1;
    border-radius: 15px;
}


/* =========================================================
   TOP ENVELOPE FLAP
   This will be animated in STEP 4
========================================================= */

/*.fold-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 58%;
    background: linear-gradient( 180deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, .12) );
    clip-path: polygon( 0 0, 100% 0, 50% 100% );
    transform-origin: 50% 0%;
    transform-style: preserve-3d;
    z-index: 10;
    filter: drop-shadow( 0 5px 8px rgba(0, 0, 0, .12) );
    transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}*/
.fold-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 58%;
    background: linear-gradient(180deg, rgb(207 18 18 / 53%), rgb(217 209 209));
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform-origin: 50% 0%;
    transform-style: preserve-3d;
    z-index: 15;
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .12));
    transition: transform .8s cubic-bezier(.22, .61, .36, 1);
    border-radius: 15px;
}

/* =========================================================
   BOTTOM FOLD
========================================================= */

.fold-bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 62%;
    background: linear-gradient( 145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05) );
    clip-path: polygon( 0 0, 50% 52%, 100% 0, 100% 100%, 0 100% );
    border-radius: 0 0 18px 18px;
    z-index: 5;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}


/* =========================================================
   LOCK / SECURITY SEAL
========================================================= */

.env-lock {
    position: absolute;
    left: 50%;
    top: -18px;
    transform: translateX(-50%);
    z-index: 30;
    transition: transform .4s ease, filter .4s ease;
}


/* =========================================================
   LOCK RING
========================================================= */

.lock-ring {
    width: 27px;
    height: 23px;
    margin: auto;
    border: 4px solid #e1bd68;
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    filter: drop-shadow( 0 2px 4px rgba(0, 0, 0, .25) );
    display: none;
}


/* =========================================================
   LOCK BODY
========================================================= */
.lock-body {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    color: #ffffffba;
    background: linear-gradient(145deg, #e0746c, #2e1261);
    border: 2px solid rgb(241 215 5);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25), inset 0 1px 2px rgba(255, 255, 255, .6);
    font-size: 22px;
    position: relative;
    top: 167px;
}


/* =========================================================
   LOCK HOVER
========================================================= */

.envelope:hover .lock-body {
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25), 0 0 20px rgba(255, 210, 100, .45), inset 0 1px 2px rgba(255, 255, 255, .6);
}


/* =========================================================
   ENVELOPE HOVER
========================================================= */

.envelope:hover {
    filter: brightness(1.04);
    transform: translateY(-10px) scale(1.015);
}


/* =========================================================
   ENVELOPE FLOATING
========================================================= */

@keyframes envelopeFloat {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}


/* =========================================================
   ENVELOPE SHINE
========================================================= */

@keyframes shine {

    0% {
        left: -120%;
    }

    100% {
        left: 180%;
    }
}


/* =========================================================
   LOCK GLOW
========================================================= */

@keyframes lockGlow {

    0%, 100% {
        box-shadow: 0 0 15px rgba(255, 215, 120, .25);
    }

    50% {
        box-shadow: 0 0 30px rgba(255, 215, 120, .70);
    }
}


/* =========================================================
   INTRO FOOTER
========================================================= */

.intro-footer {
    margin-top: -31px;
    color: #ffee5880;
    opacity: .85;
    font-size: 17px;
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 900px) {

    .intro-container {
        padding: 20px;
    }

    .intro-header h1 {
        font-size: 40px;
    }

    .intro-header p {
        font-size: 18px;
    }

    .envelope-wrapper {
        margin-top: 50px;
    }

    .envelope {
        width: 450px;
        height: 295px;
    }

    .env-shadow {
        width: 360px;
    }
}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 600px) {

    #introScreen {
        align-items: center;
    }

    .intro-container {
        padding: 15px;
    }

    .intro-header h1 {
        font-size: 30px;
        line-height: 1.2;
        margin-bottom: 10px;
    }

    .intro-header p {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .erp-badge {
        font-size: 11px;
        padding: 7px 15px;
    }

    .envelope-wrapper {
        margin-top: 45px;
        min-height: 280px;
    }

    .envelope {
        width: 340px;
        height: 220px;
    }

    .env-shadow {
        width: 270px;
        height: 30px;
        bottom: -18px;
    }

    .lock-ring {
        width: 20px;
        height: 18px;
        border-width: 3px;
    }

    .lock-body {
        width: 38px;
        height: 38px;
        font-size: 17px;
        border-radius: 99px;
        top : 150px;
    }

    .env-lock {
        top: -61px;
    }

    .intro-footer {
        margin-top: 25px;
        font-size: 14px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .intro-header h1 {
        font-size: 26px;
    }

    .intro-header p {
        font-size: 14px;
    }

    .envelope {
        width: 300px;
        height: 195px;
    }

    .env-shadow {
        width: 235px;
    }

    .envelope-wrapper {
        margin-top: 35px;
    }
}

/* Prevent floating animation while opening */
.envelope.is-opening,
.envelope.is-opened {
    animation: none;
}


/* Keep envelope stable during opening */
.envelope.is-opening {
    transform: translateY(-5px);
}


    /* =========================================================
   LOCK RELEASE
========================================================= */

    .envelope.is-opening .env-lock,
    .envelope.is-opened .env-lock {
        transform: translateX(-50%) translateY(-35px) scale(.85);
        opacity: 0;
        filter: blur(2px);
        transition: transform .35s ease, opacity .35s ease, filter .35s ease;
    }


    /* =========================================================
   TOP FLAP OPENING
========================================================= */

    .envelope.is-opening .fold-top,
    .envelope.is-opened .fold-top {
        transform: rotateX(180deg);
        transition: transform .75s cubic-bezier(.22,.61,.36,1);
    }


/* =========================================================
   ENVELOPE OPENED STATE
========================================================= */

.envelope.is-opened {
    transform: translateY(-5px) scale(.98);
    filter: brightness(1.08);
    transition: transform .5s ease, filter .5s ease;
}


/* =========================================================
   OPENING GLOW
========================================================= */

.envelope.is-opening .env-back {
    box-shadow: 0 35px 80px rgba(0,0,0,.40), 0 0 35px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.40), inset 0 -20px 35px rgba(0,0,0,.08);
    transition: box-shadow .5s ease;
}


/* =========================================================
   INTRO SCREEN EXIT
========================================================= */

#introScreen.intro-exit {
    opacity: 0;
    transform: scale(1.03);
    pointer-events: none;
    transition: opacity .45s ease, transform .45s ease;
}


/* =========================================================
   LOGIN CARD REVEAL
========================================================= */

.login-card.login-reveal {
    display: flex !important;
    opacity: 0;
    transform: translateY(35px) scale(.96);
    animation: loginCardReveal .55s cubic-bezier(.22,.61,.36,1) forwards;
}


@keyframes loginCardReveal {

    0% {
        opacity: 0;
        transform: translateY(35px) scale(.96);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* =========================================================
   PREVENT USER CLICKING MULTIPLE TIMES
========================================================= */

.envelope.is-opening,
.envelope.is-opened {
    pointer-events: none;
}

/* =====================================================
   STEP 4 - ENVELOPE TO LOGIN CARD TRANSITION
===================================================== */

/* Intro screen transition */
#introScreen {
    opacity: 1;
    visibility: visible;
    transition: opacity .45s ease, visibility .45s ease;
}

    /* When intro is leaving */
    #introScreen.intro-exit {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }


/* Login card initial state */
.login-card {
    opacity: 0;
    visibility: hidden;
    transform: translateY(35px) scale(.97);
}


    /* Login card reveal */
    .login-card.login-reveal {
        visibility: visible;
        animation: loginCardReveal .65s cubic-bezier(.22,.61,.36,1) forwards;
    }


/* Login card entrance */
@keyframes loginCardReveal {

    0% {
        opacity: 0;
        transform: translateY(35px) scale(.97);
    }

    60% {
        opacity: 1;
        transform: translateY(-3px) scale(1.005);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* Envelope disappears */
.envelope.envelope-exit {
    animation: envelopeExit .4s ease forwards !important;
    pointer-events: none;
}


@keyframes envelopeExit {

    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(.85) translateY(-10px);
    }
}


/* Intro contents disappear slightly faster */
.intro-container.intro-exit-content {
    transform: translateY(-15px);
    transition: transform .45s ease;
}


/* Mobile */
@media (max-width: 768px) {

    .login-card.login-reveal {
        animation-duration: .55s;
    }
}

/* =====================================================
   LOGIN CARD - HIDDEN INITIALLY
===================================================== */

.login-card {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* =====================================================
   ENVELOPE - SMOOTH EXIT
===================================================== */

.envelope.fade-envelope {
    animation: envelopeDisappear .65s cubic-bezier(.22,.61,.36,1) forwards;
    pointer-events: none;
}

@keyframes envelopeDisappear {

    0% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }

    60% {
        opacity: .55;
        transform: scale(1.025);
        filter: blur(1px);
    }

    100% {
        opacity: 0;
        transform: scale(1.06);
        filter: blur(5px);
    }
}


/* =====================================================
   INTRO SCREEN - REMOVE ENVELOPE AREA
===================================================== */

#introScreen.hide-intro {
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
}


/* =====================================================
   LOGIN CARD - RISE INTO VIEW
===================================================== */

.login-card.show-login {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(45px);
    animation: loginCardRise .65s cubic-bezier(.22,.61,.36,1) forwards;
}


/* =====================================================
   LOGIN CARD RISE ANIMATION
===================================================== */

@keyframes loginCardRise {

    0% {
        opacity: 0;
        transform: translateY(45px);
    }

    60% {
        opacity: .85;
        transform: translateY(-5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.lock-body {
    animation: lockPulse 2.8s ease-in-out infinite;
}

@keyframes lockPulse {

    0%,100% {
        transform: scale(1);
        box-shadow: 0 8px 20px rgba(0,0,0,.25);
    }

    40% {
        transform: scale(1.08);
        box-shadow: 0 0 15px rgba(255,215,0,.45), 0 0 35px rgba(255,215,0,.25), 0 8px 20px rgba(0,0,0,.25);
    }

    50% {
        transform: scale(1.13);
    }

    60% {
        transform: scale(1.05);
    }
}

.lock-body::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,220,90,.45), transparent 70%);
    filter: blur(12px);
    opacity: .6;
    z-index: -1;
    animation: lockHalo 3s ease infinite;
}

@keyframes lockHalo {

    0%,100% {
        transform: scale(.9);
        opacity: .2;
    }

    50% {
        transform: scale(1.2);
        opacity: .8;
    }
}
/* ===========================================
   PREMIUM FLOATING LIGHT BACKGROUND
=========================================== */

.bg-lights {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

    /* Each light particle */

    .bg-lights span {
        position: absolute;
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255,255,255,.85);
        filter: blur(1px);
        animation: floatLight linear infinite;
    }

        /* Different Sizes */

        .bg-lights span:nth-child(1) {
            left: 8%;
            width: 3px;
            height: 3px;
            animation-duration: 18s;
            animation-delay: 0s;
        }

        .bg-lights span:nth-child(2) {
            left: 16%;
            width: 5px;
            height: 5px;
            animation-duration: 23s;
            animation-delay: 2s;
        }

        .bg-lights span:nth-child(3) {
            left: 27%;
            width: 2px;
            height: 2px;
            animation-duration: 20s;
            animation-delay: 4s;
        }

        .bg-lights span:nth-child(4) {
            left: 38%;
            width: 4px;
            height: 4px;
            animation-duration: 17s;
            animation-delay: 1s;
        }

        .bg-lights span:nth-child(5) {
            left: 48%;
            width: 6px;
            height: 6px;
            animation-duration: 25s;
            animation-delay: 6s;
        }

        .bg-lights span:nth-child(6) {
            left: 58%;
            width: 3px;
            height: 3px;
            animation-duration: 21s;
            animation-delay: 3s;
        }

        .bg-lights span:nth-child(7) {
            left: 67%;
            width: 5px;
            height: 5px;
            animation-duration: 18s;
            animation-delay: 8s;
        }

        .bg-lights span:nth-child(8) {
            left: 76%;
            width: 4px;
            height: 4px;
            animation-duration: 24s;
            animation-delay: 5s;
        }

        .bg-lights span:nth-child(9) {
            left: 84%;
            width: 2px;
            height: 2px;
            animation-duration: 22s;
            animation-delay: 7s;
        }

        .bg-lights span:nth-child(10) {
            left: 91%;
            width: 5px;
            height: 5px;
            animation-duration: 19s;
            animation-delay: 2s;
        }

        .bg-lights span:nth-child(11) {
            left: 52%;
            width: 8px;
            height: 8px;
            filter: blur(4px);
            opacity: .25;
            animation-duration: 30s;
        }

        .bg-lights span:nth-child(12) {
            left: 72%;
            width: 10px;
            height: 10px;
            filter: blur(6px);
            opacity: .18;
            animation-duration: 34s;
        }

/* Floating Animation */

@keyframes floatLight {

    0% {
        transform: translateY(110vh) translateX(0px) scale(.5);
        opacity: 0;
    }

    10% {
        opacity: .25;
    }

    40% {
        opacity: .8;
    }

    70% {
        opacity: .35;
    }

    100% {
        transform: translateY(-15vh) translateX(40px) scale(1.3);
        opacity: 0;
    }
}


#introScreen::before {
    content: "";
    position: absolute;
    width: 900px;
    height: 900px;
    left: 50%;
    top: 45%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.10), transparent 70%);
    filter: blur(120px);
    animation: backgroundGlow 10s ease-in-out infinite;
    z-index: 0;
}

@keyframes backgroundGlow {

    0%,100% {
        transform: translate(-50%,-50%) scale(1);
    }

    50% {
        transform: translate(-50%,-50%) scale(1.15);
    }
}

.bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(130px);
    opacity: .35;
    pointer-events: none;
}

.glow1 {
    width: 420px;
    height: 420px;
    left: -120px;
    top: 100px;
    background: #ff7d7d;
    animation: float1 12s ease-in-out infinite;
}

.glow2 {
    width: 520px;
    height: 520px;
    right: -150px;
    top: 20%;
    background: #4a36ff;
    animation: float2 18s ease-in-out infinite;
}

.glow3 {
    width: 260px;
    height: 260px;
    left: 45%;
    bottom: -120px;
    background: #ffc46b;
    opacity: .20;
}

.security-strip {
    width: 620px;
    margin: 35px auto 0;
    padding: 20px;
    border-radius: 22px;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255,255,255,.12);
}

.security-title {
    color: #ffffff;
    letter-spacing: 3px;
    font-size: 12px;
    text-align: center;
    margin-bottom: 20px;
}

.security-items {
    display: flex;
    justify-content: space-around;
}

.sec-item {
    text-align: center;
}

    .sec-item i {
        font-size: 34px;
        color: #ffcb69;
        display: block;
        margin-bottom: 10px;
    }

    .sec-item span {
        color: #ddd;
        font-size: 13px;
    }

.bottom-trust {
    width: min(650px,90%);
    margin: 15px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

    .bottom-trust .line {
        flex: 1;
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(255,196,90,.55), transparent);
    }

.trust-text {
    color: #e8c06c;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: .6px;
}

    .trust-text i {
        font-size: 20px;
    }

.security-features {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 45px;
    flex-wrap: wrap;
    color: #fff;
    opacity: .85;
}

.feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    padding: 10px 18px;
    border-radius: 40px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(12px);
    transition: .35s;
}

    .feature i {
        color: #f5d65b;
        font-size: 22px;
    }

    .feature:hover {
        transform: translateY(-3px);
        background: rgba(255,255,255,.12);
    }

.fold-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 58%;
    background: linear-gradient(180deg, rgb(207 18 18 / 53%), rgb(217 209 209));
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform-origin: 50% 0%;
    transform-style: preserve-3d;
    z-index: 15;
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .12));
    transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}

    /* This box is now sized EXACTLY to the logo, allowing border-radius to work */
    .fold-top::before {
        content: "";
        position: absolute;
        width: 135px;
        height: 110px;
        top: 35%;
        left: 50%;
        transform: translateX(-50%);
        z-index: -1;
        background-image: url(https://mytrustee.ctltrusteeship.com/assets/images/logo/CatalystLogo2.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        opacity: 0.2;
        border-radius: 13px;
        background-color: rgb(93 86 86 / 28%);
    }

.line {
    display: flex;
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 196, 90, .55), transparent);
}