/* Spooky Theme - Only contains differences from base style.css */

:root {
  --color-theme: #5E81AC;
  --bg-primary: #2E3440;
  --bg-secondary: rgba(59, 66, 82, .5);
  --bg-hover: rgba(253, 141, 83, .5);
  --color-primary: #2E3440;
  --color-secondary: #81A1C1;
  --color-white: #ECEFF4;
  --color-success: #796aab;
  --color-warning: #D08770;
  --color-danger: #BF616A;
}

body {
  color: var(--color-white);
  background-color: #292B25;
  background-image: url(../img/bg/jtDusk.jpg);
}

.searchbox {
  color: var(--color-primary);
  background-color: var(--color-theme);
}

.searchbox:focus {
  color: #E5E9F0;
  background-color: rgba(94, 129, 172, .7);
  border-color: var(--bg-hover);
}

/* ====== FOOTER STYLES ====== */
.footer-distributed .footer-left p {
  color: var(--color-secondary);
}

.footer-distributed p.footer-links a:hover {
  color: var(--bg-hover);
}

/* ====== GHOST ANIMATIONS ====== */
@keyframes hover {
  0% {
    top: 0;
  }
  100% {
    top: 8px;
  }
}

@keyframes star-entrance {
  0% {
    transform: rotate(-735deg) scale(0, 0);
  }
  100% {
    transform: rotate(0) scale(1, 1);
  }
}

@keyframes star-exit {
  0% {
    transform: rotate(0) scale(1, 1);
  }
  100% {
    transform: rotate(360deg) scale(0, 0);
  }
}

@keyframes twinkle {
  0% {
    transform: rotate(0deg) scale(1, 1);
  }
  25% {
    transform: rotate(10deg) scale(0.8, 0.8);
  }
  50% {
    transform: rotate(0deg) scale(0.9, 0.9);
  }
  75% {
    transform: rotate(-20deg) scale(0.6, 0.6);
  }
  100% {
    transform: rotate(0deg) scale(1, 1);
  }
}

@keyframes waving {
  0% {
    transform: rotate(-45deg);
  }
  25% {
    transform: rotate(-55deg);
  }
  50% {
    transform: rotate(-45deg);
  }
  75% {
    transform: rotate(-55deg);
  }
  100% {
    transform: rotate(-45deg);
  }
}

/* ====== GHOST STYLES ====== */
html {
  height: 100%;
}

body {
  height: 100%;
  position: relative;
}

/* Make ghost work within existing layout */
body:not(.ghost-page) .scene-container {
  position: fixed;
  top: 1.25rem; /* 20px */
  right: 1.25rem; /* 20px */
  z-index: 1000;
}

.scene-container {
  position: relative;
  width: 8.75rem; /* 140px */
  height: 13.125rem; /* 210px */
  transform-origin: top left;
}

.scene-container:focus {
  outline: none;
}

.scene-container.run-away .ghost {
  transform: rotateX(-10deg) scale3d(1.4, 4, 1) translate3d(0, 130%, -30px);
  transition: transform 800ms ease;
}

.scene-container.descend .ghost {
  transform: translate3d(0, 130%, 0);
}

.ghost-container {
  position: relative;
  width: 5rem; /* 80px */
  height: 10.3125rem; /* 165px */
  padding: 1.875rem 6.875rem 0 1.875rem; /* 30px 110px 0 30px */
  overflow: hidden;
  perspective: 1.875rem; /* 30px */
}

.ghost {
  position: relative;
  height: 10.3125rem; /* 165px */
  z-index: 1;
  transition: transform 2000ms ease-out;
}

.ghost.hover {
  animation: hover 600ms ease-in-out infinite alternate;
}

.ghost-head {
  position: relative;
  width: 5rem; /* 80px */
  height: 5rem; /* 80px */
  border-radius: 100%;
  background-color: #F0EFDC;
}

.ghost-head .ghost-face {
  position: absolute;
  bottom: 0.625rem; /* 10px */
  left: 0.625rem; /* 10px */
  width: 3.125rem; /* 50px */
  height: 1.875rem; /* 30px */
  z-index: 1;
}

.eyes-row,
.mouth-row {
  position: relative;
  height: 0.625rem; /* 10px */
}

.mouth-row {
  margin-top: 0.1875rem; /* 3px */
}

.eye {
  height: 0.625rem; /* 10px */
  width: 0.625rem; /* 10px */
  background-color: #271917;
  border-radius: 100%;
  position: absolute;
  bottom: 0;
  transition: height 50ms ease;
}

