/*=========================================================
 S-AES ENCRYPTION SIMULATOR
 STYLE.CSS
 PART 1
=========================================================*/


/*=========================================================
 RESET
=========================================================*/


*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

    font-family:
    'Poppins',
    sans-serif;

    min-height:100vh;

    background:

    linear-gradient(
        135deg,
        #050816,
        #0b1630,
        #111827
    );

    color:white;

    overflow-x:hidden;

}






/*=========================================================
 ROOT VARIABLE
=========================================================*/


:root{


    --primary:

    #4f8cff;



    --secondary:

    #8b5cf6;



    --cyan:

    #22d3ee;



    --success:

    #22c55e;



    --danger:

    #ef4444;



    --dark:

    #050816;



    --card:

    rgba(255,255,255,.07);



    --border:

    rgba(255,255,255,.15);



    --text:

    #ffffff;



    --muted:

    #a8b3cf;



    --radius:

    24px;



    --shadow:

    0 25px 60px
    rgba(0,0,0,.45);


}







/*=========================================================
 BACKGROUND ANIMATION
=========================================================*/


.background{


    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-1;


}




.orb{


    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    opacity:.35;

    animation:

    floating 15s infinite alternate;


}





.orb1{


    width:350px;

    height:350px;

    background:#2563eb;

    top:-100px;

    left:-100px;


}




.orb2{


    width:420px;

    height:420px;

    background:#7c3aed;

    right:-120px;

    top:100px;


}





.orb3{


    width:280px;

    height:280px;

    background:#06b6d4;

    bottom:-80px;

    left:20%;


}




.orb4{


    width:250px;

    height:250px;

    background:#22c55e;

    bottom:10%;

    right:15%;


}





@keyframes floating{


    0%{


        transform:

        translateY(0px)
        scale(1);


    }



    50%{


        transform:

        translateY(-60px)
        scale(1.1);


    }




    100%{


        transform:

        translateY(20px)
        scale(1);


    }


}









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


.container{


    width:

    min(1400px,94%);



    margin:auto;



    padding:

    40px 0 80px;


}







/*=========================================================
 GLASS CARD
=========================================================*/


.card{


    background:

    var(--card);



    backdrop-filter:

    blur(20px);



    -webkit-backdrop-filter:

    blur(20px);



    border:

    1px solid var(--border);



    border-radius:

    var(--radius);



    padding:

    32px;



    margin-bottom:

    30px;



    box-shadow:

    var(--shadow);



    animation:

    fadeUp .7s ease;



    transition:

    .35s;


}





.card:hover{


    transform:

    translateY(-5px);



    border-color:

    rgba(79,140,255,.5);


}







@keyframes fadeUp{


    from{


        opacity:0;

        transform:

        translateY(30px);


    }



    to{


        opacity:1;

        transform:

        translateY(0);


    }


}









/*=========================================================
 SECTION TITLE
=========================================================*/


.section-title{


    margin-bottom:

    30px;


}



.section-title h2{


    font-size:

    28px;



    font-weight:

    700;


}



.section-title p{


    margin-top:

    8px;



    color:

    var(--muted);



    line-height:

    1.8;


}









/*=========================================================
 SCROLL BAR
=========================================================*/


::-webkit-scrollbar{


    width:

    10px;


}



::-webkit-scrollbar-track{


    background:

    #050816;


}




::-webkit-scrollbar-thumb{


    background:

    linear-gradient(

        var(--primary),

        var(--secondary)

    );



    border-radius:

    20px;


}
/*=========================================================
 HERO SECTION
=========================================================*/


.hero{


    display:grid;


    grid-template-columns:


    2fr 1fr;



    gap:

    40px;



    align-items:center;



    margin-bottom:

    40px;


}





.hero-content{


    animation:

    fadeUp .8s ease;


}





.badge{


    display:inline-flex;



    padding:

    8px 18px;



    border-radius:

    50px;



    font-size:

    13px;



    font-weight:

    700;



    letter-spacing:

    1px;



    background:


    linear-gradient(

        135deg,

        var(--primary),

        var(--secondary)

    );



    margin-bottom:

    25px;



    box-shadow:


    0 10px 30px
    rgba(79,140,255,.35);


}







.hero-content h1{


    font-size:


    clamp(2.5rem,5vw,4rem);



    font-weight:


    800;



    line-height:


    1.15;


}





