/* Charlotte List home page: the creator showcase.
   One creator shows at a time and the next one comes up on its own every 5 seconds. There are no buttons.
   It stops while a guest points at it or tabs into it.
   Guests who asked their device for less motion get a row they can swipe, and nothing moves. */
.cr-showcase{margin-top:28px}
.cr-show{display:flex;gap:16px;overflow-x:auto;padding:4px 8px 12px 0;scroll-snap-type:x proximity}
.cr-slide{flex:0 0 min(360px,86%);scroll-snap-align:start;display:flex;align-items:center;gap:16px;padding:18px;border:3px solid var(--ink);border-radius:var(--radius);box-shadow:6px 6px 0 var(--ink);background:var(--yellow);color:var(--ink);text-decoration:none}
.cr-slide:hover{text-decoration:none}
.cr-slide:nth-child(4n+2){background:var(--teal)}
.cr-slide:nth-child(4n+3){background:var(--pink)}
.cr-slide:nth-child(4n+4){background:var(--lav-bg)}
.cr-slide:only-child{flex-basis:100%}
.cr-slide:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.cr-slide .avatar{width:96px;height:96px;border-width:3px;background:var(--surface)}
.cr-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.cr-name{font-family:var(--font-display);font-size:24px;line-height:1.1;text-transform:uppercase;overflow-wrap:anywhere}
.cr-handle{font-weight:700;font-size:15px}
.cr-bio{font-size:15px;line-height:1.4;margin-top:6px;overflow-wrap:anywhere}
.cr-next{align-self:flex-start;margin-top:8px;padding:3px 10px;border:2px solid var(--ink);border-radius:999px;background:var(--surface);font-weight:700;font-size:13px}
@media (min-width:700px){
.cr-slide{padding:26px;gap:24px}
.cr-slide .avatar{width:140px;height:140px}
.cr-name{font-size:34px}
.cr-bio{font-size:17px}
}
@media (prefers-reduced-motion:no-preference){
/* All creators sit on top of each other in one box. The one on show is on top. */
.cr-show[data-n]{display:grid;overflow:visible;padding:4px 8px 8px 0}
.cr-show[data-n] .cr-slide{grid-area:1/1;opacity:0;z-index:0;animation-timing-function:linear;animation-iteration-count:infinite;animation-delay:calc(var(--i)*5s)}
.cr-show[data-n]:hover .cr-slide,.cr-show[data-n]:focus-within .cr-slide{animation-play-state:paused}
.cr-show[data-n] .cr-slide:focus-visible{opacity:1!important;z-index:3!important}
.cr-show[data-n="2"] .cr-slide{animation-name:crshow2;animation-duration:10s}
@keyframes crshow2{0%{opacity:0;z-index:2}5%{opacity:1;z-index:2}50%{opacity:1;z-index:2}50.01%{opacity:1;z-index:1}55%{opacity:1;z-index:1}55.01%{opacity:0;z-index:0}100%{opacity:0;z-index:0}}
.cr-show[data-n="3"] .cr-slide{animation-name:crshow3;animation-duration:15s}
@keyframes crshow3{0%{opacity:0;z-index:2}3.33%{opacity:1;z-index:2}33.33%{opacity:1;z-index:2}33.34%{opacity:1;z-index:1}36.67%{opacity:1;z-index:1}36.68%{opacity:0;z-index:0}100%{opacity:0;z-index:0}}
.cr-show[data-n="4"] .cr-slide{animation-name:crshow4;animation-duration:20s}
@keyframes crshow4{0%{opacity:0;z-index:2}2.5%{opacity:1;z-index:2}25%{opacity:1;z-index:2}25.01%{opacity:1;z-index:1}27.5%{opacity:1;z-index:1}27.51%{opacity:0;z-index:0}100%{opacity:0;z-index:0}}
.cr-show[data-n="5"] .cr-slide{animation-name:crshow5;animation-duration:25s}
@keyframes crshow5{0%{opacity:0;z-index:2}2%{opacity:1;z-index:2}20%{opacity:1;z-index:2}20.01%{opacity:1;z-index:1}22%{opacity:1;z-index:1}22.01%{opacity:0;z-index:0}100%{opacity:0;z-index:0}}
.cr-show[data-n="6"] .cr-slide{animation-name:crshow6;animation-duration:30s}
@keyframes crshow6{0%{opacity:0;z-index:2}1.67%{opacity:1;z-index:2}16.67%{opacity:1;z-index:2}16.68%{opacity:1;z-index:1}18.33%{opacity:1;z-index:1}18.34%{opacity:0;z-index:0}100%{opacity:0;z-index:0}}
.cr-show[data-n="7"] .cr-slide{animation-name:crshow7;animation-duration:35s}
@keyframes crshow7{0%{opacity:0;z-index:2}1.43%{opacity:1;z-index:2}14.29%{opacity:1;z-index:2}14.3%{opacity:1;z-index:1}15.71%{opacity:1;z-index:1}15.72%{opacity:0;z-index:0}100%{opacity:0;z-index:0}}
.cr-show[data-n="8"] .cr-slide{animation-name:crshow8;animation-duration:40s}
@keyframes crshow8{0%{opacity:0;z-index:2}1.25%{opacity:1;z-index:2}12.5%{opacity:1;z-index:2}12.51%{opacity:1;z-index:1}13.75%{opacity:1;z-index:1}13.76%{opacity:0;z-index:0}100%{opacity:0;z-index:0}}
}