/* ==========================
   FONTS
   ========================== */

@font-face {
    font-family: "Cloister Black";
    src: url("fonts/CloisterBlack.ttf") format("truetype");
}

/* ==========================
   BUNNY NOIR
   Entrance page
   ========================== */

* {
  box-sizing:border-box;
}

html,
body {
  margin:0;
  min-height:100%;
}

body {
  min-height:100vh;
  padding:25px 0;

  display:flex;
  justify-content:center;
  align-items:center;

  overflow:auto;

  background:
    radial-gradient(circle at top, #2a0010, #050505 55%);

  color:#d8d8d8;

  font-family:
    Georgia,
    "Times New Roman",
    serif;
}


/* Subtle dotted background texture */

body::before {
 content:"";

position:fixed;

inset:0;

pointer-events:none;

background:

radial-gradient(circle,
transparent 45%,
rgba(0,0,0,.45) 100%);
}


/* Unused placeholder from the HTML */

.stars {
  display:none;
}


/* ==========================
   MAIN ENTRANCE FRAME
   ========================== */

.entrance {
  width:650px;

padding:20px 40px 40px;

text-align:center;

background:transparent;

border:none;

box-shadow:none;

position:relative;
}


/* ==========================
   BUNNY NOIR TITLE
   ========================== */

h1.title-glitter {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;

  margin:8px auto 18px;

  font-family:"Pirata One", Georgia, serif;
  font-size:58px;
  font-weight:normal;
  line-height:1;
  letter-spacing:2px;
  white-space:nowrap;

  color:#aaa3a6;

  text-shadow:
    2px 3px 0 #180006,
    0 0 5px rgba(255,255,255,.22),
    0 0 12px #730014,
    0 0 25px #350008;
}

.cross {
  display:inline-block;
  flex:0 0 auto;

  margin:0;

  font-family:Georgia, "Times New Roman", serif;
  font-size:22px;
  line-height:1;

  color:#7b0918;

  text-shadow:
    0 0 6px #a00018,
    0 0 12px #3b0008;
}








/* ==========================
   TAGLINE AND GLITTER BATS
   ========================== */

.tagline {
 
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:nowrap;

  gap:14px;

  width:100%;
 margin:6px auto 20px;

  font-family:Georgia, "Times New Roman", serif;
  font-size:16px;
  font-style:italic;
  font-weight:normal;
  letter-spacing:1.5px;
  line-height:1.4;
  white-space:nowrap;

  color:#b6aeb2;
  opacity:.9;
}



/* ==========================
   QUOTE
   ========================== */

.quote {
  max-width:470px;
  margin:0 auto 28px;

  font-size:16px;
  font-weight:400;
  line-height:1.7;
  text-align:center;

  color:#aaa2a6;
  opacity:.7;
}

/* ==========================
   BUNNY
   ========================== */

.rabbit{
    display:flex;
    justify-content:center;
    align-items:center;

     margin:0 0 28px;
}

.bunny-image{
    display:block;

    width:300px;

    margin:0 auto;

    height:auto;


 filter:

drop-shadow(0 0 18px #800020)
drop-shadow(0 0 35px #400000);

  animation:
    bunnyGlow 4s infinite,
    bunnyFloat 5s ease-in-out infinite;
}


/* Slow floating motion */

@keyframes bunnyFloat {
  0% {
    transform:translateY(0);
  }

  50% {
    transform:translateY(-8px);
  }

  100% {
    transform:translateY(0);
  }
}


/* Haunted glitch flicker */

@keyframes bunnyGlow {
  0%,
  90%,
  100% {
    opacity:1;

    filter:
      drop-shadow(0 0 15px #800020)
      drop-shadow(0 0 25px #400000);
  }

  92% {
    opacity:.75;

    filter:
      drop-shadow(4px 0 10px #990000)
      drop-shadow(-4px 0 10px #330000);
  }

  94% {
    opacity:.95;
  }

  96% {
    opacity:.65;
  }

  98% {
    opacity:1;
  }
}


/* ==========================
   ENTER BUTTON
   ========================== */

.enter-button{

display:inline-block;

position:relative;

overflow:visible;

padding:16px 34px;

border:2px solid #8b0000;

background:#100000;

color:#d8a0a0;

text-decoration:none;

letter-spacing:2px;

font-size:20px;

transition:
transform .3s,
background .3s,
color .3s,
box-shadow .3s;
}

.enter-button:hover{

transform:translateY(-3px) scale(1.02);

background:#8b0000;

color:#ffffff;

box-shadow:
0 0 12px #800020,
0 0 25px #ff0033,
0 0 40px #660000;
}


/* ==========================
   FOOTER
   ========================== */

footer{

margin-top:28px;

text-align:center;

}

.status{

font-size:12px;

letter-spacing:2px;

text-transform:lowercase;

color:#666666;

line-height:1.8;

}

.status span{

display:inline-block;

margin-top:4px;

font-style:italic;

color:#9b9b9b;

text-shadow:

0 0 6px #660000;

animation:statusGlow 5s ease-in-out infinite;

}

@keyframes statusGlow{

0%,100%{

opacity:.6;

}

50%{

opacity:1;

}

}


/* ==========================
   MOBILE
   ========================== */

@media (max-width:680px) {
  body {
    align-items:flex-start;
  }

  .entrance {
    width:92%;
    min-height:auto;

    padding:28px 16px;
  }

 h1.title-glitter {
  font-size:40px;
  letter-spacing:1px;
  gap:10px;
}

.cross {
  font-size:18px;
}

  .tagline {
    gap:7px;

    font-size:13px;
    letter-spacing:0;
  }

  .quote {
    font-size:16px;
  }

  .bunny-image {
    width:220px;
  }

  .enter-button {
    padding:13px 20px;

    font-size:15px;
    letter-spacing:2px;
  }
}


/* Let the tagline wrap only on very narrow screens */


/* ==========================
   BUNNY NOIR CURSOR TRAIL
   ========================== */

.cursor-sparkle{

position:fixed;

pointer-events:none;

user-select:none;

font-size:14px;

color:#f7f7f7;

text-shadow:
0 0 4px #ffffff,
0 0 8px #d8d8d8,
0 0 14px #800020;

opacity:1;

z-index:99999;

animation:sparkleFade .8s ease-out forwards;

}

@keyframes sparkleFade{

0%{

opacity:1;

transform:translate(-50%,-50%) scale(1);

}

100%{

opacity:0;

transform:translate(-50%,-70%) scale(.4);

}

}
/* ==========================
   CURSOR BAT
   ========================== */

.cursor-bat{

width:40px;

height:auto;

position:fixed;

pointer-events:none;

z-index:99999;

filter:
drop-shadow(0 0 8px #ffffff)
drop-shadow(0 0 12px #660000);

animation:batFloat 1.3s ease-out forwards;

}

@keyframes batFloat{

0%{

opacity:1;

transform:translate(-50%,-50%) scale(.9);

}

100%{

opacity:0;

transform:
translate(-50%,-90%)
scale(.55)
rotate(15deg);

}

}
/* ==========================
   BUTTON HOVER SPARKLES
   ========================== */

.button-sparkle {
  position:fixed;

  pointer-events:none;
  user-select:none;

  z-index:999999;

  font-size:14px;
  color:#ffffff;

  text-shadow:
    0 0 5px #ffffff,
    0 0 11px #d8d8d8,
    0 0 18px #800020;

  animation:buttonSparkle .8s ease-out forwards;
}

@keyframes buttonSparkle {
  0% {
    opacity:1;
    transform:translate(-50%, -50%) scale(.5);
  }

  100% {
    opacity:0;
    transform:translate(-50%, -110%) scale(1.4);
  }
}
/* ==========================
   ROSE VINES
   ========================== */

.rose-vine {
  position: fixed;

  width: 320px;
  height: auto;

  pointer-events: none;
  user-select: none;

  z-index: 0;

  opacity: .45;

  filter:
    grayscale(.65)
    brightness(1.0)
    contrast(1.05)
    drop-shadow(0 0 8px #43000f);
}

.vine-top {
  top: -20px;
  left: -15px;

  transform: rotate(-4deg);
}

.vine-bottom {
  right: -10px;
  bottom: -20px;

transform: rotate(184deg);
}

.entrance {
  position: relative;
  z-index: 1;
}
/* ==========================
   FADE TO BLACK
   ========================== */

html::after {
  content:"";

  position:fixed;
  inset:0;

  background:#000000;
  opacity:0;

  pointer-events:none;

  z-index:9999999;

  transition:opacity .7s ease;
}

html.fade-out::after {
  opacity:1;
}