/* ---------- Grandes animations : Chat, Galaxie, enveloppe, palier ---------- */

.celebrate {
  position: fixed;
  inset: 0;
  z-index: 85;
  pointer-events: none;
}
.celebrate .confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .6s ease;
}

.cel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  background: radial-gradient(ellipse at 50% 45%, rgba(30, 12, 50, .78), rgba(4, 2, 10, .82));
  opacity: 0;
  transition: opacity .5s ease;
}
.cel.in { opacity: 1; }
.cel.out { opacity: 0; }

.cel-text {
  margin: 18px 0 0;
  font: italic 600 calc(clamp(28px, 4.4vmin, 48px) * var(--fs-anim, 1))/1.2 var(--font-text);
  color: var(--c-anim, #f7ead0);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .8);
}
.cel-name {
  margin: 6px 0 0;
  max-width: 90vw;
  font: 700 calc(clamp(44px, 9vmin, 110px) * var(--fs-anim, 1))/1.05 var(--font-title);
  color: var(--c-anim, #fff3c4);
  text-shadow: 0 0 30px rgba(255, 200, 100, .9), 0 0 70px rgba(255, 150, 60, .5), 0 4px 6px rgba(0, 0, 0, .8);
  overflow-wrap: anywhere;
}
.cel.in .cel-text { animation: cel-rise .7s .25s cubic-bezier(.2, .9, .3, 1) both; }
.cel.in .cel-name { animation: cel-rise .8s .45s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes cel-rise { from { opacity: 0; transform: translateY(30px) scale(.9); } }

/* Chat porte-bonheur */
.cel-icon {
  position: relative;
  width: min(38vmin, 340px);
  aspect-ratio: 1;
}
.cel-icon svg,
.cel-icon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .6)); }
.cel-cat.in .cel-icon { animation: cel-pop 1s cubic-bezier(.2, 1.5, .4, 1) both, cel-wave 1.6s 1s ease-in-out infinite; }
@keyframes cel-pop { from { transform: scale(.1) rotate(-25deg); opacity: 0; } }
@keyframes cel-wave { 50% { transform: rotate(-4deg) scale(1.03); } }
.cel-rays {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 140vmax;
  height: 140vmax;
  margin: -70vmax 0 0 -70vmax;
  background: repeating-conic-gradient(rgba(255, 220, 140, .16) 0 6deg, transparent 6deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 45%);
  mask-image: radial-gradient(circle, #000 0, transparent 45%);
  animation: cel-spin 24s linear infinite;
}
@keyframes cel-spin { to { transform: rotate(360deg); } }

/* Galaxie */
.cel-galaxy-disc {
  position: relative;
  width: min(52vmin, 460px);
  aspect-ratio: 1;
}
.cel-galaxy.in .cel-galaxy-disc { animation: cel-pop 1.2s cubic-bezier(.2, 1.3, .4, 1) both; }
.cel-spiral {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, transparent 0 10%, rgba(190, 140, 255, .55) 18%, transparent 32%, transparent 50%, rgba(120, 180, 255, .5) 62%, transparent 76%),
    radial-gradient(circle, rgba(255, 240, 255, .9) 0, rgba(200, 150, 255, .55) 18%, rgba(90, 50, 180, .35) 45%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle, #000 35%, transparent 70%);
  mask-image: radial-gradient(circle, #000 35%, transparent 70%);
  animation: cel-spin 7s linear infinite;
}
.cel-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22%;
  height: 22%;
  margin: -11% 0 0 -11%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0, #ffe9ff 30%, rgba(220, 170, 255, 0) 70%);
  animation: cel-pulse 1.6s ease-in-out infinite;
}
@keyframes cel-pulse { 50% { transform: scale(1.35); opacity: .8; } }
.cel-galaxy-disc i {
  position: absolute;
  width: 6px;
  height: 6px;
  margin: -3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 2px rgba(220, 200, 255, .9);
  transform: scale(var(--s, 1));
  animation: cel-twinkle 1.4s ease-in-out infinite;
}
@keyframes cel-twinkle { 50% { opacity: .15; } }

/* Enveloppe du Donut : virevolte, s'arrête, le sceau se brise, le rabat s'ouvre, la lettre sort */
.cel-donut { perspective: 1200px; }
.comet {
  position: absolute;
  left: -20vw;
  width: 22vw;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 240, 200, .9));
  box-shadow: 0 0 12px rgba(255, 220, 150, .8);
  transform: rotate(-12deg);
  animation: comet 1.6s ease-in infinite;
}
@keyframes comet { to { transform: translateX(140vw) rotate(-12deg); } }
.cel-donut.reading .comet { opacity: 0; transition: opacity .6s ease; }

