/* =====================================================================
   Demo tiles and the demo pop-up
   ---------------------------------------------------------------------
   A gallery item with a "Link" (set in Pages CMS) becomes a demo tile:
   the picture gets a label with the caption on it, and clicking
   it opens the link in a pop-up (see /assets/js/demo.js).
   Used on project pages (style.css) and in the home page timeline
   preview (home.css), so it is kept in its own file.
   ===================================================================== */

/* The glow colour, written as R, G, B so it can be used with any
   transparency below. Change this one line to recolour everything. */
:root { --demo-glow: 255, 214, 160; }

/* ---------- On a project page ---------- */
.demo-tile {
  position: relative; display: block; overflow: hidden;
  border-radius: 6px; background: #040406; color: #f4f6fa; text-decoration: none;
}
.demo-tile img { transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.demo-tile:hover img, .demo-tile:focus-visible img { transform: scale(1.03); }
.demo-tile:focus-visible { outline: 2px solid rgba(var(--demo-glow), 0.8); outline-offset: 3px; }

/* The label sitting on the bottom of the picture. */
.demo-label {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.7rem 0.95rem; border-radius: 999px;
  background: rgba(4, 4, 6, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 500 0.95rem/1.3 "Roboto", system-ui, sans-serif;
  transition: border-color 0.25s ease;
}
.demo-label svg { flex: none; margin-left: auto; transition: transform 0.25s ease; }
.demo-tile:hover .demo-label, .demo-tile:focus-visible .demo-label { border-color: #fff; }
.demo-tile:hover .demo-label svg { transform: translate(2px, -2px); }


/* ---------- In the home page timeline preview ---------- */
/* A plain thin white edge around the tile. */
.tile-demo::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; border: 1px solid rgba(255, 255, 255, 0.7);
}

/* ---------- The pop-up ---------- */
.demo-pop {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; padding: 16px;
  background: rgba(0, 0, 0, 0.78);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: demo-fade 0.2s ease;
}
.demo-pop[hidden] { display: none; }
@keyframes demo-fade { from { opacity: 0; } }

/* The phone-shaped card that holds the demo. */
.demo-card {
  display: flex; flex-direction: column; overflow: hidden;
  width: min(430px, 100%); height: min(900px, 100%);
  border-radius: 22px; background: #040406; border: 1px solid #262632;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(var(--demo-glow), 0.12);
}
/* The bar along the top with the title and the two buttons. */
.demo-bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.6rem 0.55rem 1rem; border-bottom: 1px solid #191920;
  color: #a8b0bc; font: 500 0.8rem/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.demo-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-bar a, .demo-bar button {
  flex: none; padding: 0.4rem 0.75rem; border: 1px solid #262632; border-radius: 999px;
  background: none; color: #dce2ec; font: inherit; text-decoration: none; cursor: pointer;
}
.demo-bar a:hover, .demo-bar button:hover { border-color: rgba(var(--demo-glow), 0.6); }
.demo-bar a:focus-visible, .demo-bar button:focus-visible { outline: 2px solid rgba(var(--demo-glow), 0.8); outline-offset: 2px; }
.demo-frame { flex: 1; width: 100%; border: 0; background: #040406; }

/* On a phone the pop-up fills the whole screen. */
@media (max-width: 520px) {
  .demo-pop { padding: 0; }
  .demo-card { width: 100%; height: 100%; border: 0; border-radius: 0; }
}
/* Stops the page behind from scrolling while the pop-up is open. */
html.demo-open, html.demo-open body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .demo-pop { animation: none; }
  .demo-tile img { transition: none; }
}