/* ============================================================
   KeyPedia handoff card (GKSC2-1994)
   Copied verbatim from the sister site's css/gks-overrides.css (.gks-rd-*),
   so every KeyPedia site shows the same "Taking you to KeyPedia" transition.
   Do not restyle: keep it identical across sites.
   ============================================================ */
:root {
  --gks-purple-ice: #F1F1FC;
}

.gks-rd-overlay {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
/* The real KeyPedia page loads in behind the card (an iframe). If KeyPedia
   allows framing by this site it shows through; if it is blocked, the
   backdrop is transparent so the current page itself stays visible
   (dimmed by the scrim), never a flat or random color. */
.gks-rd-bg { position: absolute; inset: 0; background: transparent; opacity: 0; transition: opacity 0.6s ease; }
.gks-rd-overlay.is-active .gks-rd-bg { opacity: 1; }
.gks-rd-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }
.gks-rd-scrim { position: absolute; inset: 0; background: rgba(15, 18, 32, 0.42); cursor: pointer; }

.gks-rd-card {
  position: relative; z-index: 1;
  background: #fff; border-radius: 20px; max-width: 400px; width: 100%;
  padding: 34px 30px 26px; text-align: center; font-family: inherit;
  box-shadow: 0 30px 70px rgba(16, 15, 30, 0.42);
  transform: translateY(14px) scale(0.98); opacity: 0;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), opacity 0.4s ease;
}
.gks-rd-overlay.is-active .gks-rd-card { transform: none; opacity: 1; }

.gks-rd-ring { position: relative; width: 96px; height: 96px; margin: 4px auto 20px; }
.gks-rd-prog { width: 100%; height: 100%; transform: rotate(-90deg); }
.gks-rd-prog .trk { fill: none; stroke: var(--gks-purple-ice); stroke-width: 6; }
.gks-rd-prog .bar {
  fill: none; stroke: #2166e8; stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 283; stroke-dashoffset: 283; transition: stroke 0.3s ease;
}
.gks-rd-overlay.is-active .gks-rd-prog .bar {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--rd-dur, 7000ms) linear, stroke 0.3s ease;
}
.gks-rd-overlay.is-done .gks-rd-prog .bar { stroke: #249c3d; transition: none; }
.gks-rd-icon {
  position: absolute; top: 50%; left: 50%; width: 42px; height: 42px;
  transform: translate(-50%,-50%); transition: opacity 0.25s ease, transform 0.25s ease;
}
.gks-rd-overlay.is-done .gks-rd-icon { opacity: 0; transform: translate(-50%,-50%) scale(0.6); }
.gks-rd-check {
  position: absolute; top: 50%; left: 50%; width: 46px; height: 46px;
  transform: translate(-50%,-50%) scale(0.7); opacity: 0;
  transition: opacity 0.25s ease 0.1s, transform 0.35s cubic-bezier(0.22,1,0.36,1) 0.1s;
}
.gks-rd-check path {
  fill: none; stroke: #249c3d; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset 0.4s ease 0.15s;
}
.gks-rd-overlay.is-done .gks-rd-check { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.gks-rd-overlay.is-done .gks-rd-check path { stroke-dashoffset: 0; }

.gks-rd-title { font-size: 22px; font-weight: 700; color: #0f1220; margin: 0 0 8px; letter-spacing: -0.01em; }
.gks-rd-text { font-size: 14.5px; line-height: 1.5; color: #0f1220; margin: 0 0 22px; }
.gks-rd-cta {
  display: block; width: 100%; background: #2166e8; color: #fff !important;
  font-size: 16px; font-weight: 600; padding: 13px 20px; border-radius: 999px;
  text-decoration: none; transition: background 0.15s ease;
}
.gks-rd-cta:hover { background: #1751c4; color: #fff !important; }
.gks-rd-back {
  display: block; width: 100%; margin-top: 12px; background: transparent; border: 0;
  cursor: pointer; color: #33333f; font-size: 14px; font-weight: 600; font-family: inherit;
}
.gks-rd-back:hover { color: #0f1220; text-decoration: underline; }
.gks-rd-close {
  position: absolute; top: 12px; right: 14px; background: transparent; border: 0;
  cursor: pointer; font-size: 24px; line-height: 1; color: #6f6d85;
}
.gks-rd-close:hover { color: #55535f; }
@media (prefers-reduced-motion: reduce) {
  .gks-rd-bg, .gks-rd-card, .gks-rd-prog .bar, .gks-rd-icon, .gks-rd-check { transition: none !important; }
}