.eye.left {
  left: 0.3125rem; /* 5px */
}

.eye.right {
  right: 0.3125rem; /* 5px */
}

.eye.blink {
  height: 0;
}

.mouth {
  position: absolute;
  left: 50%;
  top: 0;
  height: 0.625rem; /* 10px */
  transform: translate3d(-50%, 0, 0);
}

.mouth .mouth-top {
  width: 1.125rem; /* 18px */
  height: 0.125rem; /* 2px */
  border-radius: 0.125rem 0.125rem 0 0; /* 2px 2px 0 0 */
  background-color: #271917;
}

.mouth .mouth-bottom {
  position: absolute;
  width: 1.125rem; /* 18px */
  height: 0.5rem; /* 8px */
  bottom: 0;
  overflow: hidden;
  transition: height 150ms ease;
}

.mouth .mouth-bottom:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.125rem; /* 18px */
  height: 1rem; /* 16px */
  border-radius: 100%;
  background-color: #271917;
}

.mouth.open .mouth-bottom {
  height: 1rem; /* 16px */
}

.mouth.closed .mouth-bottom {
  height: 0;
}

.cheek {
  position: absolute;
  top: 0;
  width: 0.75rem; /* 12px */
  height: 0.25rem; /* 4px */
  background-color: #F5C1B6;
  border-radius: 100%;
}

.cheek.left {
  left: 0;
}

.cheek.right {
  right: 0;
}

.ghost-body {
  position: absolute;
  top: 2.5rem; /* 40px */
  height: 4.0625rem; /* 65px */
  width: 5rem; /* 80px */
  background-color: #F0EFDC;
}

.ghost-hand {
  height: 2.25rem; /* 36px */
  width: 1.375rem; /* 22px */
  background: #F0EFDC;
  border-radius: 100%/90%;
  position: absolute;
}

.ghost-hand.hand-left {
  left: 0;
  top: 0.3125rem; /* 5px */
  transform: rotateZ(-45deg);
  transform-origin: bottom center;
}

.ghost-hand.hand-right {
  right: -0.625rem; /* -10px */
  top: 0.625rem; /* 10px */
  transform: rotateZ(45deg);
}

.ghost-hand.hand-left.waving {
  animation: waving 400ms linear;
}

.ghost-skirt {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  transform: translateY(50%);
}

.ghost-skirt .pleat {
  width: 20%;
  height: 0.5rem; /* 8px */
  border-radius: 100%;
}

.ghost-skirt .pleat.down {
  background-color: #F0EFDC;
}

.ghost-skirt .pleat.up {
  background-color: #292B25;
  position: relative;
  top: 0.0625rem; /* 1px */
}

.shadow-container {
  transition: transform 800ms ease;
}

.shadow-container.disappear {
  transform: scale3d(0, 1, 1);
  transition: transform 400ms ease;
}

.shadow {
  position: absolute;
  top: calc(80% - 0.25rem); /* 4px */
  left: 0;
  width: 100%;
  height: 0.5rem; /* 8px */
  background-color: #1B1D18;
  border-radius: 100%;
  z-index: -1;
}

.shadow-bottom {
  position: absolute;
  top: 80%;
  left: 0;
  height: 0.25rem; /* 4px */
  width: 100%;
  overflow: hidden;
}

.shadow-bottom:after {
  content: '';
  display: block;
  width: 100%;
  position: absolute;
  height: 0.5rem; /* 8px */
  left: 0;
  bottom: 0;
  border-radius: 100%;
  background-color: #1B1D18;
  z-index: 2;
}

