/* RobotsShop — portal door transition
   Opening a surface: the page eases open (cover-lift: slight scale-down + blur + fade).
   Leaving to home: the door closes (page scales away like a cover swinging shut).
   Subtle by design — 420ms in, 260ms out. Respects prefers-reduced-motion. */

/* ── OPEN: page eases open on load ── */
@keyframes portal-open {
  from { opacity: 0; transform: scale(0.975); filter: blur(6px); }
  60%  { filter: blur(1.5px); }
  to   { opacity: 1; transform: scale(1); filter: blur(0); }
}
body { animation: portal-open 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* ── CLOSE: door swings shut on exit ── */
@keyframes portal-close {
  from { opacity: 1; transform: scale(1); filter: blur(0); }
  to   { opacity: 0; transform: scale(0.965); filter: blur(5px); }
}
body.leaving { animation: portal-close 0.26s ease-in both; }

/* Links that lead "home" get the door-close treatment before navigating */
a[data-portal="home"], a[href="/"], a[href="/index.html"] {
  position: relative;
}
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  body.leaving { animation: none; opacity: 0.4; transition: opacity 0.15s; }
}

/* ── BOOK REVEAL (surface pages only): logo opens like a book ──
   Clicking the RobotsShop logo on a surface page toggles .book-open on body,
   which unfolds a small overlay panel from the logo position. transform-origin
   is anchored at the logo so it reads as pages opening upward. 300ms, subtle.
   Matched to each page's brand colors via CSS variables. */
.book-door {
  position: fixed;
  top: 16px; left: 28px;
  z-index: 500;
  width: 300px;
  background: var(--bg3, #0f1520);
  border: 1px solid var(--line, #1d2735);
  border-radius: 12px;
  padding: 16px;
  display: none;
  box-shadow: 0 18px 48px rgba(0,0,0,0.55);
  transform-origin: 16% 0%;           /* unfold from the logo, top-left */
}
body.book-open .book-door {
  display: block;
  animation: book-open 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes book-open {
  from { opacity: 0; transform: scaleY(0.05); }
  to   { opacity: 1; transform: scaleY(1); }
}
.book-door .book-home {
  display: block;
  font-family: var(--sans, -apple-system, sans-serif);
  font-size: 1.4rem; font-weight: 700;
  color: var(--green, #10b981);
  text-decoration: none;
  padding: 12px 14px;
  border: 1px solid rgba(16,185,129,0.4);
  border-radius: 9px;
  background: rgba(16,185,129,0.08);
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.book-door .book-home:hover { background: rgba(16,185,129,0.18); }
.book-door .book-surfaces { border-top: 1px solid var(--line, #1d2735); padding-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.book-door .book-surfaces a { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border-radius: 7px; text-decoration: none; }
.book-door .book-surfaces a:hover { background: rgba(16,185,129,0.10); }
.book-door .book-surfaces strong { color: var(--text, #e6edf3); font-size: 0.85rem; font-weight: 600; }
.book-door .book-surfaces span { color: var(--dim, #8b98a9); font-size: 0.72rem; }
@media (prefers-reduced-motion: reduce) {
  body.book-open .book-door { animation: none; }
}