/* ============================================================
   eggs.css — presentation for the interaction layer.
   Behaviour lives in scripts/; this file is just the look.
   ============================================================ */

/* ---- #7 theme photo-develop wash ----
   Transitions are gated behind html.theme-ready (set one frame
   after load) so the initial theme set never animates. */
html.theme-ready body { transition: background-color .9s ease; }
html.theme-ready .sheet,
html.theme-ready .sheet * {
  transition: background-color .9s ease, border-color .9s ease, color .9s ease, box-shadow .9s ease;
}
.develop-wash {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 42%, var(--sheet-bg), transparent 72%);
}
.develop-wash.run { animation: develop .9s ease; }
@keyframes develop { 0% { opacity: 0; } 38% { opacity: .55; } 100% { opacity: 0; } }

/* ---- egg: click flings paperclips that pile at the bottom of the sheet ---- */
.clip-pile { position: absolute; inset: 0; z-index: 56; pointer-events: none; overflow: visible; }
.falling-clip { position: absolute; font-size: 20px; line-height: 1; will-change: transform; pointer-events: none; user-select: none; }

/* ---- #1/#6 QA stamp (ignites the conversion) ---- */
.qa-stamp {
  position: absolute; z-index: 60; pointer-events: none;
  border: 3px double var(--stamp); color: var(--stamp); border-radius: 8px;
  padding: 7px 13px; text-align: center; font-weight: 700; letter-spacing: 1px; line-height: 1.1;
  opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(2);
}
.qa-stamp .qa-big { font-size: 21px; display: block; }
.qa-stamp .qa-small { font-size: 8.5px; display: block; letter-spacing: 1.5px; margin-top: 2px; }
.qa-stamp.thud { animation: qa-thud .42s cubic-bezier(.2, 1.4, .3, 1) forwards; }
@keyframes qa-thud {
  0%   { opacity: 0;   transform: translate(-50%, -50%) rotate(-8deg) scale(2.4); }
  55%  { opacity: .92; transform: translate(-50%, -50%) rotate(-8deg) scale(.9); }
  100% { opacity: .92; transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
}

/* ---- #5 REV git-log popover ---- */
.rev-popover {
  position: absolute; z-index: 70; top: calc(100% + 10px); right: 0; left: auto;
  width: 320px; max-width: 80vw; background: var(--sheet-bg);
  border: 2px solid var(--ink); box-shadow: 4px 5px 0 rgba(0, 0, 0, .12);
  padding: 12px 14px; font-size: 11px; color: var(--secondary); cursor: default;
  font-weight: 400; letter-spacing: normal;
}
.rev-popover h3 { margin: 0 0 10px; font-size: 9.5px; letter-spacing: 1px; color: var(--faint); font-weight: 700; }
.rev-log { display: flex; flex-direction: column; gap: 10px; }
.rev-entry { position: relative; padding-left: 16px; }
.rev-entry::before { content: ''; position: absolute; left: 1px; top: 2px; width: 7px; height: 7px; border-radius: 50%; border: 2px solid var(--accent); background: var(--sheet-bg); box-sizing: border-box; }
.rev-entry::after  { content: ''; position: absolute; left: 4px; top: 11px; bottom: -10px; width: 1px; background: var(--rule); }
.rev-entry:last-child::after { display: none; }
.rev-hash { color: var(--accent); font-weight: 700; }
.rev-msg  { color: var(--secondary); }
.rev-date { display: block; color: var(--faint); font-size: 9.5px; margin-top: 2px; }

/* ---- #8 portfolio hunt: companies hidden in whitespace + magnifier ---- */
.hunt-layer { position: absolute; inset: 0; pointer-events: none; z-index: 41; }
.company-note {
  position: absolute; pointer-events: none;
  opacity: 0;                 /* the magnifier "rubs" this up from 0 → 1 */
  transform-origin: center; transition: transform .2s ease;
}
.company-note.found { opacity: 1 !important; filter: none !important; transform: scale(1.06); }
.logo-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; box-sizing: border-box;
  border: 1.5px solid var(--ink); border-radius: 4px; background: var(--sheet-bg);
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 700;
  font-size: 13px; line-height: 1; letter-spacing: .5px; color: var(--ink);
  box-shadow: 1px 1px 0 var(--rule);
  filter: url(#scratch);   /* rough, hand-scratched edges */
  transition: color .25s ease, border-color .25s ease;
}
.logo-tile svg { width: 19px; height: 19px; display: block; fill: currentColor; }
/* logo marks are loaded from assets/logos/*.svg as CSS masks, so they inherit
   the tile colour (ink -> accent when found) and pick up the scratch filter */
.logo-mark {
  display: block; width: 20px; height: 20px; background-color: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat;
          mask: var(--logo) center / contain no-repeat;
}
.company-note.found .logo-tile { color: var(--accent); border-color: var(--accent); }
.hunt-lens {
  position: absolute; z-index: 42; width: 79px; height: 79px; border-radius: 50%;
  border: 1.5px solid var(--muted); pointer-events: none; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 255, 255, .10), transparent 66%);
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .05);
  opacity: 0; transition: opacity .18s ease;
}
.hunt-lens.on { opacity: .8; }
.hunt-lens::after { content: ''; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: var(--muted); }
.hunt-progress { font-size: 10px; font-weight: 400; letter-spacing: 1px; color: var(--faint); }
.portfolio tbody tr.found td.company { color: var(--accent); }
.portfolio tbody tr.found td:first-child::before { content: '\2713\00a0'; color: var(--accent); font-weight: 700; }

/* ---- #9 red-pencil checker marks ---- */
.checker-mark {
  position: absolute; z-index: 30; color: var(--pencil);
  font-family: 'Patrick Hand', cursive; pointer-events: none; user-select: none;
  opacity: 0; transition: opacity .25s ease;
}
.checker-mark.on { opacity: .85; }

/* ---- #10 coffee-stain ring (3rd visit) ---- */
.coffee-stain {
  position: absolute; z-index: 55; border-radius: 50%; pointer-events: none;
  opacity: 0; transition: opacity 1.6s ease;
  background:
    radial-gradient(circle, transparent 52%, var(--coffee) 54%, var(--coffee) 62%, transparent 65%),
    radial-gradient(circle, transparent 60%, var(--coffee) 61%, transparent 70%),
    radial-gradient(circle at 60% 40%, var(--coffee), transparent 40%);
}
.coffee-stain.on { opacity: 1; }

/* ---- respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html.theme-ready body,
  html.theme-ready .sheet,
  html.theme-ready .sheet * { transition: none !important; }
  .develop-wash.run { animation: none; }
  .qa-stamp.thud { animation: none; opacity: .92; transform: rotate(-8deg) scale(1); }
  .company-note, .hunt-lens, .coffee-stain, .checker-mark, .falling-clip { transition: none !important; }
}