/* ================================================================
   PETIT JEU CACHÉ DE LA PAGE D'ACCUEIL (« easter egg »)
   Va avec public/assets/js/easter_egg_accueil.js, qui ajoute lui-même ses éléments au dessin
   (app/Views/pages/accueil_coupe_sol_view.php).
   Pour retirer le jeu : enlever ces 2 fichiers de $css_homepage et $js_homepage (app/Config/Assets.php).

   - Un clic dans le sol fait sortir un ver de terre, qui se tortille puis s'efface en fondu.
   - Au 5e ver, la classe coupe--replonge est posée sur le dessin : la tarière replonge et remonte
     une pomme de terre à la place de la carotte.
   ================================================================ */

/* Le ver de terre : une petite courbe en S, rose, en trait épais aux bouts arrondis.
   transform-box + transform-origin : il se tortille autour de son centre (sinon autour du coin du dessin) */
.coupe .ver {
  fill: none;
  stroke: #d98c8c;
  stroke-width: 7;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
  animation: ver-tortille 1.6s ease-in-out both;
  transition: opacity 0.4s;
}

.coupe .ver--efface { opacity: 0; }

@keyframes ver-tortille {
  0%   { transform: scale(0); }
  15%  { transform: scale(1); }
  35%  { transform: scale(0.75, 1.3); }
  55%  { transform: scale(1.1, 0.85); }
  75%  { transform: scale(0.8, 1.25); }
  100% { transform: scale(1); }
}

/* La pomme de terre, plantée sur la pointe de la tarière */
.coupe .patate ellipse { fill: #c9a26b; stroke: #8a6a3e; stroke-width: 2; }
.coupe .patate circle  { fill: #7a5a34; }

/* La tarière replonge : même mouvement qu'au chargement (homepage.css), mais sous un autre nom :
   changer de nom d'animation la relance. 170 : la descente, aussi écrite dans homepage.css et dans la vue.
   La patate apparaît quand la tarière remonte, la carotte est cachée. */
.coupe--replonge .tariere { animation: tariere-replonge 2.4s ease-in-out both; }
.coupe--replonge .carotte { display: none; }
.coupe--replonge .patate  { animation: patate-apparait 2.4s linear both; }

@keyframes tariere-replonge {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(170px); }
  55%  { transform: translateY(170px); }
  100% { transform: translateY(0); }
}

@keyframes patate-apparait {
  0%, 55%   { opacity: 0; }
  56%, 100% { opacity: 1; }
}

/* Mouvements réduits (réglage du système) : les vers apparaissent quand même au clic, mais sans bouger,
   et la patate est là tout de suite */
@media (prefers-reduced-motion: reduce) {
  .coupe .ver,
  .coupe--replonge .tariere,
  .coupe--replonge .patate { animation: none; }
  .coupe .ver { transition: none; }
}