/**
 * Clerk Authentication Preload Styles
 * Prevents FOUC (Flash of Unstyled Content) while Clerk loads
 */

/* CRITICAL: Hide all clerk-auth elements by default */
[data-clerk-auth] {
  display: none !important;
}

/* When Clerk is ready and user is signed in, show signed-in elements */
body.clerk-ready.clerk-signed-in [data-clerk-auth="signed-in"] {
  display: block !important;
}

/* When Clerk is ready and user is signed out, show signed-out elements */
body.clerk-ready.clerk-signed-out [data-clerk-auth="signed-out"] {
  display: inline-block !important;
}

/* Prevent navbar height collapse while loading */
.uui-navbar05_button-wrapper {
  min-height: 40px;
}

/* Default: while Clerk is loading, hide paid/conditional content to prevent flashes */
body:not(.clerk-ready) [data-clerk-exercise][data-clerk-state="purchased"],
body:not(.clerk-ready) [data-clerk-exercise][data-clerk-state="completed"],
body:not(.clerk-ready) [data-clerk-exercise][data-clerk-state="incomplete"],
body:not(.clerk-ready) [data-clerk-exercise][data-clerk-state="locked"] {
  display: none !important;
}

/* Hide level purchase buttons until Clerk decides visibility */
body:not(.clerk-ready) [data-ms-content*="level-"] {
  display: none !important;
}

/* Optional: Smooth fade-in when buttons appear */
body.clerk-ready [data-clerk-auth] {
  animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}