/* ==========================================================================
   KILDE — les invitations
   Chaque univers referme sa page sur un échange de matière qui lui est propre :
   ce n'est pas un décor, c'est le geste central de l'expérience, en fond.
   Tout est en CSS (aucun WebGL) : léger, sûr, neutralisé en reduced-motion.
   S'applique sur .invitation (voir kilde.css) à la place de .no-gl.

   Chaque variante a SA couleur de base : c'est ce qui les rend reconnaissables
   d'un coup d'œil, avant même que le mouvement ne commence.
   ========================================================================== */

.invitation[class*="inv-"]::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
}

/* Voile de lecture — même principe que les héros : la matière reste franche
   à droite, le texte s'assoit sur une assise sombre à gauche. Calibré pour
   tenir 4,5:1 sur les petits textes quelle que soit la variante. */
.invitation[class*="inv-"]::after {
  background:
    linear-gradient(100deg,
      rgba(16, 28, 22, .80) 0%,
      rgba(16, 28, 22, .70) 38%,
      rgba(16, 28, 22, .52) 62%,
      rgba(16, 28, 22, .22) 84%,
      rgba(16, 28, 22, .06) 100%),
    linear-gradient(to bottom, rgba(16, 28, 22, .30), transparent 26%, transparent 74%, rgba(16, 28, 22, .34));
}

/* --------------------------------------------------------------------------
   01 · Ateliers cosmétiques — L'ÉMULSION
   Deux masses qui refusent de se mêler, puis se lient : la crème et l'huile
   se cherchent, se traversent, et finissent par ne plus faire qu'une.
   -------------------------------------------------------------------------- */

