/* ============================================================
   skeleton.css — Skeleton Loading + Scan Overlay
   Star By Faces  |  Append to or import after styles.css
   ============================================================ */

/* ── Shimmer keyframe ── */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

@keyframes scan-line {
  0%   { top: 0%;    opacity: 1; }
  90%  { top: 92%;   opacity: 1; }
  100% { top: 92%;   opacity: 0; }
}

@keyframes scan-pulse {
  0%, 100% { opacity: .6; }
  50%       { opacity: 1;  }
}

@keyframes spin-ring {
  to { transform: rotate(360deg); }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── Base skeleton block ── */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(20,20,22,0.05) 25%,
    rgba(20,20,22,0.10) 50%,
    rgba(20,20,22,0.05) 75%
  );
  background-size: 600px 100%;
  animation: shimmer 1.6s infinite linear;
  border-radius: 8px;
}

/* ── Page-level skeleton wrappers (hidden by default, shown before content) ── */
.skeleton-page {
  display: none;
}
.skeleton-page.active {
  display: block;
  animation: fade-in-up 0.3s ease both;
}

/* Skeleton shapes */
.sk-line      { height: 14px; margin-bottom: 10px; }
.sk-line.wide { width: 80%;  }
.sk-line.mid  { width: 55%;  }
.sk-line.short{ width: 35%;  }
.sk-title     { height: 28px; width: 60%; margin-bottom: 16px; }
.sk-badge     { height: 22px; width: 90px; border-radius: 999px; display: inline-block; }
.sk-avatar    { border-radius: 50%; }
.sk-img       { border-radius: 12px; }
.sk-card      {
  background: rgba(20,20,22,0.04);
  border: 1px solid rgba(20,20,22,0.07);
  border-radius: 16px;
  overflow: hidden;
}

/* ── Hero skeleton ── */
.sk-hero-text  { height: 48px; width: 70%; margin-bottom: 16px; }
.sk-hero-sub   { height: 18px; width: 50%; margin-bottom: 32px; }
.sk-hero-btn   { height: 44px; width: 160px; border-radius: 999px; }

/* ── Result card skeleton ── */
.sk-result-card {
  display: flex;
  gap: 24px;
  padding: 24px;
  align-items: center;
}
.sk-result-img {
  width: 160px;
  height: 160px;
  flex-shrink: 0;
  border-radius: 12px;
}
.sk-result-body { flex: 1; }

/* ═══════════════════════════════════════════════
   SCAN OVERLAY — shown while API processes image
   ═══════════════════════════════════════════════ */

/* Full-screen while scanning. This used to sit inline inside the upload
   card; it's now a fixed overlay covering the whole viewport, so the person
   has nothing else to look at (or click) until their result is ready — and
   there's room for an ad above and below the scanning animation without
   squeezing either into a small card. position:fixed works regardless of
   where this element sits in the page's DOM, so no markup needed to move
   the overlay itself.

   The inner wrapper uses `margin: auto` rather than the parent's
   justify-content to centre it: centring an overflowing flex child with
   justify-content clips its top edge once content (two ads plus the
   scan animation) is taller than the screen. Auto margins centre it when
   there's room and collapse to zero when there isn't, so it becomes a
   normal top-aligned, fully scrollable column instead of a cut-off one. */
#scan-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow-y: auto;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  background: #FFF7F9;
  animation: fade-in-up 0.35s ease both;
}
#scan-overlay.active {
  display: flex;
  flex-direction: column;
}
#scan-overlay::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 50% 0%, rgba(233,99,124,.10), transparent 60%);
}
.scan-overlay-inner {
  margin: auto;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Image frame with scanning effect */
.scan-frame {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(233, 99, 124, 0.60);
  box-shadow: 0 0 30px rgba(233, 99, 124, 0.30);
}

.scan-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Corner brackets */
.scan-frame::before,
.scan-frame::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: #E9637C;
  border-style: solid;
  z-index: 3;
}
.scan-frame::before {
  top: 8px; left: 8px;
  border-width: 2px 0 0 2px;
  border-radius: 4px 0 0 0;
}
.scan-frame::after {
  bottom: 8px; right: 8px;
  border-width: 0 2px 2px 0;
  border-radius: 0 0 4px 0;
}

/* Scan line */
.scan-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #E9637C 50%, transparent 100%);
  box-shadow: 0 0 10px rgba(233, 99, 124, 0.85);
  z-index: 2;
  animation: scan-line 2s ease-in-out infinite;
}

/* Scan overlay tint */
.scan-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(233, 99, 124, 0.08) 0%,
    transparent 50%,
    rgba(233, 99, 124, 0.08) 100%
  );
  z-index: 1;
  animation: scan-pulse 2s ease-in-out infinite;
}

/* Bottom-right corner bracket */
.scan-frame-br {
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 20px;
  height: 20px;
  border-bottom: 2px solid #E9637C;
  border-left: 2px solid #E9637C;
  border-radius: 0 0 0 4px;
  z-index: 3;
}
.scan-frame-tr {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border-top: 2px solid #E9637C;
  border-right: 2px solid #E9637C;
  border-radius: 0 4px 0 0;
  z-index: 3;
}

/* Spinner ring */
.scan-spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(233, 99, 124, 0.20);
  border-top-color: #E9637C;
  animation: spin-ring 0.9s linear infinite;
}

/* Status text */
.scan-status {
  text-align: center;
}
.scan-status-title {
  font-family: 'Zen Dots', cursive;
  font-size: 0.875rem;
  color: #141416;
  margin-bottom: 4px;
  animation: scan-pulse 1.8s ease-in-out infinite;
}
.scan-status-sub {
  font-size: 0.72rem;
  color: rgba(233, 99, 124, 0.85);
  letter-spacing: 0.05em;
}

/* Progress dots */
.scan-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 4px;
}
.scan-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(233, 99, 124, 0.40);
  animation: scan-pulse 1.4s ease-in-out infinite;
}
.scan-dot:nth-child(2) { animation-delay: 0.2s; }
.scan-dot:nth-child(3) { animation-delay: 0.4s; }