/* Responsive Ghost - Scales down for smaller viewports while maintaining proportions */
@media (max-width: 768px) {
  .scene-container {
    width: 6.5625rem; /* 105px */
    height: 9.84375rem; /* 157.5px */
  }
  
  .ghost-container {
    width: 3.75rem; /* 60px */
    height: 7.734375rem; /* 123.75px */
    padding: 1.40625rem 5.15625rem 0 1.40625rem; /* 22.5px 82.5px 0 22.5px */
  }
  
  .ghost {
    height: 7.734375rem; /* 123.75px */
  }
  
  .ghost-head {
    width: 3.75rem; /* 60px */
    height: 3.75rem; /* 60px */
  }
  
  .ghost-head .ghost-face {
    bottom: 0.46875rem; /* 7.5px */
    left: 0.46875rem; /* 7.5px */
    width: 2.34375rem; /* 37.5px */
    height: 1.40625rem; /* 22.5px */
  }
  
  .eyes-row,
  .mouth-row {
    height: 0.46875rem; /* 7.5px */
  }
  
  .mouth-row {
    margin-top: 0.140625rem; /* 2.25px */
  }
  
  .eye {
    height: 0.46875rem; /* 7.5px */
    width: 0.46875rem; /* 7.5px */
  }
  
  .eye.left {
    left: 0.234375rem; /* 3.75px */
  }
  
  .eye.right {
    right: 0.234375rem; /* 3.75px */
  }
  
  .mouth {
    height: 0.46875rem; /* 7.5px */
  }
  
  .mouth .mouth-top {
    width: 0.84375rem; /* 13.5px */
    height: 0.09375rem; /* 1.5px */
    border-radius: 0.09375rem 0.09375rem 0 0; /* 1.5px 1.5px 0 0 */
  }
  
  .mouth .mouth-bottom {
    width: 0.84375rem; /* 13.5px */
    height: 0.375rem; /* 6px */
  }
  
  .mouth .mouth-bottom:after {
    width: 0.84375rem; /* 13.5px */
    height: 0.75rem; /* 12px */
  }
  
  .mouth.open .mouth-bottom {
    height: 0.75rem; /* 12px */
  }
  
  .cheek {
    width: 0.5625rem; /* 9px */
    height: 0.1875rem; /* 3px */
  }
  
  .ghost-body {
    top: 1.875rem; /* 30px */
    height: 3.046875rem; /* 48.75px */
    width: 3.75rem; /* 60px */
  }
  
  .ghost-hand {
    height: 1.6875rem; /* 27px */
    width: 1.03125rem; /* 16.5px */
  }
  
  .ghost-hand.hand-left {
    top: 0.234375rem; /* 3.75px */
  }
  
  .ghost-hand.hand-right {
    right: -0.46875rem; /* -7.5px */
    top: 0.46875rem; /* 7.5px */
  }
  
  .ghost-skirt .pleat {
    height: 0.375rem; /* 6px */
  }
  
  .ghost-skirt .pleat.up {
    top: 0.046875rem; /* 0.75px */
  }
  
  .shadow {
    height: 0.375rem; /* 6px */
    top: calc(80% - 0.1875rem); /* 3px */
  }
  
  .shadow-bottom {
    height: 0.1875rem; /* 3px */
  }
  
  .shadow-bottom:after {
    height: 0.375rem; /* 6px */
  }
}

@media (max-width: 480px) {
  .scene-container {
    width: 5rem; /* 80px */
    height: 7.5rem; /* 120px */
  }
  
  .ghost-container {
    width: 2.8125rem; /* 45px */
    height: 5.796875rem; /* 92.75px */
    padding: 1.0546875rem 3.8671875rem 0 1.0546875rem; /* 16.875px 61.875px 0 16.875px */
  }
  
  .ghost {
    height: 5.796875rem; /* 92.75px */
  }
  
  .ghost-head {
    width: 2.8125rem; /* 45px */
    height: 2.8125rem; /* 45px */
  }
  
  .ghost-head .ghost-face {
    bottom: 0.3515625rem; /* 5.625px */
    left: 0.3515625rem; /* 5.625px */
    width: 1.7578125rem; /* 28.125px */
    height: 1.0546875rem; /* 16.875px */
  }
  
  .eyes-row,
  .mouth-row {
    height: 0.3515625rem; /* 5.625px */
  }
  
  .mouth-row {
    margin-top: 0.10546875rem; /* 1.6875px */
  }
  
  .eye {
    height: 0.3515625rem; /* 5.625px */
    width: 0.3515625rem; /* 5.625px */
  }
  
  .eye.left {
    left: 0.17578125rem; /* 2.8125px */
  }
  
  .eye.right {
    right: 0.17578125rem; /* 2.8125px */
  }
  
  .mouth {
    height: 0.3515625rem; /* 5.625px */
  }
  
  .mouth .mouth-top {
    width: 0.6328125rem; /* 10.125px */
    height: 0.0703125rem; /* 1.125px */
    border-radius: 0.0703125rem 0.0703125rem 0 0; /* 1.125px 1.125px 0 0 */
  }
  
  .mouth .mouth-bottom {
    width: 0.6328125rem; /* 10.125px */
    height: 0.28125rem; /* 4.5px */
  }
  
  .mouth .mouth-bottom:after {
    width: 0.6328125rem; /* 10.125px */
    height: 0.5625rem; /* 9px */
  }
  
  .mouth.open .mouth-bottom {
    height: 0.5625rem; /* 9px */
  }
  
  .cheek {
    width: 0.421875rem; /* 6.75px */
    height: 0.140625rem; /* 2.25px */
  }
  
  .ghost-body {
    top: 1.40625rem; /* 22.5px */
    height: 2.28515625rem; /* 36.5625px */
    width: 2.8125rem; /* 45px */
  }
  
  .ghost-hand {
    height: 1.265625rem; /* 20.25px */
    width: 0.7734375rem; /* 12.375px */
  }
  
  .ghost-hand.hand-left {
    top: 0.17578125rem; /* 2.8125px */
  }
  
  .ghost-hand.hand-right {
    right: -0.3515625rem; /* -5.625px */
    top: 0.3515625rem; /* 5.625px */
  }
  
  .ghost-skirt .pleat {
    height: 0.28125rem; /* 4.5px */
  }
  
  .ghost-skirt .pleat.up {
    top: 0.03515625rem; /* 0.5625px */
  }
  
  .shadow {
    height: 0.28125rem; /* 4.5px */
    top: calc(80% - 0.140625rem); /* 2.25px */
  }
  
  .shadow-bottom {
    height: 0.140625rem; /* 2.25px */
  }
  
  .shadow-bottom:after {
    height: 0.28125rem; /* 4.5px */
  }
}

