/* ==================================================================
   Grant Manager — Welcome Note (post-login transition overlay)

   Reusable, theme-aware component layer. Renders as a full-screen
   overlay using the --gm-* design tokens (adapts to both Nord dark
   and light themes automatically) with a brief fade-and-rise entrance,
   indeterminate progress and reduced-motion support.

   Usage: GMWelcome.show({ ... }) — see dist/js/gm-welcome.js
   ================================================================== */

.gm-welcome {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: var(--gm-overlay, rgba(36, 41, 51, 0.72));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 1;
  transition: opacity 0.3s ease;
}
.gm-welcome[hidden] { display: none; }
.gm-welcome *,
.gm-welcome *::before,
.gm-welcome *::after { box-sizing: border-box; }

.gm-welcome-card {
  width: min(92vw, 440px);
  max-height: 88vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 44px 36px 38px;
  border-radius: var(--gm-radius, 14px);
  background: var(--gm-surface, #2e3440);
  border: 1px solid var(--gm-border, #434c5e);
  box-shadow: var(--gm-shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.35));
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
  animation: gm-welcome-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gm-welcome-logo {
  width: 92px;
  height: 92px;
  object-fit: contain;
  border-radius: var(--gm-radius-sm, 10px);
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.28));
  animation: gm-welcome-rise 0.5s ease-out 0.08s both;
}

.gm-welcome-greet {
  margin: 26px 0 0;
  font-family: var(--gm-display, var(--gm-font, "DM Sans", sans-serif));
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--gm-text, #f9fafb);
  animation: gm-welcome-rise 0.5s ease-out 0.16s both;
}
.gm-welcome-greet .name { color: var(--gm-primary, #88c0d0); }

.gm-welcome-org {
  margin: 10px 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gm-text-muted, #9ca3af);
  animation: gm-welcome-rise 0.5s ease-out 0.24s both;
}

.gm-welcome-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  animation: gm-welcome-rise 0.5s ease-out 0.3s both;
}

.gm-welcome-role {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gm-primary-dark, #81a1c1);
  background: var(--gm-accent-soft, rgba(136, 192, 208, 0.14));
  border: 1px solid var(--gm-border, #434c5e);
  border-radius: 999px;
}
.gm-welcome-role i { color: var(--gm-primary, #88c0d0); }

.gm-welcome-status {
  margin: 26px 0 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--gm-text-muted, #9ca3af);
  white-space: nowrap;
  animation: gm-welcome-rise 0.5s ease-out 0.36s both;
}

.gm-welcome-bar {
  position: relative;
  width: min(70%, 240px);
  height: 4px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--gm-surface-2, #3b4252);
  animation: gm-welcome-rise 0.5s ease-out 0.42s both;
}
.gm-welcome-bar > span {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--gm-primary, #88c0d0), transparent);
  animation: gm-welcome-slide 1.1s ease-in-out infinite;
}

/* Exiting — brief fade (and slight settle) before redirect. */
.gm-welcome.is-leaving { opacity: 0; }
.gm-welcome.is-leaving .gm-welcome-card { animation: none; opacity: 0; transform: translateY(6px); }
.gm-welcome.is-leaving .gm-welcome-logo,
.gm-welcome.is-leaving .gm-welcome-greet,
.gm-welcome.is-leaving .gm-welcome-org,
.gm-welcome.is-leaving .gm-welcome-meta,
.gm-welcome.is-leaving .gm-welcome-status,
.gm-welcome.is-leaving .gm-welcome-bar { animation: none; }

@keyframes gm-welcome-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes gm-welcome-slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(400%); }
}

/* Small screens */
@media (max-width: 480px) {
  .gm-welcome { padding: 16px; }
  .gm-welcome-card { padding: 34px 22px 30px; }
  .gm-welcome-logo { width: 74px; height: 74px; }
}

/* Reduced motion — a brief static fade, no movement. */
@media (prefers-reduced-motion: reduce) {
  .gm-welcome,
  .gm-welcome-card,
  .gm-welcome-logo,
  .gm-welcome-greet,
  .gm-welcome-org,
  .gm-welcome-meta,
  .gm-welcome-status,
  .gm-welcome-bar {
    animation: none;
  }
  .gm-welcome-card,
  .gm-welcome-logo,
  .gm-welcome-greet,
  .gm-welcome-org,
  .gm-welcome-meta,
  .gm-welcome-status,
  .gm-welcome-bar {
    opacity: 0;
    animation: gm-welcome-fade-in 0.25s ease-out forwards;
  }
  .gm-welcome-card { animation-delay: 0.05s; }
  .gm-welcome-logo { animation-delay: 0.1s; }
  .gm-welcome-greet { animation-delay: 0.15s; }
  .gm-welcome-org { animation-delay: 0.2s; }
  .gm-welcome-meta { animation-delay: 0.25s; }
  .gm-welcome-status { animation-delay: 0.3s; }
  .gm-welcome-bar { animation-delay: 0.35s; }
  .gm-welcome-bar > span {
    animation: none;
    opacity: 0.55;
    transform: translateX(-100%);
  }
}
@keyframes gm-welcome-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}