/* =========================================================
   Fallback: always visible (non-supporting browsers)
   ========================================================= */
body {
  opacity: 1;
}

/* =========================================================
   Houdini property (ignored where unsupported)
   ========================================================= */
@property --wc-loaded {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* =========================================================
   Modern browsers only
   Requires:
   - animation-timeline support
   - :has() selector
   ========================================================= */
@supports (animation-timeline: auto) and selector(:has(*)) {

  body {
    /* start timeout regardless of undefined components */
    animation: showBody 0s linear 200ms forwards;
  }

  /* hide body only while undefined custom elements exist */
  body:has(:not(:defined)) {
    opacity: var(--wc-loaded, 0);
  }
}

/* =========================================================
   Animation
   ========================================================= */
@keyframes showBody {
  to {
    --wc-loaded: 1;
  }
}