/* ==========================================================
   04 — PAUSE FUN
   Maquette Figma : 04_FUN BREAK (1440 × 450 px)
   ========================================================== */

.pause {
  aspect-ratio: 1440 / 450;
  --hauteur: 450;
  background-color: var(--creme);
  /* Les étoiles débordent sur Compétences et Projets :
     on coupe seulement sur les côtés, et la section passe au-dessus de ses voisines. */
  overflow-x: clip;
  overflow-y: visible;
  z-index: 2;
}

/* ---------- Personnage pixel ---------- */

/* Dans Figma, l'image est recadrée : le haut (−23,65 %) est masqué.
   La découpe en marche cache en plus, de chaque côté de la tête, les deux traces
   noires laissées par le bas de l'étiquette « Thelmoi » (sur les 8 images du GIF). */
.pause__personnage {
  overflow: hidden;
  clip-path: polygon(
    0 3.1%, 37.25% 3.1%, 37.25% 2.2%, 39.6% 2.2%, 39.6% 0.1%,
    63.2% 0.1%, 63.2% 2.2%, 100% 2.2%, 100% 100%, 0 100%
  );
}

.pause__personnage img {
  position: absolute;
  top: -23.65%;
  left: 0;
  width: 100%;
  max-width: none;
  height: 123.71%;
}

.pause__personnage {
  transition: translate 0.35s ease;
}

@media (hover: hover) {
  .pause__personnage:hover {
    translate: 0 calc(-5 * var(--u));
  }
}

/* ---------- Bulle et cœur ---------- */

.pause__coeur {
  pointer-events: none;
}

.pause__coeur img {
  width: 100%;
  height: 100%;
}

/* Le cœur de l'image (grille de 16 px sur 520 px), découpé pixel par pixel */
.pause__coeur-battement {
  position: absolute;
  inset: 0;
  background: url("../../images/web/pause/bulle-coeur-pixel.webp") center / 100% 100% no-repeat;
  clip-path: polygon(
    42.5% 41.15%, 48.65% 41.15%, 48.65% 44.42%, 51.73% 44.42%, 51.73% 41.15%,
    57.88% 41.15%, 57.88% 44.42%, 60.77% 44.42%, 60.77% 50.58%, 57.88% 50.58%,
    57.88% 53.65%, 54.81% 53.65%, 54.81% 56.73%, 51.73% 56.73%, 51.73% 60%,
    48.65% 60%, 48.65% 56.73%, 45.58% 56.73%, 45.58% 53.65%, 42.5% 53.65%,
    42.5% 50.58%, 39.42% 50.58%, 39.42% 44.42%, 42.5% 44.42%
  );
  transform-origin: 50.19% 50.58%;
  animation: pause-battement 1.6s ease-in-out infinite;
}

/* Deux pulsations (« boum-boum »), puis une pause */
@keyframes pause-battement {
  0%, 45%, 100% { scale: 1; }
  12% { scale: 1.12; }
  24% { scale: 1; }
  34% { scale: 1.07; }
}

/* Zone de survol limitée à la bulle (l'image a de grandes marges transparentes) */
.pause__coeur-zone {
  position: absolute;
  top: 31.5%;
  left: 26.9%;
  width: 46.5%;
  height: 41.2%;
  pointer-events: auto;
}

/* ---------- Texte « continue de scroller » ---------- */

.pause__texte {
  margin: 0;
  color: var(--noir);
  font-family: var(--police-mono);
  font-size: calc(40 * var(--u));
  line-height: normal;
  white-space: nowrap;
}

/* ---------- Sortie en vague (lettres créées par js/interactions.js) ----------
   Le texte passe sous le personnage, et tout ce qui dépasse à gauche
   de la bande opaque des cheveux (50 px avant le texte) est masqué. */

.pause__texte--vague {
  z-index: -1;
  clip-path: polygon(
    calc(-50 * var(--u)) -100%, 200% -100%, 200% 200%, calc(-50 * var(--u)) 200%
  );
}

.pause__mot {
  display: inline-block;
}

.pause__lettre {
  display: inline-block;
  white-space: pre;
}

.pause[data-apparition] .pause__texte--vague {
  opacity: 1;
  animation: none;
}

/* attente : caché derrière le personnage ; jouee : sortie en vague ; sortie : fondu */
.pause__texte[data-vague="attente"] .pause__mot {
  visibility: hidden;
}