.env-fly {
  position: relative;
  width: min(70vmin, 600px);
  aspect-ratio: 320 / 210;
  animation: env-swirl 2.3s cubic-bezier(.3, .1, .3, 1) both;
}
@keyframes env-swirl {
  0% { transform: translate(-60vw, -30vh) rotate(-60deg) scale(.3); }
  30% { transform: translate(30vw, -18vh) rotate(160deg) scale(.55); }
  60% { transform: translate(-22vw, 12vh) rotate(330deg) scale(.75); }
  85% { transform: translate(4vw, -4vh) rotate(380deg) scale(.95); }
  100% { transform: translate(0, 0) rotate(360deg) scale(1); }
}
/* Pendant qu'elle virevolte, elle tourne aussi sur elle-même : on voit passer les deux côtés. */
.env-card {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: env-spin 2.3s cubic-bezier(.35, .1, .3, 1) both;
}
@keyframes env-spin { from { transform: rotateY(0); } to { transform: rotateY(720deg); } }
/* Sans lettre : elle se pose côté pseudo */
.cel-donut.show-name .env-card { animation: none; transform: rotateY(180deg); transition: transform .9s cubic-bezier(.3, 1.2, .4, 1); }
.env-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.env-face img,
.env-face svg { width: 100%; height: 100%; display: block; object-fit: fill; filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .55)); }
.env-front {
  transform: rotateY(180deg);
  border-radius: 12px;
  background: linear-gradient(135deg, #fbf3e2, #ead9b6);
  border: 3px solid #b08a4a;
  box-shadow: 0 16px 30px rgba(0, 0, 0, .55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6% 8%;
  color: #3a2412;
}
.env-to { font: italic 500 clamp(18px, 3vmin, 28px)/1.2 var(--font-text); color: #6b4a2a; }
.env-name {
  margin-top: 6px;
  font: 700 clamp(28px, 6vmin, 60px)/1.1 var(--font-title);
  color: #2a1606;
  overflow-wrap: anywhere;
  border-bottom: 2px solid rgba(107, 74, 42, .4);
  padding-bottom: 4px;
}
.env-front.env-art { display: block; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.env-name-on {
  position: absolute;
  transform: translate(-50%, -50%);
  max-width: 80%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: calc(clamp(22px, 5vmin, 52px) * var(--env-size, 1));
  line-height: 1.15;
}
.env-name-on.script { font-family: var(--font-text); font-style: italic; font-weight: 700; }
.env-name-on.cinzel { font-family: var(--font-title); font-weight: 700; }
.env-caption { margin: 0 0 14px; }
.cel-donut.reading .env-caption { opacity: 0; transition: opacity .5s ease; }

/* La lettre ouverte, au centre : [Pseudo], le message, ✦ — un morceau d'enveloppe dépasse derrière */
.cel-donut.reading .env-fly { opacity: 0; transform: scale(.85); transition: opacity .4s ease, transform .4s ease; }
.letter-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(92vw, 640px);
  pointer-events: auto;
  cursor: pointer;
  transform: translate(-50%, -50%) scale(.6);
  opacity: 0;
  transition: transform .6s cubic-bezier(.2, 1.2, .3, 1), opacity .4s ease;
}
.letter-card.in { transform: translate(-50%, -50%); opacity: 1; }
.letter-card.folding { transform: translate(-50%, -50%) scale(.8); opacity: 0; transition-duration: .35s; }
.letter-env {
  position: absolute;
  z-index: 0;
  left: 6%;
  width: 88%;
  bottom: -16%;
  transform: rotate(-4deg);
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .55));
}
.letter-paper {
  position: relative;
  z-index: 1;
  max-height: 80vh;
  overflow: hidden;
  padding: clamp(24px, 5vmin, 48px) clamp(22px, 5vmin, 54px) clamp(44px, 6vmin, 64px);
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255, 255, 255, .7), transparent 60%),
    linear-gradient(170deg, #fffaf0, #f2e2c0 70%, #e8d3a8);
  border: 1px solid rgba(176, 138, 74, .6);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .65), 0 0 60px rgba(255, 210, 140, .25);
  color: #2e1c0c;
  text-align: left;
}
/* Lettre vierge fournie (Réglages) : l'image donne la forme, le texte se place dans ses marges. */
.letter-card.has-paper { width: min(92vw, 640px, calc(82vh * var(--ratio, .75))); }
.has-paper .letter-paper {
  aspect-ratio: var(--ratio, .75);
  max-height: none;
  padding: var(--margin, 12%);
  border: 0;
  border-radius: 0;
  background: var(--paper) center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 26px 50px rgba(0, 0, 0, .6));
}
.letter-text { max-height: 100%; }
.l-name {
  margin: 0 0 .8em;
  font: 700 calc(clamp(24px, 4.6vmin, 40px) * var(--lfs, 1))/1.15 var(--font-title);
  color: var(--c-letter, #4a2a10);
}
.l-msg {
  margin: 0;
  font: 500 calc(clamp(20px, 3.6vmin, 30px) * var(--lfs, 1))/1.45 var(--font-text);
  color: var(--c-letter, #2e1c0c);
  white-space: pre-line;
}
.l-sign {
  position: absolute;
  right: clamp(20px, 4vmin, 40px);
  bottom: clamp(12px, 2.4vmin, 22px);
  font-size: clamp(26px, 4.4vmin, 40px);
  line-height: 1;
  color: #c9a24a;
  text-shadow: 0 0 10px rgba(255, 210, 110, .9), 0 0 24px rgba(255, 190, 80, .6);
  animation: l-twinkle 1.8s ease-in-out infinite;
}
.has-paper .l-sign { right: calc(var(--margin, 12%) * .9); bottom: calc(var(--margin, 12%) * .55); }
@keyframes l-twinkle { 50% { transform: scale(.75) rotate(20deg); opacity: .55; } }
.cel-letter-only { background: radial-gradient(ellipse at 50% 45%, rgba(30, 12, 50, .72), rgba(4, 2, 10, .8)); }

/* Illustrations fournies : Chat et Galaxie */
.cel-icon.custom { width: min(48vmin, 440px); }
.cel-galaxy-disc.custom .cel-galaxy-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 30px rgba(190, 140, 255, .7));
  animation: cel-glow 2.4s ease-in-out infinite alternate;
}
@keyframes cel-glow { to { filter: drop-shadow(0 0 55px rgba(210, 170, 255, .95)); transform: scale(1.04); } }

