/* ==========================================
   TRIFONIA SCHOOL MANAGEMENT SYSTEM
   Premium Login CSS
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --primary:#0f6b38;
    --secondary:#198754;
    --light:#ffffff;
    --glass:rgba(255,255,255,.12);
    --border:rgba(255,255,255,.20);
    --shadow:0 20px 45px rgba(0,0,0,.25);

}

body{

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

   height:100vh;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;


    background:

linear-gradient(

135deg,

#0a5d2d 0%,

#0f7d3d 35%,

#19a35b 70%,

#38d67f 100%);

}

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

.background{

position:fixed;

inset:0;

overflow:hidden;

z-index:1;

transition:transform .25s ease-out;

will-change:transform;

}
/* SUN */

.sun-light{

position:absolute;

top:-550px;

left:50%;

transform:translateX(-50%);

width:900px;

height:900px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(255,255,255,.98) 0%,

rgba(255,255,255,.55) 18%,

rgba(255,255,255,.22) 40%,

rgba(255,255,255,.08) 60%,

transparent 78%);

filter:blur(18px);

animation:sunGlow 6s ease-in-out infinite alternate;

transition:transform .25s ease-out;
will-change:transform;

}

.sun-rays{

position:absolute;

top:-420px;

left:50%;

transform:translateX(-50%);

width:1100px;

height:1100px;

pointer-events:none;

opacity:.45;

background:

repeating-conic-gradient(

from 0deg,

rgba(255,255,255,.22) 0deg,

rgba(255,255,255,.22) 2deg,

transparent 2deg,

transparent 12deg

);

mask-image:radial-gradient(circle,
white 0%,
white 25%,
transparent 72%);

-webkit-mask-image:radial-gradient(circle,
white 0%,
white 25%,
transparent 72%);

animation:rotateSun 60s linear infinite;

filter:blur(1px);

transition:transform .25s ease-out;
will-change:transform;

}



@keyframes sunGlow{

0%{

transform:translateX(-50%) scale(1);

opacity:.8;

}

100%{

transform:translateX(-50%) scale(1.15);

opacity:1;

}

}

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

.login-container{

position:relative;

z-index:10;

width:100%;

max-width:520px;

min-height:100vh;

height:auto;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

padding:20px;



}

/* ===========================
LOGO
=========================== */

.logo-section{
	
	margin-bottom:10px;

text-align:center;

animation:fadeDown 1s;

position:relative;

z-index:30;


}

.main-logo{
    width:150px;
    height:auto;
    display:block;
    margin:0 auto 10px;
	
    object-fit:contain;
}

.main-logo:hover{

transform:scale(1.05);

}

.logo-section h1{

margin-top:5px;

font-size:42px;

color:white;

font-family:'Playfair Display',serif;

letter-spacing:4px;

text-shadow:0 4px 15px rgba(0,0,0,.35);

}

.logo-section p{

margin-top:0px;

color:#eef;

font-size:15px;

letter-spacing:2px;

}

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

.login-card{

position:relative;

overflow:hidden;

width:400px;
max-width:95%;

background:var(--glass);

border:1px solid var(--border);

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

border-radius:30px;

min-height:fit-content;

padding:10px 30px 20px 30px;

box-shadow:var(--shadow);

animation:fadeUp 1s;

}

/* =====================================
   GLASS SHINE EFFECT
===================================== */

.login-card::before{

content:"";

position:absolute;

top:-60%;

left:-140%;

width:70%;

height:220%;

background:

linear-gradient(

115deg,

transparent 0%,

rgba(255,255,255,.04) 25%,

rgba(255,255,255,.28) 50%,

rgba(255,255,255,.05) 75%,

transparent 100%

);

transform:rotate(25deg);

animation:glassShine 8s linear infinite;

pointer-events:none;

}

.welcome{

text-align:center;

margin-bottom:8px;

}

.welcome h2{

color:white;

font-size:18px;

margin-bottom:2px;

}

.welcome span{

color:#f2f2f2;

font-size:13px;

}

/* ===========================
INPUTS
=========================== */

.input-group{

margin-bottom:5px;

}

.input-group label{

display:block;

color:white;

margin-bottom:8px;

font-weight:600;

}

.input-box{

position:relative;

}

.input-box i{

position:absolute;

left:18px;

top:18px;

color:white;

opacity:.85;

}

.input-box input{

width:100%;

padding:10px 18px 16px 48px;

border:none;

outline:none;

border-radius:12px;

background:rgba(255,255,255,.18);

color:white;

font-size:15px;

transition:.3s;

}

.input-box input::placeholder{

color:#eef;

}

.input-box input:focus{

background:rgba(255,255,255,.25);

box-shadow:0 0 15px rgba(255,255,255,.15);

}

/* PASSWORD BUTTON */

#togglePassword{

position:absolute;

right:17.5px;


bottom:9px;
width:40px;

height:40px;

border:none;

background:none;

cursor:pointer;

color:white;

font-size:16px;



}

/* ===========================
REMEMBER
=========================== */

.remember{

margin-bottom:8px;

color:white;

font-size:14px;

}

.remember input{

margin-right:8px;

}

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

