/* ==========================================================================
   KI CHIP — REACT APP SHELL STYLES
   Only the pieces that the React app adds on top of css/style.css:
   the loading screen, the error screen, and the small colophon.
   ========================================================================== */

/* ---- Smooth fade-in when React replaces the skeleton ---- */
@keyframes appFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* The top-level Fragment React renders (first child of #app-root) fades in */
#app-root > * {
  animation: appFadeIn 0.35s cubic-bezier(.22, .61, .36, 1) both;
}

/* ---- Loading state ---- */
.site-loading {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.site-loading__card {
  width: 100%;
  max-width: 320px;
  padding: 34px 26px;
  border: 1px solid var(--brown-150);
  border-radius: var(--radius-xl);
  background: var(--card-warm);
  box-shadow: var(--shadow-md);
  text-align: center;
}
.site-loading__emoji {
  font-size: 40px;
  animation: hogPulse 1.3s var(--ease) infinite;
}
@keyframes hogPulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.12) rotate(-4deg); }
}
.site-loading__text {
  margin-top: 10px;
  color: var(--brown-700);
  font-size: 15px;
  font-weight: 600;
}
.site-loading__bar {
  height: 6px;
  margin-top: 18px;
  border-radius: var(--radius-pill);
  background: var(--cream-deep);
  overflow: hidden;
}
.site-loading__bar span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--toffee-light), var(--toffee), var(--toffee-light));
  animation: hogBar 1.2s var(--ease) infinite;
}
@keyframes hogBar {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(320%); }
}

/* ---- Error state ---- */
.site-error {
  max-width: 560px;
  margin: 14vh auto;
  padding: 30px 24px;
  border: 1px solid var(--brown-150);
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--shadow-md);
  text-align: center;
}
.site-error h1 { font-size: 26px; margin-bottom: 10px; }
.site-error p { color: var(--brown-700); font-size: 14.5px; }
.site-error .btn { margin-top: 18px; }
.site-error__hint {
  margin-top: 16px;
  color: var(--brown-500);
  font-size: 12.5px;
}
.site-error__hint code {
  background: var(--cream-deep);
  padding: 1px 5px;
  border-radius: 5px;
  font-size: 12px;
}

/* ---- Small colophon under the page (distinct from the brand footer) ---- */
.site-colophon {
  position: relative;
  z-index: 1;
  padding: 0 0 calc(96px + env(safe-area-inset-bottom, 0px));
  text-align: center;
}
.site-colophon p {
  color: var(--brown-500);
  font-size: 12px;
}
.site-colophon a { color: var(--toffee-dark); font-weight: 600; }

@media (min-width: 900px) {
  .site-colophon { padding-bottom: 26px; }
}