/* ============================================================
   MANA — Fond d'écran signature (référence : alliancemana.org)
   Orbites animées, cœur blanc rayonnant avec le logo qui pulse
   au même rythme, lignes de mondes, grille douce. Sans filigrane.

   Usage :
   <link rel="stylesheet" href="mana-wallpaper.css">
   <div class="mana-wallpaper" aria-hidden="true">
     <div class="mana-wallpaper-orbit mana-wallpaper-orbit-one"></div>
     <div class="mana-wallpaper-orbit mana-wallpaper-orbit-two"></div>
     <div class="mana-wallpaper-orbit mana-wallpaper-orbit-three"></div>
     <div class="mana-wallpaper-core">
       <img src="Logo_MANA_Symbol_logo.png" alt="" class="mana-wallpaper-core-logo">
     </div>
     <div class="mana-world-line mana-world-line-one"></div>
     <div class="mana-world-line mana-world-line-two"></div>
     <div class="mana-world-line mana-world-line-three"></div>
   </div>
   Le contenu de la page doit être en position:relative; z-index:1.
   Personnalisable via les variables --wp-a, --wp-b, --wp-top,
   --wp-bottom, --wp-grid (des valeurs claires par défaut).
   ============================================================ */

.mana-wallpaper{
  position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(ellipse 700px 600px at 78% 8%, var(--wp-a, rgb(106 106 106 / 0.08)), transparent 65%),
    radial-gradient(ellipse 520px 420px at 88% 32%, var(--wp-b, rgb(141 141 141 / 0.06)), transparent 60%),
    linear-gradient(180deg, var(--wp-top, #ffffff) 0%, var(--wp-bottom, #f8f8f8) 100%);
}

/* Grille douce, estompée en périphérie */
.mana-wallpaper::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(var(--wp-grid, rgb(18 18 18 / 0.035)) 1px, transparent 1px),
    linear-gradient(90deg, var(--wp-grid, rgb(18 18 18 / 0.035)) 1px, transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:radial-gradient(circle at 50% 45%, black, transparent 72%);
  mask-image:radial-gradient(circle at 50% 45%, black, transparent 72%);
  opacity:.5;
}

/* Centre du motif ajustable par page via --wp-x / --wp-y */
.mana-wallpaper-orbit,
.mana-wallpaper-core,
.mana-world-line{
  position:absolute;left:var(--wp-x,50%);top:var(--wp-y,44%);transform:translate(-50%,-50%);
}

/* Orbites */
.mana-wallpaper-orbit{
  border:1px solid rgb(106 106 106 / 0.16);border-radius:9999px;
  box-shadow:0 0 80px rgb(141 141 141 / 0.08);
}
.mana-wallpaper-orbit-one{width:min(72vw,880px);height:min(34vw,410px);animation:drift-orbit 42s ease-in-out infinite}
.mana-wallpaper-orbit-two{width:min(58vw,690px);height:min(27vw,320px);border-color:rgb(141 141 141 / 0.16);animation:drift-orbit 55s ease-in-out infinite reverse}
.mana-wallpaper-orbit-three{width:min(44vw,520px);height:min(20vw,235px);border-color:rgb(106 106 106 / 0.11);animation:breathe-orbit 18s ease-in-out infinite}

/* Cœur blanc rayonnant */
.mana-wallpaper-core{
  display:grid;place-items:center;
  width:clamp(96px,12vw,160px);height:clamp(96px,12vw,160px);
  border:1px solid rgb(141 141 141 / 0.22);border-radius:9999px;
  background:
    radial-gradient(circle, rgb(255 255 255 / 0.98) 0 10%, rgb(240 240 240 / 0.95) 11% 28%, rgb(141 141 141 / 0.08) 58%, transparent 72%),
    rgb(255 255 255 / 0.72);
  box-shadow:0 0 55px rgb(106 106 106 / 0.14), 0 0 120px rgb(141 141 141 / 0.12);
  animation:pulse-core 7s ease-in-out infinite;
}

/* Logo au cœur — enfant du core animé : il hérite du pulse (brillance +
   échelle) et rayonne donc exactement au même rythme que le centre. */
.mana-wallpaper-core-logo{
  width:62%;height:62%;object-fit:contain;opacity:.2;filter:none;
}

/* Lignes de mondes */
.mana-world-line{
  width:min(74vw,900px);height:1px;
  background:linear-gradient(90deg, transparent, rgb(106 106 106 / 0.16), transparent);
  opacity:.42;
}
.mana-world-line-one{transform:translate(-50%,-50%) rotate(12deg)}
.mana-world-line-two{transform:translate(-50%,-50%) rotate(-18deg)}
.mana-world-line-three{transform:translate(-50%,-50%) rotate(38deg)}

@keyframes drift-orbit{
  0%,100%{transform:translate(-50%,-50%) rotate(-4deg) scale(1)}
  50%{transform:translate(-50%,-50%) rotate(4deg) scale(1.03)}
}
@keyframes breathe-orbit{
  0%,100%{opacity:.56;transform:translate(-50%,-50%) scale(.96)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}
}
@keyframes pulse-core{
  0%,100%{filter:brightness(.98);transform:translate(-50%,-50%) scale(.96)}
  50%{filter:brightness(1.08);transform:translate(-50%,-50%) scale(1.04)}
}

@media (prefers-reduced-motion: reduce){
  .mana-wallpaper-orbit,
  .mana-wallpaper-core{animation:none}
}