.login-btn{

position:relative;

overflow:hidden;

width:100%;

height:44px;

border:none;

border-radius:14px;

cursor:pointer;

background:white;

color:var(--primary);

font-size:16px;

font-weight:800;

letter-spacing:.5px;

transition:.35s;

box-shadow:0 8px 20px rgba(0,0,0,.18);

}

.login-btn:hover{

transform:translateY(-3px);

box-shadow:

0 18px 35px rgba(0,0,0,.28);

}


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

.login-btn::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:60%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.75),

transparent

);

transform:skewX(-25deg);

animation:buttonShine 5s infinite;

}

/* ===========================
ERROR
=========================== */

.error-box{

margin-bottom:8px;

padding:8px 12px;

border-radius:10px;

background:#ffd9d9;

color:#a10000;

font-weight:600;

font-size:13px;

display:flex;

align-items:flex-start;

gap:8px;

}

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

footer{

margin-top:12px;

font-size:10px;


color:white;


opacity:.9;

text-align:center;

}

/* ===========================
ANIMATIONS
=========================== */

@keyframes fadeDown{

from{

opacity:0;

transform:translateY(-40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(60px);

}

to{

opacity:1;

transform:translateY(0);

}

}

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

@media(max-width:768px){

.login-container{

padding:15px;

}

.main-logo{

width:120px;

}

.logo-section h1{

font-size:30px;

letter-spacing:2px;

}

.logo-section p{

font-size:13px;

}

.login-card{

padding:25px;

border-radius:20px;

}

.welcome h2{

font-size:24px;

}

.input-box input{

padding:14px 16px 14px 45px;

font-size:14px;

}

.login-btn{

height:50px;

}

}

/* ===========================
FLOATING ICONS
=========================== */

.floating-icon{

position:absolute;

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

pointer-events:none;

filter:blur(.3px);

animation:floatIcon linear infinite;

transition:transform .25s ease-out;

will-change:transform;

}

@keyframes floatIcon{

0%{

transform:
translateY(120px)
translateX(0)
rotate(0deg);

opacity:0;

}

15%{

opacity:.12;

}

50%{

transform:
translateY(-40vh)
translateX(25px)
rotate(180deg);

opacity:.15;

}

100%{

transform:
translateY(-120vh)
translateX(-20px)
rotate(360deg);

opacity:0;

}

}

/* ===========================
PARTICLES
=========================== */

.particle{

position:absolute;

background:white;

border-radius:50%;

opacity:.35;

animation:particleMove linear infinite;

pointer-events:none;

}

@keyframes particleMove{

0%{

transform:translateY(0);

opacity:0;

}

20%{

opacity:.5;

}

80%{

opacity:.5;

}

100%{

transform:translateY(-120px);

opacity:0;

}

}

.floating-icon:nth-child(1){

left:5%;
top:85%;

font-size:60px;

animation-duration:28s;

}

.floating-icon:nth-child(2){

left:18%;
top:60%;

font-size:45px;

animation-duration:35s;

}

.floating-icon:nth-child(3){

left:33%;
top:92%;

font-size:55px;

animation-duration:30s;

}

.floating-icon:nth-child(4){

left:47%;
top:70%;

font-size:42px;

animation-duration:32s;

}

.floating-icon:nth-child(5){

left:62%;
top:88%;

font-size:50px;

animation-duration:40s;

}

.floating-icon:nth-child(6){

left:74%;
top:78%;

font-size:60px;

animation-duration:34s;

}

.floating-icon:nth-child(7){

left:90%;
top:90%;

font-size:52px;

animation-duration:38s;

}

.floating-icon:nth-child(8){

left:10%;
top:35%;

font-size:48px;

animation-duration:36s;

}

.floating-icon:nth-child(9){

left:82%;
top:28%;

font-size:45px;

animation-duration:37s;

}

.floating-icon:nth-child(10){

left:55%;
top:45%;

font-size:55px;

animation-duration:33s;

}

.floating-icon:nth-child(11){

left:28%;
top:18%;

font-size:50px;

animation-duration:39s;

}

.floating-icon:nth-child(12){

left:92%;
top:52%;

font-size:60px;

animation-duration:42s;

}

@keyframes rotateSun{

0%{

transform:translateX(-50%) rotate(0deg);

}

100%{

transform:translateX(-50%) rotate(360deg);

}

}



@keyframes glassShine{

0%{

left:-160%;

}

45%{

left:-160%;

}

100%{

left:170%;

}

}


@keyframes buttonShine{

0%{

left:-120%;

}

55%{

left:-120%;

}

100%{

left:160%;

}

}

.login-btn:active{

transform:scale(.98);

}

.login-btn.loading{

pointer-events:none;

opacity:.95;

}

.login-btn.loading i{

margin-right:8px;

}




/* =============================
   STUDENT IMAGES
============================= */

.student-img{
    position:fixed;
    bottom:0;
    width:23%;
    height:60%;
    z-index:5;
    pointer-events:none;
    overflow:hidden;
    background:transparent;
}

.student-left{ left:0; }
.student-right{ right:0; }

/* PNG yenye transparency iliyopigwa ndani - hakuna CSS tricks */
.student-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    display:block;
}

.img-overlay{ display:none; }

.student-left::after,
.student-right::after{ display:none; }

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