/* PFM — Welcome screen (post-login modal). Token-only, dark-mode safe. */

.wlc-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-tooltip);
  background: color-mix(in srgb, #000 65%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  padding: var(--sp-4, 16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out, cubic-bezier(0.32, 0.72, 0, 1));
}
.wlc-overlay.is-open    { opacity: 1; pointer-events: auto; }
.wlc-overlay.is-closing { opacity: 0; }

.wlc-card {
  background: var(--color-card-bg, #fff);
  color: var(--color-text-primary, #181a1b);
  border-radius: 20px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.35),
    0 0 0 1px var(--color-border, #e3e6e8);
  padding: 36px 32px 28px;
  max-width: 520px;
  width: 100%;
  text-align: center;
  position: relative;
  transform: scale(0.96);
  opacity: 0;
  transition:
    transform 0.45s var(--ease-out, cubic-bezier(0.32, 0.72, 0, 1)),
    opacity 0.35s ease;
}
.wlc-overlay.is-open .wlc-card {
  transform: scale(1);
  opacity: 1;
}

/* ─── Animation variants — each plays during the .is-open transition ─── */

/* Fade — default; just opacity (already on overlay + card) */
.wlc-anim-fade .wlc-card { transform: none; }

/* Slide-up — card rises into view */
.wlc-anim-slide-up .wlc-card { transform: translateY(40px); }
.wlc-anim-slide-up.is-open .wlc-card { transform: translateY(0); }

/* Scale — pops in from a smaller size */
.wlc-anim-scale .wlc-card { transform: scale(0.85); }
.wlc-anim-scale.is-open .wlc-card { transform: scale(1); }

/* Flip — rotates in on the X axis */
.wlc-anim-flip .wlc-card {
  transform: perspective(800px) rotateX(-12deg) translateY(20px);
  transform-origin: center top;
}
.wlc-anim-flip.is-open .wlc-card {
  transform: perspective(800px) rotateX(0) translateY(0);
}

/* ─── Card content ─── */

.wlc-image {
  display: block;
  margin: 0 auto 20px;
  max-width: 200px;
  max-height: 180px;
  object-fit: contain;
}

.wlc-title {
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 12px;
  line-height: 1.25;
  background: linear-gradient(135deg,
    var(--color-primary, #014940),
    var(--color-accent, #d2a771));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.wlc-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text-muted, #5A6B6E);
  margin: 0 0 24px;
}

.wlc-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.wlc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  font-family: inherit;
}
.wlc-btn-primary {
  background: var(--color-primary, #014940);
  color: #fff;
  box-shadow: 0 4px 14px rgba(1, 73, 64, 0.28);
}
.wlc-btn-primary:hover {
  background: color-mix(in srgb, var(--color-primary, #014940) 88%, black);
  transform: translateY(-1px);
}
.wlc-btn-ghost {
  background: transparent;
  color: var(--color-text-muted, #5A6B6E);
  border-color: var(--color-border, #e3e6e8);
}
.wlc-btn-ghost:hover {
  background: var(--color-bg, #f7f8f9);
  color: var(--color-text-primary, #181a1b);
}

.wlc-close {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  color: var(--color-text-muted, #5A6B6E);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.wlc-close:hover {
  background: var(--color-bg, #f7f8f9);
  color: var(--color-text-primary, #181a1b);
}

/* ─── Dark mode ─── */
[data-theme="dark"] .wlc-card,
html.dark .wlc-card {
  background: #181d1f;
  color: #e6e8e9;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 0 0 1px #2a2f31;
}
[data-theme="dark"] .wlc-body,
html.dark .wlc-body { color: #9aa0a6; }
[data-theme="dark"] .wlc-btn-ghost,
html.dark .wlc-btn-ghost { border-color: #2a2f31; }
[data-theme="dark"] .wlc-btn-ghost:hover,
html.dark .wlc-btn-ghost:hover { background: #2a2f31; color: #e6e8e9; }
[data-theme="dark"] .wlc-close,
html.dark .wlc-close { color: #9aa0a6; }
[data-theme="dark"] .wlc-close:hover,
html.dark .wlc-close:hover { background: #2a2f31; color: #e6e8e9; }

/* ─── Mobile ─── */
@media (max-width: 540px) {
  .wlc-card { padding: 28px 20px 20px; border-radius: 16px; }
  .wlc-title { font-size: 22px; }
  .wlc-body { font-size: 14px; }
  .wlc-image { max-width: 140px; max-height: 120px; }
}

/* ─── Reduced motion preference ─── */
@media (prefers-reduced-motion: reduce) {
  .wlc-overlay, .wlc-card { transition: opacity 0.2s ease !important; }
  .wlc-anim-slide-up .wlc-card,
  .wlc-anim-scale .wlc-card,
  .wlc-anim-flip .wlc-card { transform: none !important; }
}

/* ─── Hide on print ─── */
@media print {
  .wlc-overlay { display: none !important; }
}

/* ===========================================================================
   BorderGlow (React Bits port) — applied to the welcome card. Config is baked
   into inline CSS vars by welcome-screen.js: bg #042b24, borderRadius 0,
   glowRadius 46, glowIntensity 2.3, coneSpread 12, edgeSensitivity 68, animated
   intro sweep. Pointer-driven mesh border + outer glow near the edges.
   =========================================================================== */
.border-glow-card {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 30;
  --color-sensitivity: calc(var(--edge-sensitivity) + 20);
  --border-radius: 28px;
  --glow-padding: 40px;
  --cone-spread: 25;
  --fill-opacity: 0.5;
  position: relative;
  border-radius: var(--border-radius);
  isolation: isolate;
  transform: translate3d(0, 0, 0.01px);
  display: grid;
  border: 1px solid rgb(255 255 255 / 15%);
  background: var(--card-bg, #120f17);
  overflow: visible;
}
.border-glow-card::before,
.border-glow-card::after,
.border-glow-card > .edge-light {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity 0.25s ease-out;
  z-index: -1;
}
.border-glow-card:not(:hover):not(.sweep-active)::before,
.border-glow-card:not(:hover):not(.sweep-active)::after,
.border-glow-card:not(:hover):not(.sweep-active) > .edge-light {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}
/* colored mesh-gradient border */
.border-glow-card::before {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-bg, #120f17) 0 100%) padding-box,
    linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
    var(--gradient-one) border-box,
    var(--gradient-two) border-box,
    var(--gradient-three) border-box,
    var(--gradient-four) border-box,
    var(--gradient-five) border-box,
    var(--gradient-six) border-box,
    var(--gradient-seven) border-box,
    var(--gradient-base) border-box;
  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center,
      black calc(var(--cone-spread) * 1%),
      transparent calc((var(--cone-spread) + 15) * 1%),
      transparent calc((100 - var(--cone-spread) - 15) * 1%),
      black calc((100 - var(--cone-spread)) * 1%)
    );
}
/* colored mesh-gradient background fill near edges */
.border-glow-card::after {
  border: 1px solid transparent;
  background:
    var(--gradient-one) padding-box,
    var(--gradient-two) padding-box,
    var(--gradient-three) padding-box,
    var(--gradient-four) padding-box,
    var(--gradient-five) padding-box,
    var(--gradient-six) padding-box,
    var(--gradient-seven) padding-box,
    var(--gradient-base) padding-box;
  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
  mask-composite: subtract, add, add, add, add, add;
  opacity: calc(var(--fill-opacity, 0.5) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode: soft-light;
}
/* outer glow layer */
.border-glow-card > .edge-light {
  inset: calc(var(--glow-padding) * -1);
  pointer-events: none;
  z-index: 1;
  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%
    );
  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode: plus-lighter;
}
.border-glow-card > .edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color, hsl(40deg 80% 80% / 100%)),
    inset 0 0 1px 0 var(--glow-color-60, hsl(40deg 80% 80% / 60%)),
    inset 0 0 3px 0 var(--glow-color-50, hsl(40deg 80% 80% / 50%)),
    inset 0 0 6px 0 var(--glow-color-40, hsl(40deg 80% 80% / 40%)),
    inset 0 0 15px 0 var(--glow-color-30, hsl(40deg 80% 80% / 30%)),
    inset 0 0 25px 2px var(--glow-color-20, hsl(40deg 80% 80% / 20%)),
    inset 0 0 50px 2px var(--glow-color-10, hsl(40deg 80% 80% / 10%)),
    0 0 1px 0 var(--glow-color-60, hsl(40deg 80% 80% / 60%)),
    0 0 3px 0 var(--glow-color-50, hsl(40deg 80% 80% / 50%)),
    0 0 6px 0 var(--glow-color-40, hsl(40deg 80% 80% / 40%)),
    0 0 15px 0 var(--glow-color-30, hsl(40deg 80% 80% / 30%)),
    0 0 25px 2px var(--glow-color-20, hsl(40deg 80% 80% / 20%)),
    0 0 50px 2px var(--glow-color-10, hsl(40deg 80% 80% / 10%));
}
.border-glow-inner {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: auto;
  z-index: 1;
}

/* Welcome card <-> BorderGlow merge: keep the glow transform through the
   overlay entrance (opacity-only); light text on the dark #042b24 card. */
.wlc-card.border-glow-card { transform: translate3d(0, 0, 0.01px); }
.wlc-overlay.is-open .wlc-card.border-glow-card { transform: translate3d(0, 0, 0.01px); }
[data-theme="dark"] .wlc-card.border-glow-card,
html.dark .wlc-card.border-glow-card { background: var(--card-bg, #042b24); }
.wlc-card.border-glow-card .wlc-title {
  background: linear-gradient(135deg, #ffdca8, #ffffff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.wlc-card.border-glow-card .wlc-body { color: rgba(228, 238, 234, 0.82); }
.wlc-card.border-glow-card .wlc-close { color: rgba(255, 255, 255, 0.6); }
.wlc-card.border-glow-card .wlc-close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.wlc-card.border-glow-card .wlc-btn-ghost { color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.28); }
.wlc-card.border-glow-card .wlc-btn-ghost:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }