/* ===========================================================================
   AnimeFFA — additions for the Headless (self-hosted) build
   Loading skeletons, the sign-in dialog, and the account button.
   Everything else is shared with the Twig theme stylesheets.
   =========================================================================== */

/* ------------------------------------------------------------- skeletons */
.skeleton-card {
  display: grid;
  gap: .6rem;
  padding: 0 0 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  overflow: hidden;
}

.skeleton-media,
.skeleton-line {
  display: block;
  background: linear-gradient(
    90deg,
    rgba(245, 238, 238, .04) 25%,
    rgba(245, 238, 238, .09) 37%,
    rgba(245, 238, 238, .04) 63%
  );
  background-size: 400% 100%;
  animation: skeleton 1.4s ease infinite;
}

.skeleton-media { aspect-ratio: 4 / 3; }

.skeleton-line {
  height: 12px;
  margin-inline: 1rem;
  border-radius: var(--r-xs);
}
.skeleton-line.is-short { width: 42%; }

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

@media (prefers-reduced-motion: reduce) {
  .skeleton-media,
  .skeleton-line { animation: none; }
}

/* ------------------------------------------------------- sign-in dialog */
body.modal-open { overflow: hidden; }

.ffa-modal {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(4, 3, 3, .74);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: modal-fade .2s var(--ease) both;
}

.ffa-modal-panel {
  position: relative;
  width: min(460px, 100%);
  max-height: calc(100vh - var(--gutter) * 2);
  overflow-y: auto;
  padding: clamp(1.25rem, 4vw, 2rem);
  display: grid;
  gap: 1rem;
  animation: modal-rise .26s var(--ease) both;
}

.ffa-modal-close {
  position: absolute;
  top: .55rem;
  right: .55rem;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text-faint);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.ffa-modal-close:hover { color: var(--text); border-color: var(--line-red); }

.ffa-modal .section-head { margin-bottom: 0; }

@keyframes modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modal-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------- account chip */
button.nav-user {
  background: rgba(21, 16, 18, .72);
  cursor: pointer;
}
button.nav-user:hover { color: var(--text); border-color: var(--line-red); }

/* The account button is a header pill on desktop; on phones it lives in the
   drawer instead, so the header does not overflow. */
@media (max-width: 720px) {
  #account-slot { display: none; }
}