/* Hypha · Invitation · #mirror (js/mirror-desk.js). The quiz sheet is the live screen of a lit 3D laptop (a phone under
   900 px) standing on plain paper: no desk, no wood (founder 2026-10-31: "remove the background. needs to look clean").
   After question 1 the paper takes a faint tint of the picked world (#mirror[data-wash], --desk-c, --desk-k). A pulsing
   "Pick one" cue and a green ring mark the answers to choose. The kit's layer (z 5) is under the rig (z 6). */

/* the room: plain paper before any answer */
#mirror .mirror-light {
  background: linear-gradient(#f8f5ef, #f3efe7);
  transition: background 0.9s ease;
}
#mirror[data-wash]:not([data-wash=""]) .mirror-light {
  background:
    radial-gradient(48% 58% at 70% 54%, color-mix(in srgb, var(--desk-c) calc(var(--desk-k, 0.5) * 40%), transparent), transparent 72%),
    linear-gradient(#f8f5ef, #f3efe7);
}

/* the stage: the laptop and the soft shadow under it; the 3D layer and the still run past it by these bleeds (% of the stage) */
.desk {
  position: relative;
  isolation: isolate;
  --bl: 20; --br: 12; --bt: 12; --bb: 44; /* --bl 20 (was 10): the open base runs past the lid in perspective; at 10 the layer cut its front left corner flat */
  padding-bottom: 15%;
}
.desk-rig {
  position: relative;
  z-index: 6;
  padding: 14px 12px 26px;
  transform-origin: 50% 45%;
  will-change: transform;
}
.desk #quiz-sheet {
  height: auto;
  min-height: 0;
  aspect-ratio: 1.55 / 1;
  border-radius: 7px;
  box-shadow: none;
  overflow: hidden;
}
.desk .flip::before { inset: -2% -2%; }

/* the still: this world's own render at rest, the stage plus its bleed, until the 3D world is in */
.desk-still {
  position: absolute;
  left: calc(var(--bl) * -1%); right: calc(var(--br) * -1%);
  top: calc(var(--bt) * -1%); bottom: calc(var(--bb) * -1%);
  z-index: 4;
  pointer-events: none;
  background: url("../assets/mirror-desk.png") center / 100% 100% no-repeat;
  transition: opacity 0.4s;
}
.desk.dk-on .desk-still { opacity: 0; }

/* the wash: retired with the desk (the room's faint tint above is the only colour); kept hidden, not deleted from the markup */
.desk-wash { display: none; }

@media (max-width: 899px) {
  .desk { --bl: 8; --br: 8; --bt: 5; --bb: 22; padding-bottom: 12%; }
  .desk-rig { padding: 9px; border-radius: 12%/6%; }
  .desk #quiz-sheet { height: min(680px, 92svh); aspect-ratio: auto; border-radius: 32px; }
  /* the phone's screen is narrower than the old flat sheet, so answers wrap more: tighter rows keep the longest
     question (7 answers and Back) whole on the screen; the bottom clears the screen's 32 px corner. Shorter
     phones still scroll inside the sheet (overflow auto), never past the screen. */
  .desk .dd.is-sheet { padding-bottom: 22px; }
  .desk .dd.is-sheet .dd-opt { padding: 9px 12px 9px 10px; }
  .desk .dd.is-sheet .dd-help { margin-bottom: 8px; }
  .desk-still { background-image: url("../assets/mirror-desk-phone.png"); }
}

/* the cue: a dark pill "Pick one" with a green arrow at the answers to choose (js/mirror-desk.js placeCue); it pulses
   and the arrow nudges the way it points. data-dir: r = points right at the desk list, d = down at the list or the phone
   sheet, l = left at the empty answer chip (arrow first). */
.pick-cue {
  position: absolute;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 12px;
  border-radius: 999px;
  background: #07100e;
  color: #39F164;
  font: 600 13px/1 var(--f-body);
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgb(57 241 100 / 0.55), 0 4px 14px rgb(7 16 14 / 0.28);
  animation: pick-pulse 1.4s ease-out infinite;
}
.pick-cue[hidden] { display: none; }
.pick-cue[data-dir="l"] { flex-direction: row-reverse; padding: 6px 12px 6px 10px; }
.pick-cue-a {
  --r: 0deg;
  flex: none;
  width: 18px;
  height: 18px;
  transform: rotate(var(--r));
  animation: pick-nudge 0.9s ease-in-out infinite alternate;
}
.pick-cue[data-dir="d"] .pick-cue-a { --r: 90deg; }
.pick-cue[data-dir="l"] .pick-cue-a { --r: 180deg; }
@keyframes pick-pulse {
  0% { box-shadow: 0 0 0 0 rgb(57 241 100 / 0.55), 0 4px 14px rgb(7 16 14 / 0.28); }
  70%, 100% { box-shadow: 0 0 0 10px rgb(57 241 100 / 0), 0 4px 14px rgb(7 16 14 / 0.28); }
}
/* rotate first, then slide along the arrow's own x, so the nudge always goes the way the arrow points */
@keyframes pick-nudge {
  from { transform: rotate(var(--r)) translateX(-2px); }
  to { transform: rotate(var(--r)) translateX(3px); }
}

/* the ring on the open list or the empty chip: a steady green edge plus a pulse, on top of the element's own shadow
   (--ring-base repeats it; sections.css .dd, .dd.is-sheet, .qa-chip--empty.is-now). The list keeps its entry slide. */
.dd.pick-ring { --ring-base: 0 2px 6px rgb(60 64 67 / 0.3), 0 12px 36px rgb(60 64 67 / 0.26); animation: ddin 0.18s ease, pick-ring 1.4s ease-out infinite; }
.dd.is-sheet.pick-ring { --ring-base: 0 -10px 40px rgb(0 0 0 / 0.22), 0 0 0 1px rgb(0 0 0 / 0.05); animation: sheetin 0.25s cubic-bezier(.2,.7,.2,1), pick-ring 1.4s ease-out infinite; }
.qa-chip--empty.is-now.pick-ring { --ring-base: inset 0 0 0 2px #0b57d0; animation: pick-ring 1.4s ease-out infinite; }
@keyframes pick-ring {
  0% { box-shadow: 0 0 0 2px #39F164, 0 0 0 2px rgb(57 241 100 / 0.7), var(--ring-base, 0 0 0 0 transparent); }
  70%, 100% { box-shadow: 0 0 0 2px #39F164, 0 0 0 12px rgb(57 241 100 / 0), var(--ring-base, 0 0 0 0 transparent); }
}

@media (prefers-reduced-motion: reduce) {
  #mirror .mirror-light, .desk-wash, .desk-still { transition: none; }
  /* the cue and the ring hold still, still shown */
  .pick-cue, .pick-cue-a, .pick-ring, .dd.pick-ring, .dd.is-sheet.pick-ring { animation: none !important; }
  .pick-cue-a { transform: rotate(var(--r)); }
  .pick-ring { box-shadow: 0 0 0 3px #39F164, var(--ring-base, 0 0 0 0 transparent) !important; }
}