/* ─── Animation d'ouverture (splash) ─────────────────
   Reprise de la maquette (css/pages.css, « Splash screen »). js/splash.js
   construit le logo et déclenche la sortie ; tout le mouvement est ici, en
   transform et opacity uniquement, que le navigateur anime sans repasser par
   le fil principal, occupé par le démarrage de Blazor.
   Puis l'attente de #app, montrée tant que Blazor n'a pas rendu sa première
   page (rechargement dans la même session, animations réduites). */

/* Fond commun au splash et à l'attente de #app : passer de l'un à l'autre ne
   doit rien changer à l'écran.
   Lumières figées : les anciennes taches floues en mouvement coûtaient plus
   cher à elles seules que tout le reste sur téléphone. */
#splash, .app-attente {
  background:
    radial-gradient(circle at 12% 8%, rgba(46,125,50,.42), rgba(46,125,50,0) 46%),
    radial-gradient(circle at 92% 94%, rgba(27,94,32,.5), rgba(27,94,32,0) 44%),
    radial-gradient(circle at 58% 42%, rgba(67,160,71,.16), rgba(67,160,71,0) 38%),
    radial-gradient(circle at 6% 78%, rgba(56,142,60,.2), rgba(56,142,60,0) 30%),
    #0f2d10;
}
#splash {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  /* Filet de sécurité : si le script ne s'exécute pas, le splash s'efface
     seul au bout de 15 s (son garde-fou) au lieu de rester devant la page. */
  animation: sb-secours 0.5s ease 15s forwards;
}
@keyframes sb-secours { to { opacity: 0; visibility: hidden; } }
/* Vignettage : assombrit les bords pour ramener l'œil vers le logo. */
#splash::after, .app-attente::after {
  content: ''; position: absolute; inset: 0; z-index: 11; pointer-events: none;
  background: radial-gradient(ellipse 75% 75% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.42) 100%);
}
/* Réseau de particules : ordinateur seulement (splash.js retire le canvas ailleurs). */
#splash-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3;
  opacity: 0; animation: sb-apparait .4s ease forwards;
}
.sb-grid {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 100%);
}

/* ── Logo ── */
.sb-logo {
  position: relative; z-index: 10;
  /* Le SVG est cadré serré : le logo occupe environ 80 % de cette largeur.
     C'est LA valeur à changer pour grossir ou réduire le logo ; la lueur, le
     halo et l'éclat suivent tout seuls. Le vh borne la taille sur un
     téléphone tenu à l'horizontale. */
  width: min(420px, 66vw, 78vh);
  aspect-ratio: var(--sb-ratio, 720 / 640);
  /* Caméra : le logo avance doucement pendant l'éclosion. */
  transform-origin: var(--sb-centre, 50% 50%);
  animation: sb-approche 1s cubic-bezier(.33,1,.68,1) .05s both;
}
/* Chaque pétale, chaque lettre et chaque lueur est un <svg> au cadrage du logo. */
.sb-logo svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; overflow: visible;
}
@keyframes sb-approche { from { scale: .9; } to { scale: 1; } }

/* Pétales : repliés sur la verticale (--a), ils s'ouvrent depuis la base du
   lotus avec un léger rebond. Le retard de chacun est posé par splash.js. */
.sb-logo svg.sb-petale {
  transform-origin: var(--sb-pivot, 50% 54%);
  animation: sb-eclore .7s linear both;
}
@keyframes sb-eclore {
  0%   { transform: rotate(var(--a)) scale(0); opacity: 0; animation-timing-function: cubic-bezier(.22,.9,.36,1); }
  8%   { opacity: 1; }
  58%  { transform: rotate(calc(var(--a) * -0.07)) scale(1.07); animation-timing-function: ease-in-out; }
  80%  { transform: rotate(calc(var(--a) * 0.02)) scale(.985); animation-timing-function: ease-in-out; }
  100% { transform: none; opacity: 1; }
}

/* Lettres : montée derrière le cache du mot, en cascade. */
.sb-mot { position: absolute; overflow: hidden; }
.sb-mot svg.sb-lettre {
  right: auto; bottom: auto;
  animation: sb-monte .55s cubic-bezier(.16,1,.3,1) both;
}
/* 175 unités du logo, rapportées à la hauteur du cadrage (640). */
@keyframes sb-monte { from { transform: translateY(27.34%); } to { transform: none; } }

