/*
 * The card's stages come from data-phase on .card: entry, grid, merge, verified.
 * Everything visual here keys off that one attribute.
 */

:root {
  --ink: #f2f7fc;
  --ink-soft: rgb(214 228 242 / 68%);
  --blue: #7cc8ff;
  --blue-deep: #2f9dea;
  --green: #5dea8f;
  --spring: cubic-bezier(0.3, 1.45, 0.5, 1);
}

.stage {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
}

.scene {
  position: absolute;
  top: 260px;
  left: 0;
  width: 1080px;
  height: 1400px;
  overflow: hidden;
  background: #04070c url('scene.svg') center / cover;
}

.scene.no-anim,
.scene.no-anim *,
.scene.no-anim *::before,
.scene.no-anim *::after {
  transition: none !important;
  animation: none !important;
}

/* Fades the scene edges into the black bars above and below it. */
.scene::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #000, transparent 5%, transparent 95%, #000);
  pointer-events: none;
}

.card {
  position: absolute;
  top: 210px;
  left: 100px;
  width: 880px;
  height: 980px;
  color: var(--ink);
  transform-origin: 50% 60%;
  will-change: transform;
}

/* One per shape, each clipped by OtpCard, so the blur stops at the glass edge. */
.glass {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 560px at 72% 34%, rgb(47 157 234 / 26%), transparent 72%),
    linear-gradient(155deg, rgb(120 170 215 / 20%), rgb(10 22 38 / 62%) 46%, rgb(6 14 26 / 72%));
  backdrop-filter: blur(26px) saturate(1.35);
}

.outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.outline__edge {
  fill: none;
  stroke: rgb(186 224 255 / 44%);
  stroke-width: 2.5;
}

.outline__sheen {
  fill: none;
  stroke: #fff;
  stroke-dasharray: 15 85;
  stroke-linecap: round;
  stroke-width: 5;
  opacity: 0;
  filter: drop-shadow(0 0 12px rgb(150 215 255 / 90%));
  transition: stroke 500ms ease;
}

.card[data-phase='verified'] .outline__sheen {
  stroke: #bdf7d2;
}

/* The icon tile */

.tile {
  position: absolute;
  top: 74px;
  left: 392px;
  width: 96px;
  height: 96px;
  border: 2px solid rgb(186 224 255 / 28%);
  border-radius: 26px;
  background: rgb(150 200 240 / 12%);
  transition: border-color 400ms ease, background-color 400ms ease;
}

.tile__icon {
  position: absolute;
  inset: 26px;
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
  transition: opacity 280ms ease, scale 460ms var(--spring);
}

.tile__icon--shield {
  stroke: var(--green);
  opacity: 0;
  scale: 0.6;
}

.card[data-phase='merge'] .tile__icon--phone,
.card[data-phase='verified'] .tile__icon--phone {
  opacity: 0;
  scale: 0.6;
}

.card[data-phase='verified'] .tile {
  border-color: rgb(93 234 143 / 45%);
  background: rgb(93 234 143 / 12%);
}

.card[data-phase='verified'] .tile__icon--shield {
  opacity: 1;
  scale: 1;
}

/* The words: two copies stacked, one fades in as the other fades out. */

.copy-stack {
  position: absolute;
  top: 204px;
  left: 60px;
  width: 760px;
  height: 180px;
}

.copy {
  position: absolute;
  inset: 0;
  text-align: center;
  transition: opacity 320ms ease, translate 460ms ease;
}