@media (max-width: 320px) {
  .scene-container {
    width: 4.0625rem; /* 65px */
    height: 6.09375rem; /* 97.5px */
  }
  
  .ghost-container {
    width: 2.28125rem; /* 36.5px */
    height: 4.6640625rem; /* 74.625px */
    padding: 0.84375rem 3.09375rem 0 0.84375rem; /* 13.5px 49.5px 0 13.5px */
  }
  
  .ghost {
    height: 4.6640625rem; /* 74.625px */
  }
  
  .ghost-head {
    width: 2.28125rem; /* 36.5px */
    height: 2.28125rem; /* 36.5px */
  }
  
  .ghost-head .ghost-face {
    bottom: 0.28125rem; /* 4.5px */
    left: 0.28125rem; /* 4.5px */
    width: 1.40625rem; /* 22.5px */
    height: 0.84375rem; /* 13.5px */
  }
  
  .eyes-row,
  .mouth-row {
    height: 0.28125rem; /* 4.5px */
  }
  
  .mouth-row {
    margin-top: 0.084375rem; /* 1.35px */
  }
  
  .eye {
    height: 0.28125rem; /* 4.5px */
    width: 0.28125rem; /* 4.5px */
  }
  
  .eye.left {
    left: 0.140625rem; /* 2.25px */
  }
  
  .eye.right {
    right: 0.140625rem; /* 2.25px */
  }
  
  .mouth {
    height: 0.28125rem; /* 4.5px */
  }
  
  .mouth .mouth-top {
    width: 0.50625rem; /* 8.1px */
    height: 0.05625rem; /* 0.9px */
    border-radius: 0.05625rem 0.05625rem 0 0; /* 0.9px 0.9px 0 0 */
  }
  
  .mouth .mouth-bottom {
    width: 0.50625rem; /* 8.1px */
    height: 0.225rem; /* 3.6px */
  }
  
  .mouth .mouth-bottom:after {
    width: 0.50625rem; /* 8.1px */
    height: 0.45rem; /* 7.2px */
  }
  
  .mouth.open .mouth-bottom {
    height: 0.45rem; /* 7.2px */
  }
  
  .cheek {
    width: 0.3375rem; /* 5.4px */
    height: 0.1125rem; /* 1.8px */
  }
  
  .ghost-body {
    top: 1.125rem; /* 18px */
    height: 1.828125rem; /* 29.25px */
    width: 2.28125rem; /* 36.5px */
  }
  
  .ghost-hand {
    height: 1.0125rem; /* 16.2px */
    width: 0.61875rem; /* 9.9px */
  }
  
  .ghost-hand.hand-left {
    top: 0.140625rem; /* 2.25px */
  }
  
  .ghost-hand.hand-right {
    right: -0.28125rem; /* -4.5px */
    top: 0.28125rem; /* 4.5px */
  }
  
  .ghost-skirt .pleat {
    height: 0.225rem; /* 3.6px */
  }
  
  .ghost-skirt .pleat.up {
    top: 0.028125rem; /* 0.45px */
  }
  
  .shadow {
    height: 0.225rem; /* 3.6px */
    top: calc(80% - 0.1125rem); /* 1.8px */
  }
  
  .shadow-bottom {
    height: 0.1125rem; /* 1.8px */
  }
  
  .shadow-bottom:after {
    height: 0.225rem; /* 3.6px */
  }
}

