/* ==========================================================================
   Lyra System — animation d'ouverture (BATINOV.RE) — v1.0 — 2026
   Aucune dépendance, aucune police externe. Durée : 2,7 s. Reduced motion : fondu 0,4 s.
   Chorégraphie (ms) : 0 noir chaud · 180 trait · 480 toit · 1000 mot · 1300 mention + barre · 2250 sortie
   ========================================================================== */
.lyra-splash{
  --lyra-bg:#121110; --lyra-red:#CF2C30; --lyra-ink:#F4F1EC;
  --e-draw:cubic-bezier(.65,0,.35,1);     /* tracé : accélération / décélération symétrique */
  --e-out:cubic-bezier(.16,1,.3,1);       /* apparitions : décélération longue (expo-out)  */
  --e-exit:cubic-bezier(.4,0,.2,1);       /* sortie : standard                              */
  position:fixed; inset:0; z-index:2147483000;
  display:grid; place-items:center;
  background:var(--lyra-bg);
  container-type:size;
  overflow:hidden; cursor:default; user-select:none; -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  animation:lyra-out .45s var(--e-exit) 2.25s forwards;
}
.lyra-splash--contained{position:absolute}
/* Lumière ambiante : simple remontée chaude au centre, sans couleur criarde */
.lyra-splash::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 45% at 50% 46%, rgba(255,240,225,.055), rgba(255,240,225,0) 70%);
  opacity:0; animation:lyra-fade 1.4s ease-out .1s forwards;
}
.lyra-splash__stage{
  --w:min(70cqw, 320px);
  position:relative; width:var(--w); margin-top:-3cqh;
  display:flex; flex-direction:column; align-items:center;
  transform-origin:50% 45%;
  animation:lyra-zoom .45s var(--e-exit) 2.25s forwards;
}
.lyra-splash[data-mode="bureau"] .lyra-splash__stage{--w:min(36cqw, 580px); margin-top:-2cqh}
.lyra-splash__logo{display:block; width:100%; height:auto; overflow:visible}

/* 1-2. Trait puis toit : révélés par un masque qui suit le geste du pinceau */
.lyra-m{stroke-dasharray:1 2; stroke-dashoffset:1}
.lyra-m--trait{animation:lyra-draw .62s var(--e-draw) .18s forwards}
.lyra-m--roof {animation:lyra-draw .78s var(--e-draw) .48s forwards}
/* 3. Mot BATINOV.RE : fondu + léger glissement vertical */
.lyra-word{opacity:0; transform:translateY(70px); animation:lyra-rise .75s var(--e-out) 1.0s forwards}

/* 4. Mention Lyra System + mode */
.lyra-splash__meta{width:100%; display:flex; flex-direction:column; align-items:center; margin-top:calc(var(--w) * .085)}
.lyra-splash__cap-wrap{display:block; opacity:0; transform:translateY(4px); animation:lyra-rise .7s var(--e-out) 1.3s forwards}
.lyra-splash__cap{display:block; height:calc(var(--w) * .036); width:auto; min-height:8px}
.lyra-splash[data-mode="bureau"] .lyra-splash__cap{height:calc(var(--w) * .03)}
.lyra-only-bureau{display:none}
.lyra-splash[data-mode="bureau"] .lyra-only-bureau{display:block}
.lyra-splash[data-mode="bureau"] .lyra-only-terrain{display:none}

/* 5. Barre de chargement */
.lyra-splash__bar{
  position:relative; display:block; overflow:hidden;
  width:calc(var(--w) * .34); height:2px; margin-top:calc(var(--w) * .075);
  background:rgba(244,241,236,.08); border-radius:2px;
  opacity:0; animation:lyra-fade .3s ease-out 1.3s forwards;
}
.lyra-splash[data-mode="bureau"] .lyra-splash__bar{width:calc(var(--w) * .26); margin-top:calc(var(--w) * .06)}
.lyra-splash__bar i{
  position:absolute; inset:0; background:var(--lyra-red); border-radius:inherit;
  transform:scaleX(0); transform-origin:0 50%;
  animation:lyra-load .95s cubic-bezier(.45,.05,.2,1) 1.32s forwards;
}
.lyra-splash__footer{
  position:absolute; left:0; right:0; bottom:calc(env(safe-area-inset-bottom, 0px) + max(22px, 3.2cqh));
  display:flex; justify-content:center; opacity:0; animation:lyra-fade .8s ease-out 1.5s forwards;
}
.lyra-splash__foot{height:max(7px, min(1.15cqh, 9px)); width:auto; opacity:.3}

/* 6. Sortie : fondu + léger zoom vers l'interface */
.lyra-splash.is-leaving{animation:lyra-out .26s var(--e-exit) forwards !important}
.lyra-splash.is-leaving .lyra-splash__stage{animation:lyra-zoom .26s var(--e-exit) forwards !important}
html.lyra-splash-on, html.lyra-splash-on body{overflow:hidden}

@keyframes lyra-draw{to{stroke-dashoffset:0}}
@keyframes lyra-rise{to{opacity:1; transform:none}}
@keyframes lyra-fade{to{opacity:1}}
@keyframes lyra-load{0%{transform:scaleX(0)} 55%{transform:scaleX(.72)} 100%{transform:scaleX(1)}}
@keyframes lyra-zoom{to{transform:scale(1.045)}}
@keyframes lyra-out{to{opacity:0; visibility:hidden; pointer-events:none}}

/* Accessibilité : mouvement réduit = logo fixe puis simple fondu de 0,4 s */
@media (prefers-reduced-motion: reduce){
  .lyra-splash *, .lyra-splash::before{animation:none !important}
  .lyra-m{stroke-dashoffset:0}
  .lyra-word, .lyra-splash__cap-wrap, .lyra-splash__bar, .lyra-splash__footer, .lyra-splash::before{opacity:1; transform:none}
  .lyra-splash__bar i{transform:none}
  .lyra-splash{animation:lyra-out .4s ease .5s forwards}
}