@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

*{
    color:var(--color1) !important;
}

body, .content, .moveFromBack, .moveFromFront{ font-family: "DM Sans", sans-serif; font-optical-sizing: auto; transition:2s all; }
a, i, a span{ transition:0.5s all; }
hr{ border:0; border-top: 1px solid var(--color5); }
body {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow-x:hidden;
}

body.loaded{ opacity:1 !important; }
body.loaded .moveFromBack, body.loaded .moveFromFront{ transform:scale(1); }
body.loaded .content{ opacity:1; }
body.scrolled .faces{ opacity:0.25;  transform:scale(0.75) !important;   filter:saturate(0.75)  blur(5px); }

.button span{ color:var(--color3) !important; }
.button:hover span{ color:var(--color4) !important; }
.button{ display:inline-block; padding:20px; margin:5px; transition:0.5s all; text-decoration:none;  color:var(--color3) !important;   background: var(--color4); border-radius:4px; }
.button:hover{ color:var(--color4) !important;   background: var(--color3);  }

.content{ z-index:10;     top: 100vh; padding:20vh 0; min-height:100vh; font-size:clamp(18px, 2vw, 30px); box-sizing:border-box; max-width:1200px; width:80vw;     position: absolute; }

.logo{     
    position: absolute; 
    z-index: 20; 
    width: 90vw;    
    filter: drop-shadow(0px 0px 20px var(--color3)); 
    fill:var(--color1);
    pointer-events: none;
    transform: translateY(-50%) scale(1) !important;
    top:50%;
    mix-blend-mode: overlay;
}

.faces{ 
    z-index: 100;     
    max-width: 100%; 
    height: auto; 
    /*
    filter: saturate(0.75) blur(0px);
    mix-blend-mode: screen;
    */
    position: fixed;
    top:0;
    pointer-events: none;
}

.background-colors{
    position:fixed;
    top:0px;
    left:0px;
    height:100%;
    width:100%;
    /*filter: contrast(150%) brightness(400%);*/
    background: 
	linear-gradient(189deg, var(--color6), var(--color7)),
	linear-gradient(240deg, var(--color8), var(--color9)),
	url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='5.68' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    
    background: var(--color2);
    background: -webkit-linear-gradient(299deg, var(--color2) 0%, var(--color3) 30%, var(--color4) 100%);
    background: linear-gradient(299deg, var(--color2) 0%, var(--color3) 30%, var(--color4) 100%);
    
    z-index:0;
    pointer-events: none;
}
#shows span{ display:block; }
html[lang="fr"] .lang-en { display: none !important; }
html[lang="en"] .lang-fr { display: none !important; }

/* Language toggle styling */
.lang-toggle {
    display: block;
}
/* Hide current language, only show the switch option */
html[lang="en"] .lang-toggle a.switch-lang[data-lang="en"],
html[lang="fr"] .lang-toggle a.switch-lang[data-lang="fr"] {
    display: none;
}
.socials{     
    position: absolute;
    bottom: 5vh;
    z-index:200;
    text-align:center;
    max-width: 80vw;
}

.socials a{
    padding:clamp(10px, 2vw, 30px);
    font-size: clamp(30px, 2vw, 50px); 
    display: inline-block;
}

a{
    color:var(--color1);
    /*filter: drop-shadow(0px 0px 20px var(--color11)); */
}

a:hover{
    filter: drop-shadow(0px 0px 5px var(--color12)); 
}

a:hover i{
    transform:scale(1.25);
}

.socials a > span{     
    font-size: 14px;
    position: absolute;
    text-decoration: none;
    text-transform: uppercase;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, 0px);
    opacity:0;
}
.socials a:hover > span{
    opacity:1;
    bottom: 0;
}

/* Scroll Progress Indicator */
.scroll-progress {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--color1), var(--color5));
    z-index: 1000;
    transition: width 0.1s ease-out;
}

/* Section Navigation - Top Bar */
.section-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 10px 20px;
    background: var(--color4);
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
body.scrolled .section-nav {
    opacity: 1;
    transform: translateY(0);
}
.section-nav a,
.section-nav a span,
.section-nav .lang-toggle a.switch-lang {
    display: inline-block;
    padding: clamp(5px, 1.5vw, 10px) clamp(8px, 2vw, 20px);
    font-size: clamp(10px, 1.5vw, 16px);
    text-decoration: none;
    background: transparent;
    color: var(--color3) !important;
    border-radius: 4px;
    text-align: center;
    transition: 0.3s all;
}
.section-nav a span {
    padding: 0;
}
.section-nav a:hover,
.section-nav a:hover span,
.section-nav .lang-toggle a.switch-lang:hover {
    background: var(--color3);
    color: var(--color4) !important;
    filter: none;
}

/* Smooth Language Transitions */
.lang-en, .lang-fr {
    transition: opacity 0.3s ease;
}
html[lang="fr"] .lang-en,
html[lang="en"] .lang-fr {
    opacity: 0;
    position: absolute;
    pointer-events: none;
}

/* Section scroll behavior */
html {
    scroll-behavior: smooth;
}
section {
    scroll-margin-top: 20px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Scroll hint arrow */
.scroll-hint {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    font-size: clamp(20px, 3vw, 30px);
    opacity: 1;
    animation: bounce 2s infinite;
    transition: opacity 0.5s ease;
    pointer-events: none;
}
body.scrolled .scroll-hint {
    opacity: 0;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(10px);
    }
    60% {
        transform: translateX(-50%) translateY(5px);
    }
}