/* ===============================
   PLACEHOLDER — EN COURS DE FABRICATION
=============================== */

.amup-placeholder {
    position: fixed;
    inset: 0;
    z-index: 99999;
    overflow: hidden;

    /* ✅ FOND UNIQUE — CELUI QUE TU AS DEMANDÉ */
    background-image: url("https://www.amupcycling.fr/wp-content/uploads/2025/12/la-soudeur-scaled.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* voile léger pour lisibilité */
.amup-placeholder::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.55);
    z-index: 1;
}


/* ===============================
   TEXTE — ROUILLE DÉTOURÉE
=============================== */

.amup-placeholder::after {
    content: "EN COURS DE FABRICATION";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;

    font-size: clamp(32px, 6vw, 64px);
    font-weight: 900;
    letter-spacing: 3px;

    /* 🎨 COULEUR ROUILLE */
    color: #9b3f1f; /* base rouille */

    /* ✴️ DÉTOURAGE + RELIEF */
    text-shadow:
        /* contour sombre */
        -2px -2px 0 #2b1208,
         2px -2px 0 #2b1208,
        -2px  2px 0 #2b1208,
         2px  2px 0 #2b1208,

        /* profondeur métal */
        0 3px 6px rgba(0,0,0,0.45),

        /* lueur chaude (soudure) */
        0 0 10px rgba(255,120,40,0.35);

    transform-origin: center;

    animation: textDrift 14s ease-in-out infinite alternate;
}

/* ===============================
   ANIMATION UNIQUE — X + Y + ROTATION
   X : 20% bord gauche → 20% bord droit
   Y : HAUT → BAS (VISIBLE)
=============================== */

@keyframes textDrift {

    /* HAUT GAUCHE */
    0% {
        transform: translate(-80%, -110%) rotate(-4deg);
    }

    /* CENTRE */
    50% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    /* BAS DROIT */
    100% {
        transform: translate(-20%, 10%) rotate(4deg);
    }
}
/* ===============================
   GIF — CERCLE FLOTTANT
=============================== */

.amup-placeholder-gif {
    position: absolute;
    width: 180px;
    height: 180px;

    border-radius: 50%;
    overflow: hidden;

    background: rgba(255,255,255,0.35);
    backdrop-filter: blur(4px);
    opacity: 0.75;

    box-shadow:
        0 0 0 2px rgba(0,0,0,0.15),
        0 8px 20px rgba(0,0,0,0.25);

    pointer-events: none;
    z-index: 3;
}

.amup-placeholder-gif img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===============================
   LOGO — TOUR DE L'ÉCRAN
=============================== */

.amup-placeholder-logo {
    position: fixed;
    top: 0;
    left: 0;

    width: 180px;
    height: 180px;

    z-index: 4;
    pointer-events: none;

    opacity: 0.85;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.35));

    transition: transform 1.2s linear;
}

.amup-placeholder-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.amup-placeholder-logo {
    position: absolute; /* et non fixed */
    top: 0;
    left: 0;
    z-index: 4; /* > gif (3), < texte si tu veux */
}