/* Loading states: the splash on the first page of a visit, placeholders while photos load, and a quiet dim on any
   part of the page htmx is updating. Plain CSS (no Tailwind build) using the shared tokens. */

/* ---- Splash: ZedVault logo in the middle until the page has loaded (zv.js removes it). ---------------------------
   It also fades out by itself after a few seconds, so a script that fails can never leave it on screen. */
.zv-splash {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: var(--color-canvas);
  animation: zv-splash-away 0.35s ease 4s forwards;
}
.zv-splash-mark { display: grid; justify-items: center; gap: 18px; animation: zv-splash-breathe 1.6s ease-in-out infinite; }
.zv-splash-bar { width: 120px; height: 3px; overflow: hidden; border-radius: 999px; background: var(--color-canvas-3); }
.zv-splash-bar::after {
  content: "";
  display: block;
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent);
  animation: zv-splash-run 1.1s ease-in-out infinite;
}
.zv-splash.is-done { animation: zv-splash-away 0.3s ease forwards; pointer-events: none; }
@keyframes zv-splash-away { to { opacity: 0; visibility: hidden; } }
@keyframes zv-splash-breathe { 50% { transform: scale(0.97); opacity: 0.85; } }
@keyframes zv-splash-run { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* ---- Photo placeholders: a soft moving sheen behind every photo until it paints over it. ------------------------ */
.well:has(> img), .skeleton {
  background-color: var(--color-canvas-2);
  background-image: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--color-canvas) 70%, transparent) 50%, transparent 80%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: zv-sheen 1.4s ease-in-out infinite;
}
.skeleton { border-radius: var(--radius-well); }
@keyframes zv-sheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* ---- htmx updates: the part being replaced dims until the new content arrives (zv.js sets data-loading). ---------- */
[data-loading] { opacity: 0.55; transition: opacity 0.15s ease; }

@media (prefers-reduced-motion: reduce) {
  .zv-splash-mark, .zv-splash-bar::after, .well:has(> img), .skeleton { animation: none; }
}