/* ==========================================================================
   Imports & Fonts
   ========================================================================== */
@import url("https://cdnjs.cloudflare.com/ajax/libs/foundation/6.9.0/css/foundation.min.css");
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap&family=Mrs+Saint+Delafield&display=swap");

@font-face {
    font-family: "Anurati";
    src: url("../fonts/anurati_font/Anurati-Regular.otf") format("opentype");
}

/* ==========================================================================
   Variables
   ========================================================================== */
:root {
    /* Colors */
    --color-primary: rgb(252, 255, 158);
    --color-secondary: rgb(198, 119, 0);
    --color-tertiary: rgba(0, 0, 0, 0.93);

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 4rem;
    --spacing-lg: 5rem;

    /* Border Radius */
    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-full: 50px;

    /* Shadows */
    --shadow-md: 0px 5px 10px var(--color-primary);
    --shadow-md-inverse: 0px -10px 20px var(--color-primary);
    --shadow-line: 10px 0px 20px var(--color-primary);
    --shadow-line-inverse: -10px 0px 20px var(--color-primary);

    /* Transitions */
    --transition-base: all 0.3s ease-in-out;
    --transition-slow: all 0.5s ease-in-out;

    /* Z-index */
    --z-cursor: -1;
    --z-overlay: 1000;

    /* Gradients */
    --gradient-primary: linear-gradient(
        90deg,
        var(--color-primary) 0%,
        var(--color-secondary) 100%
    );
    --gradient-grey: linear-gradient(white 50%, rgba(0, 0, 0, 0) 100%);
}

/* ==========================================================================
   Base Styles
   ========================================================================== */
html,
body {
    /* height: 8000px !important; */
    /* min-height: 100vh;
    height: 100%; */
    min-height: 100dvh;
    scroll-behavior: smooth;
}

body {
    /* background: var(--color-tertiary); */

    color: white;
    font-family: "Work Sans", sans-serif;
    background: radial-gradient(
        ellipse at top 20% left 30%,
        rgba(0, 0, 0, 0.75) 0%,
        var(--color-tertiary) 50%
    );
    background-attachment: fixed;
}

footer {
}
/* ==========================================================================
   Overlays & Placeholders
   ========================================================================== */
#spline-placeholder {
    position: fixed;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    margin: var(--spacing-sm);
    color: #aaa;
    font-size: 0.8rem;
    text-align: center;
    padding: var(--spacing-xs);
    border-radius: var(--radius-sm);
}

#overlay-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    overflow: hidden;
    backdrop-filter: blur(0);
    visibility: hidden;
    display: grid;
    place-items: center;
    /* color: white; */
    z-index: var(--z-overlay);
    transition: var(--transition-slow);
    &.active {
        backdrop-filter: blur(5px);
        opacity: 1;
        visibility: visible;
        background-color: rgba(0, 0, 0, 0.2);
    }
    .title-loading span {
        display: inline-block;
        mix-blend-mode: difference;
      }
      
    .left{
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        /* background-color: var(--color-tertiary); */
        background: white;
        z-index: -1 ;
    }
    .right{
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 100%;
        /* background-color: var(--color-tertiary); */
        background: white;
        z-index: -1 ;
    }
}

/* ==========================================================================
   Typography
   ========================================================================== */
.fontMrs {
    font-family: "Mrs Saint Delafield", cursive;
    font-weight: 400;
    font-style: normal;
}

.fontAnuri {
    font-family: "Anurati", sans-serif;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Interactive Elements
   ========================================================================== */
.dot-light-cursor {
    position: fixed;
    pointer-events: auto;
    background: transparent;
    width: 100%;
    height: 110%;
    z-index: var(--z-cursor);
    will-change: transform;
    a#logo {
        display: none !important;
    }
}

.toast-close {
    color: black;
    opacity: 1;
}

/* ==========================================================================
   Buttons & Links
   ========================================================================== */
a.btn,
.btn {
    position: relative;
    padding: var(--spacing-xs) var(--spacing-sm);
    display: inline-block;
    border-radius: var(--radius-full);
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    transition: var(--transition-base);
    &.btn-margin {
        margin-top: var(--spacing-sm);
    }
    &:hover {
        box-shadow: var(--shadow-md);
    }
}

.btn-active {
    box-shadow: var(--shadow-md);
}
.btn-inline-only{
    display: inline-block;
    color: white;
    transition: var(--transition-base);
    &:hover{
        color: var(--color-primary);
        text-shadow: 0 0 10px var(--color-primary);
    }
}
.text-white {
    color: white;
}

/* ==========================================================================
   Backgrounds & Colors
   ========================================================================== */
.bg-lienar-gold {
    /* background: transparent;
    backdrop-filter: blur(10px); */
    background-image: radial-gradient(
        ellipse at top 15% left 30%,
        var(--color-primary) 0%,
        var(--color-secondary) 80%
    );
    color: var(--color-tertiary);
}

