#cyber-transition {
        position: fixed; inset: 0; z-index: 10000; pointer-events: none;
        display: flex; flex-direction: column; justify-content: center;
      }
      #cyber-transition.blocking { pointer-events: auto; } 
      
      .cyber-shutter {
        width: 100%; height: 50vh; background: #030814;
        transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1);
      }
      .cyber-shutter.top {
        transform: translateY(-100%);
        border-bottom: 2px solid var(--cyber-blue);
        box-shadow: 0 10px 30px rgba(56, 189, 248, 0.4);
      }
      .cyber-shutter.bottom {
        transform: translateY(100%);
        border-top: 2px solid var(--cyber-blue);
        box-shadow: 0 -10px 30px rgba(56, 189, 248, 0.4);
      }
      #cyber-transition.active .cyber-shutter.top,
      #cyber-transition.active .cyber-shutter.bottom {
        transform: translateY(0);
      }
      .cyber-flash {
        position: absolute; top: 50%; left: 0; width: 100%; height: 2px;
        background: #fff; box-shadow: 0 0 30px 15px rgba(56, 189, 248, 0.8);
        opacity: 0; transform: scaleX(0); transition: all 0.2s ease-out;
      }
      #cyber-transition.flash .cyber-flash { opacity: 1; transform: scaleX(1); }

      .cyber-boot-loader {
        position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
        font-size: 1.6rem; font-weight: 950; letter-spacing: 0.25em; color: #66f7d6;
        text-shadow: 0 0 15px rgba(102, 247, 214, 0.8); opacity: 0; pointer-events: none;
        z-index: 10001; font-family: monospace; white-space: nowrap;
      }
      #cyber-transition.booting .cyber-boot-loader {
        opacity: 1; animation: cyberScanLines 0.15s infinite alternate;
      }
      @keyframes cyberScanLines {
        0% { filter: brightness(1); transform: translate(-50%, -50%) skewX(-1deg); }
        100% { filter: brightness(1.3); transform: translate(-50%, -50%) skewX(1deg); }
      }