/* Mermaid Animation CSS - Based on https://codepen.io/girlgeek/pen/NYvPpW */

/* Variables */
:root {
  --wild-sand: #F5F5F5;
  --chamois: #EDE1B4;
  --atlantis: #A1CC3B;
  --mystic: #D6E6E5;
  --opal: #ABCDCC;
  --ice-cold: #9FECF4;
  --med-turquoise: #3AC1CC;
  --burnt-sienna: #8B4513;
  --hair-blonde: #D2B48C;
  --mauve: #C69AF4;
  --negroni: #efc2a3;
  --cosmos: #FCD9C4;
  --apricot: #F9CCB1;
  --rose: #E292A1;
  --frosting-yellow: #FFE135;
  --tail-pink: #FF69B4;
  --tail-yellow: #FFD700;
  --tail-teal: #20B2AA;
  --tail-purple: #9370DB;
}

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Sacramento');

/* Keyframes */
@keyframes mermaid-motion {
  0% {
    transform: translateX(-50%) translateY(45px) translateZ(0);  
  }
  15% {
    transform: translateX(-50%) translateY(50px) translateZ(0);  
  }
  30% {
    transform: translateX(-50%) translateY(45px) translateZ(0);  
  }
  45% {
    transform: translateX(-50%) translateY(50px) translateZ(0);  
  }
  60% {
    transform: translateX(-50%) translateY(0px) translateZ(0);  
  }
  100% {
    transform: translateX(-50%) translateY(0px) translateZ(0);  
  }
}

@keyframes eyes {
  0% {
    transform: translateY(8px) translateZ(0); 
  }
  15% {
    transform: translateY(8px) translateZ(0);
  }
  30% {
    transform: translateY(8px) translateZ(0);
  }
  45% {
    transform: translateY(8px) translateZ(0);
  }
  60% {
    transform: translateY(2px) translateZ(0);
  }
  100% {
    transform: translateY(2px) translateZ(0); 
  }
}

@keyframes cheeks {
  0% {
    transform: translateY(0) translateZ(0); 
  }
  15% {
    transform: translateY(0) translateZ(0);
  }
  30% {
    transform: translateY(0) translateZ(0);
  }
  45% {
    transform: translateY(0) translateZ(0);
  }
  60% {
    transform: translateY(-8px) translateZ(0);
  }
  100% {
    transform: translateY(-8px) translateZ(0); 
  }
}

/* Mermaid Container */
.mermaid-container {
  position: absolute;
  top: -30px;
  right: 5%;
  width: 180px;
  height: 180px;
  z-index: 20;
  transform: scale(0.7);
}

/* Centered mermaid */
.mermaid-container.centered {
  right: auto;
  left: 50%;
  transform: translateX(-50%) scale(1.2); /* Center and make bigger */
  top: 40px; /* Increased padding from top */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .mermaid-container.centered {
    transform: translateX(-50%) scale(1.0);
    top: 30px;
  }
}

@media (max-width: 640px) {
  .mermaid-container.centered {
    transform: translateX(-50%) scale(0.9);
    top: 25px;
  }
}

/* Layout for Mermaid */
.mermaid-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Background */
.mermaid-backdrop {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  position: relative;
  background: transparent;
}

.mermaid-backdrop:before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: transparent;
}

.mermaid-water {
  position: absolute;
  bottom: 45px;
  width: 100%;
  height: 4px;
  background-color: var(--opal);
  z-index: 1;
  border-radius: 20px;
  opacity: 0.6;
}

.mermaid-water:before,
.mermaid-water:after {
  content: '';
  background-color: var(--mystic);
  position: absolute;
  top: 8px;
  height: 4px;
  border-radius: 20px;
  opacity: 0.6;
}

.mermaid-water:before {
  left: 10px;
  width: 50%;
}

.mermaid-water:after {
  right: 10px;
  width: 25%;
}

/* Character */
.mermaid-character {
  width: 87px;
  height: 65px;
  position: absolute;
  left: 50%;
  bottom: 99px;
  transform: translateX(-50%) translateY(0) translateZ(0);
  animation: mermaid-motion 3500ms cubic-bezier(0.4, 0, 1, 1) infinite alternate;
}