.hero-content h1 span{


    display:block;



    background:


    linear-gradient(

        90deg,

        #4f8cff,

        #8b5cf6,

        #22d3ee

    );



    background-clip:


    text;



    -webkit-background-clip:


    text;



    color:


    transparent;


}





.hero-content p{


    margin-top:


    25px;



    color:


    var(--muted);



    line-height:


    1.9;



    font-size:


    16px;


}








/*=========================================================
 PARAMETER CARD
=========================================================*/


.hero-card{


    background:


    rgba(255,255,255,.06);



    border:


    1px solid rgba(255,255,255,.15);



    border-radius:


    25px;



    padding:


    30px;



    backdrop-filter:


    blur(20px);



    box-shadow:


    var(--shadow);


}





.hero-card h2{


    margin-bottom:


    25px;



    color:


    #fff;


}





.parameter-list{


    display:


    flex;



    flex-direction:


    column;



    gap:


    16px;


}





.parameter-item{


    display:


    flex;



    justify-content:


    space-between;



    gap:


    15px;



    padding-bottom:


    12px;



    border-bottom:


    1px solid
    rgba(255,255,255,.1);



    color:


    var(--muted);


}





.parameter-item b{


    color:


    white;


}







/*=========================================================
 INPUT FORM
=========================================================*/


.form-grid{


    display:grid;



    grid-template-columns:


    repeat(
        auto-fit,
        minmax(280px,1fr)
    );



    gap:


    25px;


}





.form-group{


    display:flex;



    flex-direction:column;



    gap:


    10px;


}





.form-group label{


    font-weight:


    600;



    font-size:


    15px;


}





.form-group small{


    color:


    var(--muted);



    font-size:


    13px;


}





.form-group input{


    width:


    100%;



    padding:


    17px 20px;



    border-radius:


    16px;



    border:


    1px solid
    rgba(255,255,255,.15);



    background:


    rgba(255,255,255,.06);



    color:


    white;



    font-size:


    16px;



    font-family:


    'Poppins',
    sans-serif;



    outline:


    none;



    transition:


    .35s;


}





.form-group input::placeholder{


    color:


    #7d8ca8;


}





.form-group input:focus{


    border-color:


    var(--primary);



    background:


    rgba(255,255,255,.1);



    box-shadow:


    0 0 25px
    rgba(79,140,255,.35);


}









/*=========================================================
 MODE SELECT
=========================================================*/


.mode-group{


    display:flex;



    gap:


    20px;



    margin-top:


    30px;



    flex-wrap:


    wrap;


}





.mode-option{


    cursor:


    pointer;


}





.mode-option input{


    display:


    none;


}





.mode-option span{


    display:flex;



    align-items:center;



    gap:


    10px;



    padding:


    15px 30px;



    border-radius:


    18px;



    background:


    rgba(255,255,255,.06);



    border:


    1px solid
    rgba(255,255,255,.15);



    transition:


    .35s;



    font-weight:


    600;


}





.mode-option span:hover{


    transform:


    translateY(-3px);


}





.mode-option input:checked + span{


    background:


    linear-gradient(

        135deg,

        var(--primary),

        var(--secondary)

    );



    border-color:


    transparent;



    box-shadow:


    0 15px 35px
    rgba(79,140,255,.35);


}









/*=========================================================
 BUTTON
=========================================================*/


.button-group{


    display:flex;



    gap:


    20px;



    margin-top:


    35px;



    flex-wrap:


    wrap;


}





.btn{


    padding:


    15px 40px;



    border:


    none;



    border-radius:


    16px;



    cursor:


    pointer;



    font-weight:


    700;



    font-size:


    15px;



    transition:


    .35s;


}





.btn-primary{


    color:


    white;



    background:


    linear-gradient(

        135deg,

        var(--primary),

        var(--secondary)

    );



    box-shadow:


    0 15px 35px
    rgba(79,140,255,.35);


}





.btn-primary:hover{


    transform:


    translateY(-4px);



    box-shadow:


    0 20px 45px
    rgba(79,140,255,.5);


}





.btn-secondary{


    color:


    white;



    background:


    rgba(255,255,255,.08);



    border:


    1px solid
    rgba(255,255,255,.15);


}





.btn-secondary:hover{


    background:


    rgba(255,255,255,.15);



    transform:


    translateY(-3px);


}