.invitation.inv-emulsion { background-color: #2F4C40; }
.invitation.inv-emulsion {
  background-image:
    radial-gradient(44% 54% at 20% 30%, rgba(248, 244, 236, .72), rgba(248, 244, 236, .10) 62%, transparent 76%),
    radial-gradient(46% 56% at 80% 68%, rgba(226, 170, 78, .60), rgba(226, 170, 78, .08) 64%, transparent 78%),
    radial-gradient(84% 88% at 50% 50%, rgba(20, 34, 27, .30), transparent 76%);
  background-size: 185% 185%, 185% 185%, 150% 150%;
  animation: inv-emulsion 24s var(--ease) infinite alternate;
}
.invitation.inv-emulsion::before {
  background: radial-gradient(40% 46% at 50% 48%, rgba(248, 244, 236, .30), transparent 72%);
  animation: inv-emulsion-prendre 12s var(--ease) infinite alternate;
}
@keyframes inv-emulsion {
  0%   { background-position: 4% 12%, 96% 88%, 50% 50%; }
  100% { background-position: 56% 54%, 44% 46%, 50% 50%; }
}
@keyframes inv-emulsion-prendre {
  0%   { opacity: 0; transform: scale(.82); }
  100% { opacity: 1; transform: scale(1.08); }
}

/* --------------------------------------------------------------------------
   02 · Kilde Botanica — LE MACÉRÂT
   L'or monte lentement dans la pénombre. Rien ne se précipite : la teinte
   se charge du bas vers le haut, comme l'huile prend la couleur des fleurs.
   -------------------------------------------------------------------------- */

.invitation.inv-macerat { background-color: #2A3B24; }
.invitation.inv-macerat {
  background-image:
    linear-gradient(to top, rgba(214, 154, 42, .88) 0%, rgba(214, 154, 42, .34) 30%, transparent 58%),
    radial-gradient(64% 46% at 34% 92%, rgba(242, 198, 96, .70), transparent 72%),
    radial-gradient(74% 62% at 74% 12%, rgba(18, 30, 20, .58), transparent 78%);
  background-size: 100% 250%, 165% 165%, 160% 160%;
  animation: inv-macerat 32s var(--ease) infinite alternate;
}
.invitation.inv-macerat::before {
  background: radial-gradient(46% 32% at 50% 98%, rgba(255, 216, 130, .40), transparent 74%);
  animation: inv-macerat-lueur 16s var(--ease) infinite alternate;
}
@keyframes inv-macerat {
  0%   { background-position: 50% 100%, 22% 100%, 78% 8%; }
  100% { background-position: 50% 24%, 48% 58%, 60% 34%; }
}
@keyframes inv-macerat-lueur {
  0%   { opacity: .3; transform: translateY(8%); }
  100% { opacity: 1;  transform: translateY(-6%); }
}

/* --------------------------------------------------------------------------
   03 · L'Équilibre intérieur — L'EAU CLAIRE
   Des ondes translucides qui se croisent sans jamais se troubler.
   La matière la plus limpide de la Maison : rien à cacher.
   -------------------------------------------------------------------------- */

.invitation.inv-eau { background-color: #2C5750; }
.invitation.inv-eau {
  background-image:
    radial-gradient(56% 40% at 22% 24%, rgba(206, 238, 232, .62), transparent 70%),
    radial-gradient(60% 44% at 78% 74%, rgba(154, 206, 198, .56), transparent 72%),
    radial-gradient(90% 78% at 50% 50%, rgba(16, 42, 38, .34), transparent 80%);
  background-size: 200% 165%, 200% 165%, 140% 140%;
  animation: inv-eau 26s linear infinite alternate;
}
.invitation.inv-eau::before {
  background:
    repeating-linear-gradient(104deg,
      rgba(232, 250, 246, .13) 0 2px,
      transparent 2px 22px);
  animation: inv-eau-onde 18s var(--ease) infinite alternate;
}
@keyframes inv-eau {
  0%   { background-position: 0% 26%, 100% 74%, 50% 50%; }
  100% { background-position: 100% 74%, 0% 26%, 50% 50%; }
}
@keyframes inv-eau-onde {
  0%   { opacity: .45; transform: translateX(-3%); }
  100% { opacity: 1;   transform: translateX(3%); }
}

/* --------------------------------------------------------------------------
   04 · Kilde Alchimie — LA RÉVÉLATION
   Un voile sombre qui se déchire par endroits et laisse passer la framboise.
   Ce qui était masqué finit toujours par être nommé.
   -------------------------------------------------------------------------- */

.invitation.inv-revelation { background-color: #141F1A; }
.invitation.inv-revelation {
  background-image:
    radial-gradient(42% 48% at 70% 36%, rgba(214, 74, 112, .80), rgba(214, 74, 112, .12) 62%, transparent 76%),
    radial-gradient(44% 40% at 22% 72%, rgba(226, 178, 92, .42), transparent 74%),
    radial-gradient(96% 92% at 50% 50%, rgba(10, 18, 14, .78), transparent 68%);
  background-size: 175% 175%, 175% 175%, 125% 125%;
  animation: inv-revelation 25s var(--ease) infinite alternate;
}
.invitation.inv-revelation::before {
  background:
    radial-gradient(28% 32% at 72% 38%, rgba(240, 110, 148, .44), transparent 68%),
    radial-gradient(22% 26% at 28% 68%, rgba(248, 244, 236, .22), transparent 70%);
  animation: inv-revelation-voile 10s var(--ease) infinite alternate;
}
@keyframes inv-revelation {
  0%   { background-position: 88% 12%, 6% 94%, 50% 50%; }
  100% { background-position: 42% 58%, 58% 38%, 50% 50%; }
}
@keyframes inv-revelation-voile {
  0%   { opacity: .1; transform: scale(1.18); }
  100% { opacity: 1;  transform: scale(.92); }
}

/* --------------------------------------------------------------------------
   05 · La Fabrique Kilde — LA CONVERGENCE
   Trois foyers séparés qui se rapprochent et se rejoignent au centre.
   Aucune équipe n'arrive seule au bout.
   -------------------------------------------------------------------------- */

.invitation.inv-convergence { background-color: #24403A; }
.invitation.inv-convergence {
  background-image:
    radial-gradient(26% 32% at 10% 18%, rgba(248, 244, 236, .66), transparent 68%),
    radial-gradient(26% 32% at 90% 22%, rgba(242, 198, 96, .58), transparent 68%),
    radial-gradient(26% 32% at 16% 86%, rgba(214, 74, 112, .54), transparent 68%),
    radial-gradient(80% 74% at 50% 50%, rgba(14, 28, 24, .40), transparent 78%);
  background-size: 205% 205%, 205% 205%, 205% 205%, 150% 150%;
  animation: inv-convergence 30s var(--ease) infinite alternate;
}
.invitation.inv-convergence::before {
  background: radial-gradient(32% 36% at 50% 50%, rgba(248, 244, 236, .34), transparent 72%);
  animation: inv-convergence-centre 15s var(--ease) infinite alternate;
}
@keyframes inv-convergence {
  0%   { background-position: 0% 0%, 100% 0%, 0% 100%, 50% 50%; }
  100% { background-position: 50% 50%, 50% 48%, 48% 52%, 50% 50%; }
}
@keyframes inv-convergence-centre {
  0%   { opacity: 0; transform: scale(.62); }
  100% { opacity: 1; transform: scale(1.14); }
}

/* --------------------------------------------------------------------------
   Fiches matière — la teinte de la matière elle-même, même mouvement lent
   -------------------------------------------------------------------------- */

.invitation.inv-matiere { background-color: #2C4739; }
.invitation.inv-matiere {
  background-image:
    radial-gradient(50% 56% at 24% 28%, var(--m-teinte, rgba(248, 244, 236, .6)), transparent 70%),
    radial-gradient(54% 60% at 78% 72%, var(--m-teinte-2, rgba(242, 198, 96, .5)), transparent 72%),
    radial-gradient(86% 80% at 50% 50%, rgba(16, 28, 22, .32), transparent 80%);
  background-size: 180% 180%, 180% 180%, 145% 145%;
  animation: inv-matiere 27s var(--ease) infinite alternate;
}
.invitation.inv-matiere::before {
  background: radial-gradient(38% 42% at 50% 52%, var(--m-teinte, rgba(248, 244, 236, .3)), transparent 74%);
  opacity: .55;
  animation: inv-matiere-souffle 14s var(--ease) infinite alternate;
}
@keyframes inv-matiere {
  0%   { background-position: 4% 14%, 96% 86%, 50% 50%; }
  100% { background-position: 56% 54%, 44% 46%, 50% 50%; }
}
@keyframes inv-matiere-souffle {
  0%   { opacity: .18; transform: scale(.88); }
  100% { opacity: .8;  transform: scale(1.1); }
}

/* --------------------------------------------------------------------------
   Accessibilité : aucune de ces matières ne bouge en mouvement réduit.
   Le fond reste beau, simplement immobile.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .invitation[class*="inv-"],
  .invitation[class*="inv-"]::before { animation: none !important; }
}
html.calme .invitation[class*="inv-"],
html.calme .invitation[class*="inv-"]::before { animation: none !important; }