html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      background: #000;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    body::before {
      content: "";
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" width=\'100%\' height=\'100%\'><filter id=\'n\'>\
<feTurbulence type=\'fractalNoise\' baseFrequency=\'0.8\' numOctaves=\'2\' result=\'n\'/>\
<feDiffuseLighting in=\'n\' lighting-color=\'#111\' surfaceScale=\'1\'><feDistantLight azimuth=\'45\' elevation=\'60\'/>\
</feDiffuseLighting></filter><rect width=\'100%\' height=\'100%\' filter=\'url(#n)\'/></svg>') repeat;
      animation: grain 12s steps(10) infinite;
      opacity: 0.03;
      z-index: 0;
    }

    .logo {
      width: 180px;
      filter: invert(1) grayscale(1) contrast(120%);
      opacity: 0;
      animation: fadeIn 1.6s ease-out forwards;
      transition: transform 0.3s ease, filter 0.3s ease;
      z-index: 1;
    }

    .logo:hover {
      transform: scale(1.03);
      filter: invert(1) grayscale(0.9) contrast(160%) drop-shadow(0 0 2px #fff);
    }

    @keyframes fadeIn {
      to { opacity: 0.85; }
    }

    @keyframes grain {
      0%, 100% { background-position: 0 0; }
      50% { background-position: 50% 50%; }
    }