/*=========================================================
 VALIDATION
=========================================================*/


.validation-message{


    margin-top:


    20px;



    font-weight:


    600;



    min-height:


    25px;



    color:


    var(--danger);


}
/*=========================================================
 RESULT OUTPUT
=========================================================*/


.result-grid{


    display:grid;



    grid-template-columns:


    repeat(
        auto-fit,
        minmax(280px,1fr)
    );



    gap:


    25px;


}





.result-card{


    background:


    rgba(255,255,255,.05);



    border:


    1px solid
    rgba(255,255,255,.12);



    border-radius:


    20px;



    padding:


    25px;



    transition:


    .35s;


}





.result-card:hover{


    transform:


    translateY(-5px);



    border-color:


    rgba(79,140,255,.5);


}





.result-card h3{


    color:


    #60a5fa;



    margin-bottom:


    18px;



    font-size:


    18px;


}





.result-value{


    min-height:


    60px;



    display:flex;



    align-items:center;



    padding:


    15px;



    border-radius:


    15px;



    background:


    rgba(0,0,0,.25);



    border:


    1px dashed
    rgba(255,255,255,.2);



    color:


    #22d3ee;



    font-size:


    20px;



    font-weight:


    700;



    letter-spacing:


    2px;



    word-break:


    break-all;


}







/*=========================================================
 STATE MATRIX
=========================================================*/


.matrix-container{


    display:flex;



    justify-content:center;



    margin-top:


    30px;


}





.state-matrix{


    display:grid;



    grid-template-columns:


    repeat(2,110px);



    grid-template-rows:


    repeat(2,110px);



    gap:


    18px;


}





.cell{


    display:flex;



    align-items:center;



    justify-content:center;



    border-radius:


    22px;



    background:


    linear-gradient(

        145deg,

        rgba(79,140,255,.25),

        rgba(139,92,246,.25)

    );



    border:


    1px solid
    rgba(255,255,255,.2);



    font-size:


    20px;



    font-weight:


    700;



    color:


    white;



    transition:


    .35s;



    box-shadow:


    inset 0 0 25px
    rgba(255,255,255,.05);


}





.cell:hover{


    transform:


    scale(1.08)
    rotate(3deg);



    box-shadow:


    0 0 30px
    rgba(79,140,255,.5);


}





.cell.active{


    animation:


    pulseCell 1s infinite;


}




@keyframes pulseCell{


    0%{


        box-shadow:


        0 0 0
        rgba(79,140,255,0);


    }



    50%{


        box-shadow:


        0 0 30px
        rgba(79,140,255,.8);


    }



    100%{


        box-shadow:


        0 0 0
        rgba(79,140,255,0);


    }


}









/*=========================================================
 ACCORDION
=========================================================*/


.accordion-container{


    display:flex;



    flex-direction:column;



    gap:


    20px;


}





.accordion{


    background:


    rgba(255,255,255,.05);



    border:


    1px solid
    rgba(255,255,255,.12);



    border-radius:


    20px;



    overflow:hidden;



    transition:


    .35s;


}





.accordion:hover{


    border-color:


    rgba(79,140,255,.45);


}





.accordion summary{


    list-style:none;



    cursor:pointer;



    padding:


    22px 25px;



    font-size:


    16px;



    font-weight:


    700;



    position:


    relative;


}





.accordion summary::-webkit-details-marker{


    display:none;


}





.accordion summary::after{


    content:"+";



    position:absolute;



    right:


    25px;



    font-size:


    25px;



    color:


    #60a5fa;



}





.accordion[open] summary::after{


    content:"−";


}





.accordion summary:hover{


    background:


    rgba(255,255,255,.05);


}







.accordion-content{


    padding:


    25px;



    border-top:


    1px solid
    rgba(255,255,255,.1);


}








/*=========================================================
 STEP CARD
=========================================================*/


.step-card{


    background:


    rgba(255,255,255,.04);



    border-radius:


    18px;



    padding:


    20px;



    margin-bottom:


    20px;



    border:


    1px solid
    rgba(255,255,255,.1);


}





.step-card h3{


    color:


    #60a5fa;



    margin-bottom:


    15px;



    font-size:


    17px;


}





.step-card div{


    min-height:


    60px;



    padding:


    15px;



    border-radius:


    12px;



    background:


    rgba(0,0,0,.25);



    border:


    1px dashed
    rgba(255,255,255,.15);



    color:


    var(--muted);



    line-height:


    1.8;



    overflow:auto;


}





