/* Accueil : animation propre à chaque monde.
   Les positions sont en % du cadre carré .world-art, dans lequel le dessin est centré (voir accueil.js). */

.world-art {
    isolation: isolate; /* les effets en z-index négatif passent derrière le dessin, pas derrière la page */
}

.world-art .fx {
    display: none;
    position: absolute;
    pointer-events: none;
}

/* étincelle à quatre branches (mondes 9 et 10) */
.world-9 .fx:first-of-type,
.world-10 .fx:first-of-type {
    display: block;
    width: 13%;
    height: 13%;
    background: #ffd43b;
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}

/* --- 1. Marketland : le robot fait coucou --- */
/* le bras levé est retiré du dessin, puis rejoué par une copie qui pivote autour de l'épaule */
.world-1 .world-art > img:first-child {
    clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 32% 13%, 41.5% 13%, 41.5% 43.5%, 32% 43.5%, 32% 13%);
}

.world-1 .part {
    clip-path: polygon(32% 13%, 41.5% 13%, 41.5% 43.5%, 32% 43.5%);
    transform-origin: 40% 40.5%;
    animation: robot-wave 3s ease-in-out infinite;
}

@keyframes robot-wave {
    0%, 50%, 100% { transform: rotate(0); }
    10%, 30% { transform: rotate(-16deg); }
    20%, 40% { transform: rotate(7deg); }
}

/* --- 2. Spaceland : des flammes sortent des pieds --- */
.world-2 .world-art {
    animation: hover 2.6s ease-in-out infinite;
}

.world-2 .fx:nth-of-type(-n + 2) {
    display: block;
    z-index: -1;
    top: 79%;
    left: 47.5%;
    width: 5%;
    height: 17%;
    border-radius: 50% 50% 50% 50% / 25% 25% 75% 75%;
    background: linear-gradient(#fff6b0, #ffc21a 30%, #ff6a00 65%, transparent);
    transform-origin: 50% 0;
    animation: flame 0.16s ease-in-out infinite alternate;
}

.world-2 .fx:nth-of-type(2) {
    left: 51%;
    top: 80.5%;
    animation-duration: 0.21s;
}

@keyframes hover {
    0%, 100% { transform: translateY(3%); }
    50% { transform: translateY(-4%); }
}

@keyframes flame {
    from { transform: scale(0.8, 0.7); }
    to { transform: scale(1.1, 1.15); }
}

/* --- 3. Waterland : le poisson nage et fait des bulles --- */
.world-3 .world-art {
    animation: swim 3s ease-in-out infinite;
}

.world-3 .fx {
    display: block;
    top: 45%;
    left: 29%;
    width: 7%;
    height: 7%;
    box-sizing: border-box;
    border: 1.5px solid #4a9fd0;
    border-radius: 50%;
    background: #d9f1ff;
    opacity: 0;
    animation: bubble 2.4s ease-in infinite;
}

.world-3 .fx:nth-of-type(2) {
    width: 5%;
    height: 5%;
    animation-delay: 0.8s;
}

.world-3 .fx:nth-of-type(3) {
    width: 6%;
    height: 6%;
    animation-delay: 1.6s;
}

@keyframes swim {
    0%, 100% { transform: translateX(-3%) rotate(-4deg); }
    50% { transform: translateX(3%) rotate(4deg); }
}

@keyframes bubble {
    0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
    15% { opacity: 1; }
    50% { transform: translate(-120%, -300%) scale(0.9); }
    100% { opacity: 0; transform: translate(-40%, -620%) scale(1.1); }
}

/* --- 4. Woodland : la plante se balance, une feuille tombe --- */
.world-4 .world-art {
    transform-origin: 50% 88%;
    animation: sway 3.4s ease-in-out infinite;
}

.world-4 .fx:first-of-type {
    display: block;
    z-index: -1;
    top: 34%;
    left: 64%;
    width: 8%;
    height: 5%;
    border-radius: 100% 0;
    background: #5a8a2c;
    opacity: 0;
    animation: leaf-fall 4.5s ease-in infinite;
}

@keyframes sway {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }
}

