<style>
/* ================= SPLASH ================= */
body.splash-active { overflow: hidden; }

#splash {
  position: fixed;
  inset: 0;
  display: flex;
  z-index: 9999;
  background: rgba(6,6,6,.85);
  backdrop-filter: blur(10px);
  animation: fadeIn .8s ease forwards;
}

@keyframes fadeIn { from {opacity:0} to {opacity:1} }
@keyframes fadeOut { to {opacity:0} }

/* Allow click, disable interaction only after animation starts */
body.entering #splash {
  animation: fadeOut 1.1s ease forwards;
}

/* Disable pointer events AFTER the click */
body.entering .door {
  pointer-events: none;
}

.door {
  width: 50%;
  background: linear-gradient(180deg,#111,#0b0b0b);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 1.1s cubic-bezier(.4,0,.2,1);
}

body.entering .door.left { transform: translateX(-100%); }
body.entering .door.right { transform: translateX(100%); }

#enterBtn {
  margin-top: 2rem;
  padding: .75rem 2.25rem;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.4);
  color: #f5f5f5;
  letter-spacing: .15em;
  text-transform: uppercase;

  opacity: 1; /* visible by default */
  transition: opacity .4s ease, background .3s ease;
}

@keyframes showBtn { to {opacity:0} }

/* ================= THEME ================= */
:root{
  --bg:#0b0e14;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.03);
  --border:rgba(255,255,255,.1);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.72);
  --subtle:rgba(255,255,255,.55);
  --shadow:0 16px 50px rgba(0,0,0,.45);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:system-ui,Segoe UI,Roboto,Arial;
  color:var(--text);
  background:
    radial-gradient(1000px 600px at 10% 0%, rgba(124,92,255,.22), transparent 55%),
    radial-gradient(900px 500px at 90% 10%, rgba(0,212,255,.15), transparent 55%),
    var(--bg);
  min-height:100vh;
}

.wrap{
  max-width:720px;
  margin:0 auto;
  padding:40px 20px 80px;
  text-align:center;

  opacity: 0;
  filter: blur(14px);
  transition:
    opacity .9s ease,
    filter .9s ease;
}

body.loaded .wrap{
  opacity: 1;
  filter: blur(0);
}

/* ================= CENTER STACK ================= */
.logo{
  max-width:160px;
  margin:28px auto 22px;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.55));
}

h1{ margin:0; font-size:28px; }
.tagline{ margin-top:14px; font-size:16px; color:var(--muted); }
.founder{ margin-top:14px; font-size:14px; opacity:.85; }
.copyright{ margin-top:28px; font-size:12px; color:var(--subtle); }

/* ================= NAV ================= */
.main-nav{
  margin:36px auto;
  display:flex;
  justify-content:center;
  gap:24px;
}

.main-nav a{
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px solid transparent;
}

.main-nav a:hover{
  color:var(--text);
  border-color:rgba(255,255,255,.35);
}

/* ================= UPLOADS ================= */
.uploads{
  margin-top:64px;
}

.upload-card{
  border:1px solid var(--border);
  border-radius:18px;
  padding:24px;
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  box-shadow:var(--shadow);
}

.upload-btn{
  margin-top:16px;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background:transparent;
  color:var(--subtle);
}
</style>