@import "_vars.css";
@import "_nav.css";
@import "_header.css";
@import "_cards.css";
@import "_footer.css";

::-webkit-scrollbar {
    display: none;
}

html {
    scroll-behavior: smooth;
}

body {
    width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    height: 100vh;
    background: var(--background);
    z-index: -1;
    pointer-events: none;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

/* Pattern quadrillé */
.grid-pattern {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.02;
    background-image: 
                repeating-linear-gradient(0deg, transparent, transparent 49px, #000 49px, #000 50px),
                repeating-linear-gradient(90deg, transparent, transparent 49px, #000 49px, #000 50px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: 0;
}

/* -------------------------------- */
/* ANIMATION D'ARRIVEE SUR LA PAGE */
/* ------------------------------ */
header > * {
  opacity: 0;
  transform: translateY(20px);
}

header .preTitle {
  transition: opacity 0.6s ease, transform 0.6s ease;
}

header h1 {
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition-delay: 0.15s;
  
}

header > p {
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: 0.35s;
}

body.is-loaded header > * {
  opacity: 1;
  transform: translateY(0);
}

.demo-container {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
    transition: 
    opacity 0.8s ease,
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.75s;
    will-change: transform, opacity;
}

/* État visible */
    body.is-loaded .demo-container {
    opacity: 1;
    transform: translateY(0) scale(1);
}