/* ============================================================
   FLASH TV — M3 SHIMMER / SKELETON  (index-m3.html only)
   ------------------------------------------------------------
   Material 3 placeholder UI: skeleton blocks on neutral
   surface-container greys with a soft, low-contrast wipe
   (~1.2s). Respects prefers-reduced-motion (pulse fallback).
   No brand color — loading is not a brand moment.
   ============================================================ */

#shimmer-layer {
  position: absolute; inset: 0; z-index: 35;
  background: var(--m3-surface);
  opacity: 0; visibility: hidden;
  transition: opacity 320ms var(--ease-out-quart, ease);
}
#shimmer-layer.on { opacity: 1; visibility: visible; }

/* Skeleton block — base surface + soft wipe */
.sk {
  position: relative;
  overflow: hidden;
  background: var(--m3-surface-variant);
  border-radius: var(--r-md);
}
.sk::after {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.055) 45%,
    rgba(255,255,255,.07) 50%,
    rgba(255,255,255,.055) 55%,
    transparent 100%);
  animation: sk-wipe 1.2s var(--ease-in-out, ease-in-out) infinite;
}
@keyframes sk-wipe { to { transform: translateX(100%); } }

/* Skeleton element shapes */
.sk-line  { height: 16px; border-radius: 6px; }
.sk-title { height: 34px; border-radius: 8px; background: var(--m3-surface-variant); }
.sk-pill  { height: 56px; border-radius: 999px; }
.sk-chip  { height: 26px; width: 78px; border-radius: 8px; }
.sk-card-portrait  { flex: none; width: 208px; height: 312px; border-radius: var(--r-md); }
.sk-card-landscape { flex: none; width: 360px; height: 203px; border-radius: var(--r-md); }

/* Layout scaffolds mirroring the real screens */
.sk-hero { position: relative; height: 600px; overflow: hidden;
           background: linear-gradient(90deg, var(--m3-surface) 0%, var(--m3-surface-variant) 55%, var(--m3-surface-variant) 100%); }
.sk-hero-body { position: absolute; left: 168px; bottom: 120px; width: 620px;
                display: flex; flex-direction: column; gap: 18px; }
.sk-actions { display: flex; gap: 16px; margin-top: 10px; }
.sk-rail { margin-top: 44px; }
.sk-rail-head { padding: 0 168px; margin-bottom: 28px; }
.sk-rail-row { display: flex; gap: 22px; padding: 0 168px; overflow: hidden; }

.sk-details { position: absolute; inset: 0; overflow: hidden;
              background: linear-gradient(90deg, var(--m3-surface) 0%, var(--m3-surface-variant) 60%, var(--m3-surface-variant) 100%); }
.sk-details-body { position: absolute; left: 168px; bottom: 300px; width: 640px;
                   display: flex; flex-direction: column; gap: 18px; }
.sk-details-rail { position: absolute; left: 0; right: 0; bottom: 40px; }

@media (prefers-reduced-motion: reduce) {
  .sk::after { animation: none; }
  .sk { animation: sk-pulse 1.6s ease-in-out infinite; }
  @keyframes sk-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
}

/* Demo toggle button */
#shimmer-toggle {
  position: absolute; left: 200px; bottom: 24px; z-index: 60;
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: 999px;
  background: var(--m3-surface-variant); color: var(--m3-on-surface-variant);
  border: 1px solid var(--m3-border-variant);
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
  user-select: none; transition: all 180ms var(--ease-out-quart, ease);
}
#shimmer-toggle:hover { background: var(--m3-surface-variant); color: var(--m3-on-surface); }
#shimmer-toggle.active { background: var(--m3-primary); color: var(--m3-on-primary); border-color: var(--m3-primary); }
#shimmer-toggle .dot { width: 8px; height: 8px; border-radius: 999px; background: currentColor; }