/* تأثيرات خفيفة للواجهة الأولى فقط */
@media (prefers-reduced-motion: no-preference) {
  .welcome-bg {
    background-size: 200% 200%;
    -webkit-animation: welcomeGrad 14s ease infinite;
    animation: welcomeGrad 14s ease infinite;
  }
  @-webkit-keyframes welcomeGrad {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  @keyframes welcomeGrad {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  .welcome-orb {
    -webkit-animation: orbFloat 8s ease-in-out infinite;
    animation: orbFloat 8s ease-in-out infinite;
  }
  .welcome-orb-2 {
    -webkit-animation-delay: -3s;
    animation-delay: -3s;
  }
  @-webkit-keyframes orbFloat {
    0%, 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
    50% { -webkit-transform: translate(12px, -10px); transform: translate(12px, -10px); }
  }
  @keyframes orbFloat {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(12px, -10px); }
  }
  .swipe-thumb {
    -webkit-animation: pulseThumb 2.2s ease-in-out infinite;
    animation: pulseThumb 2.2s ease-in-out infinite;
  }
  .swipe-thumb.is-dragging {
    -webkit-animation: none;
    animation: none;
  }
  @-webkit-keyframes pulseThumb {
    0%, 100% { box-shadow: 0 4px 16px rgba(109,40,217,0.5); }
    50% { box-shadow: 0 4px 22px rgba(109,40,217,0.85); }
  }
  @keyframes pulseThumb {
    0%, 100% { box-shadow: 0 4px 16px rgba(109,40,217,0.5); }
    50% { box-shadow: 0 4px 22px rgba(109,40,217,0.85); }
  }
  .welcome-title.is-typing .welcome-name {
    border-left: 2px solid #c4b5fd;
    -webkit-animation: caretBlink 0.9s step-end infinite;
    animation: caretBlink 0.9s step-end infinite;
  }
  @keyframes caretBlink {
    50% { border-color: transparent; }
  }
}
.welcome-progress {
  width: 100%;
  max-width: 300px;
  height: 4px;
  margin: 12px auto 0;
  background: #1a1f2a;
  border-radius: 999px;
  overflow: hidden;
}
.welcome-progress-fill {
  height: 100%;
  width: 0%;
  background: #7c4dff;
  border-radius: 999px;
  -webkit-transition: width 0.15s linear;
  transition: width 0.15s linear;
}
.welcome-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(196, 181, 253, 0.35);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .welcome-particle { display: none; }
}
/* ظهور تدريجي وتفاعل خفيف لبطاقات صفحة التعرف */
@media (prefers-reduced-motion: no-preference) {
  .fx-card {
    -webkit-transition: -webkit-transform 0.25s ease, opacity 0.5s ease;
    transition: transform 0.25s ease, opacity 0.5s ease;
  }
  .fx-reveal { opacity: 0; -webkit-transform: translateY(14px); transform: translateY(14px); }
  .fx-reveal.is-in { opacity: 1; -webkit-transform: none; transform: none; }
  .fx-card.is-in:hover, .fx-card.is-in:active {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
  }
}

/* Enhanced welcome — mesh, glass, tokens, staggered entrance */
.welcome-mesh {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(92, 45, 145, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(14, 116, 144, 0.22) 0%, transparent 50%),
    radial-gradient(ellipse 40% 50% at 50% 80%, rgba(109, 40, 217, 0.18) 0%, transparent 50%);
  pointer-events: none;
}
.welcome-orb-3 {
  width: 160px; height: 160px; background: #7c4dff;
  bottom: 20%; right: 10%; opacity: 0.12; filter: blur(40px);
}
.welcome-code-token {
  position: absolute;
  font-family: Consolas, Monaco, monospace;
  font-size: 13px; font-weight: 700;
  color: rgba(196, 181, 253, 0.22);
  pointer-events: none; user-select: none;
  -webkit-user-select: none;
}
.welcome-code-token.t1 { top: 12%; right: 8%; }
.welcome-code-token.t2 { top: 22%; left: 6%; }
.welcome-code-token.t3 { top: 55%; right: 12%; }
.welcome-code-token.t4 { bottom: 28%; left: 10%; }
.welcome-code-token.t5 { top: 40%; left: 18%; }
.welcome-code-token.t6 { bottom: 18%; right: 20%; }

