/* Cute Location, features.css: the five little scenes inside the feature cards.
   Every scene is a `<div class="fviz">` that features.js fills (CL.features.live / stats / pause / pair / bubble).
   Colours are the tokens of styles.css (day and night), type is --display / --body, radii are --r-*,
   easings are --spring / --soft. All class names here start with `fv-`, keyframes too, so the page's own
   CSS never collides. Sections: 1 shared, 2 live, 3 stats, 4 pause, 5 pair, 6 bubble. */

/* ============ 1. shared ============ */
.fviz{position:relative;width:100%;height:var(--fh,230px);overflow:hidden;container-type:inline-size;
  font:600 14px/1.3 var(--body);color:var(--ink);
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.fviz *,.fviz *::before,.fviz *::after{box-sizing:border-box}
.fviz svg{display:block;max-width:none}
/* off screen (no .fv-on, features.js adds it in play()) nothing animates */
.fviz:not(.fv-on) *,.fviz:not(.fv-on) *::before,.fviz:not(.fv-on) *::after{animation-play-state:paused !important}
@media (prefers-reduced-motion:reduce){
  .fviz *,.fviz *::before,.fviz *::after{animation:none !important;transition:none !important}
}
.fv-note{margin:0;font:700 12.5px/1.35 var(--body);color:var(--muted-t);text-align:center;text-wrap:balance}
.fv-lbl{font:800 10.5px/1.2 var(--body);letter-spacing:.07em;text-transform:uppercase;color:var(--muted-t);white-space:nowrap;overflow:hidden;text-overflow:clip}
.fv-ic{display:block;overflow:visible}
.fv-ic .s{stroke:var(--ink);fill:none;stroke-width:2.2;stroke-linecap:round}
.fv-ic .f{fill:var(--ink)}

/* a marker that is hidden (data-vis=0) takes its rings and shadow with it */
.fviz .mk .rings{transition:opacity .3s}
.fviz .mk[data-vis="0"] .rings{opacity:0}
.fviz .mk[data-vis="0"] .shadow{opacity:0}

/* the battery (.bat of the prototype, LiquidBattery of fx/Gauges.kt): 50 x 22 cell, nub, sloshing liquid.
   --bu is the size of one unit; the liquid is a full-width layer that features.js slides sideways. */
.fv-bat{--bu:1px;position:relative;flex:none;width:calc(50*var(--bu));height:calc(22*var(--bu));margin-right:calc(7*var(--bu));
  border:calc(2*var(--bu)) solid var(--ink);border-radius:calc(8*var(--bu));padding:calc(2*var(--bu))}
.fv-bat::after{content:"";position:absolute;right:calc(-6*var(--bu));top:calc(5*var(--bu));width:calc(3*var(--bu));height:calc(8*var(--bu));
  border-radius:0 calc(3*var(--bu)) calc(3*var(--bu)) 0;background:var(--ink)}
.fv-cell{position:relative;width:100%;height:100%;overflow:hidden;border-radius:calc(4*var(--bu))}
.fv-liq{position:absolute;inset:0;overflow:hidden;border-radius:calc(4*var(--bu)) calc(6*var(--bu)) calc(3*var(--bu)) calc(4*var(--bu));
  background:var(--green);transform:translate3d(-38%,0,0);will-change:transform;
  animation:fv-slosh 2.2s ease-in-out infinite;transition:background-color .3s}
.fv-liq::before,.fv-liq::after{content:"";position:absolute;bottom:calc(-4*var(--bu));right:calc(18*var(--bu));width:calc(4*var(--bu));height:calc(4*var(--bu));
  border-radius:50%;background:rgba(255,255,255,.75);animation:fv-bub 1.8s ease-in infinite}
.fv-liq::after{right:calc(8*var(--bu));animation-delay:.9s}
.fv-sw{position:absolute;top:0;bottom:0;left:0;width:300%;opacity:0;transition:opacity .3s;
  background:linear-gradient(90deg,var(--green) 0,var(--green) 33%,var(--sun) 50%,var(--green) 67%,var(--green) 100%);
  animation:fv-sweep 1.1s linear infinite}
.fv-bat.fv-low .fv-liq{background:var(--red);animation-duration:.6s}
.fv-bat.fv-chg .fv-sw{opacity:1}
@keyframes fv-slosh{0%,100%{border-radius:calc(4*var(--bu)) calc(6*var(--bu)) calc(3*var(--bu)) calc(4*var(--bu))}50%{border-radius:calc(4*var(--bu)) calc(3*var(--bu)) calc(7*var(--bu)) calc(4*var(--bu))}}
@keyframes fv-bub{to{transform:translateY(calc(-20*var(--bu)));opacity:0}}
@keyframes fv-sweep{from{transform:translateX(-66.667%)}to{transform:translateX(0)}}
@keyframes fv-march{to{stroke-dashoffset:-10}}
@keyframes fv-arc{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes fv-bar{from{transform:scaleY(.55)}to{transform:scaleY(1)}}
@keyframes fv-sway{from{transform:scale(1) rotate(-3deg)}to{transform:scale(1.07) rotate(3deg)}}
@keyframes fv-pulse{to{transform:scale(1.12)}}
@keyframes fv-hbig{0%,45%,100%{transform:none}52%{transform:scale(1.16)}60%{transform:scale(.97)}}

/* ============ 2. live ============ */
.fv-live{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:16px 14px 14px}
.fv-pill{flex:none;display:flex;align-items:center;gap:6px;border-radius:var(--r-pill);padding:6px 11px;
  font:800 13px/1.2 var(--body);background:var(--accent);color:var(--accent-ink);white-space:nowrap}
.fv-pill i{display:block;width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.fv-road{flex:none;width:100%;height:112px;overflow:visible}
.fv-bed{stroke:var(--road);stroke-width:18;stroke-linecap:round}
.fv-dash{stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:1 9;animation:fv-march 1s linear infinite}
.fv-sdot{fill:color-mix(in srgb,var(--muted) 42%,transparent);transform-box:fill-box;transform-origin:center;transition:transform .5s var(--spring),fill .3s}
.fv-sdot.fv-lit{fill:color-mix(in srgb,var(--accent) 62%,transparent)}
.fv-sdot.fv-cur{fill:var(--accent);transform:scale(1.8)}
.fv-live .fv-note{flex:none;max-width:30em}

/* ============ 3. stats ============ */
.fv-stats{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:14px}
.fv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fv-tile{min-width:0;display:flex;flex-direction:column;gap:5px;padding:11px 12px;overflow:hidden;
  background:var(--surface);border-radius:var(--r-tile)}
.fv-gfx{height:58px;display:grid;place-items:center;overflow:visible}
.fv-val{display:flex;align-items:center;gap:5px;min-height:28px;white-space:nowrap;
  font:700 20px/1.1 var(--display);font-variant-numeric:tabular-nums;color:var(--ink)}
.fv-val span{font:700 11.5px/1 var(--body);color:var(--muted-t);margin-left:-2px}
.fv-tile .fv-bat{--bu:clamp(1px,.37cqw,1.5px)}
.fv-tile .fv-ic{width:calc(40*clamp(1px,.37cqw,1.5px));height:calc(40*clamp(1px,.37cqw,1.5px))}
.fv-tile .fv-gauge{width:calc(46*clamp(1px,.37cqw,1.5px));height:calc(43*clamp(1px,.37cqw,1.5px))}
.fv-bolt{width:11px;height:17px;flex:none;overflow:visible;transform:scale(0);opacity:0;transition:transform .5s var(--spring),opacity .3s}
.fv-bolt path{fill:var(--bolt);stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
.fv-bolt.fv-lit{transform:scale(1);opacity:1}
.fv-nw .s{animation:fv-arc 1.5s ease-in-out infinite}
.fv-nw .s:nth-child(2){animation-delay:.2s}.fv-nw .s:nth-child(3){animation-delay:.4s}
.fv-nl .f{transform-box:fill-box;transform-origin:50% 100%;animation:fv-bar 1s ease-in-out infinite alternate}
.fv-nl .f:nth-child(2){animation-delay:.15s}.fv-nl .f:nth-child(3){animation-delay:.3s}.fv-nl .f:nth-child(4){animation-delay:.45s}
.fv-nw,.fv-nl{transition:opacity .22s}
.fv-netic[data-n="0"] .fv-nl,.fv-netic[data-n="1"] .fv-nw{opacity:0}
.fv-flip{display:inline-block;transition:transform .22s ease-in}
.fv-flip.fv-out{transform:rotateX(90deg)}
.fv-stats .fv-note{font-size:12.5px}
@container (max-width:340px){
  .fv-stats{padding:12px 10px}
  .fv-grid{gap:6px}
  .fv-tile{padding:11px 8px}
}

/* ============ 4. pause ============ */
.fv-pause{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 14px 12px}
.fv-pscene{flex:1 1 0;min-height:0;width:100%;overflow:visible}
.fv-pscene .tag text{font-size:10px}
.fv-slide{position:relative;flex:none;width:100%;height:56px;overflow:hidden;border-radius:28px;display:grid;place-items:center;
  background:var(--tile);box-shadow:inset 0 0 0 1.5px var(--line);color:var(--muted-t);font:700 13px/1.2 var(--body);cursor:pointer;
  touch-action:pan-y;-webkit-user-select:none;user-select:none;transition:color .4s}
.fv-slide:focus-visible{border-radius:28px;outline-offset:2px}
.fv-slide.fv-set{color:var(--ink)}
.fv-fill{position:absolute;inset:0;border-radius:28px;background:var(--accent);opacity:.28;transform:translate3d(-100%,0,0);will-change:transform;pointer-events:none}
.fv-text{position:relative;pointer-events:none}
.fv-thumb{position:absolute;left:5px;top:5px;width:46px;height:46px;border-radius:50%;background:var(--surface);display:grid;place-items:center;
  box-shadow:0 3px 10px var(--shadow);transform:translate3d(0,0,0);will-change:transform;touch-action:pan-y}
.fv-thumb svg{width:22px;height:22px;fill:var(--accent);animation:fv-wave 2.6s ease-in-out infinite}
.fv-slide.fv-free .fv-thumb,.fv-slide.fv-free .fv-fill{transition:transform .5s var(--spring)}
.fv-slide.fv-drag{cursor:grabbing}
.fv-pause .fv-note{flex:none;min-height:34px;display:grid;align-items:start;width:100%}
@keyframes fv-wave{0%,70%,100%{transform:none}78%{transform:rotate(-16deg)}88%{transform:rotate(12deg)}}

/* ============ 5. pair ============ */
.fv-pair{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:10px 12px}
.fv-box{position:relative;flex:none}
.fv-illo{position:absolute;left:0;top:0;width:240px;height:200px;transform-origin:0 0}
.fv-qr{position:absolute;inset:10px 30px;background:#fff;border-radius:26px;padding:16px;display:grid;grid-template-columns:repeat(13,1fr);gap:2px;
  box-shadow:0 10px 26px rgba(74,50,150,.22);transition:transform .5s var(--soft),opacity .4s}
.fv-qr i{aspect-ratio:1;border-radius:2px}
.fv-qr i.c{background:#2A2142}
.fv-pair[data-r="0"] .fv-qr i.c{animation:fv-cell-a .5s var(--spring) var(--dl) backwards}
.fv-pair[data-r="1"] .fv-qr i.c{animation:fv-cell-b .5s var(--spring) var(--dl) backwards}
@keyframes fv-cell-a{from{transform:scale(0)}}
@keyframes fv-cell-b{from{transform:scale(0)}}
.fv-scan{position:absolute;left:10px;right:10px;top:10px;height:4px;border-radius:4px;background:var(--pink);box-shadow:0 0 12px var(--pink);
  animation:fv-scan 2s ease-in-out infinite alternate}
@keyframes fv-scan{to{transform:translateY(156px)}}
.fv-qcat{position:absolute;left:50%;top:50%;width:46px;height:42px;margin:-21px 0 0 -23px;background:#fff;border-radius:14px;padding:3px;overflow:visible}
.fv-meet{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;transition:opacity .2s}
.fv-pair.fv-done .fv-qr{transform:scale(.2) rotate(20deg);opacity:0}
.fv-pair.fv-done .fv-meet{opacity:1}
.fv-pair.fv-done.fv-back .fv-qr{transform:none;opacity:1}
.fv-pair.fv-done.fv-back .fv-meet{opacity:0}
.fv-run1,.fv-run2,.fv-bigh{transform-box:fill-box}
.fv-pair.fv-done .fv-run1{animation:fv-r1 1s var(--soft) both}
.fv-pair.fv-done .fv-run2{animation:fv-r2 1s var(--soft) both}
@keyframes fv-r1{0%{transform:translateX(-170px)}78%{transform:translateX(9px) scale(.9,1.06)}100%{transform:none}}
@keyframes fv-r2{0%{transform:translateX(170px)}78%{transform:translateX(-9px) scale(.9,1.06)}100%{transform:none}}
.fv-ihop{transform-box:fill-box;transform-origin:50% 100%}
.fv-pair.fv-done .fv-ihop{animation:hop .25s ease-in-out 4,fv-nuz 2.2s ease-in-out 1s infinite alternate}
.fv-n1{--a:7deg}.fv-n2{--a:-7deg}
@keyframes fv-nuz{to{transform:rotate(var(--a))}}
.fv-bigh{fill:var(--heart);transform-origin:center;transform:scale(0)}
.fv-pair.fv-done .fv-bigh{animation:fv-bighin .8s var(--spring) .95s forwards,fv-hbig 1.4s var(--soft) 1.8s infinite}
@keyframes fv-bighin{to{transform:scale(1)}}
/* reduced motion: the finished picture, nothing runs */
.fv-pair.fv-still .fv-run1,.fv-pair.fv-still .fv-run2,.fv-pair.fv-still .fv-ihop{animation:none}
.fv-pair.fv-still .fv-bigh{animation:none;transform:none}
.fv-ptitle{flex:none;margin:0;font:700 20px/1.25 var(--display);color:var(--ink);text-align:center;white-space:nowrap}
.fv-swap{display:inline-block;transition:transform .18s ease-in,opacity .18s}
.fv-swap.fv-out{transform:translateY(-9px);opacity:0}

/* ============ 6. bubble ============ */
/* the stage is the 400 x 230 map; it covers the host (cover, centred). Inside it 1 unit = .25cqw of the stage. */
.fv-stage{--u:.25cqw;position:absolute;left:50%;top:50%;width:max(100cqw,calc(var(--fh,230px)*400/230));aspect-ratio:400/230;
  transform:translate(-50%,-50%);container-type:inline-size}
.fv-map{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fv-land{fill:var(--land)}
.fv-water{fill:var(--water)}
.fv-river{fill:none;stroke:var(--water);stroke-linecap:round}
.fv-park{fill:var(--park)}
.fv-r1d{fill:none;stroke:var(--road);stroke-linecap:round;stroke-linejoin:round}
.fv-r2d{fill:none;stroke:var(--road2);stroke-linecap:round}
.fv-tree{fill:var(--tree);transform-box:fill-box;transform-origin:50% 100%;animation:fv-sway 3.4s ease-in-out infinite alternate}
.fv-link{stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:1 9;animation:fv-march 1s linear infinite;transition:opacity .4s}
.fv-map .mk{cursor:pointer}
.fv-ov{position:absolute;inset:0;pointer-events:none}
.fv-dp{position:absolute;left:0;top:0;will-change:transform}
.fv-dpi{min-width:calc(50*var(--u));padding:calc(3*var(--u)) calc(9*var(--u));border-radius:999px;border:calc(1.5*var(--u)) solid var(--accent);
  background:var(--surface);color:var(--ink);text-align:center;white-space:nowrap;font:800 calc(11*var(--u))/1.2 var(--body);
  transition:background-color .4s,border-color .4s,color .4s;transform-origin:center}
.fv-dp.fv-near .fv-dpi{background:var(--pink);border-color:var(--pink);color:#fff;animation:fv-pulse 1.4s ease-in-out infinite alternate}
/* StatusBubble: chip, radius 13, padding 6 x 9, tail 10 x 6. .fv-bub is the positioned wrapper, .fv-bubi the look */
.fv-bub{position:absolute;left:0;top:0;width:max-content;will-change:transform}
.fv-bubi{position:relative;display:flex;align-items:center;gap:calc(5*var(--u));width:max-content;
  padding:calc(6*var(--u)) calc(9*var(--u));border-radius:calc(13*var(--u));background:var(--chip);box-shadow:0 calc(3*var(--u)) calc(10*var(--u)) var(--shadow);
  font:800 calc(11*var(--u))/calc(13*var(--u)) var(--body);color:var(--ink);white-space:nowrap;transform-origin:50% 100%}
.fv-bubi b{font:inherit}
.fv-bubi .fv-bat{--bu:calc(.5*var(--u))}
.fv-dot{display:block;flex:none;width:calc(3*var(--u));height:calc(3*var(--u));border-radius:50%;background:var(--muted)}
.fv-sp{display:flex;align-items:center;gap:calc(5*var(--u))}
.fv-sp[hidden]{display:none}
.fv-tail{position:absolute;left:0;top:100%;margin-top:-1px;width:calc(10*var(--u));height:calc(7*var(--u));background:var(--chip);
  clip-path:polygon(0 0,100% 0,50% 100%);will-change:transform}
.fv-zoom{position:absolute;right:10px;bottom:10px;width:38px;height:40px;display:grid;place-items:center;border-radius:22px;
  background:var(--chip);box-shadow:0 4px 12px var(--shadow);pointer-events:none;transform-origin:center}
.fv-zoom svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:2.4;stroke-linecap:round}