/* ============================================================================
   VioVerse — Payment Confirmation Card
   ----------------------------------------------------------------------------
   Replaces the simple #unlock-confirmation green-check overlay (deleted in
   the same commit). Sized to match the projected production Stripe Elements
   footprint with Apple Pay + Google Pay rendered (verified domain + HTTPS):

     desktop  480 × 810 px
     mobile   351 × 750 px

   Locally today (HTTP, no domain) Stripe Elements is ~480 × 712 / 351 × 654.
   Targeting the larger production ceiling means a slightly oversized card
   in local dev — accepted tradeoff for a clean visual handoff once Apple +
   Google Pay surface in production. Step 4 sign-off, 2026-04-25.

   Locked design timing constants (size-independent) carried over from the
   prior dormant build:
     file-icon stroke draw   360 ms
     checkmark stroke draw   280 ms
     hold-on-screen          ~800 ms
     total visible           ~1860 ms
   ============================================================================ */

.unlock-confirmation {
  position: fixed;
  inset: 0;
  /* Sit above sticky `.nav` (z-index 100) so the celebratory backdrop
     covers the navbar instead of letting it punch through the dim. One
     above .payment-elements-modal (500) so any overlap during the
     closeModal -> showPaymentConfirmation handoff stacks predictably. */
  z-index: 510;
  display: grid;
  place-items: center;
  pointer-events: none;
}

/* Backdrop. Uses the shared --backdrop-scrim (75% bone-cream, no blur)
   so this confirmation overlay, the Stripe Elements modal, and the navbar
   vault all dim the page the same way. The handoff from Elements to
   confirmation has zero brightness step because both pull the same token. */
.unlock-confirmation-backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop-scrim);
  opacity: 0;
  transition: opacity 220ms ease-out;
}

/* Card. Matches projected production Elements footprint at each breakpoint.
   The 1px navy-alpha shadow ring is via box-shadow (not border) so the
   rendered size stays exactly the spec'd width × height. */
.unlock-confirmation-inner {
  position: relative;
  background: #fbf8f1;
  width: 480px;
  height: 810px;
  padding: 0;
  border-radius: 14px;
  box-shadow:
    0 2px 6px rgba(10, 14, 20, 0.066),
    0 30px 80px rgba(10, 14, 20, 0.22),
    0 0 0 1px rgba(30, 42, 53, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition:
    opacity 360ms cubic-bezier(.2, .7, .2, 1),
    transform 360ms cubic-bezier(.2, .7, .2, 1);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: #1E2A35;
}

/* Coral accent stripe (mirrors Stripe Elements' brand-color top edge so the
   visual handoff feels continuous). */
.unlock-card-accent {
  height: 4px;
  background: linear-gradient(90deg, #f26419 0%, #f9823e 100%);
  flex: 0 0 auto;
}

/* Header row: tiny status label left, VioVerse wordmark right. Padding picks
   up Stripe Elements' typical 20/24 header rhythm so the wordmark sits at
   the same Y as the dismissed Stripe iframe's header content. */
.unlock-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 0 24px;
  flex: 0 0 auto;
}

.unlock-card-label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(30, 42, 53, 0.55);
  letter-spacing: 0;
}

.unlock-card-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 18px;
  color: #1E2A35;
  line-height: 1;
}
.unlock-card-logo svg { width: 18px; height: 18px; }
.unlock-card-logo .coral { color: #f26419; }

/* Icon area: fills available vertical space, centers the file+check badge.
   The 810px card height is chosen so the icon sits at optical center, not
   geometric center — slight upward bias by setting bottom padding higher
   than top via the header's natural intrinsic height. */
.unlock-check-area {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  padding-bottom: 24px;
}

.unlock-check-wrap {
  position: relative;
  width: 200px;
  height: 200px;
  display: grid;
  place-items: center;
}

.unlock-check {
  position: relative;
  width: 140px;
  height: 140px;
}
.unlock-check svg { width: 100%; height: 100%; display: block; }

/* Confirmation message stack below the icon. */
.unlock-card-message {
  flex: 0 0 auto;
  text-align: center;
  padding: 0 32px 32px;
}
.unlock-card-headline {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  line-height: 1.15;
}
.unlock-card-headline .coral { color: #f26419; }
.unlock-card-sub {
  font-size: 14px;
  font-weight: 500;
  color: rgba(30, 42, 53, 0.65);
  margin: 0;
  line-height: 1.45;
}

/* File icon strokes. dasharray/dashoffset are written by JS at measureStrokes()
   time using getTotalLength() — measuring path length in pure CSS isn't
   possible. The transitions here own the timing curve and duration. */
.unlock-check .file-body,
.unlock-check .file-fold {
  stroke: #1E2A35;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transition: stroke-dashoffset 360ms ease-out;
}

.unlock-check .file-check {
  stroke: #f26419;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transition: stroke-dashoffset 280ms cubic-bezier(.2, .7, .2, 1);
}

/* Animation states. */
.unlock-confirmation.is-active .unlock-confirmation-backdrop {
  opacity: 1;
}
.unlock-confirmation.card-in .unlock-confirmation-inner {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.unlock-confirmation.is-leaving .unlock-confirmation-backdrop {
  opacity: 0;
}
.unlock-confirmation.is-leaving .unlock-confirmation-inner {
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
}

/* Mobile: 351 × 750. Identical structure, smaller dimensions, slightly
   reduced internal padding so the icon + message stack fit comfortably. */
@media (max-width: 480px) {
  .unlock-confirmation-inner {
    width: 351px;
    height: 750px;
    border-radius: 14px;
  }
  .unlock-card-header {
    padding: 18px 20px 0 20px;
  }
  .unlock-card-logo { font-size: 16px; }
  .unlock-check-wrap {
    width: 180px;
    height: 180px;
  }
  .unlock-check {
    width: 124px;
    height: 124px;
  }
  .unlock-card-message {
    padding: 0 24px 28px;
  }
  .unlock-card-headline {
    font-size: 21px;
  }
  .unlock-card-sub {
    font-size: 13px;
  }
}