/* ==========================================================================
   Base Styles
   CSS variables, body, fonts, and animations
   ========================================================================== */

/* CSS Variables */
:root {
    --bs-dark-rgb: 51, 51, 51;
}

/* Fonts */
@font-face {
    font-family: 'Dai Banna';
    src: url('../assets/fonts/DaiBannaSIL-Regular.ttf');
}

/* HTML background for iOS browser chrome */
html {
    background-color: #222;
}

/* Body */
body {
    font-variant-numeric: tabular-nums !important;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    background-image: url("../assets/football-field-horizontal.jpg");
    background-size: 100vw auto;
    background-position: top left;
    background-repeat: repeat-y;
    background-attachment: fixed;
    background-color: #222;
}

@media (orientation: portrait) {
    body {
        background-image: url("../assets/football-field-vertical.jpg");
    }
}

/* Select arrow for form-control selects (form-select gets this from Bootstrap) */
select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
}

/* Hidden utility */
.hidden {
    display: none;
}

/* Loading indicator placeholder rendered by UIElement when showLoadingIndicator is true */
.ui-element-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: #aaa;
}

.ui-element-loading-ball-wrapper {
    position: relative;
    width: 50px;
    height: 70px;
}

.ui-element-loading-ball {
    position: absolute;
    top: 0;
    left: 50%;
    width: 36px;
    height: 36px;
    transform-origin: 50% 100%;
    animation: ui-element-loading-ball-bounce 0.8s infinite;
}

.ui-element-loading-ball img {
    width: 100%;
    height: 100%;
    display: block;
    animation: ui-element-loading-ball-spin 1.6s linear infinite;
}

.ui-element-loading-shadow {
    position: absolute;
    bottom: 4px;
    left: 50%;
    width: 32px;
    height: 6px;
    margin-left: -16px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    filter: blur(2px);
    animation: ui-element-loading-ball-shadow 0.8s infinite;
}

@keyframes ui-element-loading-ball-bounce {
    0% {
        transform: translate(-50%, 0) scale(1, 1);
        animation-timing-function: cubic-bezier(0.55, 0.05, 0.85, 0.4);
    }
    45% {
        transform: translate(-50%, 28px) scale(1, 1);
        animation-timing-function: ease-in;
    }
    55% {
        transform: translate(-50%, 32px) scale(1.25, 0.7);
        animation-timing-function: ease-out;
    }
    100% {
        transform: translate(-50%, 0) scale(1, 1);
        animation-timing-function: cubic-bezier(0.15, 0.6, 0.45, 0.95);
    }
}

@keyframes ui-element-loading-ball-shadow {
    0% {
        transform: scaleX(0.5);
        opacity: 0.25;
        animation-timing-function: cubic-bezier(0.55, 0.05, 0.85, 0.4);
    }
    55% {
        transform: scaleX(1.15);
        opacity: 0.6;
        animation-timing-function: ease-in;
    }
    100% {
        transform: scaleX(0.5);
        opacity: 0.25;
        animation-timing-function: cubic-bezier(0.15, 0.6, 0.45, 0.95);
    }
}

@keyframes ui-element-loading-ball-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

img, svg {
    animation: image-fade-in .5s ease-in-out;
}

.page-settled img, .page-settled svg {
    animation: none;
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes overlay-fade-in-1 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes overlay-fade-in-2 {
    0% {
        opacity: 0;
        transform: translateY(50%);
    }
    50% {
        opacity: 0;
        transform: translateY(50%);
    }
    100% {
        opacity: 1;
    }
}

@keyframes overlay-fade-out-1 {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes overlay-fade-out-2 {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(1vh);
    }
}

@keyframes overlay-swipe-down {
    0% {
        opacity: 1;
        transform: translateY(var(--swipe-offset, 0));
    }
    100% {
        opacity: 0;
        transform: translateY(100vh);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes slide-fade-in {
    from {
        opacity: 0;
        transform: translateX(10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes manager-chat-slide-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes manager-chat-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes image-fade-in {
    0% {
        opacity: 0;
        transform: scale(0.8) rotateX(45deg);
        transform-origin: bottom center;
    }
    100% {
        opacity: 1;
    }
}