/* ============================================================
   Sidekick sheet — shared by index.html and about.html.
   Driven by js/sidekick.js; both pages carry a #sidekick link.
   ============================================================ */

/* ── Sidekick sheet ──────────────────────────────────────
   The photo page slides up over the portfolio as a full-screen sheet
   (js/sidekick.js). Rounded top corners while it travels, square once it
   has arrived; the portfolio underneath stays exactly where it was. */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  background: #111110;
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -30px 80px rgba(0, 0, 0, .45);
  transform: translateY(100%);
  visibility: hidden;
  transition:
    transform .75s cubic-bezier(.32, .72, 0, 1),
    border-radius .75s cubic-bezier(.32, .72, 0, 1),
    visibility 0s linear .75s;
}
.sheet.is-open {
  transform: none;
  border-radius: 0;
  visibility: visible;
  transition:
    transform .75s cubic-bezier(.32, .72, 0, 1),
    border-radius .75s cubic-bezier(.32, .72, 0, 1),
    visibility 0s;
}
.sheet__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity .4s ease .15s;
}
.sheet.is-loaded .sheet__frame { opacity: 1; }

/* the portfolio holds still underneath */
html.sheet-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet.is-open, .sheet__frame { transition: none; }
}