.pause__texte[data-vague="jouee"] .pause__mot {
  animation: pause-mot-sortie var(--duree-sortie, 1.5s) cubic-bezier(0.33, 1, 0.68, 1) 0.2s backwards;
}

.pause__texte[data-vague="jouee"] .pause__lettre {
  animation: pause-lettre-vague 0.7s ease-in-out calc(0.2s + var(--delai-vague, 0s)) backwards;
}

.pause__texte[data-vague="sortie"] .pause__mot {
  animation: pause-mot-fondu 0.45s ease forwards;
}

/* Bloc invisible créé par js/interactions.js : la zone personnage + texte observée */
.pause__zone-vague {
  pointer-events: none;
  visibility: hidden;
}

@keyframes pause-mot-sortie {
  from { translate: calc(-100% - 50 * var(--u)) 0; }
}

@keyframes pause-mot-fondu {
  to { opacity: 0; }
}

@keyframes pause-lettre-vague {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  25% { translate: 0 calc(-12 * var(--u)); rotate: -6deg; }
  55% { translate: 0 calc(5 * var(--u)); rotate: 3deg; }
  80% { translate: 0 calc(-2 * var(--u)); rotate: -1deg; }
}

/* ---------- Grandes étoiles ---------- */

.pause__etoile {
  max-width: none;
  pointer-events: none;
}

/* Grands écrans : chaque groupe d'étoiles reste accroché à son bord de l'écran
   (--ancre vaut 0 à gauche, et la largeur des deux marges à droite) */
.pause__etoile,
.pause__scintille {
  --ancre: 0px;
  left: calc(var(--ancre) + var(--x) * var(--u));
}

.pause__etoile:not(.pause__etoile--miroir),
.pause__scintille:not(.pause__scintille--miroir) {
  --ancre: calc(2 * var(--marge));
}

.pause__etoile--miroir {
  transform: scaleX(-1);
}

/* ---------- Scintillement (groupes d'étoiles créés par js/interactions.js) ----------
   Chaque groupe est une fenêtre sur l'image d'origine, qui est alors masquée. */

.pause__etoile--decoupee {
  visibility: hidden;
}

.pause__scintille {
  position: absolute;
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  background: url("../../images/web/pause/etoiles.webp") no-repeat;
  background-size: calc(726 * var(--u)) calc(1027 * var(--u));
  background-position: calc(var(--fond-x) * var(--u) * -1) calc(var(--fond-y) * var(--u) * -1);
  pointer-events: none;
  animation: pause-scintillement var(--duree) ease-in-out var(--delai) infinite;
}

.pause__scintille--miroir {
  transform: scaleX(-1);
}

@keyframes pause-scintillement {
  0%, 100% { opacity: 1; scale: 1; }
  50% { opacity: 0.5; scale: 0.92; }
}

/* ---------- Apparition (une seule fois, quand la section devient visible) ----------
   Sans JavaScript, l'attribut n'existe pas : tout reste visible. */

.pause[data-apparition="attente"] :is(.pause__personnage, .pause__coeur, .pause__texte, .pause__etoiles) {
  opacity: 0;
}

.pause[data-apparition="jouee"] :is(.pause__personnage, .pause__coeur, .pause__texte) {
  animation: pause-apparition 0.8s cubic-bezier(0.25, 0.8, 0.35, 1) calc(var(--i) * 0.2s) backwards;
}

.pause[data-apparition="jouee"] .pause__etoiles {
  animation: pause-fondu 1.2s ease calc(var(--i) * 0.2s) backwards;
}

.pause__personnage { --i: 0; }
.pause__coeur { --i: 1; }
.pause__texte { --i: 2; }
.pause__etoiles { --i: 3; }

@keyframes pause-apparition {
  from {
    opacity: 0;
    translate: 0 calc(24 * var(--u));
  }
}

@keyframes pause-fondu {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pause__personnage {
    transition: none;
  }

  .pause__personnage:hover {
    translate: none;
  }

  .pause__coeur-battement,
  .pause__scintille,
  .pause[data-apparition="jouee"] :is(.pause__personnage, .pause__coeur, .pause__texte, .pause__etoiles) {
    animation: none;
  }

  .pause[data-apparition="attente"] :is(.pause__personnage, .pause__coeur, .pause__texte, .pause__etoiles) {
    opacity: 1;
  }

  .pause__texte[data-vague] :is(.pause__mot, .pause__lettre) {
    visibility: visible;
    animation: none;
  }
}