/* Journey effects (3 Nov, Joshua: "try adding them now").
   1 your face walks to the next stop · 2 the stadium wakes up as you get closer · 3 skyline + clouds removed 3 Nov (looked like grey blocks)
   4 a stamp + confetti on the stop you just finished · 5 animals wave when tapped · 6 the next stop hops
   Everything that moves sits under prefers-reduced-motion: no-preference and the app's Motion switch (data-motion). */

/* ---------- 2: the stadium (lights grow with --near: 0 at the start, 1 when you're at the stadium) ---------- */
.app[data-sky=night] .s3-fx{position:absolute;inset:0 0 auto;height:200px;z-index:0;pointer-events:none}
.slam3d.lock .s3-fx{display:none}
.s3-fx .fl{position:absolute;top:8%;width:120px;height:120px;margin-left:-60px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,250,220,.95),rgba(255,240,170,.45) 35%,rgba(255,240,170,0) 72%);opacity:calc(var(--near,0) * var(--near,0));mix-blend-mode:screen}
.s3-fx .fl.l{left:16%}.s3-fx .fl.r{left:84%}
.s3-fx .bm{position:absolute;top:-60px;width:70px;height:170px;margin-left:-35px;transform-origin:50% 100%;background:linear-gradient(0deg,rgba(255,248,210,.55),rgba(255,248,210,0));clip-path:polygon(38% 100%,62% 100%,100% 0,0 0);opacity:0}
.s3-fx .bm.l{left:16%;rotate:-14deg}.s3-fx .bm.r{left:84%;rotate:14deg}
.slam3d.near .s3-fx .bm,.slam3d.cur .s3-fx .bm,.slam3d.done .s3-fx .bm{opacity:.9}
.s3-fx .flg{position:absolute;width:3.5px;height:46px;border-radius:2px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.s3-fx .flg::after{content:"";position:absolute;left:3px;top:1px;width:30px;height:20px;background:linear-gradient(180deg,#fff 0 52%,var(--f1) 52% 100%);clip-path:polygon(0 0,100% 50%,0 100%);transform-origin:0 50%}
.s3-fx .flg.a{left:24%;top:-4px}.s3-fx .flg.b{left:49%;top:-22px;height:52px}.s3-fx .flg.c{left:73%;top:-4px}

/* ---------- 1: your face on the stop you're at ---------- */
.j3me{position:absolute;z-index:5;left:-16px;top:-14px;width:40px;height:40px;border-radius:50%;background:#fff;padding:2px;box-shadow:0 0 0 2.5px var(--k-purple,#7C3AED),0 6px 12px -4px rgba(0,0,0,.35);pointer-events:none}
.j3me img,.j3me span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;object-fit:cover;color:#fff;font-weight:900;font-size:17px}
.slam3d .j3me{left:auto;right:18%;top:-4px;width:48px;height:48px}

/* ---------- 5: animals say hi ---------- */
.app[data-tab=path]:not([data-arr]) .jc{pointer-events:auto;cursor:pointer}
.jc-hi{position:absolute;z-index:6;left:50%;bottom:calc(100% - 6px);translate:-50% 0;padding:6px 12px;border-radius:14px;background:#fff;color:var(--k-ink,#1B1F3B);font-size:15px;font-weight:900;white-space:nowrap;box-shadow:0 6px 16px -6px rgba(0,0,0,.35);pointer-events:none}
.jc-hi::after{content:"";position:absolute;left:calc(50% - 6px);bottom:-5px;width:12px;height:12px;background:#fff;rotate:45deg}

/* ---------- 4: confetti pieces (hidden unless they're bursting) ---------- */
.j3n .cf{position:absolute;left:50%;top:45%;width:8px;height:12px;border-radius:2px;opacity:0;pointer-events:none;z-index:6}
.j3n .cf:nth-of-type(4n+1){background:#FF5A5F}.j3n .cf:nth-of-type(4n+2){background:#FFC93C}.j3n .cf:nth-of-type(4n+3){background:#34C759}.j3n .cf:nth-of-type(4n){background:#5B8CFF}
.j3n .cf:nth-of-type(1){--a:-80deg;--d:70px}.j3n .cf:nth-of-type(2){--a:-55deg;--d:84px}.j3n .cf:nth-of-type(3){--a:-30deg;--d:66px}.j3n .cf:nth-of-type(4){--a:-5deg;--d:78px}
.j3n .cf:nth-of-type(5){--a:20deg;--d:62px}.j3n .cf:nth-of-type(6){--a:45deg;--d:74px}.j3n .cf:nth-of-type(7){--a:-105deg;--d:76px}.j3n .cf:nth-of-type(8){--a:-130deg;--d:68px}
.j3n .cf:nth-of-type(9){--a:-155deg;--d:80px}.j3n .cf:nth-of-type(10){--a:-180deg;--d:64px}.j3n .cf:nth-of-type(11){--a:155deg;--d:72px}.j3n .cf:nth-of-type(12){--a:-92deg;--d:96px}
.j3n .cf:nth-of-type(13){--a:-68deg;--d:100px}.j3n .cf:nth-of-type(14){--a:-118deg;--d:92px}

@media (prefers-reduced-motion:no-preference){
  /* 2 */
  .app[data-motion] .s3-fx .bm{animation:s3Sweep 3.6s ease-in-out infinite alternate}.app[data-motion] .s3-fx .bm.r{animation-delay:-1.8s}
  @keyframes s3Sweep{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
  .app[data-motion] .s3-fx .flg::after{animation:s3Wave 1.6s ease-in-out infinite}.app[data-motion] .s3-fx .flg.b::after{animation-delay:-.5s}.app[data-motion] .s3-fx .flg.c::after{animation-delay:-1s}
  @keyframes s3Wave{0%,100%{transform:skewY(0) scaleX(1)}50%{transform:skewY(10deg) scaleX(.82)}}
  .app[data-motion] .slam3d.near .s3-fx .fl,.app[data-motion] .slam3d.cur .s3-fx .fl{animation:s3Glow 2.4s ease-in-out infinite}
  @keyframes s3Glow{50%{filter:brightness(1.25);scale:1.08}}
  /* 1: the face bobs where it stands, and lands with a squash */
  .app[data-motion] .j3me{animation:meBob 2.2s ease-in-out infinite}
  @keyframes meBob{0%,100%{translate:0 0}50%{translate:0 -4px}}
  .app[data-motion] .land .j3me{animation:meLand .5s cubic-bezier(.3,1.6,.5,1),meBob 2.2s ease-in-out .5s infinite}
  @keyframes meLand{0%{scale:1.25 .75}60%{scale:.9 1.12}100%{scale:1}}
  .app[data-motion] .j3n.land .j3w{animation:j3Land .55s cubic-bezier(.3,1.6,.5,1),j3hop 2.4s ease-in-out .9s infinite}
  @keyframes j3Land{0%{transform:scale(1.16)}35%{transform:scale(1.34,1.02)}100%{transform:scale(1.16)}}
  /* 6: the next stop hops (a squash before and after, like a real ball) */
  .app[data-motion][data-jlook=new] .node.j3n.cur .j3w{animation:j3hop 2.4s ease-in-out infinite}
  @keyframes j3hop{0%,52%,100%{transform:scale(1.16)}8%{transform:scale(1.24,1.08)}24%{transform:scale(1.12,1.22) translateY(-16px)}40%{transform:scale(1.16) translateY(0)}46%{transform:scale(1.24,1.08)}}
  /* 4: the tick stamps down, confetti bursts */
  .app[data-motion] .j3n.just .j3ok{animation:okStamp .55s cubic-bezier(.3,1.5,.5,1) .35s both}
  @keyframes okStamp{0%{transform:translate(50%,-50%) scale(2.6) rotate(-24deg);opacity:0}60%{transform:translate(50%,-50%) scale(.86) rotate(4deg);opacity:1}100%{transform:translate(50%,-50%) scale(1) rotate(0)}}
  .app[data-motion] .j3n.just .cf{animation:cfBurst 1.25s cubic-bezier(.2,.7,.3,1) .5s forwards}
  @keyframes cfBurst{0%{opacity:1;transform:translate(-50%,-50%) rotate(var(--a)) translateX(0) rotate(0)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--d)) translateY(26px) rotate(320deg)}}
  /* 5 */
  .jc.hey img{animation:jcHey .8s cubic-bezier(.3,1.5,.5,1)}
  @keyframes jcHey{0%,100%{translate:0 0;rotate:0deg}20%{translate:0 -18px;rotate:-8deg}40%{translate:0 0;rotate:6deg}60%{translate:0 -8px;rotate:-4deg}80%{translate:0 0;rotate:2deg}}
  .jc-hi{animation:hiPop .35s cubic-bezier(.3,1.6,.5,1)}
  @keyframes hiPop{from{opacity:0;scale:.5}}
}