/* ================== Overlay ================== */
#eatOverlay{position:fixed;inset:0;z-index:2147483000;pointer-events:none;display:none}
#eatOverlay.ready{display:block}
#eatOverlay .eatPanels{position:absolute;inset:0;overflow:hidden}
#eatOverlay .eatTop,#eatOverlay .eatBottom{position:absolute;left:0;width:100%;height:50%;background:var(--eat-panel,#f0f3f7);transform:translateY(-100%);animation-timing-function:var(--eat-ease-in)}
#eatOverlay .eatBottom{bottom:0;top:auto;transform:translateY(100%);animation-timing-function:var(--eat-ease-in)}
#eatOverlay .eatVeil{position:absolute;inset:0;background:var(--eat-veil,transparent);opacity:0;animation-timing-function:var(--eat-ease-in)}

/* ================== Bar container ================== */
#eatOverlay .eatBar{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity .18s ease}
/* track */
#eatOverlay .eatTrack{height:3px;background:rgba(0,0,0,.06);border-radius:2px;overflow:hidden;position:relative;transition:width .18s ease}
#eatOverlay .eatProg{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--eat-accent,#d90429);transition:width .25s ease}
/* Glow (opcjonalny) */
body.eatGlow #eatOverlay .eatProg{box-shadow:0 0 12px var(--eat-accent,#d90429), 0 0 24px color-mix(in srgb, var(--eat-accent) 45%, transparent)}

/* states */
body.eatLock{overflow:hidden;touch-action:none}
body.eatIn #eatOverlay{pointer-events:auto}
body.eatIn #eatOverlay .eatTop{animation:eatSlideDown var(--eat-in,420ms) forwards}
body.eatIn #eatOverlay .eatBottom{animation:eatSlideUp var(--eat-in,420ms) forwards}
body.eatIn #eatOverlay .eatVeil{animation:eatVeilIn var(--eat-in,420ms) forwards}

/* bar states */
body.eatBar-born #eatOverlay .eatBar{opacity:1}
/* born: full width */
body.eatBar-born #eatOverlay .eatTrack{width:var(--eat-bar-wide,90vw)}
/* tight: short centered bar */
body.eatBar-tight #eatOverlay .eatTrack{width:var(--eat-bar-tight,420px);max-width:80vw}
/* wide: back to full width */
body.eatBar-wide #eatOverlay .eatTrack{width:var(--eat-bar-wide,90vw)}

/* OUT – timingi OUT */
body.eatOut #eatOverlay .eatTop{animation:eatSlideDownOut var(--eat-out,460ms) forwards;animation-timing-function:var(--eat-ease-out)}
body.eatOut #eatOverlay .eatBottom{animation:eatSlideUpOut var(--eat-out,460ms) forwards;animation-timing-function:var(--eat-ease-out)}
body.eatOut #eatOverlay .eatVeil{animation:eatVeilOut var(--eat-out,460ms) forwards;animation-timing-function:var(--eat-ease-out)}

/* keyframes */
@keyframes eatSlideDown{to{transform:translateY(0)}}
@keyframes eatSlideUp{to{transform:translateY(0)}}
@keyframes eatVeilIn{to{opacity:1}}
@keyframes eatSlideDownOut{from{transform:translateY(0)} to{transform:translateY(-100%)}}
@keyframes eatSlideUpOut{from{transform:translateY(0)} to{transform:translateY(100%)}}
@keyframes eatVeilOut{from{opacity:1} to{opacity:0}}