/* ==========================================================================
   BELLY BOOP — Base commune aux deux écrans 16:9
   Repère de dessin FIXE : 1920 x 1080 px. Toutes les tailles sont en px.
   ========================================================================== */
@import url("brand.css");

html, body{
  margin:0;padding:0;height:100%;width:100%;
  background:#000;overflow:hidden;
  cursor:none;                       /* kiosque : pas de pointeur    */
  user-select:none;-webkit-user-select:none;
}
html.signage{font-size:16px}

/* Scène à l'échelle ------------------------------------------------------- */
.stage{
  position:absolute;top:0;left:0;
  width:1920px;height:1080px;
  transform-origin:0 0;
  overflow:hidden;
  /* Fond VERT de marque (et non noir) : les écrans reprennent la couleur des
     affiches du restaurant, et éclairent la salle sans l'éblouir. */
  background:var(--bb-green);
  will-change:transform;
  /* évite les coutures d'1px lors du scale */
  backface-visibility:hidden;
}
.stage::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(125% 88% at 50% -18%, rgba(42,82,56,.95) 0%, transparent 64%),
    radial-gradient(80% 55% at 108% 112%, rgba(227,188,123,.12) 0%, transparent 60%),
    var(--bb-green);
}

/* Scènes ------------------------------------------------------------------ */
.scene{
  position:absolute;inset:0;z-index:1;
  opacity:0;visibility:hidden;
  transition:opacity .7s var(--ease-soft), visibility 0s linear .7s;
}
.scene.is-active{opacity:1;visibility:visible;transition:opacity .7s var(--ease-soft), visibility 0s}
.scene.is-out{opacity:0;visibility:visible;transition:opacity .55s ease-in, visibility 0s linear .55s}
/* Les animations internes ne tournent QUE sur la scène visible :
   zéro travail de composition pour les scènes en attente. */
.scene:not(.is-active) *{animation-play-state:paused!important}
.scene.is-active [data-anim]{animation-play-state:running!important}

/* Marges de sécurité (overscan TV) --------------------------------------- */
.safe{position:absolute;inset:60px 90px}
body.is-debug .safe{outline:1px dashed rgba(227,188,123,.4)}
body.is-debug .stage{outline:2px solid rgba(227,188,123,.5)}

/* Bandeau de marque permanent -------------------------------------------- */
.brandbar{
  position:absolute;left:0;right:0;bottom:0;height:74px;z-index:5;
  display:flex;align-items:center;gap:28px;
  padding:0 54px;
  background:var(--bb-green-900);
  border-top:2px solid var(--bb-gold);
}
.brandbar__logo{flex:0 0 auto;display:flex;align-items:center}
.brandbar__logo svg{width:54px;height:54px}
.brandbar__txt{
  font-family:var(--ff-ui);font-size:19px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--bb-cream);
}
.brandbar__sep{width:6px;height:6px;border-radius:50%;background:var(--bb-gold);flex:0 0 auto}
.brandbar__info{
  margin-left:auto;display:flex;align-items:center;gap:26px;
  font-family:var(--ff-ui);font-size:22px;letter-spacing:.14em;color:var(--bb-gold);
  text-transform:uppercase;
}
.brandbar__info b{color:var(--bb-cream);font-weight:500}

/* Damier décoratif -------------------------------------------------------- */
.checker-strip{
  position:absolute;left:0;right:0;height:26px;z-index:4;
  background-color:var(--bb-green);
  background-image:
    linear-gradient(45deg,var(--bb-cream) 25%,transparent 25%,transparent 75%,var(--bb-cream) 75%),
    linear-gradient(45deg,var(--bb-cream) 25%,transparent 25%,transparent 75%,var(--bb-cream) 75%);
  background-size:52px 52px;background-position:0 0,26px 26px;
  animation:strip-run 6s linear infinite;
}
@keyframes strip-run{to{background-position:52px 0,78px 26px}}

/* Typographie d'écran ----------------------------------------------------- */
.s-eyebrow{
  font-family:var(--ff-ui);font-weight:500;font-size:22px;letter-spacing:.5em;
  text-transform:uppercase;color:var(--bb-gold);
}
.s-title{
  font-family:var(--ff-display);font-size:132px;line-height:.9;
  text-transform:uppercase;color:var(--bb-cream);letter-spacing:.01em;
}
.s-heading{
  font-family:var(--ff-heading);font-weight:700;font-size:72px;color:var(--bb-gold);line-height:1;
}
.s-item{font-family:var(--ff-serif);font-style:italic;font-size:38px;color:var(--bb-cream)}
.s-desc{font-family:var(--ff-serif);font-style:italic;font-size:23px;color:rgba(244,236,216,.74)}
.s-price{font-family:var(--ff-ui);font-weight:500;font-size:38px;color:var(--bb-gold)}

/* Briques d'animation réutilisables (transform/opacity uniquement) -------- */
@keyframes s-up     {from{opacity:0;transform:translateY(46px)}    to{opacity:1;transform:none}}
@keyframes s-down   {from{opacity:0;transform:translateY(-46px)}   to{opacity:1;transform:none}}
@keyframes s-left   {from{opacity:0;transform:translateX(70px)}    to{opacity:1;transform:none}}
@keyframes s-right  {from{opacity:0;transform:translateX(-70px)}   to{opacity:1;transform:none}}
@keyframes s-pop    {from{opacity:0;transform:scale(.86)}          to{opacity:1;transform:scale(1)}}
@keyframes s-blowup {from{opacity:0;transform:scale(1.18)}         to{opacity:1;transform:scale(1)}}
@keyframes s-wipe   {from{clip-path:inset(0 100% 0 0)}             to{clip-path:inset(0 0 0 0)}}
@keyframes s-lineX  {from{transform:scaleX(0)}                     to{transform:scaleX(1)}}
@keyframes s-float  {0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@keyframes s-turn   {0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@keyframes s-spin   {to{transform:rotate(360deg)}}
@keyframes s-glow   {0%,100%{opacity:.35}50%{opacity:.8}}

.a-up     {opacity:0;animation:s-up     .9s var(--ease-out) forwards}
.a-down   {opacity:0;animation:s-down   .9s var(--ease-out) forwards}
.a-left   {opacity:0;animation:s-left   .9s var(--ease-out) forwards}
.a-right  {opacity:0;animation:s-right  .9s var(--ease-out) forwards}
.a-pop    {opacity:0;animation:s-pop    .85s var(--ease-out) forwards}
.a-blowup {opacity:0;animation:s-blowup 1.1s var(--ease-out) forwards}
.a-wipe   {animation:s-wipe 1s var(--ease-out) forwards}

/* Lettres d'un titre qui montent une à une */
.s-split{display:inline-block;overflow:hidden;vertical-align:bottom}
.s-split > i{display:inline-block;font-style:inherit;opacity:0;animation:s-up .8s var(--ease-out) forwards}