@import url('https://fonts.cdnfonts.com/css/a-otf-shin-go-pro');

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  font-family: 'A-OTF Shin Go Pro', sans-serif;

  background: linear-gradient(135deg, #DCD0FF, #BFEFFF);
  background-blend-mode: screen; 
}

/* Volume Control Icon */
#volumeControl {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
  cursor: pointer;
  font-size: 1.5rem;
}

.content {
  position: relative;
  text-align: center;
  z-index: 10; 
  animation: slideIn 2s ease forwards;
  opacity: 0;
  transform: translateY(-100%);
}

.hero-text {
  display: inline-block;
  font-size: 3rem;
  color: #90a4ae;
  cursor: default;
  margin-bottom: 2rem;
}

.pushable {
  margin-top: 2rem; 
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline-offset: 4px;
  transition: filter 250ms;
}

.shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: hsl(0deg 0% 0% / 0.25);
  will-change: transform;
  transform: translateY(2px);
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}
.edge {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: linear-gradient(
    to left,
    hsl(199, 18%, 33%) 0%,
    hsl(199, 18%, 33%) 8%,
    hsl(199, 18%, 33%) 92%,
    hsl(199, 18%, 33%) 100%
  );
}
.front {
  display: block;
  position: relative;
  padding: 12px 42px;
  border-radius: 12px;
  font-size: 1.25rem;
  color: white;
  background: hsl(200, 16%, 62%);
  will-change: transform;
  transform: translateY(-4px);
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
  font-family: 'A-OTF Shin Go Pro', sans-serif;
}

.pushable:hover {
  filter: brightness(110%);
}
.pushable:hover .front {
  transform: translateY(-6px);
  transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}
.pushable:active .front {
  transform: translateY(-2px);
  transition: transform 34ms;
}
.pushable:hover .shadow {
  transform: translateY(4px);
  transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}
.pushable:active .shadow {
  transform: translateY(1px);
  transition: transform 34ms;
}
.pushable:focus:not(:focus-visible) {
  outline: none;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.z-layer:not(:first-child) {
  color: #455a64;
}

#fadeOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 999;
}

.fade-to-white {
  animation: fadeWhite 2s forwards;
}

@keyframes fadeWhite {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.text-wipe {
  animation: wipeAway 6s cubic-bezier(.36,-0.21,.3,1) forwards;
}

@keyframes wipeAway {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  60% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.1;
    transform: translateY(-100vh);
  }
  100% {
    opacity: 0;
  }
}