/* Presentation only: no request delays, layout animation or hidden app gates. */
@keyframes coinsbitSectionReveal {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes coinsbitPlaceholderPulse {
  0%, 100% { opacity: .4; }
  50% { opacity: .75; }
}

/* A fixed, opaque first paint covers the initial English/translation reflow.
   It never changes document height, scroll position or application state. */
.coinsbitPageLoader { display: none; }
html[data-coinsbit-loading] .coinsbitPageLoader { display: grid; position: fixed; inset: 0; z-index: 2147483000; place-items: center; background: #080808; color: #eaf0f8; font: 500 14px/1.6 system-ui, sans-serif; }
/* Reuse the published mobile app's centered mark, counter-rotating gold rings
   and gentle pulse (mobile-audit 7cf4849, index.html / loading-brand.css). */
.coinsbitPageLoaderInner, .coinsbitBoot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; box-sizing: border-box; width: 100%; padding: 28px; text-align: center; }
.coinsbitLoadingOrbit { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 84px; height: 84px; border: 1px solid #d5b65d26; border-radius: 50%; background: radial-gradient(circle, #d5b65d15, transparent 72%); }
.coinsbitLoadingOrbit::before, .coinsbitLoadingOrbit::after { content: ""; position: absolute; inset: -5px; border: 1.5px solid transparent; border-top-color: #d6b863; border-radius: 50%; animation: coinsbitLoadingOrbit 1.8s linear infinite; }
.coinsbitLoadingOrbit::after { inset: 4px; border-top-color: transparent; border-bottom-color: #d6b86370; animation-direction: reverse; animation-duration: 2.6s; }
.coinsbitLoadingOrbit > i { position: absolute; inset: 13px; border-radius: 50%; box-shadow: 0 0 22px #d6b86324; animation: coinsbitLoadingBreathe 1.8s ease-in-out infinite; }
.coinsbitLoadingOrbit > img { position: relative; display: block; width: 48px; height: 48px; object-fit: contain; animation: coinsbitLoadingBreathe 1.8s ease-in-out infinite; }
.coinsbitLoadingName { max-width: 100%; color: #dfc577; font-size: 14px; font-weight: 800; letter-spacing: .16em; line-height: 1.6; text-transform: none; }
.coinsbitLoadingLabel { max-width: 300px; min-height: 23px; margin: 0; color: #a7b2c2; font: 500 14px/1.6 system-ui, sans-serif; }
@keyframes coinsbitLoadingOrbit { to { transform: rotate(360deg); } }
@keyframes coinsbitLoadingBreathe { 0%, 100% { transform: scale(.96); opacity: .75; } 50% { transform: scale(1.04); opacity: 1; } }
.coinsbitBootError .coinsbitLoadingOrbit::before, .coinsbitBootError .coinsbitLoadingOrbit::after, .coinsbitBootError .coinsbitLoadingOrbit > * { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .coinsbitLoadingOrbit::before, .coinsbitLoadingOrbit::after, .coinsbitLoadingOrbit > * { animation: none; }
}
html[data-coinsbit-loading="revealing"] .coinsbitPageLoader { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, visibility 0s .18s; }
html[data-coinsbit-loading="pending"] :is(.cbitHeader, .cbitFundraisingHeader, .cbitMobileWallet, .coinsbitInfoHeader, .cbitLoanHeader),
html[data-coinsbit-loading="pending"] :is(.cbitPage, .coinsbitInfoMain) > *,
html[data-coinsbit-loading="pending"] .cbitLoanOnboarding > main { animation: none !important; }
/* Keep moving coins from shining through panels during their reveal. */
.cbitRainScene { transition: opacity .35s ease; }
html[data-coinsbit-loading] .cbitRainScene { visibility: hidden; opacity: 0; }
html[data-coinsbit-loading] .cbitFallingCoin { animation-play-state: paused; }

/* The translated introduction needs four lines at phone widths. Reserve those
   lines in English too, without clipping longer translations or zoomed text. */
@media (max-width: 650px) {
  .cbitHero > div > p:not(.cbitEyebrow) { min-height: 7.2em; }
  .coinsbitPageLoaderInner { padding: 28px 20px; }
}

/* Each section keeps its final place while it becomes visible from top to bottom. */
@media (prefers-reduced-motion: no-preference) {
  .cbitRainScene { animation: coinsbitSectionReveal .35s ease-out 1.3s backwards; }
  :is(.cbitHeader, .cbitFundraisingHeader, .cbitMobileWallet, .coinsbitInfoHeader, .cbitLoanHeader) {
    animation: coinsbitSectionReveal .42s ease-out backwards;
  }
  :is(.cbitPage, .coinsbitInfoMain) > :is(section, h1, p),
  .cbitLoanOnboarding > main {
    --reveal-step: 7;
    animation: coinsbitSectionReveal .6s ease-out backwards;
    animation-delay: calc(100ms + var(--reveal-step) * 100ms);
  }
  :is(.cbitPage, .coinsbitInfoMain) > :nth-child(1) { --reveal-step: 0; }
  :is(.cbitPage, .coinsbitInfoMain) > :nth-child(2) { --reveal-step: 1; }
  :is(.cbitPage, .coinsbitInfoMain) > :nth-child(3) { --reveal-step: 2; }
  :is(.cbitPage, .coinsbitInfoMain) > :nth-child(4) { --reveal-step: 3; }
  :is(.cbitPage, .coinsbitInfoMain) > :nth-child(5) { --reveal-step: 4; }
  :is(.cbitPage, .coinsbitInfoMain) > :nth-child(6) { --reveal-step: 5; }
  :is(.cbitPage, .coinsbitInfoMain) > :nth-child(7) { --reveal-step: 6; }
  .cbitLoanOnboarding > main { --reveal-step: 1; }
  :is(.cbitHeader, .cbitFundraisingHeader, .cbitMobileWallet, .coinsbitInfoHeader, .cbitLoanHeader):focus-within,
  :is(.cbitPage, .coinsbitInfoMain) > :is(section, h1, p):focus-within,
  :is(.cbitPage, .coinsbitInfoMain) > :target,
  .cbitLoanOnboarding > main:focus-within {
    opacity: 1 !important;
  }
}

/* The slow-download recovery surface uses the same loader after the cover's
   deadline, so it does not switch back to an unrelated loading screen. */
.coinsbitBoot { max-width: none; min-height: 100vh; margin: 0; background: #080808; font: 500 14px/1.6 system-ui, sans-serif; }
@supports (height: 100svh) { .coinsbitBoot { min-height: 100svh; } }
#coinsbit-boot-help { max-width: 360px; }

/* Reserve the quote's two rows before catalog/network restoration completes. */
.cbitQuoteSlot { display: flow-root; }
.cbitQuoteSlot:empty { display: none; }
.cbitSelectedRestricted { min-height: 74px; }
.cbitSelectedRestricted p[role="status"] { min-height: 14px; }
.cbitQuotePlaceholder { box-sizing: border-box; height: 74px; margin-top: 12px; padding: 11px 12px; border: 1px solid #e7c47733; border-radius: 8px; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px 12px; align-items: center; }
.cbitQuotePlaceholder i { width: 26px; height: 26px; border-radius: 50%; background: #e7c47718; }
.cbitQuotePlaceholder span { height: 11px; width: 58%; border-radius: 4px; background: #e7c47718; }
.cbitQuotePlaceholder span:last-child { grid-column: 2; width: 78%; }

/* The terms and acceptance rows occupy their space before their GET completes. */
.cbitFundingConsent { position: relative; display: grid; gap: 10px; align-content: start; }
.cbitFundingConsent[data-loading="true"] { min-height: 63.2px; }
.cbitFundingTermsPlaceholder { display: flex; align-items: center; height: 31.2px; }
.cbitFundingAcceptPlaceholder { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; line-height: 1.5; min-height: 22px; }
.cbitFundingAcceptPlaceholder > i { flex: 0 0 17px; height: 17px; margin: 2px 0 3px; border-radius: 3px; background: #e7c47718; }
.cbitFundingAcceptPlaceholder > span { position: relative; color: transparent; user-select: none; }
.cbitFundingAcceptPlaceholder > span::after { content: ""; position: absolute; top: 4px; inset-inline-start: 0; height: 10px; width: 85%; border-radius: 4px; background: #e7c47718; }
.cbitFundingConsent .cbitFundingLoadingHint { position: absolute; bottom: 2px; inset-inline-start: 27px; inset-inline-end: 0; margin: 0; line-height: 18px; background: #1a1c1b; }
.cbitFundingTermsPlaceholder i { display: block; width: 55%; height: 10px; border-radius: 4px; background: #e7c47718; }
/* Checking/Open badges must not move the whole mobile header onto a new row. */
.cbitEarly .cbitEarlyTop { display: grid; grid-template-columns: minmax(0, 1fr) auto; }

@media (prefers-reduced-motion: no-preference) {
  .cbitQuotePlaceholder > *,
  .cbitFundingTermsPlaceholder i, .cbitFundingAcceptPlaceholder i {
    animation: coinsbitPlaceholderPulse 1.4s ease-in-out infinite;
  }
}
@media print {
  .cbitHeader, .cbitFundraisingHeader, .cbitMobileWallet, .coinsbitInfoHeader,
  .cbitPage > *, .coinsbitInfoMain > *, .cbitLoanOnboarding > main { animation: none !important; }
  .coinsbitPageLoader, .coinsbitLoadingOrbit, .cbitQuotePlaceholder, .cbitFundingTermsPlaceholder, .cbitFundingAcceptPlaceholder { display: none !important; }
}