.text {
font-family: 'Noto Sans JP', 'Montserrat', 'Mplus 1p', 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', '游ゴシック' , '游ゴシック体' , 'YuGothic', 'Yu Gothic', 'ＭＳ ゴシック' , 'MS Gothic', sans-serif;
background-color: rgba(195, 180, 199, 0.7);
border-radius: 25px 25px 25px 25px;
z-align:100;
}
html,body {height: 100%;}
body {
    position: relative; /* Ensure body is a positioning context */
    width: 100%;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #a569bd;
}
.main-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* Keep content above background animations */
    z-index: 10;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.logo {
border-radius: 5px 5px 5px 5px;
}
.bg {
background-image: url("/static/img/back.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.pant {
position: fixed;
top: -50px; /* Start above the viewport */
animation: fall 3s linear 1s forwards; /* Default animation properties */
opacity: 0; /* Start invisible */
z-index: 1; /* Lower z-index for alarm clocks */
background: none !important; /* Force no background */
background-color: transparent !important; /* Force transparent background */
will-change: transform, opacity; /* Performance optimization */
}

.pant svg {
background: transparent !important;
background-color: transparent !important;
}

.particle {
position: fixed;
z-index: 10000; /* Higher than pants */
pointer-events: none;
animation: explode 1s ease-out forwards;
will-change: transform, opacity; /* Performance optimization */
}

@keyframes fall {
0% { transform: translateY(-100px) translateX(0) rotate(0deg) scale(0.8); opacity: 0; }
25% { transform: translateY(25vh) translateX(20px) rotate(180deg) scale(1); opacity: 1; }
50% { transform: translateY(50vh) translateX(-20px) rotate(360deg) scale(1.1); opacity: 1; }
75% { transform: translateY(75vh) translateX(10px) rotate(540deg) scale(0.9); opacity: 1; }
100% { transform: translateY(120vh) translateX(0) rotate(720deg) scale(0.7); opacity: 0; }
}

@keyframes explode {
0% { transform: translate(0, 0) scale(1); opacity: 1; }
50% { transform: translate(var(--translate-x-mid), var(--translate-y-mid)) scale(0.5); opacity: 0.7; }
100% { transform: translate(var(--translate-x-end), var(--translate-y-end)) scale(0); opacity: 0; }
}