/* Éclat de l'éclosion, halo et lueur verte, sous le logo. */
.sb-fond { position: absolute; inset: 0; pointer-events: none; }
.sb-eclat, .sb-halo {
  position: absolute; aspect-ratio: 1; border-radius: 50%;
  translate: -50% -50%; opacity: 0;
}
.sb-eclat {
  /* Centré sur la base du lotus, là où naît l'éclosion. */
  left: 50.69%; top: 54.22%; width: 243%;
  background: radial-gradient(circle, rgba(165,214,167,.55) 0%, rgba(76,175,80,.28) 22%, rgba(46,125,50,.10) 45%, rgba(46,125,50,0) 68%);
  animation: sb-eclat .9s cubic-bezier(.33,1,.68,1) .05s both;
}
.sb-halo {
  left: 50%; top: 50.16%; width: 175%;
  background: radial-gradient(circle, rgba(102,187,106,.34) 0%, rgba(46,125,50,.16) 30%, rgba(46,125,50,0) 62%);
  animation: sb-apparait .8s ease .4s forwards;
}
@keyframes sb-eclat {
  0%   { transform: scale(.2); opacity: 0; }
  12%  { opacity: .95; }
  100% { transform: scale(1); opacity: 0; }
}
/* Silhouettes floutées une seule fois ; --sb-flou est posé par splash.js
   selon la taille du logo. */
.sb-logo svg.sb-lueur {
  opacity: 0;
  filter: blur(var(--sb-flou, 22px));
}
.sb-lueur-lotus { animation: sb-lueur .5s ease .15s forwards; }
.sb-lueur-mot   { animation: sb-lueur .5s ease .6s forwards; }
@keyframes sb-lueur { to { opacity: .6; } }
@keyframes sb-apparait { to { opacity: 1; } }

/* ── Sortie : on zoome à travers le logo, et le splash s'efface ── */
#splash.sb--sortie {
  pointer-events: none;
  animation: sb-secours 0.5s ease 15s forwards, sb-fondu var(--sb-sortie, .45s) linear forwards;
}
#splash.sb--sortie .sb-logo {
  animation:
    sb-approche 1s cubic-bezier(.33,1,.68,1) .05s both,
    sb-zoom var(--sb-sortie, .45s) cubic-bezier(.32,0,.67,0) forwards,
    sb-logo-fondu var(--sb-sortie, .45s) linear forwards;
}
/* Lueur et halo s'éteignent dès le début du zoom : grossis dix fois, ils
   noieraient l'écran de vert. */
#splash.sb--sortie .sb-fond { animation: sb-eteint calc(var(--sb-sortie, .45s) * .45) ease forwards; }
#splash.sb--sortie .sb-grid { animation: sb-eteint calc(var(--sb-sortie, .45s) * .6) ease forwards; }
/* Zoom et fondu séparés : la courbe d'accélération du zoom ne doit pas
   s'appliquer au fondu, qui suit le temps. */
@keyframes sb-zoom { from { transform: scale(1); } to { transform: scale(10); } }
@keyframes sb-logo-fondu {
  0%, 30% { opacity: 1; }
  88%, 100% { opacity: 0; }
}
@keyframes sb-fondu {
  0%, 40% { opacity: 1; }
  96%, 100% { opacity: 0; }
}
@keyframes sb-eteint { to { opacity: 0; } }

/* ── Version légère : téléphones et tablettes ──
   Deux calques en tout, le lotus et le mot, sans flou ni halo : le lotus
   s'ouvre d'un bloc depuis sa base, le mot monte derrière son cache, et la
   sortie est un fondu, sans le zoom ×10 qui obligeait à redessiner un logo
   dix fois plus grand. Pas de mouvement de caméra non plus : un calque animé
   dans un autre calque animé coûte double. */
#splash.sb--leger .sb-logo { animation: none; }
.sb-logo svg.sb-lotus {
  transform-origin: var(--sb-pivot, 50% 54%);
  animation: sb-lotus .7s cubic-bezier(.3,1.35,.6,1) both;
}
@keyframes sb-lotus {
  from { transform: scale(.55); opacity: 0; }
  35%  { opacity: 1; }
  to   { transform: none; opacity: 1; }
}
.sb-mot svg.sb-lettres {
  right: auto; bottom: auto;
  animation: sb-monte .6s cubic-bezier(.16,1,.3,1) both;
}
#splash.sb--leger.sb--sortie {
  animation: sb-secours 0.5s ease 15s forwards, sb-eteint var(--sb-sortie, .35s) ease-in forwards;
}
#splash.sb--leger.sb--sortie .sb-logo {
  animation: sb-recul var(--sb-sortie, .35s) cubic-bezier(.32,0,.67,0) forwards;
}
@keyframes sb-recul { to { transform: scale(1.08); } }

/* Attente de #app : le décor du splash et son logo final, à la même taille et
   au même endroit, qui apparaît en douceur puis respire. Le logo est la
   version sans fond carré, au cadrage serré du splash. */
.app-attente {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-attente img {
  width: min(420px, 66vw, 78vh);
  height: auto;
  opacity: 0;
  animation: app-attente-in .6s ease .15s forwards, app-attente-souffle 2.4s ease-in-out .75s infinite alternate;
}

@keyframes app-attente-in {
  to {
    opacity: 1;
  }
}

@keyframes app-attente-souffle {
  from {
    opacity: 1;
  }

  to {
    opacity: .7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-attente img {
    animation: app-attente-in .6s ease .15s forwards;
  }
}