/* ═══════════════════════════════════════════════════════════════
   KINGPAO — HOMEPAGE SKELETON v1
   Dark · Premium · Warm Artisan — matches advertise.css v5
   Responsive · CLS-safe · Accessible shimmer / pulse
   ─────────────────────────────────────────────────────────
   Usage:
     <link rel="stylesheet" href="assets/css/home-skeleton.css">
     Pair with assets/js/home-skeleton.js or React primitives below.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Tokens (mirrors advertise.css) ─── */
:root {
  --sk-bg: rgba(255,255,255,0.04);
  --sk-bg-2: rgba(255,255,255,0.07);
  --sk-border: rgba(255,255,255,0.06);
  --sk-radius-sm: 8px;
  --sk-radius-md: 12px;
  --sk-radius-lg: 16px;
  --sk-radius-xl: 24px;
  --sk-radius-full: 9999px;
  --sk-ease-out: cubic-bezier(0,0,0.2,1);
}

/* ─── Base shimmer primitive ───
   GPU-friendly: only background-position & opacity animate.
   Contained to avoid layout thrash. */
.sk-box,
.sk-line,
.sk-title,
.sk-badge-skel,
.sk-btn-skel,
.sk-avatar-skel,
.sk-image-skel {
  display: block;
  border-radius: var(--sk-radius-sm);
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 37%, rgba(255,255,255,0.04) 63%);
  background-size: 400% 100%;
  animation: skShimmer 1.35s ease-in-out infinite;
  /* reserve paint, avoid CLS */
  contain: paint;
}

@keyframes skShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Pulse fallback for prefers-reduced-motion — JS also swaps class */
@keyframes skPulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .sk-box, .sk-line, .sk-title, .sk-badge-skel, .sk-btn-skel, .sk-avatar-skel, .sk-image-skel {
    animation: skPulse 1.8s ease-in-out infinite !important;
    background: var(--sk-bg);
  }
}

/* ─── Primitive sizes ─── */
.sk-line { height: 12px; }
.sk-line--sm { height: 10px; opacity: 0.9; }
.sk-title { height: 22px; border-radius: 10px; }
.sk-title--lg { height: 28px; }
.sk-badge-skel { height: 24px; width: 110px; border-radius: var(--sk-radius-full); }
.sk-btn-skel { height: 44px; border-radius: var(--sk-radius-full); min-width: 140px; }
.sk-avatar-skel { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.sk-image-skel { width: 100%; border-radius: var(--sk-radius-lg); }

/* ─── Skeleton card shell — 1:1 with real cards ─── */
.sk-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-lg);
  overflow: hidden;
  position: relative;
}

/* ─── Stack helper ─── */
.sk-stack { display: grid; gap: 10px; }
.sk-row { display: flex; align-items: center; gap: 12px; }
.sk-row--between { justify-content: space-between; }

/* ─── Fade plumbing — CLS-safe swap ───
   Real content and skeleton occupy same grid cell via
   hidden attribute + opacity transition, not display toggling
   that would collapse height. Each section reserves min-height. */
[data-skeleton-section] {
  position: relative;
  /* aria-busy sections announce loading; visual skeletons absolute? we use sibling swap for simplicity */
}
.sk-section {
  transition: opacity 0.42s var(--sk-ease-out);
}
.sk-section[hidden] {
  display: none !important;
}
.real-section {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s var(--sk-ease-out), transform 0.5s var(--sk-ease-out);
  /* keep layout reserved even while invisible — avoids CLS jump */
  will-change: opacity, transform;
}
.real-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.real-section[hidden] {
  display: none !important;
}

/* Auto-inject wrappers — preserve outer section layout */
[data-skeleton-section] [data-real] { width: 100%; display: block; }
.hero [data-real] { width: 100%; }

/* Section live region (screen readers) */
.sk-live {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ─── HERO skeleton — mirrors .hero-container / .hero-content ─── */
.sk-hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 140px clamp(24px, 5vw, 48px) 100px;
  display: grid;
  grid-template-columns: minmax(0, 600px) 1fr;
  gap: 32px;
  min-height: 100vh; /* CLS reserve — matches real hero min-height:100vh */
  min-height: 100dvh;
  align-items: center;
}
.sk-hero-content { display: flex; flex-direction: column; gap: 22px; max-width: 600px; grid-column: 1; }
.sk-hero-visual {
  border-radius: var(--sk-radius-xl);
  min-height: 380px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border: 1px solid var(--sk-border);
  position: relative;
  overflow: hidden;
}
.sk-hero-visual .sk-image-skel {
  position: absolute; inset: 0;
  border-radius: var(--sk-radius-xl);
}

