/* The familiar faces, before the MuckNet reveal. */
.cast-intro, .cast-return, .cast-takeover { display: none; }
.cast-enabled .cast-intro { display: block; padding: 56px 0 64px; }
.cast-enabled #bot-world { display: none; }
.cast-enabled.is-bot-world #bot-world { display: block; }
.cast-enabled.is-bot-world .cast-intro { display: none; }
.cast-heading { text-align: center; margin: 0 auto 40px; }
.cast-heading h1 { margin-bottom: 16px; color: var(--muck-text); }
.cast-heading > p:last-child { color: var(--muck-text-2); font-size: 18px; }
.cast-lineup { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; max-width: 1200px; margin: auto; }
.cast-person { overflow: hidden; border: 1px solid var(--muck-line); border-radius: 12px; background: var(--muck-surface-1); transition: opacity .45s, transform .6s, filter .6s; transition-delay: calc(var(--cast-i) * 35ms); }
.cast-person img { display: block; width: 100%; height: auto; aspect-ratio: 1.35; object-fit: cover; object-position: center 35%; }
.cast-person > div { padding: 20px; }
.cast-person h2 { font-size: 23px; margin: 0 0 10px; color: var(--muck-text); }
.cast-person p { font-size: 14px; line-height: 1.6; color: var(--muck-text-2); margin: 0; }
.cast-mystery { min-height: 280px; border: 1px dashed var(--muck-gold-muted); border-radius: 12px; background: var(--muck-surface-1); color: var(--muck-text); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 24px; gap: 16px; cursor: pointer; font-family: inherit; text-align: center; transition: background .2s, border-color .2s; }
.cast-mystery:hover { background: var(--muck-surface-3); border-color: var(--muck-gold); }
.cast-question { font-size: 80px; line-height: 1; font-weight: 750; color: var(--muck-gold-muted); }
.cast-mystery strong { font-size: 20px; letter-spacing: -.03em; }
.cast-mystery > span:last-child { color: var(--muck-text-2); font-size: 13px; }
.cast-mystery:focus-visible, .cast-return:focus-visible { outline: 2px solid var(--muck-gold); outline-offset: 5px; }
.is-revealing .cast-person { transform: translateY(20px) scale(.96); opacity: 0; filter: grayscale(1); }
.is-revealing .cast-mystery { opacity: 0; transition: opacity .4s; }
.cast-enabled .cast-takeover { display: flex; position: fixed; inset: 0; z-index: 100; background: #090d0bee; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s, visibility .35s; }
.is-revealing .cast-takeover { opacity: 1; visibility: visible; }
.cast-takeover > span { font: 12px var(--muck-font-mono); letter-spacing: .3em; color: var(--muck-gold-muted); }
.cast-takeover strong { font-size: clamp(30px, 5vw, 64px); letter-spacing: -.04em; margin-top: 24px; }
.cast-takeover p { color: var(--muck-text-2); }
.cast-takeover i { height: 2px; width: min(320px, 80vw); background: var(--muck-gold-muted); transform: scaleX(0); transform-origin: left; }
.is-revealing .cast-takeover i { animation: castLoad 1.2s .15s ease both; }
.cast-enabled .cast-return { display: inline-flex; min-height: 44px; align-items: center; padding: 8px 0; margin-top: 20px; border: 0; background: transparent; color: var(--muck-text-2); font: 14px var(--muck-font); cursor: pointer; }
@keyframes castLoad { to { transform: scaleX(1); } }
@media (max-width: 900px) { .cast-lineup { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 480px) { .cast-enabled .cast-intro { padding-top: 36px; } .cast-heading > p:last-child { font-size: 16px; line-height: 1.6; } .cast-person > div { padding: 14px; } .cast-person h2 { font-size: 20px; } .cast-person p { font-size: 13px; } .cast-mystery { padding: 14px; min-height: 250px; } .cast-mystery strong { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .cast-person, .cast-enabled .cast-takeover { transition: none; } .is-revealing .cast-takeover i { animation: none; } }

/* Hover reveals MuckBot behind every portrait; leaving restores the cast. */
.muckbot-watch { width:100%; height:100%; border-radius:50%; cursor:default; }
.muckbot-watch:focus-visible { outline:2px solid var(--muck-gold); outline-offset:6px; }
.clones .clone:not(.clone--prime) { perspective:500px; }
.clones .clone:not(.clone--prime) .clone-face { backface-visibility:hidden; transition:transform .6s cubic-bezier(.2,.65,.2,1); transition-delay:calc(var(--r) * 90ms + var(--i) * 5ms); }
.clones .clone:not(.clone--prime)::after { content:''; position:absolute; inset:0; border:2px solid #a89972; border-radius:50%; background:#10110e url('../avatars/new/muck1000-support-v3.jpg') center / cover; transform:rotateY(-180deg); backface-visibility:hidden; transition:transform .6s cubic-bezier(.2,.65,.2,1); transition-delay:calc(var(--r) * 90ms + var(--i) * 5ms); pointer-events:none; }
.clones.is-watching .clone:not(.clone--prime) .clone-face { transform:rotateY(180deg); }
.clones.is-watching .clone:not(.clone--prime)::after { transform:rotateY(0); }
.clones.is-watching .clone--prime img { filter:grayscale(.75); }
.clones.is-watching .clone-card { visibility:hidden; }
/* Reduce motion on (Shaun's Mac, 2026-10-29: "it feels very on/off"): no flip, but not a snap either; each face fades into
   MuckBot and back with the same ring-by-ring ripple. MuckBot's own dimming eases in both cases. */
.clones .clone--prime img { transition:filter .5s ease; }
@media(prefers-reduced-motion:reduce) {
  .clones .clone:not(.clone--prime) .clone-face, .clones .clone:not(.clone--prime)::after { transform:none; transition:opacity .45s ease; transition-delay:calc(var(--r) * 90ms + var(--i) * 5ms); }
  .clones .clone:not(.clone--prime)::after { opacity:0; }
  .clones.is-watching .clone:not(.clone--prime) .clone-face { transform:none; opacity:0; }
  .clones.is-watching .clone:not(.clone--prime)::after { transform:none; opacity:1; }
}