.star {
  position: absolute;
  animation: twinkle 2s infinite linear;
  transition: top 400ms ease-out, left 400ms ease-out;
}

.star.round .star-element {
  height: 9px;
  width: 9px;
  border-radius: 100%;
}

.star.pointy {
  transform: rotate(-15deg);
}

.star.pointy .star-element {
  height: 6px;
  width: 6px;
}

.star.pointy .star-element:before, .star.pointy .star-element:after {
  content: '';
  display: block;
  position: absolute;
  background: green;
  border-radius: 6px;
}

.star.pointy .star-element:before {
  height: 6px;
  width: 12px;
  left: -3px;
  top: 0;
  transform: skewX(60deg);
}

.star.pointy .star-element:after {
  height: 12px;
  width: 6px;
  right: 0;
  bottom: -3px;
  transform: skewY(-60deg);
}

.star.orange .star-element, .star.orange .star-element:before, .star.orange .star-element:after {
  background-color: #DF814D;
}

.star.yellow .star-element, .star.yellow .star-element:before, .star.yellow .star-element:after {
  background-color: #FFD186;
}

.star.blue .star-element, .star.blue .star-element:before, .star.blue .star-element:after {
  background-color: #83D0BC;
}

.star-1 {
  top: 130%;
  left: 40%;
  transition-delay: 200ms;
  animation-delay: 0ms;
  z-index: 2;
}

.star-2 {
  top: 130%;
  left: 44%;
  transition-delay: 250ms;
  animation-delay: 200ms;
}

.star-3 {
  top: 130%;
  left: 48%;
  transition-delay: 300ms;
  animation-delay: 400ms;
  z-index: 2;
}

.star-4 {
  top: 130%;
  left: 52%;
  transition-delay: 350ms;
  animation-delay: 600ms;
}

.star-5 {
  top: 130%;
  left: 56%;
  transition-delay: 400ms;
  animation-delay: 800ms;
  z-index: 2;
}

.star-6 {
  top: 130%;
  left: 60%;
  transition-delay: 450ms;
  animation-delay: 1000ms;
}

.move-stars-out .star-element {
  animation: star-entrance 1500ms;
}

.stars-out .star {
  transition: top 1500ms ease-out, left 1500ms ease-out;
}

.stars-out .star-1 {
  top: 75%;
  left: 6%;
}

.stars-out .star-2 {
  top: 35%;
  left: 88%;
}

.stars-out .star-3 {
  top: 8%;
  left: 20%;
}

.stars-out .star-4 {
  top: 70%;
  left: 92%;
}

.stars-out .star-5 {
  top: 35%;
  left: 4%;
}

.stars-out .star-6 {
  top: 2%;
  left: 70%;
}

.stars-out .star-1 {
  transition-delay: 0ms, 0ms;
}

.stars-out .star-1 .star-element {
  animation-delay: 0ms;
}

.stars-out .star-2 {
  transition-delay: 200ms, 200ms;
}

.stars-out .star-2 .star-element {
  animation-delay: 200ms;
}

.stars-out .star-3 {
  transition-delay: 400ms, 400ms;
}

.stars-out .star-3 .star-element {
  animation-delay: 400ms;
}

.stars-out .star-4 {
  transition-delay: 600ms, 600ms;
}

.stars-out .star-4 .star-element {
  animation-delay: 600ms;
}

.stars-out .star-5 {
  transition-delay: 800ms, 800ms;
}

.stars-out .star-5 .star-element {
  animation-delay: 800ms;
}

.stars-out .star-6 {
  transition-delay: 1000ms, 1000ms;
}

.stars-out .star-6 .star-element {
  animation-delay: 1000ms;
}

.move-stars-in .star-element {
  animation: star-exit 400ms linear;
}

.move-stars-in .star-1 .star-element {
  animation-delay: 100ms;
}

.move-stars-in .star-2 .star-element {
  animation-delay: 150ms;
}

.move-stars-in .star-3 .star-element {
  animation-delay: 200ms;
}

.move-stars-in .star-4 .star-element {
  animation-delay: 250ms;
}

.move-stars-in .star-5 .star-element {
  animation-delay: 300ms;
}

.move-stars-in .star-6 .star-element {
  animation-delay: 350ms;
}