/* Keep the five stages moving while the race demonstrates an actual tap. */
.agave-products .agave-journey-stages { --stage-gap:clamp(72px,5vw,104px); gap:var(--stage-gap); padding-right:var(--stage-gap); }
.agave-products .agave-journey-stages > li { position:relative; width:clamp(240px,15vw,290px); }
.agave-products .agave-journey-stages > li:nth-child(even) { transform:none; }
.agave-products .agave-stage-heading { padding:0 2px 19px; }
.agave-products .agave-stage-heading h3 { font-size:20px; line-height:1.4; color:#173a51; }
.agave-products .agave-journey-stages > li > p { margin:25px 0 0; color:#506d80; font-size:16px; line-height:1.75; }
.agave-stage-arrow { position:absolute; left:calc(100% + 20px); top:44%; width:calc(var(--stage-gap) - 40px); text-align:center; font:300 33px/1 Poppins,sans-serif; color:#74a3b8; }
.agave-race-screen { position:absolute; inset:0; overflow:hidden; container-type:inline-size; background:#001b37; }
.agave-race-court { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.66); }
.agave-race-brand { position:absolute; top:2.2%; inset-inline:4%; display:flex; align-items:center; justify-content:space-between; }
.agave-race-brand img { width:17%; filter:brightness(0) invert(1); }.agave-race-brand > span { color:#fff; font:400 5cqw/1 sans-serif; }
.agave-race-scoreboard { position:absolute; top:36%; inset-inline:6%; display:flex; justify-content:space-between; text-shadow:0 1px 10px #000; color:#fff; }
.agave-race-scoreboard > div:last-child { text-align:right; }.agave-race-scoreboard span { display:block; font:600 3.2cqw/1.3 Poppins,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:#d2dce7; }
.agave-race-scoreboard strong { display:block; margin-top:1cqw; font:600 8cqw/1.2 Poppins,sans-serif; font-variant-numeric:tabular-nums; }
.agave-race-hit { position:absolute; width:33%; aspect-ratio:1; left:33.5%; bottom:5.6%; }
.agave-race-ball { position:absolute; inset:0; width:100%; height:100%; overflow:visible; filter:drop-shadow(0 6px 4px #0005); animation:agave-ball-tap .8s ease-out infinite; transform-origin:50% 90%; }
.agave-race-ripple { position:absolute; inset:5%; border:2px solid #ffffffbc; border-radius:50%; animation:agave-tap-ripple .8s ease-out infinite; }
.agave-race-increment { position:absolute; top:-25%; left:40%; color:white; font:600 6cqw/1 Poppins,sans-serif; text-shadow:0 2px 8px #001b37; animation:agave-tap-score .8s ease-out infinite; }
.agave-race-tap { position:absolute; bottom:-7%; right:-4%; width:31%; height:36%; filter:drop-shadow(0 3px 2px #001b3760); animation:agave-tap-hand .8s ease-out infinite; }
.agave-race-screen .agave-race-cue { position:absolute; bottom:1.4%; left:0; right:0; color:#fff; text-align:center; margin:0; font:500 3cqw/1.4 Poppins,sans-serif; text-shadow:0 1px 5px #001b37; }
@keyframes agave-ball-tap { 0%,100%{transform:translateY(0) scale(1)} 12%{transform:translateY(3%) scale(.92)} 40%{transform:translateY(-12%) scale(1.04)} 68%{transform:translateY(0) scale(1)} }
@keyframes agave-tap-ripple { 0%{transform:scale(.6);opacity:0} 12%{opacity:.8} 65%,100%{transform:scale(1.55);opacity:0} }
@keyframes agave-tap-score { 0%,12%{transform:translateY(0);opacity:0} 24%{opacity:1} 90%,100%{transform:translateY(-25px);opacity:0} }
@keyframes agave-tap-hand { 0%,100%{transform:translate(4px,5px)} 12%,24%{transform:translate(0,0)} 65%{transform:translate(4px,5px)} }
@media(max-width:767px) { .agave-products .agave-journey-stages { --stage-gap:66px; }.agave-products .agave-journey-stages > li { width:240px; }.agave-products .agave-stage-heading h3 { font-size:18px; }.agave-products .agave-journey-stages > li > p { font-size:15px; }.agave-stage-arrow { left:calc(100% + 16px); width:34px; font-size:28px; } }
@media(prefers-reduced-motion:reduce) { .agave-race-ball,.agave-race-ripple,.agave-race-increment,.agave-race-tap { animation:none!important; }.agave-race-ripple,.agave-race-increment { display:none; } }
/* A generous alternating rhythm and a full shot through the hoop. */
.agave-products .agave-journey-stages { --stage-gap:clamp(125px,8vw,176px); }
.agave-products .agave-journey-stages > li { width:clamp(250px,15.5vw,305px); }
.agave-products .agave-journey-stages > li:nth-child(even) { transform:translateY(48px); }
.agave-products .agave-journey-viewport { padding-bottom:110px; }
.agave-stage-arrow { color:#00b1eb; font-size:38px; transform:rotate(10deg); }
.agave-journey-stages > li:nth-child(even) .agave-stage-arrow { transform:rotate(-10deg); }
.agave-race-court { object-fit:fill; }
.agave-race-ball { animation:agave-ball-shot 1.7s linear infinite; transform-origin:center; }
.agave-race-ripple { animation:agave-shot-ripple 1.7s ease-out infinite; }.agave-race-increment { animation:agave-shot-score 1.7s ease-out infinite; top:auto; bottom:245%; }
.agave-race-tap { animation:agave-shot-hand 1.7s ease-out infinite; }
@keyframes agave-ball-shot {
 0%,100% { transform:translateY(0) scale(1); opacity:1; }
 7% { transform:translateY(2cqw) scale(.94); opacity:1; }
 15% { transform:translateY(-28cqw) scale(.82); }
 28% { transform:translateY(-98cqw) scale(.44); }
 44% { transform:translateY(-142cqw) scale(.22); }
 54% { transform:translateY(-141cqw) scale(.21); }
 66% { transform:translateY(-127cqw) scale(.2); opacity:1; }
 76% { transform:translateY(-116cqw) scale(.17); opacity:0; }
 77% { transform:translateY(0) scale(.96); opacity:0; }
 90% { transform:translateY(0) scale(1); opacity:1; }
}
@keyframes agave-shot-ripple { 0%{transform:scale(.7);opacity:0} 7%{opacity:.8} 30%,100%{transform:scale(1.6);opacity:0} }
@keyframes agave-shot-score { 0%,63%{opacity:0;transform:translateY(0)} 69%{opacity:1} 94%,100%{opacity:0;transform:translateY(-20px)} }
@keyframes agave-shot-hand { 0%,100%{transform:translate(4px,5px);opacity:1} 7%,13%{transform:translate(0,0);opacity:1} 30%,75%{transform:translate(5px,8px);opacity:0} 90%{opacity:1} }
@media(max-width:767px) { .agave-products .agave-journey-stages { --stage-gap:110px; }.agave-products .agave-journey-stages > li { width:250px; }.agave-products .agave-journey-stages > li:nth-child(even) { transform:translateY(38px); }.agave-stage-arrow { left:calc(100% + 20px); width:70px; font-size:34px; } }
/* Read the numbered instruction, then see it happen on the phone. */
.agave-products .agave-journey-stages { --stage-gap:clamp(460px,24vw,560px); --phone-width:clamp(250px,15.5vw,305px); gap:0; padding-right:0; }
.agave-products .agave-journey-stages > li { width:calc(var(--phone-width) + var(--stage-gap)); }
.agave-products .agave-journey-phone { width:var(--phone-width); margin-left:calc(var(--stage-gap) - 110px); }
.agave-stage-copy { position:absolute; top:46%; left:0; width:calc(var(--stage-gap) - 220px); transform:translateY(-50%); }
.agave-products .agave-stage-heading { padding:0 0 18px; gap:12px; align-items:baseline; }
.agave-products .agave-stage-heading h3 { font-size:22px; }
.agave-products .agave-stage-number { font:500 18px/1.4 Poppins,sans-serif; color:#00ade2; letter-spacing:-.03em; }
.agave-stage-copy > p { margin:0; font:400 17px/1.85 Poppins,sans-serif; color:#3f637b; }
.agave-stage-arrow { left:calc(var(--stage-gap) - 205px); top:46%; width:82px; color:#00ade2; transform:none; }
.agave-stage-arrow svg { width:100%; height:22px; display:block; overflow:visible; }
.agave-stage-arrow-to { left:calc(var(--stage-gap) + var(--phone-width) - 96px); transform:rotate(10deg); }
.agave-journey-stages > li:nth-child(even) .agave-stage-arrow-from { transform:none; }
.agave-journey-stages > li:nth-child(even) .agave-stage-arrow-to { transform:rotate(-10deg); }
.agave-products .agave-journey-track { animation:none; }
@media(max-width:1300px) { .agave-products .agave-journey-stages { --stage-gap:470px; }.agave-stage-copy > p { font-size:16px; } }
@media(max-width:767px) { .agave-products .agave-journey-stages { --stage-gap:440px; --phone-width:250px; }.agave-stage-copy { width:240px; }.agave-stage-copy > p { font-size:15px; line-height:1.8; }.agave-products .agave-stage-heading h3 { font-size:20px; }.agave-stage-arrow { left:255px; width:60px; }.agave-stage-arrow-to { left:calc(var(--stage-gap) + var(--phone-width) - 95px); } }

/* Dashed curves make the stages feel like one rising and falling journey. */
.agave-stage-arrow { top:calc(46% - 32px); }
.agave-stage-arrow svg { height:68px; }
.agave-stage-arrow-to { transform:scaleY(-1); }
.agave-journey-stages > li:nth-child(even) .agave-stage-arrow-from { transform:scaleY(-1); }
.agave-journey-stages > li:nth-child(even) .agave-stage-arrow-to { transform:none; }
@media(max-width:767px) { .agave-stage-arrow { top:calc(46% - 24px); }.agave-stage-arrow svg { height:52px; } }

/* Leave a deliberate breath between the final game and the next login. */
.agave-products .agave-journey-stages { padding-right:clamp(280px,22vw,500px); }
.agave-journey-visual { position:relative; }
.agave-journey-viewport { cursor:pointer; }
.agave-journey-viewport:focus-visible { outline:2px solid #00ade2; outline-offset:-3px; }
.agave-journey-controls[hidden] { display:none; }
.agave-journey-controls { position:absolute; bottom:18px; left:24px; right:7vw; display:flex; align-items:center; gap:12px; padding:12px 16px; border:1px solid #dce7ed; border-radius:12px; background:#f4f9fc; color:#21465d; box-shadow:0 6px 20px #18364d06; font:500 13px/1.5 Poppins,sans-serif; }
.agave-journey-controls button { flex:none; display:grid; place-items:center; background:transparent; color:inherit; border:0; border-radius:6px; cursor:pointer; width:44px; height:44px; padding:0; }
.agave-journey-controls button:hover { background:#e2f0f6; }.agave-journey-controls button:focus-visible,.agave-journey-progress:focus-visible { outline:2px solid #00ade2; outline-offset:3px; }
.agave-journey-controls .agave-journey-play { min-width:66px; background:#00ade2; color:white; }
.agave-journey-controls svg { width:20px; height:20px; }
.agave-journey-progress { min-width:60px; flex:1; width:auto; accent-color:#00ade2; cursor:pointer; }
.agave-journey-position { min-width:140px; text-align:right; }
.agave-journey-is-paused .agave-race-ball,.agave-journey-is-paused .agave-race-ripple,.agave-journey-is-paused .agave-race-increment,.agave-journey-is-paused .agave-race-tap { animation-play-state:paused; }
@media(max-width:767px) { .agave-journey-controls { left:6%; right:6%; bottom:8px; padding:8px; gap:4px; flex-wrap:wrap; }.agave-journey-position { width:100%; text-align:center; font-size:12px; }.agave-journey-controls .agave-journey-play { min-width:62px; }.agave-products .agave-journey-viewport { padding-bottom:125px; } }
/* Give the moving journey more room beside the fixed introduction. */
@media(min-width:1100px) {
 .agave-products .agave-game-journey { grid-template-columns:30% 70%; }
 .agave-products .agave-journey-intro { padding-right:clamp(28px,3vw,64px); }
}

.agave-countdown-screen { display:block; width:100%; height:100%; }
.agave-journey-controls { z-index:10; pointer-events:auto; }