/* ---------- additions for the React app: preloader + page transition curtain ---------- */
html.is-loading{overflow:hidden}

/* preloader (the old "unboxing opener", now shown on every full load until the page is ready) */
.preloader{position:fixed;inset:0;z-index:var(--z-opener,200);pointer-events:auto}
.preloader__half{position:absolute;top:0;bottom:0;width:50.4%;background:#0b3f33;transition:transform 1s cubic-bezier(.77,0,.18,1)}
.preloader__half--l{left:0;box-shadow:1px 0 0 rgba(211,173,85,.35)}
.preloader__half--r{right:0}
.preloader__logo{position:absolute;left:50%;top:50%;width:clamp(96px,13vw,150px);height:auto;transform:translate(-50%,-50%);opacity:0;animation:pre-foil .9s .15s cubic-bezier(.22,.61,.36,1) forwards}
.preloader__bar{position:absolute;left:50%;top:calc(50% + clamp(70px,9vw,100px));width:min(180px,40vw);height:1px;transform:translateX(-50%);background:rgba(211,173,85,.25);overflow:hidden;opacity:0;animation:pre-fade .6s .5s forwards}
.preloader__bar span{display:block;height:100%;background:#d3ad55;transform-origin:left;animation:pre-load 1.5s .3s cubic-bezier(.45,0,.2,1) forwards;transform:scaleX(0)}
.preloader--open{pointer-events:none}
.preloader--open .preloader__half--l{transform:translateX(-101%)}
.preloader--open .preloader__half--r{transform:translateX(101%)}
.preloader--open .preloader__logo,.preloader--open .preloader__bar{animation:pre-out .3s forwards}
@keyframes pre-foil{from{opacity:0;transform:translate(-50%,-46%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes pre-fade{to{opacity:1}}
@keyframes pre-load{to{transform:scaleX(1)}}
@keyframes pre-out{to{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .preloader{display:none}
}