@import url(https://fonts.googleapis.com/css?family=Lato);

body {
  overflow: hidden;
  font-family: Lato, Helvetica, sans-serif;
  font-weight: 400;
  background: #1F1F1F;
  user-select: none;
  margin: 0;
  padding: 0;
}

html, body, #lil {
  height: 100%;
}

#lil {
  animation: oscillate 1000ms alternate ease-in-out infinite;
}

audio {
  position: absolute;
  top: 0;
}

audio:nth-of-type(1) { top: 0; }
audio:nth-of-type(2) { top: 2rem; }
audio:nth-of-type(3) { top: 4rem; }

#chano, #from-79th {
  height: 336px;
  width: 336px;
}

#chano {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: grab;
}

#from-79th {
  display: block;
  transition: transform 200ms ease-in-out;
  border-radius: 50%;
  transform: scale(1);
}

#from-79th g { 
  opacity: 0;
  visibility: hidden;
}

@keyframes oscillate {
  from { transform: scale(0.95); }
  to   { transform: scale(1); }
}

.words {
  position: fixed;
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
  overflow: hidden;
  z-index: -1;
}

.words div {
  opacity: 0;
  transition: opacity 200ms linear;
}

body.audio-1 .words .words-1 { opacity: 1; }
body.audio-2 .words .words-2 { opacity: 1; }
body.audio-3 .words .words-3 { opacity: 1; }

.words p {
  color: white;
  position: absolute;
  width: 800px;
  font-size: 1.5rem;
  line-height: 1;
  color: rgba(255,255,255,0.4);
  text-shadow: 
    800px 0 0 rgba(255,255,255,0.4),
    -800px 0 0 rgba(255,255,255,0.4);
  opacity: 0;
}

.words p:nth-child(odd) {
  right: 100%;
  animation: drift-r 6s linear alternate infinite,
    opacity 300ms linear forwards;
}

.words p:nth-child(even) {
  left: 100%;
  animation: drift-l 6s linear alternate infinite,
    opacity 300ms linear forwards;
}

.words p:nth-child(1) { top: 0%; }
.words p:nth-child(2) { top: 5%; }
.words p:nth-child(3) { top: 10%; }
.words p:nth-child(4) { top: 15%; }
.words p:nth-child(5) { top: 20%; }
.words p:nth-child(6) { top: 25%; }
.words p:nth-child(7) { top: 30%; }
.words p:nth-child(8) { top: 35%; }
.words p:nth-child(9) { top: 40%; }
.words p:nth-child(10) { top: 45%; }
.words p:nth-child(11) { top: 50%; }
.words p:nth-child(12) { top: 55%; }
.words p:nth-child(13) { top: 60%; }
.words p:nth-child(14) { top: 65%; }
.words p:nth-child(15) { top: 70%; }
.words p:nth-child(16) { top: 75%; }
.words p:nth-child(17) { top: 80%; }
.words p:nth-child(18) { top: 85%; }
.words p:nth-child(19) { top: 90%; }
.words p:nth-child(20) { top: 95%; }

.words p:nth-child(1),
.words p:nth-child(20) {
  animation-delay: 0.3s, 0.3s;
}

.words p:nth-child(2),
.words p:nth-child(19) {
  animation-delay: 0.6s, 0.6s;
}

.words p:nth-child(3),
.words p:nth-child(18) {
  animation-delay: 0.9s, 0.9s;
}

.words p:nth-child(4),
.words p:nth-child(17) {
  animation-delay: 1.2s, 1.2s;
}

.words p:nth-child(5),
.words p:nth-child(16) {
  animation-delay: 1.5s, 1.5s;
}

@keyframes drift-r {
  from { right: 100%; }
  to   { right: -800px; }
}

@keyframes drift-l {
  from { left: 100%; }
  to   { left: -800px; }
}

@keyframes opacity {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body:not(.playing) #chano .id-1 {
  opacity: 1;
  visibility: visible;
}

body:not(.playing) #from-79th:hover {
  transition: transform 1000ms cubic-bezier(0, 1.56, 0.82, 0.83);
  transform: scale(1.2);
}

body.playing {
  cursor: grabbing;
  animation: background-color 2s linear infinite;
}

body.playing #chano { 
  cursor: grabbing; 
}

body.playing #from-79th {
  transition: transform 2000ms cubic-bezier(0, 1.56, 0.82, 0.83);
  transform: scale(2);
}

body.playing .frame-1 #chano .id-1,
body.playing .frame-2 #chano .id-2,
body.playing .frame-3 #chano .id-3,
body.playing .frame-4 #chano .id-4 {
  opacity: 1;
  visibility: visible;
}

@keyframes background-color {
  0% { background: hsl(340, 70%, 70%); }
  10% { background: hsl(25, 70%, 70%); }
  20% { background: hsl(180, 70%, 70%); }
  30% { background: hsl(290, 70%, 70%); }
  40% { background: hsl(120, 70%, 70%); }
  50% { background: hsl(60, 70%, 70%); }
  60% { background: hsl(200, 70%, 70%); }
  70% { background: hsl(310, 70%, 70%); }
  80% { background: hsl(45, 70%, 70%); }
  90% { background: hsl(160, 70%, 70%); }
  100% { background: hsl(270, 70%, 70%); }
}

.social-buttons {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.social-btn {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.social-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.1);
  color: #00ffaa;
}

.social-btn svg {
  width: 24px;
  height: 24px;
}

/* Responsive */
@media (max-width: 768px) {
  .social-buttons {
    bottom: 1rem;
    right: 1rem;
  }
  
  .social-btn {
    width: 45px;
    height: 45px;
  }
}