/* where section of the landing: a live astro map demo (maya's real chart). owned by one agent. prefix .l-where- */
.l-where{--lw-out:cubic-bezier(.23,1,.32,1);--lw-spring:cubic-bezier(.34,1.56,.64,1);--lw-ink:#1a0a33;--lw-paper:#f5f0fb;--lw-mut:#8d7bb0;--lw-line:#ffffff1a;--lw-mh:clamp(18rem,47svh,24rem);--c:#ff8ad0}
/* nothing loops while the section is off screen */
.l-where:not(.l-where-on) .fly,.l-where:not(.l-where-on) .gl,.l-where:not(.l-where-on) .l-where-pin-r{animation-play-state:paused}

/* ---------- the map ---------- */
.l-where-map{position:relative;margin:.7rem -1.25rem 0}
.l-where-sc{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.l-where-sc::-webkit-scrollbar{display:none}
.l-where-sc.l-where-can{cursor:grab}.l-where-sc.l-where-grab{cursor:grabbing}
.l-where-svg{display:block;height:var(--lw-mh);width:calc(var(--lw-mh) * 360 / 136);max-width:none;user-select:none;-webkit-user-select:none}
.l-where-dots{opacity:.5;transition:opacity 1.2s var(--lw-out)}
.l-where-map:not(.l-where-ready) .l-where-dots{opacity:.25}

/* planet lines: drawn in with stroke-dashoffset (pathLength=1), then one planet at a time gets lit */
.l-where-ml path{fill:none;stroke:var(--c);stroke-linecap:round;stroke-linejoin:round}
.l-where-mc{stroke-width:.42;opacity:.6;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.5s var(--lw-out) var(--dl,0s),opacity .5s var(--lw-out),stroke-width .5s var(--lw-out)}
.l-where-mg{stroke-width:2.6;opacity:0;transition:opacity .6s var(--lw-out)}
.l-where-drawn .l-where-mc{stroke-dashoffset:0}
.l-where-drawn .l-where-mg{opacity:.07;transition:opacity .9s var(--lw-out) calc(var(--dl,0s) + .9s)}
.l-where-svg.l-where-lit .l-where-ml .l-where-mc{opacity:.14}
.l-where-svg.l-where-lit .l-where-ml .l-where-mg{opacity:.015;transition-delay:0s}
.l-where-svg.l-where-lit .l-where-ml.on .l-where-mc{opacity:1;stroke-width:.72}
.l-where-svg.l-where-lit .l-where-ml.on .l-where-mg{opacity:.3}
.l-where-mt{font:500 3.3px Inter,system-ui,sans-serif;fill:#f5f0fb;paint-order:stroke;stroke:#040306;stroke-width:.9;stroke-linejoin:round;opacity:0;transition:opacity .45s var(--lw-out);pointer-events:none}
.l-where-mt.on{opacity:.92}

/* where she was born, and the city on the lit line */
.l-where-born circle{fill:#fff;filter:drop-shadow(0 0 1.5px #fff);opacity:0;transition:opacity .6s var(--lw-out) .3s}
.l-where-born text{font:500 3.1px Inter,system-ui,sans-serif;fill:#fff;paint-order:stroke;stroke:#040306;stroke-width:.8;opacity:0;transition:opacity .6s var(--lw-out) .5s}
.l-where-drawn .l-where-born circle{opacity:1}.l-where-drawn .l-where-born text{opacity:.85}
.l-where-pin{opacity:0;transition:opacity .2s ease-out}
.l-where-pin g{transform-box:fill-box;transform-origin:50% 50%;transform:scale(.3);transition:transform .18s ease-out}
.l-where-pin.on{opacity:1;transition:opacity .25s var(--lw-out) .35s}
.l-where-pin.on g{transform:none;transition:transform .5s var(--lw-spring) .35s}
.l-where-pin .l-where-pin-d{fill:var(--c);stroke:#040306;stroke-width:.5}
.l-where-pin .l-where-pin-r{fill:none;stroke:var(--c);stroke-width:.35;transform-box:fill-box;transform-origin:50% 50%;opacity:0}
.l-where-pin.on .l-where-pin-r{animation:l-where-ping 2.4s var(--lw-out) .8s infinite}
.l-where-pin text{font:500 4px Fraunces,serif;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;font-weight:700;font-style:italic;fill:#fff;paint-order:stroke;stroke:#040306;stroke-width:1;stroke-linejoin:round}
@keyframes l-where-ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.6);opacity:0}}

/* overlays on the map */
.l-where-tag{display:flex;align-items:center;justify-content:center;gap:.45rem;margin:.6rem auto 0;color:#f5f0fb;font-size:.8rem;font-weight:500}
.l-where-tag i{width:.45rem;height:.45rem;border-radius:999px;background:#fff;box-shadow:0 0 8px #fff}
.l-where-tag em{font-style:normal;font-weight:400;color:#a58bd6}
.l-where-hint{position:absolute;left:50%;bottom:.5rem;translate:-50% 0;display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .7rem;border-radius:999px;background:#0c0814cc;border:1px solid var(--lw-line);color:#dccff2;font-size:.72rem;pointer-events:none;transition:opacity .4s var(--lw-out)}
.l-where-hint .ic{width:.8rem;height:.8rem;color:#8d7bb0}
.l-where-hint.l-where-gone{opacity:0}

/* ---------- planet chips (one row, swipes on a phone) ---------- */
.l-where-ks{display:flex;gap:.4rem;margin:1.1rem -1.25rem 0;padding:0 1.25rem .2rem;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 1.25rem,#000 calc(100% - 1.25rem),transparent);mask-image:linear-gradient(90deg,transparent,#000 1.25rem,#000 calc(100% - 1.25rem),transparent)}
.l-where-ks::-webkit-scrollbar{display:none}
.l-where-k{position:relative;flex:none;overflow:hidden;display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .8rem;border-radius:999px;background:#ffffff0a;border:1px solid var(--lw-line);color:#dccff2;font:inherit;font-size:.8rem;font-weight:400;box-shadow:none;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .14s ease-out}
.l-where-k i{width:.5rem;height:.5rem;border-radius:999px;background:var(--c)}
.l-where-k:active{transform:scale(.97)}
.l-where-k.on{background:color-mix(in srgb,var(--c) 18%,transparent);border-color:color-mix(in srgb,var(--c) 55%,transparent);color:#f5f0fb}
/* autoplay: the lit chip fills up like a story bar */
.l-where-k::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--c);transform:scaleX(0);transform-origin:0 50%;opacity:0}
.l-where-k.on.l-where-run::after{opacity:.8;animation:l-where-fill var(--lw-dur,4.6s) linear forwards}
@keyframes l-where-fill{to{transform:scaleX(1)}}

/* ---------- what the lit line means ---------- */
.l-where-cap{min-height:4.1rem;margin:1.1rem auto 0;max-width:30ch;text-align:center;color:#dccff2;font-size:.95rem;line-height:1.45}
.l-where-cap b{display:block;color:var(--c);font-family:Fraunces,serif;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;font-weight:700;font-style:italic;font-size:1.3rem;letter-spacing:-.01em;margin-bottom:.15rem;transition:color .4s var(--lw-out)}

/* ---------- one ticket to the city on the lit line ---------- */
.l-where-tk{max-width:22rem;margin:1.4rem auto 0;filter:drop-shadow(0 26px 34px #000a)}
.l-where-tk-in{position:relative;color:var(--lw-ink)}
.l-where-tk-main{position:relative;overflow:hidden;background:var(--lw-paper);border-radius:1.4rem 1.4rem 0 0;padding:1.05rem 1.2rem 1rem}
.l-where-tk-main::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--c);transition:background .4s var(--lw-out)}
.l-where-tk-hd{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-size:.7rem;color:var(--lw-mut);margin-top:.1rem}
.l-where-tk-pill{padding:.2rem .6rem;border-radius:999px;background:color-mix(in srgb,var(--c) 32%,#fff);color:var(--lw-ink);font-weight:500;white-space:nowrap;transition:background .4s var(--lw-out)}
.l-where-tk-route{display:flex;align-items:center;justify-content:space-between;gap:.7rem;margin-top:.7rem}
.l-where-tk-route b{display:block;font-family:Fraunces,serif;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;font-weight:700;font-size:2.6rem;line-height:.9;letter-spacing:-.03em}
.l-where-tk-route small{display:block;font-size:.7rem;color:var(--lw-mut);margin-top:.25rem;white-space:nowrap}
.l-where-tk-route>div:last-child{text-align:right}
.l-where-tk-arr{position:relative;flex:1;display:flex;align-items:center;justify-content:center;align-self:flex-start;height:2.35rem;color:color-mix(in srgb,var(--c) 55%,var(--lw-ink))}
.l-where-tk-arr i{position:absolute;left:0;right:0;top:50%;border-top:2px dashed color-mix(in srgb,var(--c) 50%,#d8cfe6)}
.l-where-tk-arr .ic{position:relative;z-index:1;width:1.3rem;height:1.3rem;padding:0 .25rem;box-sizing:content-box;background:var(--lw-paper)}
.l-where-tk-stub{position:relative;display:flex;align-items:center;gap:1.2rem;background:var(--lw-paper);border-radius:0 0 1.4rem 1.4rem;padding:.85rem 1.2rem 1rem;border-top:2px dashed #1a0a3324}
/* real punched holes at the tear line, so the page shows through */
.l-where-tk-main{-webkit-mask:radial-gradient(circle at 0 100%,transparent 10px,#000 10.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 100%,transparent 10px,#000 10.5px) right/51% 100% no-repeat;mask:radial-gradient(circle at 0 100%,transparent 10px,#000 10.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 100%,transparent 10px,#000 10.5px) right/51% 100% no-repeat}
.l-where-tk-stub{-webkit-mask:radial-gradient(circle at 0 0,transparent 10px,#000 10.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 0,transparent 10px,#000 10.5px) right/51% 100% no-repeat;mask:radial-gradient(circle at 0 0,transparent 10px,#000 10.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 0,transparent 10px,#000 10.5px) right/51% 100% no-repeat}
.l-where-tk-stub small{display:block;font-size:.64rem;color:var(--lw-mut)}
.l-where-tk-stub b{display:block;font-family:Fraunces,serif;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;font-weight:700;font-size:1.05rem;line-height:1.1;margin-top:.12rem;white-space:nowrap}
.l-where-tk-bar{margin-left:auto;width:76px;height:34px;flex:none;opacity:.8;background:repeating-linear-gradient(90deg,var(--lw-ink) 0 2px,transparent 2px 4px,var(--lw-ink) 4px 5px,transparent 5px 8px,var(--lw-ink) 8px 11px,transparent 11px 13px)}
.l-where-note{max-width:36ch;margin:1.6rem auto 0;line-height:1.5;text-wrap:balance}

/* ---------- bigger screens: the whole world fits, no dragging ---------- */
@media(min-width:900px){
  .l-where{--lw-mh:auto}
  .l-where-map{margin:.6rem auto 0;max-width:60rem}
  .l-where-sc{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
  .l-where-svg{width:100%;height:auto;aspect-ratio:360/136}
  .l-where-hint{display:none}
  .l-where-ks{justify-content:center;flex-wrap:wrap;margin:1.3rem auto 0;padding:0;-webkit-mask-image:none;mask-image:none;overflow:visible}
}
@media(prefers-reduced-motion:reduce){
  .l-where-mc{stroke-dashoffset:0;transition:opacity .4s ease}
  .l-where-pin g,.l-where-pin.on g{transform:none;transition:none}
  .l-where-pin-r{animation:none!important;opacity:0}
  .l-where-k.on.l-where-run::after{animation:none;opacity:0}
}