/* Minimal, elegant blackhole enter page */
:root{ --enter-size: clamp(140px, 18vw, 220px); --ring: 20px; }
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Inter,system-ui,Segoe UI,Roboto,'Helvetica Neue',Arial; background:#000; color:#fff; overflow:hidden}
.bg{
  position:fixed; inset:0;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/4f/Black_hole_-_Messier_87_crop_max_res.jpg');
  background-size:cover; background-position:center;
  filter:brightness(0.18) saturate(0.9) contrast(1.05);
  transform:scale(1.02);
  transition:filter .9s ease, transform .9s ease;
  z-index:0;
}
body.entered .bg{ filter:brightness(0.02) saturate(0.2) blur(8px); transform:scale(1.12); }

.enter{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:var(--enter-size); height:var(--enter-size);
  border-radius:50%;
  display:grid; place-items:center;
  text-decoration:none; color:inherit;
  z-index:5;
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
  transition: transform .2s ease;
  border: 2px solid rgba(255,255,255,0.12);
}
.enter span{
  font-weight:700; letter-spacing:0.26em; font-size:calc(var(--enter-size) / 6.5);
  display:block; padding-top:6px;
}
.enter:active{ transform:translate(-50%,-50%) scale(0.98) }

.enter::before{
  content:''; position:absolute; inset:calc(-1 * var(--ring));
  border-radius:50%;
  background: radial-gradient(circle at 40% 35%, rgba(255,120,40,0.06), rgba(0,0,0,0.0) 40%);
  filter: blur(18px); opacity:0.9; transition:opacity .6s ease;
}
body.entered .enter{ transform:translate(-50%,-50%) scale(0.6); opacity:0.0; pointer-events:none; transition:all .9s cubic-bezier(.2,.9,.3,1); }

.noscript{ position:fixed; left:0; right:0; bottom:12px; text-align:center; color:#888; font-size:14px; z-index:10;}