@import "http://fonts.googleapis.com/css?family=Ubuntu:400,700italic";
@import "http://fonts.googleapis.com/css?family=Cabin:400";
* {
  box-sizing: border-box;
}




body {
    margin: 0;
    height: 100vh;
    overflow: hidden;

    /* Minimaler roter Schimmer, dominiert von tiefem Schwarz mit sehr langsamer Wellen-Animation */
    background: radial-gradient(circle at 50% 50%, #150202 0%, #050000 50%, #000000 100%), 
                linear-gradient(135deg, #000000, #100101, #000000, #080000);
    background-blend-mode: screen;
    background-size: 400% 400%;
    animation: slowWaveFlow 24s ease-in-out infinite;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}






@keyframes float {
    from { transform: translateY(100vh); opacity: 0; }
    to   { transform: translateY(-10vh); opacity: 1; }
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #ff0000;
    border-radius: 50%;
    animation: float linear infinite;
}


html {
  font-size: 10px;
}a {
background: #222222;
    border: 1px solid #444;
    border-radius: 5px 5px 5px 5px;
    height: 20px;
    padding: 2px 5px;
    text-align: center;
    text-decoration: none;
    color: #666666;
    cursor: pointer;
    font-family: verdana,arial;
    font-size: 11px;
    padding-top:0px;
}
/* =========================================
Waitinghill World Logo
========================================= */
#sitename {
    animation: logo-entry 4s ease-in;    
    color: #ff00ff;
    text-shadow: 1px 3px 0 #461414, 1px 9px 5px #aba8a8;
    color: #b80000;
}

#logo {
  animation: logo-entry 4s ease-in;
  width: 410px;
  margin: 0 auto;
  position: relative;
  z-index: 40;
  left: 20px;
}

h1 {
  animation: text-glow 2s ease-out infinite alternate;
  font-family: 'Ubuntu', sans-serif;
  color: #666666;
  font-size: 38px;

  font-weight: bold;
  position: absolute;
  text-shadow: 0 0 10px #000, 0 0 20px #000, 0 0 30px #000, 0 0 40px #000, 0 0 50px #000, 0 0 60px #000, 0 0 70px #000;
  top: 50px;
  
}
h1:before {
  animation: before-glow 2s ease-out infinite alternate;
  border-left: 535px solid transparent;
  border-bottom: 10px solid #666666;
  content: ' ';
  height: 0;
  position: absolute;
  right: -74px;
  top: -10px;
  width: 0;
}
h1:after {
  animation: after-glow 2s ease-out infinite alternate;
  border-left: 100px solid transparent;
  border-top: 16px solid #666666;
  content: ' ';
  height: 0;
  position: absolute;
  right: -85px;
  top: 24px;
  transform: rotate(-47deg);
  width: 0;
}

/* =========================================
Log in form
========================================= */
#fade-box {
  animation: input-entry 3s ease-in;
  z-index: 4;

}

