/* SMAIS Reserve - Discord verification micro-interactions v9 */
.flow-entry-page .discord-step {
  position: relative;
  isolation: isolate;
}

.flow-entry-page .discord-step::after {
  content: "";
  position: absolute;
  inset: 8% 5%;
  z-index: -1;
  border-radius: 34px;
  background: radial-gradient(circle at 50% 48%, rgba(88,101,242,.16), transparent 58%);
  opacity: 0;
  transform: scale(.92);
  pointer-events: none;
  transition: opacity .35s ease, transform .5s cubic-bezier(.2,.8,.2,1), background .35s ease;
}

.flow-entry-page .discord-step.is-verifying::after {
  opacity: 1;
  transform: scale(1);
  animation: discord-ambient-breathe 1.45s ease-in-out infinite;
}

.flow-entry-page .discord-step.is-confirmed::after {
  opacity: 1;
  transform: scale(1.025);
  background: radial-gradient(circle at 50% 48%, rgba(87,214,148,.19), transparent 58%);
}

.flow-entry-page [data-discord-next] {
  position: relative;
  overflow: hidden;
  min-height: 56px;
  transform: translateZ(0);
}

.flow-entry-page [data-discord-next]::before {
  content: "";
  position: absolute;
  top: -80%;
  bottom: -80%;
  left: -45%;
  width: 30%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.23), transparent);
  opacity: 0;
  pointer-events: none;
}

.flow-entry-page [data-discord-next].is-loading::before {
  opacity: 1;
  animation: discord-button-sheen 1.5s ease-in-out infinite;
}

.flow-entry-page [data-discord-next].is-loading {
  cursor: progress;
  box-shadow: 0 12px 32px rgba(88,101,242,.22), inset 0 0 0 1px rgba(255,255,255,.08);
}

.flow-entry-page [data-discord-next].is-success {
  background: linear-gradient(135deg,#36c885,#67dfa7);
  color: #06150e;
  box-shadow: 0 15px 38px rgba(54,200,133,.28), 0 0 0 1px rgba(135,242,186,.22);
  animation: discord-button-success .48s cubic-bezier(.2,1.5,.4,1) both;
}

.flow-entry-page .discord-button-spinner {
  position: relative;
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  border: 2px solid rgba(255,255,255,.23);
  border-top-color: #fff;
  border-radius: 50%;
  animation: discord-spin .72s linear infinite;
}

.flow-entry-page .discord-button-spinner i {
  position: absolute;
  width: 5px;
  height: 5px;
  top: -3px;
  left: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px rgba(255,255,255,.8);
}

.flow-entry-page .discord-button-dots {
  display: inline-flex;
  gap: 3px;
  align-items: end;
  height: 12px;
}
.flow-entry-page .discord-button-dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .35;
  animation: discord-dot 1s ease-in-out infinite;
}
.flow-entry-page .discord-button-dots i:nth-child(2) { animation-delay: .13s; }
.flow-entry-page .discord-button-dots i:nth-child(3) { animation-delay: .26s; }

.flow-entry-page .discord-success-check {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border-radius: 50%;
  background: rgba(5,38,24,.14);
  animation: discord-check-pop .45s cubic-bezier(.2,1.55,.4,1) both;
}
.flow-entry-page .discord-success-check svg {
  width: 17px;
  height: 17px;
  overflow: visible;
}
.flow-entry-page .discord-success-check path,
.flow-entry-page .discord-success-badge path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: discord-check-draw .42s .12s ease-out forwards;
}

.flow-entry-page .discord-result-card.is-checking,
.flow-entry-page .discord-result-card.is-success {
  position: relative;
  overflow: hidden;
}

.flow-entry-page .discord-result-card.is-checking {
  border-color: rgba(114,129,255,.26);
  background: linear-gradient(135deg,rgba(88,101,242,.10),rgba(255,255,255,.025));
  box-shadow: 0 18px 50px rgba(0,0,0,.12), inset 0 1px rgba(255,255,255,.025);
  animation: discord-card-in .36s cubic-bezier(.2,.9,.25,1) both;
}

.flow-entry-page .discord-result-card.is-checking::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -45%;
  width: 42%;
  background: linear-gradient(90deg,transparent,rgba(123,138,255,.09),transparent);
  transform: skewX(-12deg);
  animation: discord-scan 1.35s ease-in-out infinite;
}

.flow-entry-page .discord-verify-orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid rgba(133,145,255,.2);
  border-radius: 50%;
  background: radial-gradient(circle,rgba(88,101,242,.19),rgba(88,101,242,.04) 58%,transparent 60%);
  box-shadow: 0 0 26px rgba(88,101,242,.12);
}
.flow-entry-page .discord-verify-orbit::before {
  content: "D";
  font-size: .78rem;
  font-weight: 950;
  color: #c8ceff;
}
.flow-entry-page .discord-verify-orbit i {
  position: absolute;
  inset: -4px;
  border: 1.5px solid transparent;
  border-top-color: #8290ff;
  border-radius: 50%;
  animation: discord-spin 1s linear infinite;
}
.flow-entry-page .discord-verify-orbit i:nth-child(2) {
  inset: 3px;
  border-top-color: transparent;
  border-right-color: rgba(151,160,255,.65);
  animation-duration: 1.35s;
  animation-direction: reverse;
}

