/* koinobori.css — Koinobori décoratifs suspendus
   Visibles uniquement sur écrans larges (≥1200px) : sur un écran étroit,
   deux bannières à 70% de la hauteur ne laisseraient aucune place au jeu.
   Purement décoratifs : jamais interactifs, jamais devant l'interface. */

.koinobori {
  position: fixed;
  top: 6px; /* marge de sécurité : la rotation du balancement élève légèrement
               les coins du sommet au-dessus de leur point de pivot central
               (géométrie d'une rotation autour du centre d'un segment) */
  height: 70vh;
  max-height: 70vh;
  max-width: 220px;
  aspect-ratio: 200 / 800; /* ratio natif du SVG — garantit les proportions même quand max-width plafonne */
  z-index: var(--z-koinobori);
  pointer-events: none;
  display: none; /* masqué par défaut, réactivé au breakpoint large ci-dessous */
  filter: drop-shadow(0 4px 10px rgba(33, 28, 22, 0.10));
}

/* Le balancement (rotation) vit sur le SVG interne, pas sur le conteneur
   .koinobori — celui-ci garde son transform disponible pour le glissement
   du rideau sur smartphone (voir plus bas), sans que les deux animations
   ne se marchent dessus (une seule "transform" peut être active par
   élément à la fois). */
.koinobori svg {
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: top center;
}

.koinobori-left {
  left: clamp(0.5rem, 3vw, 2.5rem);
}

.koinobori-right {
  right: clamp(0.5rem, 3vw, 2.5rem);
}

.koinobori-left svg {
  animation: koinobori-sway-left 6s ease-in-out infinite;
}

.koinobori-right svg {
  animation: koinobori-sway-right 6.5s ease-in-out infinite;
}

/* Balancement doux suggérant le vent — rotation depuis le sommet (la
   ficelle), jamais une translation qui ferait "flotter" la bannière. */
@keyframes koinobori-sway-left {
  0%, 100% { transform: rotate(-2.5deg); }
  50%      { transform: rotate(2deg); }
}

@keyframes koinobori-sway-right {
  0%, 100% { transform: rotate(2.5deg); }
  50%      { transform: rotate(-2deg); }
}

/* Affichage uniquement sur écrans larges : assez de marge horizontale pour
   que les koinobori ne recouvrent jamais la zone de jeu centrale
   (contenu de jeu max-width: 900px + marges confortables de chaque côté). */
@media (min-width: 1400px) {
  .koinobori {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .koinobori-left svg,
  .koinobori-right svg {
    animation: none;
  }
}

/* ─── Rideau de théâtre (smartphone uniquement) ───
   D'ordinaire réservés aux grands écrans (≥1400px, règle ci-dessus), les
   deux koinobori entrent brièvement depuis l'extérieur de l'écran comme
   des rideaux de théâtre au tout début du jeu sur smartphone — synchronisé
   avec le rideau de la barre de progression (voir main.js et progress.css)
   — puis ressortent et restent hors champ pour laisser toute la place aux
   mini-jeux ("on les éclipse quand le jeu commence"). */
@media (max-width: 1399px) and (prefers-reduced-motion: no-preference) {
  .koinobori {
    display: block;
    max-width: 120px;
    height: 52vh;
    max-height: 52vh;
    transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .koinobori-left  { transform: translateX(-140%); }
  .koinobori-right { transform: translateX(140%); }

  .koinobori-left.mobile-curtain-intro,
  .koinobori-right.mobile-curtain-intro {
    transform: translateX(0);
  }
}