@import "./fonts.css";
@import "./variables.css";

.font-family-bodo {
    font-family: 'Bodo Amat', sans-serif;
}

.font-family-relative {
    font-family: 'Relative', sans-serif;
}

.fs-18 {
    font-size: 18px;
}

.fs-24 {
    font-size: 24px;
    color: var(--color-heading);
}

.fs-36 {
    font-size: 36px;
    color: var(--color-heading);
}

.fs-40 {
    font-size: 40px;
}

.fs-48 {
    font-size: 48px;
    color: var(--color-heading);
}

.fs-56 {
    font-size: 56px;
}

.fw-400 {
    font-weight: 400;
}

.color-blue-green {
    color:  var(--color-blue-green);
}

.color-sun-glow {
    color:   var(--color-sun-glow);
}

.bg-sun-glow {
    background:  var(--color-sun-glow);
}

.bg-blue-green {
    background:  var(--color-blue-green);
}

.bg-caribbean-green {
    background:   var(--color-caribbean-green);
}

.bg-light-cyan {
    background:  var(--color-light-cyan);
}

.bg-pale-orange {
    background:   var(--color-pale-orange);
}

.bg-light-sky {
    background:  var(--color-light-sky);
}

.color-pale-lime {
    color:  var(--color-pale-lime);
}

.color-caribbean-green {
    color:  var(--color-caribbean-green);
}

.color-black {
    color:  var(--color-heading);
}

.color-vibrant-yellow {
    color:  var(--color-vibrant-yellow);
}

.calendar-bg {
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
    background-image: url('/assets/svgs/calendar-bg.svg');
    background-size: contain;
    background-position: center;
}

.cursor-pointer {
    cursor:  pointer;
}

.max-w-8xl  {
    max-width: 1440px;
}

.max-w-9xl  {
    max-width: 1660px;
}
/* For Chrome, Safari, and Edge */
::-webkit-scrollbar-thumb {
    background-color: var(--color-blue-green);
}

/* For Firefox */
:root {
    scrollbar-color: var(--color-blue-green) white;
}

.animate-opacity {
    transition: opacity 0.5s ease-in-out;
}

.animate-opacity:hover {
    opacity: 0.8;
}

.animate-grow {
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.animate-grow:hover {
    transform: scale(1.2);
    opacity: 0.7;
}

.typing-animation {
    overflow: hidden;      /* hide text until typed */
    white-space: nowrap;   /* keep text in one line */
    width: 0;              /* start hidden */
    animation: typing 3s steps(30, end) forwards;
}

.rocket {
    transition: transform 1.5s ease-in-out, opacity 1.5s ease-in-out;
}

.animate-move-right:hover {
    transform: translateX(300px); /* move forward */
    opacity: 0;                  /* disappear */
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

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

.fade-in-out {
    animation: fadeInOut 1s ease-in-out;
}

.bounce-pop {
    opacity: 1;
    animation: bouncePopIn 0.4s ease;
}

.de-bounce-pop {
    opacity: 0;
    animation: bouncePopOut 0.4s ease forwards;
}

.psm-vertical {
    height: 100dvh;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

.psm-page {
    /*min-height: calc(100dvh - 64px);*/
    min-height:  100dvh;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}

.swiper-pagination-bullet {
    background-color: var(--color-caribbean-green);
}

.pet-option img[alt="background"] {
    z-index: 0;
}
.pet-option img[alt^="dog"],
.pet-option img[alt^="cat"] {
    z-index: 10;
}
.pet-option.selected img[alt="background"] {
    filter: brightness(1.05);
}


.fade-slide-out {
    @apply opacity-0 translate-y-4;
}
.fade-slide-in {
    @apply opacity-100 translate-y-0;
}

@keyframes bouncePopIn {
    0%   { transform: scale(0.6); opacity: 0; }
    60%  { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1);   opacity: 1; }
}

@keyframes bouncePopOut {
    0%   { transform: scale(1);   opacity: 1; }
    100% { transform: scale(0.6); opacity: 0; }
}

@layer components {
    /* Space between the label and indicators */
    .swiper-pagination {
        margin-top: 1.5rem !important; /* adds space between label and dots */
    }

    /* Swiper pagination dots: green active, lighter green inactive */
    .swiper-pagination-bullet {
        background-color: rgb(209 213 219 / var(1, 1));

    }

    .swiper-pagination-bullet-active {
        background-color: var(--color-caribbean-green) !important;
    }
}