/* Wallet ad skeleton */
.sk-wallet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  min-height: 380px;
}
.sk-wallet-card {
  max-width: 420px;
  margin: 0 auto;
  padding: 28px;
  min-height: 220px;
  border-radius: var(--sk-radius-xl);
}

/* How it works zone items */
.sk-how-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
  min-height: 320px;
}
.sk-zone-stack { display: grid; gap: 20px; }
.sk-zone-item {
  padding: 24px 32px;
  border-radius: 20px;
  min-height: 112px;
}

/* Sample orders 3-up */
.sk-sample-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  min-height: 520px;
}
.sk-sample-card { border-radius: var(--sk-radius-xl); padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 520px; }
.sk-sample-card .sk-image-skel { height: 168px; min-height: 168px; }
.sk-sample-receipt { border-radius: var(--sk-radius-md); padding: 12px; background: rgba(0,0,0,0.14); border: 1px solid rgba(255,255,255,0.05); display: grid; gap: 10px; }

/* Menu 4-up */
.sk-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* matches advertise.css: 3 at desktop, 2 at 768, 1 at 480 */
  gap: 28px;
  min-height: 360px;
}
.sk-menu-card { border-radius: var(--sk-radius-lg); overflow: hidden; min-height: 380px; display: flex; flex-direction: column; }
.sk-menu-card .sk-image-skel { height: 210px; min-height: 210px; border-radius: 0; }
.sk-menu-card-body { padding: 20px; display: grid; gap: 10px; flex: 1; }

/* Branches 3-up */
.sk-branches-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  min-height: 280px;
}
.sk-branch-card { border-radius: 28px; padding: 32px; min-height: 260px; display: flex; flex-direction: column; gap: 16px; }

/* Testimonials horizontal */
.sk-testimonials-track {
  display: flex;
  gap: 24px;
  overflow: hidden;
  padding: 8px 0;
}
.sk-testimonial { min-width: 340px; max-width: 380px; padding: 36px 32px; border-radius: 28px; flex-shrink: 0; min-height: 220px; }

/* About highlights */
.sk-about-highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sk-about-card { padding: 24px; border-radius: var(--sk-radius-lg); min-height: 110px; }

/* ─── Responsive — mirrors advertise.css breakpoints ─── */
@media (max-width: 1024px) {
  .sk-hero { grid-template-columns: 1fr; min-height: 560px; }
  .sk-hero-content { grid-column: auto; }
  .sk-hero-visual { min-height: 340px; order: 2; }
  .sk-wallet-grid { grid-template-columns: 1fr; gap: 32px; }
  .sk-how-grid { grid-template-columns: 1fr; gap: 48px; }
  .sk-sample-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; gap: 28px; min-height: auto; }
  .sk-sample-card { min-height: 480px; }
  .sk-branches-grid { grid-template-columns: repeat(2, 1fr); }
  .sk-about-highlights { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .sk-hero { padding: 100px clamp(16px, 4vw, 32px) 60px; min-height: 520px; }
  .sk-hero-content { align-items: center; text-align: left; }
  .sk-hero-visual { display: none; } /* matches real hero-glass-card hidden on mobile */
  .sk-menu-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .sk-menu-card .sk-image-skel { height: 180px; min-height: 180px; }
  .sk-branches-grid { grid-template-columns: 1fr; }
  .sk-testimonials-track { gap: 16px; }
  .sk-testimonial { min-width: 280px; max-width: 320px; padding: 24px 20px; }
  .sk-about-highlights { grid-template-columns: 1fr; }
  .sk-zone-item { padding: 20px; min-height: 100px; }
  .sk-branch-card { padding: 24px; }
}

@media (max-width: 480px) {
  .sk-hero { padding: 100px 16px 40px; gap: 20px; }
  .sk-badge-skel { width: 140px; height: 28px; }
  .sk-title--lg { height: 24px; }
  .sk-btn-skel { width: 100%; }
  .sk-menu-grid { grid-template-columns: 1fr; }
  .sk-menu-card .sk-image-skel { height: 200px; min-height: 200px; }
  .sk-sample-card .sk-image-skel { height: 180px; min-height: 180px; }
  .sk-sample-grid { gap: 20px; }
}

/* ─── Reduced motion already handled; also honor forced-colors ─── */
@media (forced-colors: active) {
  .sk-box, .sk-line, .sk-title, .sk-image-skel { forced-color-adjust: auto; background: CanvasText; opacity: 0.1; }
}

/* ─── Perf hint: skeletons are paint-only, no layout shift ─── */
.sk-section, .sk-card, .sk-image-skel { contain: layout paint; }

/* ─── Subtle inner glow to sell depth on dark bg ─── */
.sk-card::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 0%, rgba(249,115,22,0.05) 0%, transparent 60%);
  pointer-events: none;
  border-radius: inherit;
}