/* Palier de likes */
.cel-medal { font-size: clamp(90px, 22vmin, 200px); line-height: 1; }
.cel-milestone.in .cel-medal { animation: cel-pop 1s cubic-bezier(.2, 1.5, .4, 1) both, cel-wave 1.4s 1s ease-in-out infinite; }
.cel-title {
  margin: 10px 0 0;
  font: 700 clamp(30px, 5.5vmin, 64px)/1.1 var(--font-title);
  color: #ffb3c4;
  text-shadow: 0 0 24px rgba(255, 120, 160, .8);
}
.cel.in .cel-title { animation: cel-rise .7s .2s cubic-bezier(.2, .9, .3, 1) both; }

/* Annonce discrète */
.cel-banner {
  inset: auto 0 auto 0;
  top: 14vh;
  background: none;
}
.cel-banner p {
  margin: 0 auto;
  max-width: 90vw;
  padding: 14px 30px;
  border-radius: 99px;
  background: rgba(40, 14, 40, .92);
  border: 1.5px solid #ffb3c4;
  color: #ffd6df;
  font: 600 clamp(20px, 3vmin, 30px)/1.25 var(--font-title);
  box-shadow: 0 0 30px rgba(255, 120, 160, .45);
}
.cel-banner.in p { animation: cel-rise .6s cubic-bezier(.2, 1.3, .4, 1) both; }