/* ============================================================
   Cybersol — Inter-site transition overlay
   Used when moving between the IT Staffing site and the
   Healthcare Staffing site (cybersolit.com/healthcare).
   ============================================================ */

/* ---------- Highlighted "Healthcare Staffing" nav button ---------- */
.btn-health{
  background: linear-gradient(120deg, #14B87F, #0B7A54);
  color:#fff;
  position: relative;
}
.btn-health:hover{ background: linear-gradient(120deg, #0FA36D, #06603F); color:#fff; }
.btn-health::before{
  content:"";
  position:absolute; inset:-5px;
  border-radius:999px;
  border: 2px solid rgba(20,184,127,.55);
  animation: btn-health-pulse 2.2s ease-out infinite;
  pointer-events:none;
}
.btn-health svg{ width:16px; height:16px; flex:none; }

/* ---------- Highlighted "IT Staffing Division" nav button (used on the healthcare site) ---------- */
.btn-it{
  background: linear-gradient(120deg, #40B2D6, #376097);
  color:#fff;
  position: relative;
}
.btn-it:hover{ background: linear-gradient(120deg, #2E9CBE, #294A75); color:#fff; }
.btn-it::before{
  content:"";
  position:absolute; inset:-5px;
  border-radius:999px;
  border: 2px solid rgba(64,178,214,.55);
  animation: btn-health-pulse 2.2s ease-out infinite;
  pointer-events:none;
}
.btn-it svg{ width:16px; height:16px; flex:none; }

@keyframes btn-health-pulse{
  0%{ transform:scale(1); opacity:.85; }
  100%{ transform:scale(1.28); opacity:0; }
}

/* Mobile-menu copy of the button (hidden on desktop; nav-cta already shows it there) */
.nav-cross-item{ display:none; }
@media (max-width: 900px){
  .nav-cross-item{ display:block; margin: 6px 14px 4px; }
  .nav-cross-item a{
    display:inline-flex; align-items:center; gap:8px;
    justify-content:center; width:100%;
    padding: 12px 18px; border-radius:999px;
    font-weight:700; font-size:15px; color:#fff !important;
  }
}

/* ---------- Full-screen transition overlay ---------- */
.site-transition{
  position: fixed; inset: 0; z-index: 99999;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .35s ease;
  text-align:center; color:#fff; padding:24px;
}
.site-transition.active{ opacity:1; visibility:visible; pointer-events:all; }

.site-transition.theme-health{
  background: radial-gradient(circle at 50% 32%, #14B87F 0%, #0B7A54 48%, #06301F 100%);
}
.site-transition.theme-it{
  background: radial-gradient(circle at 50% 32%, #40B2D6 0%, #376097 48%, #16283F 100%);
}

.st-icon-wrap{
  position:relative; width:130px; height:130px; margin-bottom:26px;
  display:flex; align-items:center; justify-content:center;
}
.st-ring{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(255,255,255,.4);
  animation: st-ring-pulse 2s ease-out infinite;
}
.st-ring.st-ring-2{ animation-delay:.55s; }
.st-ring.st-ring-3{ animation-delay:1.1s; }
@keyframes st-ring-pulse{
  0%{ transform:scale(.55); opacity:.9; }
  100%{ transform:scale(1.55); opacity:0; }
}

.st-icon{
  width:66px; height:66px; position:relative; z-index:2;
  filter: drop-shadow(0 0 16px rgba(255,255,255,.6));
  display:none;
  animation: st-icon-beat 1.15s ease-in-out infinite;
}
.theme-health .st-icon-health{ display:block; }
.theme-it .st-icon-it{ display:block; }
@keyframes st-icon-beat{
  0%,100%{ transform:scale(1); }
  15%{ transform:scale(1.16); }
  30%{ transform:scale(.95); }
  45%{ transform:scale(1.08); }
  60%{ transform:scale(1); }
}

.st-ekg{ width:260px; max-width:78vw; height:42px; margin: 4px 0 22px; overflow:hidden; }
.st-ekg path{
  fill:none; stroke:#fff; stroke-width:2.5;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray: 340; stroke-dashoffset: 340;
  animation: st-ekg-draw 1.7s linear infinite;
  opacity:.9;
}
@keyframes st-ekg-draw{ to{ stroke-dashoffset:-340; } }

.st-title{ font-family:'Inter',Arial,sans-serif; font-size:22px; font-weight:800; margin:0 0 6px; }
.st-sub{ font-family:'Inter',Arial,sans-serif; font-size:14px; color:rgba(255,255,255,.88); margin:0 0 26px; max-width:360px; }

.st-progress{ width:220px; max-width:68vw; height:5px; border-radius:999px; background:rgba(255,255,255,.28); overflow:hidden; }
.st-progress-bar{ height:100%; width:0%; background:#fff; border-radius:999px; }
.site-transition.active .st-progress-bar{ animation: st-progress-fill 5s linear forwards; }
@keyframes st-progress-fill{ from{ width:0%; } to{ width:100%; } }