/* Background image */

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* 1. The Image */
  background-image: url('backyard.jpg');
  
  /* 2. Fill viewport & maintain aspect ratio */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* 3. Semi-transparency */
  opacity: 0.3; /* Adjust this from 0 to 1 */
  
  /* Place it behind the content */
  z-index: -1;
  
  /* Optional: Prevent it from moving if the page scrolls */
  background-attachment: fixed;
}

.selected-cat {
  border-color: orange;
}

/* Composable Transition classes */

.transitionable {
  transition: 
    opacity var(--opacity-speed, 0s) ease-in-out,
    transform var(--transform-speed, 0s) ease-in-out,
    visibility var(--visibility-speed, 0s) ease-in-out;
}

.transitionable-bounce {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.transitionable-opacity {
  --opacity-speed: 0.4s;
  --visibility-speed: 0.4s;
}

.transitionable-transform {
  --transform-speed: 0.4s;
} 

/* Transition classes - Add or remove them to trigger animations */ 

.trans-below-hidden {
  transform: translateY(100%);
}

.trans-default-visible {
  transform: translateY(0);
}

.trans-invisible {
  opacity: 0;
  visibility: hidden;
}

.trans-visible {
  opacity: 1;
  visibility: visible;
}

.trans-scale-hidden {
  transform: scale(0.01); 
}

.trans-scale-visible {
  transform: scale(1.0); 
}

/* Fonts */

.sgfont {
  font-family: "Sour Gummy", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.sgfont-bold {
  font-family: "Sour Gummy", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}