/* ==========================================================================
   Footer "Arizona travel guides" carousel (client, 2026-10-06) - a slow
   sideways drift of the official tourism sites, each shown by a screenshot
   of its homepage. Markup: guideReel() in nav-data.mjs. Shared by the
   homepage and the inner pages; both footers are dark, so it is light-on-dark.
   ========================================================================== */
.gr{padding-top:24px;border-top:1px solid rgba(255,255,255,.1)}
.gr-title{margin:0 0 14px;font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:#C4B5FD}
.gr-view{overflow:hidden;margin:0 -4px;padding:4px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
/* two identical runs, each card carrying its own right margin, so -50% is
   exactly one run and the loop never jumps */
.gr-track{display:flex;width:max-content;list-style:none;margin:0;padding:0;animation:grRun 70s linear infinite}
.gr-view:hover .gr-track,.gr-view:focus-within .gr-track{animation-play-state:paused}
@keyframes grRun{to{transform:translateX(-50%)}}
.gr-item{flex:0 0 auto;margin-right:14px}
.gr-card{display:flex;flex-direction:column;gap:6px;width:220px;color:#FFFFFF;text-decoration:none}
.gr-shot{position:relative;display:block;aspect-ratio:16/10;border-radius:12px;overflow:hidden;
  background:linear-gradient(155deg,#5B21B6,#13072A);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 14px 30px -18px rgba(0,0,0,.8)}
.gr-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.gr-card:hover .gr-shot img{transform:scale(1.05)}
.gr-card:focus-visible{outline:2px solid #C4B5FD;outline-offset:4px;border-radius:12px}
.gr-initials{position:absolute;inset:0;display:grid;place-items:center;font-family:'Geist Mono',ui-monospace,monospace;
  font-size:26px;font-weight:500;letter-spacing:.06em;color:#E9DDFF}
.gr-name{margin-top:4px;font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.gr-name span{color:#C4B5FD;font-weight:400}
.gr-blurb{font-size:12px;line-height:1.4;color:#B9A8E6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:640px){
  .gr-card{width:176px}
  .gr-name{font-size:12.5px}
  .gr-blurb{font-size:11.5px}
}
/* no drift: a row the visitor scrolls themselves, without the copies */
@media (prefers-reduced-motion:reduce){
  .gr-track{animation:none}
  .gr-view{overflow-x:auto;scrollbar-width:none}
  .gr-view::-webkit-scrollbar{display:none}
  .gr-item[aria-hidden="true"]{display:none}
}