/* KDI Employee Portal cinematic transition - stable add-on */
#kdi-portal-transition {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 46%, rgba(163, 20, 36, 0.24), transparent 20%),
    radial-gradient(circle at 50% 50%, rgba(57, 91, 156, 0.18), transparent 34%),
    rgba(5, 8, 13, 0.92);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 260ms ease, visibility 0s linear 260ms;
  z-index: 9999;
  overflow: hidden;
}
#kdi-portal-transition.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 260ms ease;
}
#kdi-portal-transition::before,
#kdi-portal-transition::after {
  content: "";
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at center, rgba(0,0,0,0.95), transparent 70%);
}
#kdi-portal-transition::after {
  inset: auto 8% 10% 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
  opacity: .45;
  mask-image: none;
}
.kdi-portal-core {
  position: relative;
  width: min(90vw, 540px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.kdi-portal-ring,
.kdi-portal-ring::before,
.kdi-portal-ring::after {
  position: absolute;
  border-radius: 50%;
}
.kdi-portal-ring {
  inset: 8%;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 0 40px rgba(53, 117, 255, 0.13), inset 0 0 40px rgba(181,18,35,0.08);
  animation: kdiPulse 2.2s ease-in-out infinite;
}
.kdi-portal-ring::before {
  content: "";
  inset: 10%;
  border: 1px solid rgba(255,255,255,0.08);
  animation: kdiSpin 12s linear infinite;
}
.kdi-portal-ring::after {
  content: "";
  inset: 21%;
  border: 1px dashed rgba(125, 183, 255, 0.28);
  animation: kdiSpinReverse 10s linear infinite;
}
.kdi-portal-glow {
  position: absolute;
  width: 58%;
  height: 58%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,0.35) 0%, rgba(113,167,255,0.24) 20%, rgba(181,18,35,0.22) 45%, transparent 72%);
  filter: blur(24px);
  animation: kdiGlow 1.9s ease-in-out infinite alternate;
}
.kdi-portal-bladeshine {
  position: absolute;
  inset: 16% 30%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.13), transparent);
  filter: blur(20px);
  transform: rotate(9deg);
}
.kdi-portal-svg {
  position: relative;
  width: 64%;
  filter: drop-shadow(0 0 12px rgba(255,255,255,0.18)) drop-shadow(0 0 28px rgba(96,154,255,0.18)) drop-shadow(0 0 30px rgba(181,18,35,0.2));
  animation: kdiSwordRise .95s cubic-bezier(.2,.9,.2,1) both;
}
.kdi-portal-svg .lightning {
  stroke-dasharray: 10 10;
  animation: kdiLightning .9s linear infinite;
}
.kdi-portal-svg .arc2 { animation-delay: .24s; }
.kdi-portal-svg .arc3 { animation-delay: .12s; }
.kdi-portal-copy {
  position: absolute;
  left: 50%;
  bottom: -8%;
  width: max-content;
  max-width: 88vw;
  transform: translateX(-50%);
  text-align: center;
}
.kdi-portal-copy strong {
  display: block;
  color: #f7f8fc;
  text-transform: uppercase;
  letter-spacing: .34em;
  font-size: clamp(.76rem, 1.2vw, .94rem);
}
.kdi-portal-copy span {
  display: block;
  margin-top: 10px;
  color: rgba(226,231,240,.78);
  font-size: clamp(.86rem, 1.4vw, 1rem);
  letter-spacing: .08em;
}
.kdi-portal-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,.6), transparent 28%);
  mix-blend-mode: screen;
  opacity: 0;
}
#kdi-portal-transition.active .kdi-portal-flash {
  animation: kdiFlash .9s ease-out both;
}
@keyframes kdiPulse {
  0%,100% { transform: scale(.98); opacity: .75; }
  50% { transform: scale(1.02); opacity: 1; }
}
@keyframes kdiGlow {
  from { transform: scale(.95); opacity: .78; }
  to { transform: scale(1.08); opacity: 1; }
}
@keyframes kdiSpin { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }
@keyframes kdiSpinReverse { from { transform: rotate(360deg);} to { transform: rotate(0deg);} }
@keyframes kdiSwordRise {
  0% { transform: translateY(24px) scale(.88); opacity: 0; }
  60% { transform: translateY(-4px) scale(1.03); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes kdiLightning {
  0% { opacity: 0; stroke-dashoffset: 30; }
  30% { opacity: .95; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}
@keyframes kdiFlash {
  0% { opacity: 0; transform: scale(.6); }
  18% { opacity: .55; }
  100% { opacity: 0; transform: scale(1.25); }
}
@media (max-width: 640px) {
  .kdi-portal-core { width: min(92vw, 430px); }
  .kdi-portal-copy { bottom: -14%; }
  .kdi-portal-copy strong { letter-spacing: .22em; }
}