/* ======================================================
   Sanfe SMP - Landing Page
   Version 2.0
====================================================== */

/* Reset */

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

html,body{
    width:100%;
    height:100%;
    overflow:hidden;
    font-family:var(--font-body);
}

/* ======================================================
   Background
====================================================== */

body{

    background:var(--bg-void);

    color:var(--text-light);

}

.background{

    position:fixed;

    inset:0;

    background-image:url("../images/index-background.avif");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    transform:scale(1.05);

    z-index:-3;

}

.overlay{

    position:fixed;

    inset:0;

    background:linear-gradient(
        rgba(10,18,10,.30),
        rgba(8,14,8,.60)
    );

    z-index:-2;

}

/* ======================================================
   Hero
====================================================== */

.hero{

    position:relative;

    height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    z-index:20;

    padding:20px;

}

.hero .logo-mark{

    width:420px;

    max-width:88vw;

    height:auto;

    margin-bottom:18px;

    filter:drop-shadow(0 0 18px var(--accent));

    animation:titleGlow 3s ease-in-out infinite alternate;

}

/* The logo image already contains the "SANFE SMP" wordmark, so the
   h1 stays for accessibility/SEO (screen readers, tab title context)
   but isn't shown a second time visually. */
.hero h1{

    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;

}

.hero h2{

    margin-top:18px;

    font-size:30px;

    font-weight:300;

    color:var(--text-dim);

}

.hero p{

    margin-top:25px;

    max-width:600px;

    font-size:20px;

    opacity:.9;

    font-style:italic;

    color:var(--text-dim);

}

/* ======================================================
   Button
====================================================== */

#enterButton{

    margin-top:40px;

    padding:18px 50px;

    font-family:var(--font-display);

    font-size:18px;

    font-weight:600;

    letter-spacing:2px;

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

    border-radius:999px;

    cursor:pointer;

    color:var(--text-light);

    background:linear-gradient(135deg,var(--accent-dim),var(--bg-panel-solid));

    transition:.35s;

    box-shadow:
        0 0 20px rgba(111,174,85,.5);

}

#enterButton:hover{

    transform:translateY(-4px) scale(1.05);

    background:linear-gradient(135deg,var(--accent),var(--accent-dim));

    box-shadow:
        0 0 15px var(--accent),
        0 0 35px var(--accent),
        0 0 60px var(--accent-bloom);

}

#enterButton:focus-visible{

    outline:2px solid var(--accent-soft);
    outline-offset:4px;

}

/* ======================================================
   Cursor Magic Light
====================================================== */

#cursorLight{

    position:fixed;

    width:260px;

    height:260px;

    border-radius:50%;

    pointer-events:none;

    transform:translate(-50%,-50%);

    background:radial-gradient(circle,
        rgba(111,174,85,.35) 0%,
        rgba(233,196,106,.15) 45%,
        transparent 75%
    );

    z-index:5;

    transition:left .05s linear, top .05s linear;

}

/* ======================================================
   Fireflies
====================================================== */

#fireflies{

    position:fixed;

    inset:0;

    pointer-events:none;

    overflow:hidden;

    z-index:4;

}

.firefly{

    position:absolute;

    width:6px;

    height:6px;

    border-radius:50%;

    background:#fff3c4;

    box-shadow:
        0 0 10px #e9c46a,
        0 0 22px #a3d98a;

    animation:fly linear infinite,
              blink 2s ease-in-out infinite alternate;

}

/* ======================================================
   Particles (falling petals)
====================================================== */

#particles{

    position:fixed;

    inset:0;

    pointer-events:none;

    overflow:hidden;

    z-index:3;

}

.particle{

    position:absolute;

    width:6px;

    height:6px;

    border-radius:60% 0 60% 0;

    background:var(--accent-bloom);

    opacity:.75;

    animation:float linear infinite;

}

/* ======================================================
   Animations
====================================================== */

@keyframes titleGlow{

    from{

        text-shadow:
            0 0 10px var(--accent),
            0 0 25px var(--accent-dim);

    }

    to{

        text-shadow:
            0 0 20px var(--accent-soft),
            0 0 50px var(--accent),
            0 0 90px var(--accent-bloom);

    }

}

@keyframes fly{

    from{

        transform:translateY(100vh);

    }

    to{

        transform:translateY(-120px);

    }

}

@keyframes float{

    from{

        transform:translateY(-10vh) rotate(0deg);

    }

    to{

        transform:translateY(110vh) rotate(360deg);

    }

}

@keyframes blink{

    from{

        opacity:.25;

    }

    to{

        opacity:1;

    }

}

/* ======================================================
   Responsive
====================================================== */

@media(max-width:768px){

.hero .logo-mark{

    width:300px;

}

.hero h2{

    font-size:22px;

}

.hero p{

    font-size:17px;

}

#enterButton{

    width:90%;

    max-width:320px;

}

}

@media(prefers-reduced-motion:reduce){

    .hero h1,
    .hero .logo-mark,
    .firefly,
    .particle{
        animation:none !important;
    }

}

/* ======================================================
   PORTAL ANIMATION
====================================================== */

#portalFlash{

    position:fixed;
    inset:0;

    background:white;

    opacity:0;

    pointer-events:none;

    z-index:999;

}

#portalRing{

    position:fixed;

    left:50%;
    top:50%;

    width:0;
    height:0;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:radial-gradient(circle,
        rgba(111,174,85,.9),
        rgba(233,196,106,.4),
        transparent 70%);

    box-shadow:
        0 0 40px var(--accent),
        0 0 120px var(--accent),
        0 0 250px var(--accent-bloom);

    opacity:0;

    pointer-events:none;

    z-index:998;

}