@keyframes leaf-fall {
    0%, 20% { opacity: 0; transform: translate(0, 0) rotate(0); }
    30% { opacity: 1; }
    50% { transform: translate(150%, 350%) rotate(80deg); }
    70% { transform: translate(40%, 700%) rotate(-30deg); }
    90% { opacity: 1; }
    100% { opacity: 0; transform: translate(160%, 1050%) rotate(60deg); }
}

/* --- 5. Circusland : il sautille --- */
.world-5 .world-art {
    transform-origin: 50% 69%;
    animation: hop 1.8s ease-out infinite;
}

@keyframes hop {
    0%, 45%, 100% { transform: translateY(0) scale(1, 1); }
    55% { transform: translateY(0) scale(1.08, 0.9); }
    70% { transform: translateY(-12%) scale(0.95, 1.06); }
    85% { transform: translateY(0) scale(1.06, 0.93); }
}

/* --- 6. Underland : il saute et fait apparaître une pièce --- */
.world-6 .world-art {
    animation: jump 2.4s ease-out infinite;
}

.world-6 .fx:first-of-type {
    display: block;
    top: 9%;
    left: 44%;
    width: 12%;
    height: 12%;
    box-sizing: border-box;
    border: 2px solid #c98a00;
    border-radius: 50%;
    background: #ffd43b;
    opacity: 0;
    animation: coin 2.4s ease-out infinite;
}

@keyframes jump {
    0%, 50%, 100% { transform: translateY(0); }
    56% { transform: translateY(2%); }
    68% { transform: translateY(-14%); }
    80% { transform: translateY(0); }
}

@keyframes coin {
    0%, 62% { opacity: 0; transform: translateY(60%) scaleX(1); }
    68% { opacity: 1; transform: translateY(0) scaleX(1); }
    76% { transform: translateY(-50%) scaleX(0.1); }
    84% { opacity: 1; transform: translateY(-80%) scaleX(1); }
    100% { opacity: 0; transform: translateY(-110%) scaleX(0.1); }
}

/* --- 7. Winterland : le droïde roule sous la neige --- */
/* une copie du dessin réduite au corps rond tourne sur elle-même ; une autre, réduite à la tête, la recouvre */
.world-7 .world-art {
    animation: roll-move 1.8s ease-in-out infinite alternate;
}

.world-7 .part:nth-of-type(2) {
    clip-path: circle(14.4% at 51.7% 57.7%);
    transform-origin: 51.7% 57.7%;
    animation: roll-spin 1.8s ease-in-out infinite alternate;
}

.world-7 .part:nth-of-type(3) {
    clip-path: ellipse(8.5% 6.5% at 51.3% 40%);
}

.world-7 .fx {
    display: block;
    top: 12%;
    left: 22%;
    width: 4%;
    height: 4%;
    border-radius: 50%;
    background: #9fd3f0;
    opacity: 0;
    animation: snow 3s linear infinite;
}

.world-7 .fx:nth-of-type(2) {
    left: 78%;
    animation-delay: 1s;
}

.world-7 .fx:nth-of-type(3) {
    left: 38%;
    top: 8%;
    animation-delay: 2s;
}

@keyframes roll-move {
    from { transform: translateX(-7%); }
    to { transform: translateX(7%); }
}

@keyframes roll-spin {
    from { transform: rotate(-28deg); }
    to { transform: rotate(28deg); }
}

@keyframes snow {
    0% { opacity: 0; transform: translate(0, 0); }
    15% { opacity: 1; }
    50% { transform: translate(120%, 900%); }
    85% { opacity: 1; }
    100% { opacity: 0; transform: translate(-60%, 1800%); }
}

/* --- 8. Horrorland : il tremble et clignote, prêt à exploser --- */
.world-8 .world-art {
    animation: fuse 2.8s linear infinite;
}

@keyframes fuse {
    0%, 55%, 100% { transform: translateX(0) scale(1); filter: none; }
    60%, 72%, 84% { transform: translateX(-2%) scale(1.04); filter: brightness(1.7); }
    66%, 78%, 90% { transform: translateX(2%) scale(1.08); filter: none; }
    95% { transform: translateX(0) scale(1.12); filter: brightness(1.9); }
}