.flow-entry-page .discord-result-copy { position: relative; min-width: 0; width: 100%; }
.flow-entry-page .discord-scan-line {
  display: block;
  width: min(210px,70%);
  height: 3px;
  margin-top: 11px;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
}
.flow-entry-page .discord-scan-line::after {
  content: "";
  display: block;
  width: 44%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,#6f7cff,#a5aeff);
  box-shadow: 0 0 12px rgba(126,140,255,.45);
  animation: discord-progress 1.05s ease-in-out infinite alternate;
}

.flow-entry-page .discord-result-card.is-success.is-celebrating {
  border-color: rgba(95,222,156,.34);
  background: linear-gradient(135deg,rgba(44,171,110,.13),rgba(255,255,255,.025));
  box-shadow: 0 20px 54px rgba(31,177,104,.13), inset 0 1px rgba(255,255,255,.04);
  animation: discord-success-card .55s cubic-bezier(.2,1.25,.3,1) both;
}

.flow-entry-page .discord-success-badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  color: #b9ffd9;
  background: radial-gradient(circle at 45% 35%,#35ce88,#168b59 72%);
  box-shadow: 0 0 0 6px rgba(74,216,145,.08), 0 0 30px rgba(74,216,145,.20);
  animation: discord-badge-pop .48s cubic-bezier(.15,1.55,.35,1) both;
}
.flow-entry-page .discord-success-badge svg { width: 25px; height: 25px; }
.flow-entry-page .discord-success-badge i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #77e8ae;
  box-shadow: 0 0 9px rgba(119,232,174,.8);
  animation: discord-spark .7s ease-out both;
}
.flow-entry-page .discord-success-badge i:nth-of-type(1) { --x: -25px; --y: -18px; }
.flow-entry-page .discord-success-badge i:nth-of-type(2) { --x: 27px; --y: -12px; animation-delay:.05s; }
.flow-entry-page .discord-success-badge i:nth-of-type(3) { --x: 20px; --y: 24px; animation-delay:.10s; }

.flow-entry-page .discord-success-caption {
  display: inline-flex;
  margin-top: 9px;
  padding: 5px 9px;
  border: 1px solid rgba(114,231,169,.16);
  border-radius: 999px;
  color: #93e9bb;
  background: rgba(75,206,140,.07);
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .06em;
  animation: discord-caption-in .36s .2s ease-out both;
}

.flow-entry-page .input-state.loading {
  color: #8f9aff;
  background: rgba(105,119,255,.10);
  animation: discord-input-state-pulse 1s ease-in-out infinite;
}
.flow-entry-page .input-state.ok {
  animation: discord-check-pop .42s cubic-bezier(.2,1.5,.4,1) both;
}

@keyframes discord-spin { to { transform: rotate(360deg); } }
@keyframes discord-dot { 0%,80%,100%{ transform:translateY(0); opacity:.3 } 40%{ transform:translateY(-4px); opacity:1 } }
@keyframes discord-button-sheen { 0%{ left:-45% } 70%,100%{ left:120% } }
@keyframes discord-button-success { 0%{ transform:scale(.97) } 65%{ transform:scale(1.025) } 100%{ transform:scale(1) } }
@keyframes discord-card-in { from{ opacity:0; transform:translateY(8px) scale(.99) } to{ opacity:1; transform:none } }
@keyframes discord-scan { 0%{ left:-45% } 60%,100%{ left:120% } }
@keyframes discord-progress { from{ transform:translateX(-8%) } to{ transform:translateX(135%) } }
@keyframes discord-success-card { 0%{ opacity:.5; transform:scale(.985) } 70%{ transform:scale(1.008) } 100%{ opacity:1; transform:scale(1) } }
@keyframes discord-badge-pop { from{ opacity:0; transform:scale(.45) rotate(-18deg) } to{ opacity:1; transform:scale(1) rotate(0) } }
@keyframes discord-check-draw { to{ stroke-dashoffset:0 } }
@keyframes discord-check-pop { from{ opacity:0; transform:scale(.55) } to{ opacity:1; transform:scale(1) } }
@keyframes discord-spark { from{ opacity:1; transform:translate(0,0) scale(1) } to{ opacity:0; transform:translate(var(--x),var(--y)) scale(.2) } }
@keyframes discord-caption-in { from{ opacity:0; transform:translateY(5px) } to{ opacity:1; transform:none } }
@keyframes discord-input-state-pulse { 50%{ box-shadow:0 0 0 7px rgba(105,119,255,.05) } }
@keyframes discord-ambient-breathe { 50%{ opacity:.65; transform:scale(1.018) } }

@media (max-width: 680px) {
  .flow-entry-page .discord-result-card { gap: 13px; }
  .flow-entry-page .discord-verify-orbit,
  .flow-entry-page .discord-success-badge { width: 40px; height: 40px; flex-basis: 40px; }
  .flow-entry-page [data-discord-next] { min-height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-entry-page .discord-step::after,
  .flow-entry-page [data-discord-next],
  .flow-entry-page [data-discord-next]::before,
  .flow-entry-page .discord-button-spinner,
  .flow-entry-page .discord-button-dots i,
  .flow-entry-page .discord-result-card,
  .flow-entry-page .discord-result-card::after,
  .flow-entry-page .discord-verify-orbit i,
  .flow-entry-page .discord-scan-line::after,
  .flow-entry-page .discord-success-badge,
  .flow-entry-page .discord-success-badge i,
  .flow-entry-page .discord-success-caption,
  .flow-entry-page .input-state { animation: none !important; transition: none !important; }
}