.copy__heading {
  margin: 0 0 22px;
  font-size: 66px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.copy__body {
  margin: 0;
  color: var(--ink-soft);
  font-size: 30px;
  line-height: 1.4;
}

.copy--entry .copy__accent {
  background: linear-gradient(95deg, var(--blue), #d4edff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.copy--done .copy__accent {
  color: var(--green);
}

.copy--done {
  opacity: 0;
  translate: 0 14px;
}

.card[data-phase='merge'] .copy--entry,
.card[data-phase='verified'] .copy--entry {
  opacity: 0;
  translate: 0 -14px;
}

.card[data-phase='verified'] .copy--done {
  opacity: 1;
  translate: 0 0;
}

/* The digit boxes. Their center is BURST_ORIGIN in otp-scene.js. */

.otp {
  position: absolute;
  top: 590px;
  left: 440px;
  width: 0;
  height: 0;
}

.wires {
  position: absolute;
  top: -200px;
  left: -300px;
  width: 600px;
  height: 400px;
  overflow: visible;
  pointer-events: none;
}

.wire {
  stroke: var(--blue);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-width: 5;
  opacity: 0;
  filter: drop-shadow(0 0 7px rgb(124 200 255 / 85%));
}

.wire.is-lit {
  stroke-dashoffset: 0;
  opacity: 1;
  transition: stroke-dashoffset 300ms ease-out, opacity 80ms linear;
}

.card[data-phase='merge'] .wire,
.card[data-phase='verified'] .wire {
  transition: opacity 160ms ease;
}

.box {
  position: absolute;
  top: -62px;
  left: -62px;
  display: grid;
  place-items: center;
  width: 124px;
  height: 124px;
  padding: 0;
  border: 2.5px solid rgb(186 224 255 / 24%);
  border-radius: 26px;
  background: linear-gradient(160deg, rgb(26 48 74 / 82%), rgb(10 20 36 / 88%));
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 7%);
  color: var(--ink);
  font: inherit;
  font-size: 58px;
  font-weight: 700;
  cursor: text;
  translate: var(--x) var(--y);
  transition:
    translate 640ms var(--spring) calc(var(--i) * 45ms),
    scale 360ms ease,
    opacity 300ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.box.is-filled {
  border-color: rgb(186 224 255 / 44%);
}

.box.is-active {
  border-color: var(--blue);
  box-shadow:
    0 0 0 6px rgb(47 157 234 / 22%),
    0 0 34px rgb(47 157 234 / 60%);
}

.box.is-wired {
  border-color: var(--blue);
  box-shadow: 0 0 22px rgb(47 157 234 / 44%);
}

.box__digit,
.box__caret {
  grid-area: 1 / 1;
}

.box.is-filled .box__digit {
  animation: digit-pop 300ms var(--spring);
}

.box__caret {
  display: none;
  width: 4px;
  height: 58px;
  border-radius: 2px;
  background: var(--blue);
  animation: caret-blink 1s steps(1) infinite;
}

.box.is-active .box__caret {
  display: block;
}

.card[data-phase='merge'] .box,
.card[data-phase='verified'] .box {
  opacity: 0;
  scale: 0.72;
  pointer-events: none;
  transition:
    translate 460ms cubic-bezier(0.55, 0, 0.35, 1),
    scale 460ms cubic-bezier(0.55, 0, 0.35, 1),
    opacity 240ms ease 240ms;
}

@keyframes digit-pop {
  from {
    opacity: 0;
    scale: 0.4;
    translate: 0 16px;
  }
}

@keyframes caret-blink {
  50% {
    opacity: 0;
  }
}

/* The tile the boxes merge into. */

.success {
  position: absolute;
  top: -80px;
  left: -80px;
  display: grid;
  place-items: center;
  width: 160px;
  height: 160px;
  border: 3px solid var(--green);
  border-radius: 40px;
  background: linear-gradient(160deg, rgb(32 96 62 / 90%), rgb(10 44 28 / 92%));
  box-shadow: 0 0 60px rgb(93 234 143 / 50%);
  opacity: 0;
  scale: 0.3;
  pointer-events: none;
  transition: opacity 240ms ease, scale 240ms ease;
}

.card[data-phase='verified'] .success {
  opacity: 1;
  scale: 1;
  transition: opacity 120ms ease, scale 620ms cubic-bezier(0.25, 1.9, 0.45, 1);
}

.success__check {
  width: 92px;
  height: 92px;
  fill: none;
  stroke: #fff;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.card[data-phase='verified'] .success__check {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 360ms ease-out 180ms;
}

/* The line at the bottom of the card. */

.foot {
  position: absolute;
  top: 836px;
  left: 0;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  color: var(--ink-soft);
  font-size: 30px;
  transition: opacity 280ms ease, translate 420ms ease;
}

.foot__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.foot--badge {
  color: var(--green);
  font-weight: 600;
  opacity: 0;
  translate: 0 12px;
  pointer-events: none;
}

.foot__lock {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.card:not([data-phase='entry']) .foot--prompt {
  opacity: 0;
  pointer-events: none;
}

.card[data-phase='verified'] .foot--badge {
  opacity: 1;
  translate: 0 0;
  transition-delay: 160ms;
}

.confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}