.bg-black {
    background-color: var(--color-tertiary);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   Sections & Layout
   ========================================================================== */
section.p5 {
    padding: var(--spacing-lg) 0;
}
.services {
    padding: var(--spacing-lg) var(--spacing-sm) var(--spacing-md)
        var(--spacing-sm);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md-inverse);
    background: transparent;
    backdrop-filter: blur(40px);
    @media (min-width: 768px) {
        padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm)
            var(--spacing-md);
    }   
}
.section-about {
    position: relative;
    .neon {
        position: absolute;
        display: block;
        top: 5rem;
        left: 57%;
        width: 5px;
        height: calc(100% + 5rem);
        /* background: var(--color-primary);
        box-shadow: var(--shadow-line), var(--shadow-line-inverse); */
        background: linear-gradient(
            to bottom,
            transparent 0%,
            var(--color-primary) 100%
        );
        filter: drop-shadow(0 0 15px var(--color-primary))
            drop-shadow(0 0 5px var(--color-primary)) blur(2px);
        border-radius: var(--radius-full);
        transform: scaleY(1);
        transform-origin: top;
        will-change: transform;
        &::after {
            content: "";
            position: absolute;
            display: block;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            width: 150px;
            height: 10px;
            border-radius: 50%;
            background: var(--color-primary);
            filter: drop-shadow(0 0 15px var(--color-primary))
                drop-shadow(0 0 5px var(--color-primary)) blur(10px);
            z-index: -1;
            animation: lueur 3s ease-in-out infinite alternate;
        }
        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 100%;
            background: linear-gradient(
                to bottom,
                transparent 0%,
                var(--color-primary) 100%
            );
            opacity: 0.4;
            filter: blur(5px);
            z-index: 1;
        }
    }
}
@keyframes lueur {
    from {
        opacity: .4;
    }
    to {
        opacity: 1;

    }
}
/* ==========================================================================
   Text Effects
   ========================================================================== */
.accroche,
a.btn {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: var(--gradient-primary);
}

.text-linear-grey {
    background-image: var(--gradient-grey);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-linear-or, .success {
    background-image: var(--gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   Logo & Images
   ========================================================================== */
.logo {
    animation: float 3s ease-in-out infinite;
    max-width: 360px;
    width: 100%;
}

@keyframes float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

/* ==========================================================================
   Argument Section
   ========================================================================== */
section#arg {
    h2 {
        position: sticky;
        top: 60%;
        display: inline-block;
        margin: 0;
    }
    ul {
        position: relative;
        display: inline-block;
        margin: 0;
        list-style: none;
        padding: 0;
        li {
            background-image: var(--gradient-primary);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }
}

/* ==========================================================================
   Scroller Component
   ========================================================================== */
.scroller {
    background-color: transparent;
    backdrop-filter: blur(10px);
}

.scroller__inner {
    padding-block: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.scroller[data-animated="true"] {
    overflow: hidden;
    -webkit-mask: linear-gradient(
        90deg,
        transparent,
        white 20%,
        white 80%,
        transparent
    );
    mask: linear-gradient(
        90deg,
        transparent,
        white 20%,
        white 80%,
        transparent
    );
}

.scroller[data-animated="true"] .scroller__inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration, 40s)
        var(--_animation-direction, forwards) linear infinite;
    &:hover {
        animation-play-state: paused;
    }
}

.scroller[data-direction="right"] {
    --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
    --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
    --_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
    --_animation-duration: 60s;
}

@keyframes scroll {
    to {
        transform: translate(calc(-50% - 0.5rem));
    }
}

/* ==========================================================================
   Lists & Tags
   ========================================================================== */
.tag-list {
    margin: 0;
    padding-inline: 0;
    list-style: none;
}

.tag-list li {
    padding: var(--spacing-xs) var(--spacing-sm);
    img {
        max-width: 160px;
    }
    a {
    }
    a[target="blank"]::after {
        content: " ➚";
    }
}

/* ==========================================================================
   Images & Masks
   ========================================================================== */
.img-mask {
    /* mask-image: url("../img/mask.png");
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center; */
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: 10% 25%;
    clip-path: polygon(6% 0, 35% 100%, 100% 25%);
    filter: grayscale(100%) brightness(80%) contrast(1.4);
    will-change: transform;
}

/* ==========================================================================
   Service Blocks
   ========================================================================== */
.bloc-service {
    margin-bottom: var(--spacing-sm);
    will-change: transform;
    h3 {
        margin: var(--spacing-sm) 0;
    }
}
form{
    margin-bottom: 1rem;
    label{
        color: white;
    }
    input, textarea{
        border-radius: var(--radius-sm)!important;
        resize: none;
    }
}
.error{
    color: red;
}



#tarteaucitronAlertBig{
    backdrop-filter: blur(5px);
    background: rgba(0, 0, 0, 0.5) !important;
}