.Waitinghill-login form {
  animation: form-entry 3s ease-in-out;
  background: hsla(#666666,50%,50%,0.3); 
  display: inline-block;
  height: 260px;
  margin: 0 auto;   /* ← sauber */
  position: relative;
  z-index: 4;
  width: 500px;
  transition: 1s all;
}
.Waitinghill-login form:hover {
/*    
  border: 6px solid #666666;
  box-shadow: 0 0 25px #666666;
*/  
  transition: 1s all;
}
.Waitinghill-login input {
  background: #222;
  background: linear-gradient(#333333, #222222);
  border: 1px solid #444;
  border-radius: 5px;
  box-shadow: 0 2px 0 #000;
  color: #888;
  display: revert;
  font-family: 'Cabin', helvetica, arial, sans-serif;
/*  font-size: 13px;*/
  font-size: 1.3rem;
/*  height: 40px;*/
  margin: 4px auto 4px;
  padding: 0 10px;
  text-shadow: 0 -1px 0 #000;
/*  width: 400px;*/
}
.Waitinghill-login input:focus {
  animation: box-glow 1s ease-out infinite alternate;
  background: #666666;
  background: linear-gradient(#999999, #222922);
  border-color: #666666;
  box-shadow: 0 0 5px rgba(153, 153,153, 0.2), inset 0 0 5px rgba(153, 153,153, 0.1), 0 2px 0 #000;
  color: #efe;
  outline: none;
}
.Waitinghill-login input:invalid {
  border: 2px solid #4d6162;
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.2), inset 0 0 5px rgba(255, 0, 0, 0.1), 0 2px 0 #000;
}
.Waitinghill-login button {
  animation: input-entry 3s ease-in;
  background: #222;
  background: linear-gradient(#333333, #222222);
  box-sizing: content-box;
  border: 1px solid #444;
  border-left-color: #000;
  border-radius: 5px;
  box-shadow: 0 2px 0 #000;
  color: #fff;
  display: block;
  font-family: 'Cabin', helvetica, arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  height: 40px;
  line-height: 40px;
  margin: 20px auto;
  padding: 0;
  position: relative;
  text-shadow: 0 -1px 0 #000;
  width: 400px;
  transition: 1s all;
}
.Waitinghill-login button:hover,
.Waitinghill-login button:focus {
  background: #0C6125;
  background: linear-gradient(#393939, #666666);
  color: #666666;
  outline: none;
  transition: 1s all;
}
.Waitinghill-login button:active {
  background: #666666;
  background: linear-gradient(#393939, #666666);
  box-shadow: 0 1px 0 #000, inset 1px 0 1px #222;
  top: 1px;
}

/* =========================================
Spinner
========================================= */
#circle1 {
  animation: circle1 4s linear infinite, circle-entry 6s ease-in-out;
  background: #000;
  border-radius: 50%;
  border: 10px solid #666666;
  box-shadow: 0 0 0 2px red, 0 0 0 6px #666666;
  height: 500px;
  width: 500px;
  position: absolute;
  top: 20px;
  left: 50%;
  margin-left: -250px;
  overflow: hidden;
  opacity: 0.4;
  z-index: -3;
}

#inner-cirlce1 {
  box-shadow: 0 0 0 2px red, 0 0 0 6px #666666;    
  background: #000;
  border-radius: 50%;
  border-top: 180px solid transparent;
  border-right: 36px solid #666666;
  border-bottom: 0px solid transparent;
  height: 460px;
  width: 460px;
  margin: 10px;
}
#inner-cirlce1:before {
  content: ' ';
  width: 240px;
  height: 480px;
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
}
#inner-cirlce1:after {
  content: ' ';
  width: 480px;
  height: 240px;
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
}

/* =========================================
Hexagon Mesh
========================================= */
.hexagons {
  animation: logo-entry 2s ease-in;
  color: #000;
  font-size: 52px;
  font-size: 5.1rem;
  letter-spacing: -0.2em;
  line-height: 0.7;
  position: absolute;
  text-shadow: 0 0 8px #FF0000;
  top: 330px;
  width: 100%;
  transform: perspective(800px) rotateX(60deg) scale(1.4);
  z-index: -6;
}

/* =========================================
Animation Keyframes
========================================= */
@keyframes logo-entry {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes circle-entry {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  100% {
    opacity: 0.4;
  }
}

@keyframes input-entry {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes box-glow {
  0% {
    border-color: #666666;
    box-shadow: 0 0 5px rgba(153, 153,153, 0.2), inset 0 0 5px rgba(153, 153,153, 0.1), 0 2px 0 #000;
  }
  100% {
    border-color: #666666;
    box-shadow: 0 0 20px rgba(153, 153,153, 0.6), inset 0 0 10px rgba(153, 153,153, 0.4), 0 2px 0 #000;
  }
}
@keyframes text-glow {
  0% {
    color: #666666;
    text-shadow: 0 0 10px #000, 0 0 20px #000, 0 0 30px #000, 0 0 40px #000, 0 0 50px #000, 0 0 60px #000, 0 0 70px #000;
  }
  100% {
    color: #666666;
    text-shadow: 0 0 20px rgba(102, 102,102, 0.6), 0 0 10px rgba(102, 102,102, 0.4), 0 2px 0 #000;
  }
}
@keyframes before-glow {
  0% {
    border-bottom: 10px solid #666666;
  }
  100% {
    border-bottom: 10px solid #666666;
  }
}
@keyframes after-glow {
  0% {
    border-top: 16px solid #666666;
  }
  100% {
    border-top: 16px solid #666666;
  }
}
@keyframes circle1 {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

#fade-box {
    border: 3px solid #ff0000;
    border-radius: 14px;
    padding: 28px;
    background: #0f0f0f;
    box-shadow: 0 0 15px #ff000055, inset 0 0 15px rgba(255, 0, 0, 0.1);
    animation: fadeInBox 3s ease-in, breatheGlow 4s ease-in-out infinite alternate;
}

@keyframes fadeInBox {
    0% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes breatheGlow {
    0% { box-shadow: 0 0 15px #ff000055, inset 0 0 15px rgba(255, 0, 0, 0.1); }
    50% { box-shadow: 0 0 35px #ff0000aa, inset 0 0 25px rgba(255, 0, 0, 0.25); }
    100% { box-shadow: 0 0 15px #ff000055, inset 0 0 15px rgba(255, 0, 0, 0.1); }
}

#fade-box:hover {
    box-shadow: 0 0 30px #ff3333cc, 0 0 60px #ff000066, inset 0 0 30px rgba(255, 0, 0, 0.3);
}

/* =====================================================
   WAITINGHILL MUSIC PREMIUM EXTENSION
   Ergänzung - Original Code bleibt unverändert
===================================================== */


/* animierte Musik-Namen */

.music-title {

    position:absolute;

    color:#ff0000;

    font-family:'Ubuntu',sans-serif;

    font-weight:bold;

    text-transform:uppercase;

    letter-spacing:8px;

    opacity:0.12;

    pointer-events:none;

    text-shadow:

        0 0 15px #ff0000,

        0 0 40px #990000;


    animation:musicFloat 18s linear infinite;

    z-index:-2;

}



.music-techno {

    left:8%;

    top:20%;

    font-size:55px;

}



.music-schlager {

    right:8%;

    top:35%;

    font-size:48px;

    animation-delay:4s;

}



.music-house {

    left:18%;

    bottom:20%;

    font-size:60px;

    animation-delay:8s;

}



.music-trance {

    right:18%;

    bottom:18%;

    font-size:55px;

    animation-delay:12s;

}



.music-rock {

    left:42%;

    top:12%;

    font-size:52px;

    animation-delay:15s;

}




@keyframes musicFloat {


0% {

    transform:
    translateY(100px)
    rotate(-5deg);

    opacity:0;

}


25% {

    opacity:0.18;

}



75% {

    opacity:0.18;

}



100% {

    transform:
    translateY(-120px)
    rotate(5deg);


    opacity:0;

}


}




/* =====================================================
   SCHWEBENDE NOTENSCHLÜSSEL
===================================================== */


.music-note {


    position:absolute;


    color:#ff0000;


    font-size:90px;


    opacity:.25;



    text-shadow:


    0 0 20px red,

    0 0 50px red;



    animation:noteRise 15s linear infinite;


    z-index:-1;

}




.note-one {

    left:15%;

    bottom:-120px;

}



.note-two {

    left:50%;

    bottom:-120px;

    animation-delay:5s;

}



.note-three {

    right:15%;

    bottom:-120px;

    animation-delay:9s;

}





@keyframes noteRise {


0% {

transform:

translateY(0)

rotate(0deg);


opacity:0;

}



20% {

opacity:.4;

}



100% {


transform:

translateY(-110vh)

rotate(360deg);


opacity:0;


}


}




/* =====================================================
   EXTRA ROTE LICHTPARTIKEL
===================================================== */


.red-light {


position:absolute;


width:3px;

height:3px;


background:#ff0000;


border-radius:50%;


box-shadow:

0 0 15px red;


animation:

redFloat 12s linear infinite;


}



@keyframes redFloat {


from {

transform:

translateY(100vh);

opacity:0;

}


30% {

opacity:1;

}


to {

transform:

translateY(-20vh);

opacity:0;

}


}