/* Staff login animations (tooth gate + field/button effects).
   Animation only — no colour changes to the existing staff login. */

/* ---------- tooth gate ---------- */
#auth-overlay.tg-pending > .auth-card { display: none !important; }
.sl-gate { position: relative; z-index: 1; display: grid; place-items: center; gap: 26px; text-align: center;
  transition: opacity .45s ease, transform .45s ease; }
.sl-gate.is-leaving { opacity: 0; transform: scale(1.06); pointer-events: none; }
.sl-gate-btn { position: relative; width: 200px; height: 200px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: rgba(20, 22, 26, .62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px rgba(201,168,75,.35), 0 18px 44px rgba(0,0,0,.55);
  animation: sl-breathe 3s ease-in-out infinite; -webkit-tap-highlight-color: transparent; transition: box-shadow .3s; }
.sl-gate-btn img { width: 62%; height: auto; pointer-events: none; filter: drop-shadow(0 6px 14px rgba(201,168,75,.4));
  transition: transform .5s cubic-bezier(.3,1.5,.5,1), filter .4s; }
.sl-gate-btn::before, .sl-gate-btn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #C9A84B; opacity: 0; animation: sl-ring 2.8s ease-out infinite; }
.sl-gate-btn::after { animation-delay: 1.4s; }
.sl-gate-btn:hover img { transform: scale(1.08) rotate(-3deg); }
.sl-gate-btn:active { animation: none; transform: scale(.95); }
.sl-gate-btn:focus-visible { outline: 2px solid #E8D48B; outline-offset: 6px; }
.sl-gate.is-opening .sl-gate-btn { animation: none; box-shadow: 0 0 0 10px rgba(201,168,75,.14), 0 0 60px rgba(201,168,75,.55); }
.sl-gate.is-opening .sl-gate-btn img { transform: scale(1.3) rotate(360deg); filter: drop-shadow(0 0 22px rgba(232,212,139,.9)); transition: transform .6s cubic-bezier(.5,0,.2,1), filter .6s; }
.sl-gate.is-opening .sl-gate-hint { opacity: 0; }
.sl-gate-name { font-family: Cinzel, Georgia, serif; font-size: 20px; font-weight: 600; letter-spacing: .08em; color: #E8D48B; margin: 0; }
.sl-gate-hint { margin: 6px 0 0; font-size: 13px; color: #d7c5a4; animation: sl-nudge 1.8s ease-in-out infinite; transition: opacity .3s; }
@keyframes sl-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes sl-ring { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes sl-nudge { 0%,100% { transform: translateY(0); opacity: .75; } 50% { transform: translateY(5px); opacity: 1; } }

/* ---------- card content rises in one by one ---------- */
#auth-overlay .auth-card > * { animation: sl-rise .6s cubic-bezier(.2,.8,.2,1) both; }
#auth-overlay .auth-card > :nth-child(2) { animation-delay: .07s; }
#auth-overlay .auth-card > :nth-child(3) { animation-delay: .14s; }
#auth-overlay .auth-card > :nth-child(4) { animation-delay: .21s; }
#auth-overlay .auth-card > :nth-child(5) { animation-delay: .28s; }
@keyframes sl-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
#auth-overlay #login-logo { animation: sl-float 4.5s ease-in-out infinite; }
@keyframes sl-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ---------- gold streak running under the focused field ---------- */
#auth-overlay #login-form > div:nth-of-type(1),
#auth-overlay #login-form > div:nth-of-type(2) { position: relative; }
#auth-overlay #login-form > div:nth-of-type(1)::after,
#auth-overlay #login-form > div:nth-of-type(2)::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, #C9A84B, transparent) no-repeat; background-size: 45% 100%; transition: opacity .2s; }
#auth-overlay #login-form > div:nth-of-type(1):focus-within::after,
#auth-overlay #login-form > div:nth-of-type(2):focus-within::after { opacity: 1; animation: sl-streak 1.5s linear infinite; }
@keyframes sl-streak { from { background-position: -60% 0; } to { background-position: 160% 0; } }
#auth-overlay #password-toggle { transition: color .2s, transform .2s; }
#auth-overlay #password-toggle:hover { transform: translateY(-50%) scale(1.15); }

/* ---------- Sign In button: shine on hover, press, moving bar while signing in ---------- */
#auth-overlay #login-form button[type="submit"] { position: relative; overflow: hidden; transition: transform .25s, box-shadow .25s; }
#auth-overlay #login-form button[type="submit"]::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-22deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); }
@media (hover: hover) {
  #auth-overlay #login-form button[type="submit"]:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(201,168,75,.35); }
  #auth-overlay #login-form button[type="submit"]:hover:not(:disabled)::after { animation: sl-shine .8s ease; }
}
#auth-overlay #login-form button[type="submit"]:active:not(:disabled) { transform: scale(.985); }
#auth-overlay #login-form button[type="submit"]:disabled { cursor: progress; }
#auth-overlay #login-form button[type="submit"]:disabled::after { left: -40%; width: 40%; transform: none; animation: sl-bar 1s linear infinite;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); }
@keyframes sl-shine { from { left: -60%; } to { left: 130%; } }
@keyframes sl-bar { from { left: -40%; } to { left: 100%; } }


/* ---------- after sign-in: welcome curtain, then the app glides in ---------- */
.sl-curtain { position: fixed; inset: 0; z-index: 9999; display: grid; place-content: center; justify-items: center; gap: 18px; text-align: center;
  background: radial-gradient(ellipse at 50% 38%, rgba(201,168,75,.22), transparent 62%), #090b10;
  transition: opacity .65s ease, transform .65s cubic-bezier(.5,0,.2,1), filter .65s ease; }
.sl-curtain.is-leaving { opacity: 0; transform: scale(1.12); filter: blur(8px); pointer-events: none; }
.sl-curtain img { width: 104px; height: auto; filter: drop-shadow(0 0 22px rgba(201,168,75,.6)); animation: sl-curtain-logo 1s cubic-bezier(.3,1.4,.5,1) both; }
.sl-curtain p { margin: 0; font-family: Cinzel, Georgia, serif; font-size: 18px; letter-spacing: .14em; color: #E8D48B; animation: sl-rise .7s .15s cubic-bezier(.2,.8,.2,1) both; }
.sl-curtain-bar { width: 150px; height: 2px; border-radius: 2px; background: rgba(201,168,75,.2); overflow: hidden; position: relative; animation: sl-rise .7s .25s both; }
.sl-curtain-bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #C9A84B, #F1DE9B); transform: translateX(-100%); animation: sl-curtain-bar .9s .1s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes sl-curtain-logo { from { opacity: 0; transform: scale(.6) rotate(-14deg); } to { opacity: 1; transform: none; } }
@keyframes sl-curtain-bar { to { transform: translateX(0); } }

#app-container:not(.hidden) { animation: sl-app-in .9s cubic-bezier(.2,.8,.2,1) both; }
#app-container:not(.hidden) > div > header { animation: sl-head-in .8s .15s cubic-bezier(.2,.8,.2,1) both; }
#app-container:not(.hidden) #main-content-area { animation: sl-main-in .8s .25s cubic-bezier(.2,.8,.2,1) both; }
#app-container:not(.hidden) #app-sidebar { animation: sl-fade-in .8s .1s ease both; }
@keyframes sl-app-in { from { opacity: 0; transform: scale(.985); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes sl-head-in { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
@keyframes sl-main-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes sl-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* signing out: the login screen fades back in */
#auth-overlay:not(.hidden) { animation: sl-fade-in .5s ease both; }

@media (prefers-reduced-motion: reduce) {
  .sl-curtain, .sl-curtain *, .sl-curtain *::after, #app-container, #app-container *, #auth-overlay,
  .sl-gate *, .sl-gate, #auth-overlay .auth-card, #auth-overlay .auth-card *, #auth-overlay .auth-card *::after, #auth-overlay .auth-card *::before {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}