/* 
28.OCT.2025
Tailwind won't compile anymore and I can't be bothered figuring it out. 
So going to start building a few classes here and removing tailwind classes when needed.
Focus will be on adding new animations and removing animejs functions.
*/

@keyframes slide-in-left {
    from { left: -100%; }
    to   { left: 0; }
}
@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fade-in-out {
    0%   { opacity: 0; }
    20%  { opacity: 0; }
    30%  { opacity: 1; }
    70%  { opacity: 1; }
    80%  { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes ken-burns {
    from { scale: 1; }
    to   { scale: 1.1; }
}

body {
    --color-white: white;
    --color-offwhite: rgba(251, 248, 244);
    --color-offwhite-90: rgba(251, 248, 244, .85);
    --color-mcmblue: rgba(30, 47, 94, 1);
}
.bg-blue {
    background-color: var(--color-mcmblue);
}
.prose blockquote {
    color: var(--color-mcmblue);
}
.bg-blue .prose blockquote {
    color: var(--color-white);
}
.text-offwhite {
    color: var(--color-offwhite);
}
.home--content {
    position: relative;
    width: 100%;
    z-index: 10;
    opacity: 0;
    display: flex;
    align-items: center;
    padding: 8rem 2rem 8rem 4rem;
    width: 35vw;
    min-width: 30rem;
    height: 90vh;
    animation-name: fade-in;
    animation-duration: 0.5s;
    animation-delay: .7s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}
.home--banner {
    min-height: 90vh;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.home--banner::after {
    content: '';
    display: block;
    position: absolute;
    background-color: var(--color-offwhite-90);
    z-index: 0;
    top: 0;
    left: -100%;
    width: 35vw;
    min-width: 30rem;
    height: 90vh;
    animation-name: slide-in-left;
    animation-duration: 0.5s;
    animation-delay: 0.3s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}
.home--banner-bg {
    overflow: hidden;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    object-position: center center;
    animation-name: ken-burns;
    animation-duration: 5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}
.banner {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.banner.fade-repeat {
    z-index: 0;
    animation-name: fade-in-out;
    animation-duration: 8s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
#logo p{
    font-size: .62rem;
    line-height: 0.8rem;
    padding-top: 0.5rem;
    color: var(--color-mcmblue);
}
#logo {
    background-color: rgba(255,255,255,0.7);
    backdrop-filter: blur(3px);
    margin-left: -1rem;
    padding: 0.5rem 1.5rem;
    border-radius: 99rem;
    visibility:hidden;
    flex-direction: column;
    align-items: flex-start;
    transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}
#logo.show{
    visibility: visible;
}
#logo img {
/*    height: 40px;*/
}

@media all and (max-width: 1023px){
    .home--content {
        min-width: 18rem;
        height: fit-content;
        padding: 8rem 2rem;
    }
    .home--banner::after {
        min-width: 18rem;
        height: 100%;
    }
    #logo {
        background-color: transparent;
        visibility: visible;
    }
}

.circle-scale {
    scale: 0.6;
    opacity: 0;
    transition: scale 1s ease-out, opacity 0.5s ease-out;
}
.circle-scale.active {
    opacity: 1;
    scale: 1;
}

@keyframes line-default {
    to { stroke-dashoffset: 1000; }
}

.map-drawing .map-line {
    stroke-dasharray: 15;
    stroke-dashoffset: 0;
    animation: line-default 15s linear;
    animation-iteration-count: infinite;
}