* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; display:flex; justify-content:center; align-items:center; background:#0b0b0b; font-family:Inter,sans-serif; }

.wrapper { display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; cursor:pointer; }

.logo {
  width:200px;
  height:auto;
  user-select:none; 
  -webkit-user-drag:none;
  transition: transform 0.7s ease-in-out; /* smooth, luxurious */
}

.info {
  position:relative;
  top:0; /* ensures transform is relative to logo */
  text-align:center;
  color:#fff;
  opacity:0;
  transform:translateY(-8px); /* very subtle */
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
  pointer-events:none;
}

.info h1 { font-weight:bold; font-size:28px; margin-bottom:4px; }
.info p { font-weight:normal; font-size:18px; color:#ccc; }

.wrapper.active .info {
  opacity:1;
  transform:translateY(0); /* smoothly slide into place */
  pointer-events:auto;
}

.wrapper.active .logo {
  transform:translateY(-15px); /* subtle upward movement, keeps it close */
}