/* A doorstep conversation, grounded in the essay's everyday concerns. */
.doorstep-artwork{margin:30px 0 34px;background:linear-gradient(145deg,#163e4744,#071923cc);border:1px solid #9fdfc035;border-radius:10px;overflow:hidden;box-shadow:0 18px 50px #0002}
.doorstep-scene{position:relative;overflow:hidden;isolation:isolate}
.doorstep-scene svg{display:block;width:100%;height:auto;overflow:visible}
.doorstep-frame{filter:drop-shadow(0 0 6px #8cecd4aa)}
.doorstep-door{transform-box:fill-box;transform-origin:left center;transform:perspective(450px) rotateY(-66deg);filter:drop-shadow(0 0 6px #8cecd444)}
.doorstep-resident{filter:drop-shadow(0 0 4px #aae8ce44)}
.doorstep-visitor{filter:drop-shadow(0 0 4px #e5bf7c44)}
.doorstep-bubble{transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 0 6px #8cecd433)}
.doorstep-scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 7px,#c5ffe604 7px 8px)}
.doorstep-artwork figcaption{display:flex;flex-direction:column;gap:6px;padding:19px 23px;border-top:1px solid #9fdfc024;background:#0d2534aa}
.doorstep-artwork figcaption strong{font-size:16px;font-weight:500;line-height:1.45}
.doorstep-artwork figcaption span{font-size:12px;line-height:1.6;color:var(--muted)}
body:has(.doorstep-artwork) .guide-trigger{position:static;display:flex;width:max-content;max-width:90%;margin:24px auto}
@media(prefers-reduced-motion:no-preference){
 .doorstep-door{animation:doorstep-open 12s ease-in-out infinite}
 .doorstep-frame{animation:doorstep-light 12s ease-in-out infinite}
 .household-bubble{animation:doorstep-household 12s ease-in-out infinite}
 .school-bubble{animation:doorstep-school 12s ease-in-out infinite}
 .street-bubble{animation:doorstep-street 12s ease-in-out infinite}
 .doorstep-resident-arm{animation:doorstep-gesture 12s ease-in-out infinite;transform-box:fill-box;transform-origin:top right}
}
@keyframes doorstep-open{0%,100%{transform:perspective(450px) rotateY(-15deg)}15%,87%{transform:perspective(450px) rotateY(-66deg)}}
@keyframes doorstep-light{0%,100%{filter:drop-shadow(0 0 3px #8cecd444)}18%,88%{filter:drop-shadow(0 0 10px #8cecd4dd)}}
@keyframes doorstep-household{0%,100%{opacity:.25;transform:translateY(7px)}20%,86%{opacity:1;transform:translateY(0)}}
@keyframes doorstep-school{0%,20%,100%{opacity:.2;transform:translateY(7px)}39%,86%{opacity:1;transform:translateY(0)}}
@keyframes doorstep-street{0%,39%,100%{opacity:.2;transform:translateY(7px)}60%,86%{opacity:1;transform:translateY(0)}}
@keyframes doorstep-gesture{0%,38%,70%,100%{transform:rotate(0)}45%,60%{transform:rotate(-10deg)}}
@media(max-width:480px){.doorstep-artwork figcaption{padding:16px}.doorstep-artwork figcaption strong{font-size:15px}.doorstep-artwork figcaption span{font-size:11px}}