.mermaid-hair {
  background: linear-gradient(to bottom, var(--burnt-sienna) 0%, var(--hair-blonde) 100%);
  height: 115px;
  width: 85px;
  border-radius: 90% 90% 0 0;
}

.mermaid-hair:after {
  content: '';
  background: linear-gradient(to bottom, #654321 0%, var(--hair-blonde) 100%);
  position: absolute;
  top: 22px;
  left: 3%;
  width: 80px;
  height: 140%;
  border-radius: 80% 80% 0 0;
}

.mermaid-hair--left,
.mermaid-hair--right,
.mermaid-hair--middle {
  position: absolute;
}

.mermaid-hair--left {
  left: 24px;
  top: 22px;
  width: 4px;
  background: linear-gradient(to bottom, var(--burnt-sienna) 0%, var(--hair-blonde) 100%);
  border-radius: 0 0 0 50px;
  height: 7px;
  z-index: 5;
}

.mermaid-hair--left:before {
  content: '';
  position: absolute;
  top: 0;
  left: 4px;
  width: 4px;
  height: 4px;
  background: linear-gradient(to bottom, var(--burnt-sienna) 0%, var(--hair-blonde) 100%);
  border-radius: 0 0 50px 0;
}

.mermaid-hair--right {
  right: 24px;
  top: 22px;
  width: 4px;
  border-radius: 0 0 50px 0;
  background: linear-gradient(to bottom, var(--burnt-sienna) 0%, var(--hair-blonde) 100%);
  height: 7px;
  z-index: 5;
}

.mermaid-hair--right:before {
  content: '';
  position: absolute;
  top: 0;
  right: 4px;
  width: 10px;
  height: 4px;
  background: linear-gradient(to bottom, var(--burnt-sienna) 0%, var(--hair-blonde) 100%);
  border-radius: 0 0 0 50px;
}

.mermaid-hair--middle {
  top: 7px;
  left: 40%;
  width: 40px;
  height: 20px;
  border-radius: 0 90%;
  z-index: 6;
  background: linear-gradient(to bottom, #654321 0%, var(--hair-blonde) 100%);
  transform: translateX(-50%) rotate(-10deg);
}

.mermaid-hair--middle:after {
  content: '';
  position: absolute;
  top: 16px;
  right: 0;
  width: 25px;
  height: 7px;
  border-radius: 0 90%;
  background: linear-gradient(to bottom, #5a3c1a 0%, #c2984f 100%);
  transform: rotate(-10deg);
}

.mermaid-ear--left,
.mermaid-ear--right {
  position: absolute;
  top: 25px;
  width: 8px;
  height: 12px;
  background-color: var(--apricot);
}

.mermaid-ear--left {
  left: 20px;
  border-radius: 50px 0 0 50px;
}

.mermaid-ear--right {
  right: 20px;
  border-radius: 0 50px 50px 0;
}

.mermaid-face {
  background-color: var(--apricot);
  width: 39px;
  border-radius: 0 0 50px 50px;
  height: 29px; 
  position: absolute;
  bottom: 13px;
  left: 50%;
  transform: translateX(-50%);
}

.mermaid-face:after {
  background-color: var(--cosmos);
  width: 34px;
  border-radius: 0 0 50px 50px;
  height: 26px; 
  content: '';
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
}

.mermaid-eye {
  width: 6px;
  height: 6px;
  background-color: black;
  position: absolute;
  left: 8px;
  top: 7px;
  z-index: 5;
  border-radius: 50px;
}

.mermaid-eye + .mermaid-eye {
  left: auto;
  right: 8px;
}

.mermaid-eye:after {
  content: '';
  width: 8px;
  left: -1px;
  height: 7px;
  background-color: var(--cosmos);
  border-radius: 50%;
  position: absolute;
  animation: eyes 3500ms cubic-bezier(0.4, 0, 1, 1) infinite alternate;
}

.mermaid-cheek {
  content: '';
  position: absolute;
  top: 14px;
  width: 8px;
  left: 6px;
  height: 7px;
  background-color: pink;
  border-radius: 50%;
  position: absolute;
  z-index: 5;
  animation: cheeks 3500ms cubic-bezier(0.4, 0, 1, 1) infinite alternate;
}

.mermaid-cheek + .mermaid-cheek {
  left: auto;
  right: 6px;
}

.mermaid-nose {
  background-color: var(--negroni);
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 2px;
  z-index: 5;
  border-radius: 20px;
}

.mermaid-mouth {
  width: 9px;
  height: 4px;
  border-radius: 0 0 50px 50px;
  background-color: var(--rose);
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
}

.mermaid-neck {
  width: 13px;
  height: 13px;
  background-color: var(--apricot);
  border-radius: 0 0 50px 50px;
  bottom: 2px;
  z-index: 4;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.mermaid-body {
  background-color: var(--apricot);
  position: absolute;
  bottom: -30px;
  width: 35px;
  height: 39px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50px 50px 0 0;
  z-index: 1;
}

.mermaid-body:before {
  content: '';
  background-color: #d8a98c;
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 2px;
  border-radius: 100%;
}

.mermaid-body:after {
  content: '';
  position: absolute;
  width: 35px;
  height: 35px;
  transform: translateX(-50%);
  left: 50%;
  border-radius: 0 0 50px 50px;
  background: linear-gradient(135deg, var(--tail-pink) 0%, var(--tail-yellow) 25%, var(--tail-teal) 60%, var(--tail-purple) 100%);
  top: 35px;
}

.mermaid-arm {
  background-color: var(--negroni);
  position: absolute;
  top: 56px;
  width: 10px;
  height: 40px;
  left: 21%;
  transform: rotate(45deg);
  border-radius: 50px;
  z-index: 0;
}

.mermaid-arm:after {
  content: '';
  background-color: #e0a3a3;
  position: absolute;
  top: 5px;
  left: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
}

.mermaid-arm + .mermaid-arm {
  top: 40px;
  left: 70%;
  transform: rotate(60deg);
}

.mermaid-bra--cup {
  content: '';
  position: absolute;
  top: 10px;
  width: 17px;
  left: 1px;
  height: 15px;
  background: radial-gradient(circle at 30% 30%, #FFE135, #FFC107);
  border-radius: 50%;
  border: 2px solid #FFB300;
}

.mermaid-bra--cup:after {
  content: '';
  position: absolute;
  left: 1px;
  width: 15px;
  height: 12px;
  background: radial-gradient(circle at 40% 40%, #FFECB3, var(--frosting-yellow));
  border-radius: 50%;
  box-shadow: inset 0 0 3px rgba(255, 193, 7, 0.7);
}

.mermaid-bra--cup + .mermaid-bra--cup {
  left: auto;
  right: 1px;
}

.mermaid-tail {
  background: linear-gradient(45deg, var(--tail-pink) 0%, var(--tail-yellow) 25%, var(--tail-teal) 60%, var(--tail-purple) 100%);
  position: absolute;
  top: 50px;
  left: 35px;
  border-radius: 5px 90%;
  height: 12px;
  width: 10px;
  transform: rotate(95deg);
}

.mermaid-fin {
  background: linear-gradient(45deg, var(--tail-teal) 0%, var(--tail-purple) 50%, var(--tail-pink) 100%);
  position: absolute;
  top: 25px;
  left: 45px;
  border-radius: 5px 90%;
  border-style: solid;
  border-width: 2px;
  border-color: var(--tail-purple);
  height: 30px;
  width: 30px;
  transform: translateX(90%);
  transform: rotate(95deg);
  z-index: 1;
}

.mermaid-fin + .mermaid-fin {
  top: 18px;
  left: 30px;
  transform: translateX(20%);
  transform: rotate(45deg);
  background: linear-gradient(45deg, var(--tail-yellow) 0%, var(--tail-teal) 50%, var(--tail-purple) 100%);
}