:root{
    --navy: #1F174F;
    --purple: #B540FA;
} 
.transition { transition: all 0.5s ease-in-out; }
html,body { margin:0; padding:0;font-family: "SUSE", sans-serif;color:#fff;width:100%;height:100%;overflow:hidden }
body { background: linear-gradient(180deg, var(--navy, #1F174F) 50%, var(--purple, #B540FA) 100%); }

a { color:#fff; text-decoration: none;font-size:0.9rem; }

.footer { display:flex;gap:1.5rem;flex-wrap: wrap;height:auto;position:absolute;bottom:2rem;width:100%;opacity:0;z-index:99;justify-content:center; }

.container { display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; height: 100%; text-align: center;position:relative;z-index:1; }
h1 { font-size:clamp(2rem, 5vw, 3.5rem); margin:0;opacity:0; }
h1 > span, h2 > span { color:var(--purple)}
h2 { font-size:clamp(1.5rem, 5vw, 2.5rem); margin:0;opacity:0; }



.background-animations { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; z-index: 0; }

#myanimation  { width:320px;height:425px;margin:-40px auto 0;animation: ghost-bob 2.5s ease-in-out infinite; }
#ident { width:300px;height:112px;margin:0 auto;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%); }
#mainbody { opacity:0;padding:180px 0; }
#rings { transform:scale(1.6);opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;filter:blur(2px); }

@keyframes ghost-bob {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(0); }
    100% { transform: translateY(0); }
}


#particle-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;left:0;
    pointer-events: none;
}

.particle-wrapper {
    width: 40px;   /* base size */
    height: 40px;
    pointer-events: none;
    position: absolute;
    transform-origin: center center;
    position: absolute;
    left: 50%;
    top: 50%;
    overflow:visible;
    will-change: transform, opacity;
}

.particle-img {
    width: 100%;
    height: 100%;
    transform-origin: center center;
    transform-origin: center center;
    will-change: transform, opacity;
}


.particle-img {
    animation: particle-bounce 900ms ease-in-out infinite;
    transform-origin: center center;
}

@keyframes particle-bounce {
    0%   { transform: scale(1); }
    25%  { transform: scale(1.15, 0.90); }
    50%  { transform: scale(0.90, 1.15); }
    75%  { transform: scale(1.12, 0.95); }
    100% { transform: scale(1); }
}



.text-body { position: absolute; top: 120%; left: 0; width: 100%; height: 100%; background: var(--navy); display: flex; align-items: center; justify-content: center; padding: 2rem; box-sizing: border-box;z-index:100;box-shadow: 0 0 20px rgba(0,0,0,0.5); }
.text-container { max-width: 800px; text-align: left; }
.text-body-close { position: absolute; top: 1rem; right: 1rem; cursor: pointer; font-size: 1.5rem;color:#fff; }


@media(max-width: 600px) {
    .footer { gap: 1rem; }
    .text-body { padding: 1rem; }
    .text-container { max-width: 100%; }
    #ident { width: 150px;height: 56px; }
    #myanimation { width: 200px;height: 265px;margin:-30px auto 0; }
    #rings { transform:scale(3); }

    .particle-wrapper {
    width: 30px;   /* base size */
    height: 30px;
}


}