/* BNU TAP-IN logo animations: "Shine" loader and "Reveal" app-open splash.
   Both use /assets/logo-white.png. Loaded by t.html, account.html, admin.html
   and the /app/ pages. */

/* ---- Shine: dim logo, a band of light glides across it. Loops while loading. ---- */
.logo-loader{width:min(60vw,240px);aspect-ratio:700/92;margin:0 auto;position:relative}
.logo-loader::before{content:"";position:absolute;inset:0;background:url(/assets/logo-white.png) center/contain no-repeat;filter:brightness(.5)}
.logo-loader::after{content:"";position:absolute;inset:0;
  -webkit-mask:url(/assets/logo-white.png) center/contain no-repeat;mask:url(/assets/logo-white.png) center/contain no-repeat;
  background:linear-gradient(108deg,transparent 40%,rgba(255,250,240,1) 50%,transparent 60%);background-size:250% 100%;background-position:100% 0;
  animation:logo-sweep 1.9s cubic-bezier(.45,.05,.4,1) infinite}
@keyframes logo-sweep{0%{background-position:100% 0}60%,100%{background-position:0% 0}}
.logo-loader-wrap{display:flex;justify-content:center;padding:18vh 20px}

/* ---- Reveal: wordmark wipes in, the four band colors draw under it, then it fades out. ---- */
.app-splash{position:fixed;inset:0;z-index:1000;background:#0a0a0a;display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .35s ease}
.app-splash.is-out{opacity:0;pointer-events:none}
.app-splash__logo{width:min(70vw,300px);aspect-ratio:700/92;background:url(/assets/logo-white.png) center/contain no-repeat;
  animation:splash-wipe .85s cubic-bezier(.7,0,.2,1) both}
@keyframes splash-wipe{from{clip-path:inset(0 100% 0 0);transform:translateY(6px)}to{clip-path:inset(0 0 0 0);transform:none}}
.app-splash__bar{display:flex;width:min(70vw,300px);height:4px;margin-top:22px}
.app-splash__bar i{flex:1;transform:scaleX(0);transform-origin:left;animation:splash-bar .5s cubic-bezier(.7,0,.2,1) forwards}
.app-splash__bar i:nth-child(1){background:#1c1a19;outline:1px solid #2c2926;animation-delay:.55s}
.app-splash__bar i:nth-child(2){background:#6b6b45;animation-delay:.63s}
.app-splash__bar i:nth-child(3){background:#c9ad8f;animation-delay:.71s}
.app-splash__bar i:nth-child(4){background:#e8b4b8;animation-delay:.79s}
@keyframes splash-bar{to{transform:scaleX(1)}}

@media (prefers-reduced-motion:reduce){
  .logo-loader::after{animation:none;display:none}
  .logo-loader::before{filter:none}
  .app-splash__logo{animation:none}
  .app-splash__bar i{animation:none;transform:none}
  .app-splash{transition:none}
}