.step-card:hover{


    border-color:


    rgba(139,92,246,.5);



    transform:


    translateY(-3px);


}
/*=========================================================
 REFERENCE TABLE
=========================================================*/


.reference-grid{


    display:grid;



    grid-template-columns:


    repeat(
        auto-fit,
        minmax(300px,1fr)
    );



    gap:


    25px;



    margin-top:


    25px;


}







.reference-card{


    background:


    rgba(255,255,255,.05);



    border:


    1px solid
    rgba(255,255,255,.12);



    border-radius:


    22px;



    padding:


    25px;



    overflow-x:


    auto;



    transition:


    .35s;


}





.reference-card:hover{


    transform:


    translateY(-5px);



    border-color:


    rgba(79,140,255,.5);


}





.reference-card h3{


    text-align:


    center;



    margin-bottom:


    20px;



    color:


    #60a5fa;



    font-size:


    18px;


}







/*=========================================================
 TABLE STYLE
=========================================================*/


.reference-card table{


    width:


    100%;



    border-collapse:


    collapse;



    text-align:


    center;


}





.reference-card th{


    background:


    rgba(79,140,255,.25);



    color:


    white;



    font-weight:


    700;


}





.reference-card td,
.reference-card th{


    padding:


    10px;



    border:


    1px solid
    rgba(255,255,255,.15);



    font-size:


    14px;


}





.reference-card td{


    color:


    #dbeafe;


}





.reference-card tr:hover td{


    background:


    rgba(79,140,255,.12);


}







/*=========================================================
 MATRIX TABLE
=========================================================*/


.matrix-table{


    width:


    180px !important;



    margin:


    auto;


}





.matrix-table td{


    height:


    60px;



    font-size:


    22px;



    font-weight:


    700;



    color:


    #22d3ee;


}







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


.footer{


    margin-top:


    40px;



    padding:


    35px 20px;



    text-align:


    center;



    border-top:


    1px solid
    rgba(255,255,255,.12);


}





.footer-content h3{


    font-size:


    25px;



    margin-bottom:


    10px;



    background:


    linear-gradient(

        90deg,

        #4f8cff,

        #8b5cf6

    );



    background-clip:


    text;



    -webkit-background-clip:


    text;



    color:


    transparent;


}





.footer-content p{


    color:


    var(--muted);


}





.footer-info{


    display:flex;



    justify-content:center;



    flex-wrap:


    wrap;



    gap:


    15px;



    margin:


    25px 0;


}





.footer-info span{


    padding:


    10px 20px;



    border-radius:


    50px;



    background:


    rgba(255,255,255,.06);



    border:


    1px solid
    rgba(255,255,255,.12);



    font-size:


    14px;


}





.copyright{


    font-size:


    13px;


}









/*=========================================================
 LOADING / HIGHLIGHT EFFECT
=========================================================*/


.highlight{


    animation:


    highlightBox 1s ease;


}




@keyframes highlightBox{


    0%{


        background:


        rgba(34,211,238,.5);


    }



    100%{


        background:


        transparent;


    }


}







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


@media(max-width:1000px){


    .hero{


        grid-template-columns:


        1fr;


    }



    .hero-card{


        margin-top:


        20px;


    }


}








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


@media(max-width:700px){



.container{


    width:


    92%;


}



.card{


    padding:


    22px;


}



.hero-content h1{


    font-size:


    2.3rem;


}





.hero-content p{


    font-size:


    14px;


}




.button-group{


    flex-direction:


    column;


}




.btn{


    width:


    100%;


}





.mode-group{


    flex-direction:


    column;


}





.mode-option span{


    justify-content:


    center;


}





.state-matrix{


    grid-template-columns:


    repeat(2,75px);



    grid-template-rows:


    repeat(2,75px);


}





.cell{


    font-size:


    14px;


}





.accordion summary{


    font-size:


    14px;



    padding:


    18px;


}





.reference-card{


    padding:


    15px;


}




}





/*=========================================================
 SMALL PHONE
=========================================================*/


@media(max-width:400px){



.hero-content h1{


    font-size:


    1.9rem;


}




.section-title h2{


    font-size:


    22px;


}




.cell{


    width:


    65px;



    height:


    65px;


}



}