/* =========================================================
   RESET
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* =========================================================
   PAGE
   ========================================================= */

html,
body {

    width: 100%;
    height: 100%;

    background: #000;

    overflow: hidden;
}


body {

    perspective: 1800px;

}


/* =========================================================
   CONTENEUR PRINCIPAL
   ========================================================= */

.logo-page {

    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;
    height: 100dvh;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #000;

    overflow: hidden;

    perspective: 1800px;

}


/* =========================================================
   ZONE DU LOGO
   ========================================================= */

.coin-zone {

    position: relative;

    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;

    perspective: 1800px;

    z-index: 5;

}


/* =========================================================
   LOGO / PIÈCE
   ========================================================= */

.coin {

    position: relative;

    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    transform-style: preserve-3d;

    transform-origin: center center;

    will-change: transform;

    user-select: none;

}


/* =========================================================
   IMAGE DU LOGO
   ========================================================= */

.logo {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    object-position: center;

    user-select: none;

    -webkit-user-drag: none;

    transform-style: preserve-3d;

    backface-visibility: visible;

    will-change: transform;

}


/* =========================================================
   REFLET SUR LES DIAMANTS
   ========================================================= */

/*
   Cette lumière traverse le logo doucement.
   Le mode "screen" donne un reflet plus métallique.
*/

.light-sweep {

    position: absolute;

    left: -55%;
    top: -20%;

    width: 24%;
    height: 140%;

    pointer-events: none;

    opacity: 0;

    transform: rotate(18deg);

    background:
        linear-gradient(
            90deg,

            transparent 0%,

            rgba(255,255,255,0.05) 25%,

            rgba(255,255,255,0.78) 50%,

            rgba(255,255,255,0.06) 75%,

            transparent 100%
        );

    filter: blur(9px);

    mix-blend-mode: screen;

    z-index: 8;

    animation:
        lightSweep
        7s
        infinite
        ease-in-out;

}


/* =========================================================
   PETITS ÉCLATS DES DIAMANTS
   ========================================================= */

.gem-flare {

    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: rgba(255,255,255,0.95);

    opacity: 0;

    transform: scale(0);

    pointer-events: none;

    z-index: 9;

    box-shadow:

        0 0 3px rgba(255,255,255,1),

        0 0 8px rgba(255,255,255,0.95),

        0 0 15px rgba(220,235,255,0.8);

    animation:
        gemFlash
        7s
        infinite
        ease-in-out;

}


/* =========================================================
   RAYON HORIZONTAL
   ========================================================= */

.gem-flare::before {

    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    width: 22px;
    height: 1px;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.9);

    box-shadow:
        0 0 5px rgba(255,255,255,0.9);

}


/* =========================================================
   RAYON VERTICAL
   ========================================================= */

.gem-flare::after {

    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    width: 1px;
    height: 22px;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.9);

    box-shadow:
        0 0 5px rgba(255,255,255,0.9);

}


/* =========================================================
   POSITIONS DES ÉCLATS
   ========================================================= */

.flare-1 {

    left: 25.5%;
    top: 17%;

    animation-delay: 0.1s;

}


.flare-2 {

    left: 50%;
    top: 10.5%;

    animation-delay: 0.8s;

}


.flare-3 {

    left: 75%;
    top: 24%;

    animation-delay: 1.6s;

}


.flare-4 {

    left: 83%;
    top: 50%;

    animation-delay: 2.35s;

}


.flare-5 {

    left: 69%;
    top: 80%;

    animation-delay: 3.1s;

}


.flare-6 {

    left: 31%;
    top: 83%;

    animation-delay: 3.9s;

}


.flare-7 {

    left: 16%;
    top: 53%;

    animation-delay: 4.55s;

}


.flare-8 {

    left: 32%;
    top: 27%;

    animation-delay: 5.25s;

}


/* =========================================================
   ANIMATION DE LA LUMIÈRE
   ========================================================= */

@keyframes lightSweep {

    0%,
    7% {

        left: -55%;

        opacity: 0;

    }


    13% {

        opacity: 0.12;

    }


    28% {

        opacity: 0.55;

    }


    42% {

        left: 125%;

        opacity: 0.18;

    }


    48%,
    100% {

        left: 125%;

        opacity: 0;

    }

}


