/* Rally site motion layer (2026-10-03). Shared by every page, loaded after site.css. Everything here is
   decoration: with reduced motion, no hover device or no JavaScript the pages read exactly as before. */
@view-transition{navigation:auto}
.top{view-transition-name:fx-top}
@media (max-width:899px){.tabs{view-transition-name:fx-tabs}}
::view-transition-old(root){animation:.22s ease both fx-out}
::view-transition-new(root){animation:.5s var(--ease) both fx-in}
@keyframes fx-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes fx-in{from{opacity:0;transform:translateY(14px)}}

.fx-prog{position:fixed;top:0;left:0;width:100%;height:3px;transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none;
  background:linear-gradient(90deg,var(--teal),#86F2E6);box-shadow:0 0 12px rgba(79,209,197,.6)}
.fx-spot{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(520px circle at var(--mx,50%) var(--my,28%),rgba(79,209,197,.10),transparent 60%)}
.fx-glow{position:fixed;z-index:-1;pointer-events:none;width:640px;height:640px;border-radius:50%;left:50%;top:26%;margin-left:-320px;
  background:radial-gradient(circle,rgba(79,209,197,.14),transparent 65%);transform:translateY(calc(var(--gy,0) * -.22px))}

/* headlines: one soft focus-in per heading (no per-word motion) */
.fx-h{opacity:0;filter:blur(8px);transform:translateY(10px);transition:opacity .8s var(--ease),filter .8s var(--ease),transform .9s var(--ease)}
.fx-h.fx-in{opacity:1;filter:none;transform:none}
/* cards and buttons */
.fx-mag{transition:transform .16s var(--ease),background .2s,translate .3s var(--ease)}
.fx-dot{position:fixed;width:8px;height:8px;border-radius:2px;pointer-events:none;z-index:70}
.btn:not(.ghost):not([disabled])::after{content:"";position:absolute;top:0;left:-70%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);animation:fx-shine 4.2s infinite}
.btn{position:relative;overflow:hidden}
@keyframes fx-shine{0%,62%{left:-70%}100%{left:140%}}

/* things that scroll in: covers and phones ease from slightly large and low */
.cover,.phone-frame{transition:transform 1s var(--ease),opacity .8s var(--ease)}
/* the swipe deck builds new cards on every swipe and fades its own photos in, so it is left out here */
.can-reveal .cover:not(.fx-in):not(.deck .cover),.can-reveal .phone-frame:not(.fx-in){transform:translateY(22px) scale(.97);opacity:.0}
.cover.fx-in,.phone-frame.fx-in{transform:none;opacity:1}
.fx-float{animation:fx-float 6s ease-in-out infinite}
@keyframes fx-float{50%{translate:0 -8px}}

@media (prefers-reduced-motion:reduce){
  .fx-h{opacity:1;filter:none;transform:none}
  .can-reveal .cover:not(.fx-in),.can-reveal .phone-frame:not(.fx-in){transform:none;opacity:1}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* feature visuals pop: they float, lean toward the cursor, drift with the scroll and arrive with a small spring */
.fx-depth{will-change:transform;filter:drop-shadow(0 34px 38px rgba(0,0,0,.5)) drop-shadow(0 0 40px rgba(79,209,197,.16))}
.can-reveal .fx-depth.reveal{transition-property:opacity!important}
.fx-pop{animation:fx-pop .9s cubic-bezier(.3,1.5,.5,1) both}
@keyframes fx-pop{0%{scale:.9;opacity:0}60%{scale:1.025;opacity:1}100%{scale:1}}
.fx-bob{animation:fx-bob var(--bd,6s) ease-in-out infinite;animation-delay:var(--bp,0s)}
@keyframes fx-bob{50%{translate:0 -9px}}
@media (prefers-reduced-motion:reduce){.fx-pop,.fx-bob{animation:none}.fx-depth{transform:none!important}}

/* nav: on phones the tab bar shows just "Venues" and "Organizers" */
@media (max-width:899px){.fx-for{display:none}}