/*
    ====================================
    Beautai CSS
    Dernière modification : 2025-07-20
    ====================================
*/

/* GENERAL */
:root {
    --pink: #ff3180;
    --blue: #3180ff;
    --purplelight: #e6e4f5;
    --purple: #7131ff;
    --purpledark: #5a27cc;
    --gold: #ffb000;
    --golddark: #cc8d00;
    
    --semibold: 600;
    --bold: 700;

    --border: solid 2px var(--extralight);
    --border-dashed: dashed 2px var(--light);
    --text-shadow: 0 0 .25rem rgba(0, 0, 0, .5);
}

@font-face {
	font-family: 'Mona Sans';
	src: url('../fonts/MonaSans-Variable.ttf') format('truetype');
}

html, body {
    overflow: auto;
    scrollbar-width: none;    /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer/Edge */
    background-color: transparent;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

body {
	color: var(--black);
    font-family: 'Mona Sans';
    font-size: .875rem;
    line-height: initial;
}

h1 {
    font-size : 1.25rem;
    font-weight: var(--bold);
    margin-bottom: 1rem;
}

h2 {
    font-size: 1.125rem;
    font-weight: var(--bold);
    margin-bottom: .5rem;
}

h3 {
    font-size: .875rem;
    font-weight: var(--bold);
    margin-bottom: .25rem;
}

p {
    margin: 0;
}

a, a:hover, a:focus {
    color: var(--pink);
    text-decoration: none;
    font-weight: var(--bold);
}

small, .small {
    color: var(--gray) !important;
    font-size: .75rem;
}

.warning {
    color: var(--pink) !important;
    font-weight: var(--bold);
}

.pink {
    color: var(--pink);
}

.gold {
    color: var(--gold);
}

/* BOXES */
.box {
    background-color: var(--white);
    border: var(--border);
    border-radius: 1rem;
    padding: 1rem;
    width: 100%;
}

.box-i {
    background-color: var(--extralight);
    border: var(--border-dashed);
}

/* LOADER */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--white);
    z-index: 2000;
}

.loader-black {
    color: #fff;
    background: #000;
}

.loader h3 {
    margin: 0;
    white-space: nowrap;
}

.loader-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.loader-icon-container {
    display: flex;
    align-items: center;
    gap: 6px;
}

.loader-icon {
    margin: auto;
    width: 12px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid #fff;
    animation: loader-icon-1 0.8s infinite linear alternate, loader-icon-2 1.6s infinite linear;
}

.loader-icon-pink {
    border: 2px solid var(--pink);
}

@keyframes loader-icon-1 {
    0%    { clip-path: polygon(50% 50%,0       0,  50%   0%,  50%    0%, 50%    0%, 50%    0%, 50%    0% ) }
    12.5% { clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100%   0%, 100%   0%, 100%   0% ) }
    25%   { clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 100% 100%, 100% 100% ) }
    50%   { clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% ) }
    62.5% { clip-path: polygon(50% 50%,100%    0, 100%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% ) }
    75%   { clip-path: polygon(50% 50%,100% 100%, 100% 100%,  100% 100%, 100% 100%, 50%  100%, 0%   100% ) }
    100%  { clip-path: polygon(50% 50%,50%  100%,  50% 100%,   50% 100%,  50% 100%, 50%  100%, 0%   100% ) }
}

@keyframes loader-icon-2 { 
    0%     { transform: scaleY(1)  rotate(0deg)}
    49.99% { transform: scaleY(1)  rotate(135deg)}
    50%    { transform: scaleY(-1) rotate(0deg)}
    100%   { transform: scaleY(-1) rotate(-135deg)}
}

/* ANIMATIONS */
.float {
    animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(.5rem);
  }
  50% {
    transform: translateY(-.5rem);
  }
}

.zoom {
    animation: zoom 4s ease-in-out infinite;
}

@keyframes zoom {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.zoomIn {
    animation: zoomIn .25s ease-in-out;
}

#find .zoomIn,
#find .zoomOut {
    animation-duration: .125s;
}

@keyframes zoomIn {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

.zoomOut {
    animation: zoomOut .25s ease-in-out;
}

@keyframes zoomOut {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}