/* ===== LINGUI PROD - Introduction (1 fois par session, accueil) =====
   Ouverture sobre : le logo se dissout en douceur et l'écran noir se fond dans le site. */
#lpx{display:none;}
html.lpx-on,html.lpx-on body{overflow:hidden !important;height:100%;}
html.lpx-on #lpx{display:flex;}
#lpx{
  position:fixed;inset:0;z-index:100000;
  flex-direction:column;align-items:center;justify-content:center;
  touch-action:none;-webkit-user-select:none;user-select:none;
  font-family:Montserrat,sans-serif;
  --e:cubic-bezier(.16,1,.3,1);
  --lw:clamp(120px,32vmin,190px);
}
#lpx .lpx-bg{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 55% 45% at 50% 46%,rgba(240,124,21,0.045) 0%,rgba(240,124,21,0) 70%),#080808;
}

/* Scène : le symbole et un halo très discret */
#lpx .lpx-stage{position:relative;width:var(--lw);z-index:3;}
#lpx .lpx-w{
  position:absolute;left:50%;top:50%;width:170%;height:auto;max-width:none;
  transform:translate(-50%,-50%) scale(1);opacity:0;pointer-events:none;
  will-change:transform,opacity;
}
#lpx .lpx-idle{animation:lpxAura 4s ease-in-out 1.2s infinite;}
#lpx .lpx-w1,#lpx .lpx-w3{display:none;}

#lpx .lpx-logo{
  position:relative;display:block;width:100%;
  padding:0;margin:0;border:0;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;outline:none;
  opacity:0;transform:scale(.9);
  animation:lpxIn 1.4s var(--e) .1s forwards;
  will-change:transform,opacity,filter;
}
#lpx .lpx-logo img{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 6px 22px rgba(240,124,21,0.12));
  transition:transform .6s var(--e),filter .6s var(--e);
}
#lpx .lpx-logo:hover img,#lpx .lpx-logo:focus-visible img{transform:scale(1.03);filter:drop-shadow(0 8px 30px rgba(240,124,21,0.22));}
#lpx .lpx-logo:active img{transform:scale(.97);transition-duration:.15s;}
#lpx .lpx-logo:focus-visible{outline:1px solid rgba(240,124,21,0.5);outline-offset:20px;}

#lpx .lpx-cta{
  position:relative;z-index:3;margin-top:40px;
  font-size:10px;font-weight:600;letter-spacing:6px;text-transform:uppercase;
  color:rgba(248,245,239,0.6);padding-left:6px;
  opacity:0;animation:lpxFade .9s ease .8s forwards,lpxBreath 3.2s ease-in-out 1.9s infinite;
}
#lpx .lpx-skip{
  position:absolute;z-index:3;left:50%;transform:translateX(-50%);
  bottom:max(26px,calc(env(safe-area-inset-bottom) + 16px));
  background:none;border:0;cursor:pointer;padding:10px 14px;white-space:nowrap;
  font-family:Montserrat,sans-serif;font-size:9px;font-weight:600;letter-spacing:3px;text-transform:uppercase;
  color:rgba(248,245,239,0.5);transition:color .3s;
  opacity:0;animation:lpxFade .8s ease 1.1s forwards;
}
#lpx .lpx-skip:hover,#lpx .lpx-skip:focus-visible{color:#F07C15;outline:none;}
@media (max-height:480px){#lpx{--lw:clamp(90px,28vmin,140px);}#lpx .lpx-cta{margin-top:22px;}}

/* --- Entrée (après clic) : léger recul, puis le logo s'efface et le noir se fond dans le site --- */
/* L'écran d'entrée termine seul l'ouverture : le site, déjà en place dessous, apparaît d'un bloc. */
#lpx.is-go .lpx-logo{animation:lpxGo 1s cubic-bezier(.45,0,.2,1) forwards;}
#lpx.is-go .lpx-idle{animation:none;opacity:0;transition:opacity .3s;}
#lpx.is-go .lpx-cta,#lpx.is-go .lpx-skip{animation:lpxOut .3s ease forwards;}
#lpx.is-go{animation:lpxOut .65s cubic-bezier(.4,0,.2,1) .45s forwards;pointer-events:none;}
#lpx.is-quick{display:none !important;}
/* aucune animation propre au site ne s'enchaîne après l'entrée */
#hero.lp-hero,#hero.lp-hero *{animation:none !important;}

@keyframes lpxIn{0%{opacity:0;transform:scale(.9);}100%{opacity:1;transform:scale(1);}}
@keyframes lpxFade{to{opacity:1;}}
@keyframes lpxOut{to{opacity:0;}}
@keyframes lpxBreath{0%,100%{color:rgba(248,245,239,0.55);}50%{color:rgba(248,245,239,0.85);}}
@keyframes lpxAura{0%,100%{opacity:.12;transform:translate(-50%,-50%) scale(1);}50%{opacity:.24;transform:translate(-50%,-50%) scale(1.05);}}
@keyframes lpxGo{
  0%{transform:scale(1);opacity:1;filter:blur(0);}
  18%{transform:scale(.96);opacity:1;filter:blur(0);}
  100%{transform:scale(1.12);opacity:0;filter:blur(4px);}
}
@media(prefers-reduced-motion:reduce){
  #lpx .lpx-logo,#lpx .lpx-cta,#lpx .lpx-skip{animation:none;opacity:1;transform:none;}
  #lpx .lpx-idle{animation:none;opacity:.15;}
}