.welcome-glass {
  background: rgba(18, 22, 30, 0.55);
  border: 1px solid rgba(124, 77, 255, 0.22);
  border-radius: 24px;
  padding: 28px 22px 24px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  -webkit-box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.03) inset;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.03) inset;
  max-width: 420px;
}

.vb-mark-box {
  -webkit-box-shadow: 0 0 0 0 rgba(124, 77, 255, 0.5), 0 8px 24px rgba(92, 45, 145, 0.45);
  box-shadow: 0 0 0 0 rgba(124, 77, 255, 0.5), 0 8px 24px rgba(92, 45, 145, 0.45);
}

.welcome-name {
  background: linear-gradient(90deg, #c4b5fd, #a78bfa, #7c4dff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.swipe-alt {
  display: inline-block !important;
  margin: 16px auto 0 !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  background: rgba(26, 31, 42, 0.7) !important;
  border: 1px solid #2a3140 !important;
  color: #c4b5fd !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  min-height: 40px;
}

.swipe-thumb {
  width: 52px !important; height: 52px !important;
}

@media (prefers-reduced-motion: no-preference) {
  .welcome-code-token {
    -webkit-animation: tokenFloat 10s ease-in-out infinite;
    animation: tokenFloat 10s ease-in-out infinite;
  }
  .welcome-code-token.t2 { animation-delay: -2s; }
  .welcome-code-token.t3 { animation-delay: -4s; }
  .welcome-code-token.t4 { animation-delay: -1s; }
  .welcome-code-token.t5 { animation-delay: -3s; }
  .welcome-code-token.t6 { animation-delay: -5s; }
  @-webkit-keyframes tokenFloat {
    0%, 100% { -webkit-transform: translateY(0); opacity: 0.2; }
    50% { -webkit-transform: translateY(-12px); opacity: 0.35; }
  }
  @keyframes tokenFloat {
    0%, 100% { transform: translateY(0); opacity: 0.2; }
    50% { transform: translateY(-12px); opacity: 0.35; }
  }
  .vb-mark-box {
    -webkit-animation: logoGlow 2.8s ease-in-out infinite, logoFloat 5s ease-in-out infinite;
    animation: logoGlow 2.8s ease-in-out infinite, logoFloat 5s ease-in-out infinite;
  }
  @-webkit-keyframes logoGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(124,77,255,0.35), 0 8px 24px rgba(92,45,145,0.4); }
    50% { box-shadow: 0 0 0 10px rgba(124,77,255,0), 0 8px 28px rgba(124,77,255,0.55); }
  }
  @keyframes logoGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(124,77,255,0.35), 0 8px 24px rgba(92,45,145,0.4); }
    50% { box-shadow: 0 0 0 10px rgba(124,77,255,0), 0 8px 28px rgba(124,77,255,0.55); }
  }
  @-webkit-keyframes logoFloat {
    0%, 100% { -webkit-transform: translateY(0); }
    50% { -webkit-transform: translateY(-6px); }
  }
  @keyframes logoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }
  .welcome-glass .vb-mark,
  .welcome-glass .welcome-title,
  .welcome-glass .welcome-lead,
  .welcome-glass .swipe {
    opacity: 0;
    -webkit-transform: translateY(16px);
    transform: translateY(16px);
    -webkit-animation: fadeUp 0.7s ease forwards;
    animation: fadeUp 0.7s ease forwards;
  }
  .welcome-glass .vb-mark { -webkit-animation-delay: 0.05s; animation-delay: 0.05s; }
  .welcome-glass .welcome-title { -webkit-animation-delay: 0.18s; animation-delay: 0.18s; }
  .welcome-glass .welcome-lead { -webkit-animation-delay: 0.32s; animation-delay: 0.32s; }
  .welcome-glass .swipe { -webkit-animation-delay: 0.45s; animation-delay: 0.45s; }
  @-webkit-keyframes fadeUp {
    to { opacity: 1; -webkit-transform: none; }
  }
  @keyframes fadeUp {
    to { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-code-token { -webkit-animation: none; animation: none; }
  .vb-mark-box { -webkit-animation: none; animation: none; }
}