/* --- 9. Birdland : la loupe du détective scintille --- */
.world-9 .world-art {
    transform-origin: 50% 85%;
    animation: sway 4s ease-in-out infinite;
}

.world-9 .fx:first-of-type {
    top: 28%;
    left: 63.5%;
    animation: sparkle 2.2s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 40%, 100% { transform: scale(0) rotate(0); }
    60% { transform: scale(1.2) rotate(45deg); }
    80% { transform: scale(0.6) rotate(90deg); }
}

/* --- 10. Barbarland : un éclat court le long de l'épée --- */
.world-10 .world-art {
    transform-origin: 50% 85%;
    animation: stomp 2.6s ease-in-out infinite;
}

.world-10 .fx:first-of-type {
    top: 29.5%;
    left: 21.5%;
    background: #fff;
    filter: drop-shadow(0 0 2px #e0a800);
    animation: blade-shine 2.6s ease-in-out infinite;
}

@keyframes stomp {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

@keyframes blade-shine {
    0%, 30% { opacity: 0; transform: translate(0, 0) scale(0.3); }
    40% { opacity: 1; transform: translate(0, 0) scale(1); }
    70% { opacity: 1; transform: translate(38%, 185%) scale(1) rotate(90deg); }
    80%, 100% { opacity: 0; transform: translate(42%, 205%) scale(0.3) rotate(120deg); }
}

/* --- Progression : Droid sautille, s'écrase un peu à l'atterrissage, puis se dandine --- */
.world-progress .world-art {
    transform-origin: 50% 100%;
    animation: droid-hop 2.8s ease-in-out infinite;
}

/* le dessin de Droid remplit toute son image, sans la marge qu'ont les objets des mondes */
.world-progress .world-art img {
    transform: scale(0.55);
}

@keyframes droid-hop {
    0%, 100% { transform: translateY(0) scale(1, 1) rotate(0); }
    8% { transform: translateY(0) scale(1.08, 0.9) rotate(0); }
    20% { transform: translateY(-14%) scale(0.96, 1.05) rotate(0); }
    32% { transform: translateY(0) scale(1.08, 0.9) rotate(0); }
    40% { transform: translateY(0) scale(1, 1) rotate(0); }
    55% { transform: translateY(0) scale(1, 1) rotate(-7deg); }
    70% { transform: translateY(0) scale(1, 1) rotate(7deg); }
    85% { transform: translateY(0) scale(1, 1) rotate(0); }
}

/* --- Bonus : l'ampoule se balance et s'allume par à-coups --- */
.world-bonus .world-art {
    transform-origin: 50% 85%; /* le culot */
    animation: bulb-sway 3.2s ease-in-out infinite;
}

.world-bonus .world-art img {
    animation: bulb-glow 3.2s ease-in-out infinite;
}

@keyframes bulb-sway {
    0%, 100% { transform: rotate(-6deg); }
    50% { transform: rotate(6deg); }
}

@keyframes bulb-glow {
    0%, 28%, 100% { filter: drop-shadow(0 0 0 rgba(255, 200, 30, 0)) drop-shadow(0 0 0 rgba(255, 230, 120, 0)) brightness(1); }
    32% { filter: drop-shadow(0 0 10px rgba(255, 200, 30, 0.9)) drop-shadow(0 0 4px rgba(255, 230, 120, 0.9)) brightness(1.15); }
    36% { filter: drop-shadow(0 0 2px rgba(255, 200, 30, 0.3)) drop-shadow(0 0 0 rgba(255, 230, 120, 0)) brightness(1); }
    42%, 78% { filter: drop-shadow(0 0 16px rgba(255, 200, 30, 1)) drop-shadow(0 0 6px rgba(255, 230, 120, 1)) brightness(1.2); }
    90% { filter: drop-shadow(0 0 4px rgba(255, 200, 30, 0.4)) drop-shadow(0 0 0 rgba(255, 230, 120, 0)) brightness(1.05); }
}

/* pas de mouvement pour les joueurs qui l'ont désactivé dans les réglages de leur appareil */

@media (prefers-reduced-motion: reduce) {
    .world-art,
    .world-art .part,
    .world-bonus .world-art img {
        animation: none !important;
    }

    .world-art .fx {
        display: none !important;
    }
}