:root {
       --bg: #000;
       --matrix-green: rgb(0, 255, 102);
       --matrix-green-dim: rgba(0, 255, 102, 0.12);
       --text-size-desktop: 48px;
       --text-size-mobile: 28px;
       --rabbit-size: 56px;
       --transition-fast: 0.45s;
       --transition-medium: 0.9s;
 }

 * {
       box-sizing: border-box;
       margin: 0;
       padding: 0
 }

 html,
 body {
       height: 100%
 }

 body {
       background: var(--bg);
       font-family: "Courier New", monospace;
       overflow: hidden;
       color: var(--matrix-green);
 }

 /* Canvas */
 canvas#matrix {
       position: fixed;
       top: 0;
       left: 0;
       min-width: 100%;
       min-height: 100%;
       display: block;
       z-index: 1;
       opacity: 0.8;
       pointer-events: none;
 }



 /* Rabbit */
 .rabbit {
       position: fixed;
       z-index: 30;
       width: 2rem;
       height: 2rem;
       filter: drop-shadow(0 0 20px rgba(4, 238, 15, 0.938));
       opacity: 0;
 }

 .rabbit.appear {
       animation: RabbitAppear 2s linear forwards;
 }

 .rabbit.disappear {
       animation: RabbitDisappear 4s ease forwards;
 }

 .black-hole.appear {
       animation: BlackholeAppear 2s linear forwards;
 }

 .black-hole.disappear {
       animation: BlackholeDisappear 3s linear forwards;
 }


 /* black-hole base */
 .black-hole {
       position: fixed;
       width: 5rem;
       height: 5rem;
       border-radius: 50%;
       z-index: 25;
       opacity: 1;
       background-color: rgba(141, 4, 4, 0.616);
       overflow: visible;
       box-shadow: 0 0 40px rgba(0, 255, 102, 0.18), 0 0 12px rgba(0, 255, 102, 0.08) inset;
       background: conic-gradient(from 0deg, rgba(0, 255, 102, 0.06), transparent 10%, rgba(0, 255, 102, 0.18) 10%, transparent 20%);
animation: BlackholeAppear 2s ease-in forwards;
 }
 /* sauberere Methode: nur Hintergrund rotiert via ::before */
 .black-hole::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      z-index: -1;
      background: conic-gradient(from 0deg, rgba(0,255,102,0.06), transparent 10%, rgba(0, 255, 102, 0.096) 10%, transparent 20%);
      transform-origin: 50% 50%;
      /* animiert nur den background layer */
      animation: Shadowrotate 10s linear infinite;
}

.black-hole.portal {
      animation: BlackholeAppear 4s ease-in forwards;
      background  : none;
      animation: none;
      box-shadow: 0 0 40px rgba(0, 255, 102, 0.08), 0 0 12px rgba(0, 255, 102, 0.08) inset;
}

.black-hole.portal::before {
      background  : none;
      animation: none;
}
 
 @keyframes Shadowrotate {
       from {
             transform: rotate(0deg)
       }
 
       to {
             transform: rotate(360deg) 

       }
      
 }
 @keyframes RabbitAppear {
       from {
             opacity: 0;
             transform: scale(0);
       }

       to {
             opacity: 1;
             transform: scale(1);
       }
 }

 @keyframes BlackholeAppear {
       from {
             opacity: 0;
             transform: scale(0);
       }

       to {
             opacity: 1;
             transform: scale(1);
       }
 }

 @keyframes BlackholeDisappear {
       from {
             opacity: 1;
             transform: scale(1);
       }

       to {
             opacity: 1;
             transform: scale(0);
       }
 }

 @keyframes RabbitDisappear {
       from {

             opacity: 1;
             transform: scale(1);
       }

       91% {

             opacity: 0.1;
             transform: scale(0.5) translateX(400px);
       }

       to {

             transform: scale(0);
             opacity: 1;
             display: none
       }
 }

 @keyframes portalPulse {

       0%,
       100% {
             box-shadow: 0 0 40px rgba(33, 206, 102, 0.2);
       }

       50% {
             box-shadow: 0 0 80px rgba(0, 255, 102, 0);
       }
 }

 .black-hole.pulsing {
      transform-origin: 50% 50%;
       animation: portalPulse 2s infinite;
 }




 
.wrapper {
  position: absolute;
  width: 100vW;
  height: 100vH;
  top: 0px;
  left: 0px;
}

/* ------------------------------------------- *\
	Background Image
\* ------------------------------------------- */
.bg-image {
	display: block;
	position: absolute;
      width:100vW;
      height:100vH;
}
/* ------------------------------------------- *\
	Drawing
\* ------------------------------------------- */
.drawing {
	position: relative;
      
}
.drawing > * {
	position: absolute;
  top: 0;
  left: 0;
}
#draw-mainline{
      animation: Shadowrotate 10s linear infinite;
      
}