/* =========================================================
   ANIMATION DES ÉCLATS
   ========================================================= */

@keyframes gemFlash {

    0%,
    8% {

        opacity: 0;

        transform: scale(0.05);

    }


    11% {

        opacity: 0.9;

        transform: scale(0.7);

    }


    13% {

        opacity: 1;

        transform: scale(1.35);

    }


    15% {

        opacity: 0.35;

        transform: scale(0.65);

    }


    18%,
    100% {

        opacity: 0;

        transform: scale(0.05);

    }

}


/* =========================================================
   PENDANT LA ROTATION
   ========================================================= */

.coin.clicked .light-sweep,
.coin.clicked .gem-flare {

    animation-play-state: paused;

    opacity: 0 !important;

}


/* =========================================================
   ROTATION RAPIDE DE LA PIÈCE
   ========================================================= */

.coin.spin {

    animation:

        coinSpin

        2.6s

        cubic-bezier(.12,.72,.18,1)

        forwards;

}


/* =========================================================
   ROTATION
   ========================================================= */

@keyframes coinSpin {

    0% {

        transform:
            rotateY(0deg)
            rotateZ(0deg)
            scale(1);

    }


    5% {

        transform:
            rotateY(45deg)
            rotateZ(-2deg)
            scale(1.015);

    }


    12% {

        transform:
            rotateY(300deg)
            rotateZ(3deg)
            scale(1.02);

    }


    25% {

        transform:
            rotateY(720deg)
            rotateZ(-4deg)
            scale(1.025);

    }


    42% {

        transform:
            rotateY(1260deg)
            rotateZ(4deg)
            scale(1.025);

    }


    58% {

        transform:
            rotateY(1710deg)
            rotateZ(-3deg)
            scale(1.02);

    }


    72% {

        transform:
            rotateY(1980deg)
            rotateZ(2deg)
            scale(1.015);

    }


    84% {

        transform:
            rotateY(2160deg)
            rotateZ(-1deg)
            scale(1.008);

    }


    94% {

        transform:
            rotateY(2188deg)
            rotateZ(0deg)
            scale(1.002);

    }


    100% {

        transform:
            rotateY(2160deg)
            rotateZ(0deg)
            scale(1);

    }

}


/* =========================================================
   OMBRE
   ========================================================= */

.coin-shadow {

    position: absolute;

    left: 50%;

    bottom: 7%;

    width: 28%;
    height: 4%;

    transform:
        translateX(-50%)
        scale(0.65);

    background:
        rgba(255,255,255,0.20);

    border-radius: 50%;

    filter: blur(22px);

    opacity: 0;

    pointer-events: none;

    z-index: 2;

}


/* =========================================================
   ANIMATION OMBRE
   ========================================================= */

.coin-shadow.shadow-spin {

    animation:

        coinShadow

        2.6s

        ease-out

        forwards;

}


@keyframes coinShadow {

    0% {

        opacity: 0;

        transform:
            translateX(-50%)
            scale(0.45);

    }


    10% {

        opacity: 0.35;

        transform:
            translateX(-50%)
            scale(0.75);

    }


    25% {

        opacity: 0.55;

        transform:
            translateX(-50%)
            scale(1.05);

    }


    45% {

        opacity: 0.65;

        transform:
            translateX(-50%)
            scale(1.25);

    }


    65% {

        opacity: 0.48;

        transform:
            translateX(-50%)
            scale(1.05);

    }


    82% {

        opacity: 0.28;

        transform:
            translateX(-50%)
            scale(0.85);

    }


    100% {

        opacity: 0;

        transform:
            translateX(-50%)
            scale(0.60);

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .gem-flare {

        width: 4px;
        height: 4px;

    }


    .gem-flare::before {

        width: 16px;

    }


    .gem-flare::after {

        height: 16px;

    }


    .coin-shadow {

        width: 42%;

        bottom: 9%;

    }

}


/* =========================================================
   TABLETTE
   ========================================================= */

@media (min-width: 601px) and (max-width: 1100px) {

    .coin-shadow {

        width: 34%;

        bottom: 8%;

    }

}


/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .light-sweep,
    .gem-flare {

        animation-duration: 10s;

    }


    .coin.spin,
    .coin-shadow.shadow-spin {

        animation-duration: 1.2s;

    }

}