/* ------------------ GLOBAL ------------------ */

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Outfit", sans-serif;
    overflow: hidden;
    background: url('../img/fond1.jpg') no-repeat center / cover;
}

@font-face {
    font-family: 'Vedafine-Regular';
    src: url('Vedafine-Regular.woff') format('woff');
}

/* ------------------ CIRCLES ------------------ */

.circle-wrapper {
    position: relative;
    width: 80vmin;
    height: 80vmin;
}

.rotating-circle {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.rotating-circle.normal {
    animation: rotate 40s linear infinite;
}

.rotating-circle.reverse {
    top: 20%;
    left: 20%;
    width: 60%;
    height: 60%;
    animation: rotateReverse 20s linear infinite;
}

/* ------------------ LOGO ------------------ */

.center-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(150px, 18vw, 200px);
    opacity: 0;
    animation: fadeIn 1s ease-out forwards 0.1s;
    z-index: 3;
    user-select: none;
    line-height: 0;
    color: white;
    text-align: center;
}

.center-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ------------------ MENU ------------------ */

.menu-links {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* style commun */
.menu-links a {
    position: absolute;
    background: black;
    color: #fff;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    cursor: pointer;

    opacity: 0;
    animation: fadeInScale 0.8s ease-out forwards;
    transition: background-color 0.4s, color 0.4s, transform 0.3s, box-shadow 0.3s;
}

.menu-links a:hover {
    transform: scale(1.1);
    background-color: #01a7a3;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    color: #000;
}

/* positions + tailles */
.menu-links a:nth-child(1) { width: 85px; height: 85px; top: 58%; left: 85%; animation-delay: 0.2s, 1.1s; animation: fadeInScale 0.8s forwards, pulse 3.5s infinite ease-in-out; }
.menu-links a:nth-child(2) { width: 115px; height: 115px; top: -5%; left: 37%; animation-delay: 0.6s, 1.3s; animation: fadeInScale 0.8s forwards, pulse 3.8s infinite ease-in-out; }
.menu-links a:nth-child(3) { width: 75px; height: 75px; top: 18%; left: 79%; animation-delay: 0.4s, 1.5s; animation: fadeInScale 0.8s forwards, pulse 4.2s infinite ease-in-out; }
.menu-links a:nth-child(4) { width: 80px; height: 80px; top: 30%; left: -1%; animation-delay: 0.8s, 1.8s; animation: fadeInScale 0.8s forwards, pulse 4.5s infinite ease-in-out; }
.menu-links a:nth-child(5) { width: 60px; height: 60px; top: 68%; left: 32%; animation-delay: 1s, 2s; animation: fadeInScale 0.8s forwards, pulse 3.2s infinite ease-in-out; }
.menu-links a:nth-child(6) { width: 70px; height: 70px; top: 43%; left: 70%; animation-delay: 0.2s, 1.1s; animation: fadeInScale 0.8s forwards, pulse 3.5s infinite ease-in-out; }

/* ------------------ DECO ------------------ */

.deco {
    position: absolute;
    z-index: 1;
    opacity: 0.8;
    pointer-events: none;
    animation: fadeIn 2s ease-out forwards;
}

.deco1 { width: 50px; top: 6%;  left: 20%; transform: rotate(130deg); }
.deco2 { width: 3vh; top: 81%; left: 75%; transform: rotate(-45deg); }
.deco3 { width: 50px; top: 73%; left: 10%; }
.deco4 { width: 30px; top: 30%; left: 68%; }
.deco5 { width: 59px; top: 42%; left: 90%; animation: rotateReverse 20s linear infinite; }
.deco6 { width: 59px; top: 90%; left: 48%; animation: rotate 10s linear infinite; }

/* ------------------ FLOATING SHAPES ------------------ */

.floating-shapes {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.shape {
    position: absolute;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/* shared image shapes */
.navette1, .navette2, .navette3, .navette4 {
    width: 100px; height: 100px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.navette1 { background-image: url("../img/navette1.png"); top: 20%; left: 10%; animation: move-diagonal 10s infinite linear; }
.navette2 { background-image: url("../img/navette2.png"); top: 100%; left: 80%; animation: move-up 22s infinite linear 3s; }
.navette3 { background-image: url("../img/navette3.png"); width: 30px; top: 12%; left: 25%; animation: rotate 10s infinite linear; }
.navette4 { background-image: url("../img/navetteA.png"); width:30px; top: 50%; left: 5%; animation: move-diagonal 3s infinite linear;}

.small { width: 25px; height: 25px; top: 80%; left: 40%; animation: move-left 26s infinite linear 2s; }
.tiny  { width: 15px; height: 15px; top: 30%; left: 60%; animation: move-diagonal-rev 30s infinite linear 4s; }
.big   { width: 60px; height: 60px; top: 10%; left: 70%; animation: move-down 25s infinite linear 8s; }

/* ------------------ WAVE ------------------ */

.wave-container {
    width: 100%;
    height: 40px;
    overflow: hidden;
}

.wave-container svg { width: 100%; height: 100%; }

.wave-container path {
    fill: none;
    stroke: white;
    stroke-width: 5;
    stroke-linecap: round;
    animation: waveMove 2s ease-in-out infinite;
}

/* ------------------ MEDIA QUERIES ------------------ */

/* 768px */
@media (max-width: 768px) {
    .menu-links a { width: 70px; height: 70px; }
    .deco1 { width: 30px; }
}

/* 600px */
@media (max-width: 600px) {
    .menu-links a {
        width: 70px !important;
        height: 70px !important;
        min-width: 70px;
        min-height: 70px;
        font-size: 0.6rem;
        z-index: 10;
    }
}

/* 480px — MENU CENTRÉ + ZIG ZAG */
@media (max-width: 480px) {

    .circle-wrapper {
        width: 170vmin;
        height: 180vmin;
        left: -28%;
    }

    .rotating-circle.reverse {
        top: 20%;
        left: 26%;
    }

    .center-logo {
        top: 50%;
        left: 65%;
    }

    .menu-links a:nth-child(1) { top: 4%; left: 56%; }
    .menu-links a:nth-child(2) { top: 16%; left: 75% }
    .menu-links a:nth-child(3) { top: 33%; left: 88%; }
    .menu-links a:nth-child(4) { top: 51%; left: 87%; }
    .menu-links a:nth-child(5) { top: 84%; left: 57%; }
    .menu-links a:nth-child(6) { top: 68%; left: 81%; }
    .deco1 { display: none; }
    .deco2 { top: 81%; left: 74%; transform: rotate(-45deg); }
    .deco3 { width: 60px; top: 70%; left: 57%; }
    .deco4 { width: 25px; top: 23%; left: 54%; }

}

/* 420px */
@media (max-width: 420px) {
    .menu-links a { width: 64px !important; height: 64px !important; }
}

/* ------------------ KEYFRAMES ------------------ */

@keyframes pulse     { 0%,100%{transform:scale(1);} 50%{transform:scale(1.06);} }
@keyframes rotate    { from{transform:rotate(0);} to{transform:rotate(360deg);} }
@keyframes rotateReverse { from{transform:rotate(0);} to{transform:rotate(-360deg);} }

@keyframes fadeIn    { from{opacity:0;} to{opacity:1;} }

@keyframes fadeInScale {
    from { opacity:0; transform:scale(0.8); }
    to   { opacity:1; transform:scale(1); }
}

@keyframes move-right         { 50%{transform:translateX(60vw) rotate(180deg);} 100%{transform:translateX(120vw) rotate(360deg); opacity:0;} }
@keyframes move-left          { 50%{transform:translateX(-60vw) rotate(180deg);}100%{transform:translateX(-120vw) rotate(360deg); opacity:0;} }
@keyframes move-up            { 50%{transform:translateY(-60vh) rotate(180deg);}100%{transform:translateY(-120vh) rotate(360deg); opacity:0;} }
@keyframes move-down          { 0%{opacity:0;}10%{opacity:0.3;}50%{transform:translateY(60vh) rotate(180deg);}100%{transform:translateY(120vh) rotate(360deg); opacity:0;} }
@keyframes move-diagonal      { 0%{opacity:0;}10%{opacity:.3;}50%{transform:translate(50vw,-30vh) rotate(180deg);}100%{transform:translate(100vw,-60vh) rotate(360deg); opacity:0;} }
@keyframes move-diagonal-rev  { 0%{opacity:0;}10%{opacity:.3;}50%{transform:translate(-50vw,30vh) rotate(180deg);}100%{transform:translate(-100vw,60vh) rotate(360deg); opacity:0;} }

@keyframes waveMove {
    0%,100% { d: path("M0,50 Q12,45 25,50 T50,50 T75,50 T100,50 T125,50 T150,50 T175,50 T200,50 T225,50 T250,50 T275,50 T300,50 T325,50 T350,50 T375,50 T400,50 T425,50 T450,50 T475,50 T500,50"); }
    50%     { d: path("M0,50 Q12,55 25,50 T50,50 T75,50 T100,50 T125,50 T150,50 T175,50 T200,50 T225,50 T250,50 T275,50 T300,50 T325,50 T350,50 T375,50 T400,50 T425,50 T450,50 T475,50 T500,50"); }
}