/* sky: "Already live at the counter." Owner: sky. Everything is scoped under #sky; classes carry sky-.

   #sky stacks ABOVE #check (z 5 over 4) and is pulled up one pin height, so its pin is stuck at the top as #check's foot reaches the
   bottom of the screen. The aperture opens from the middle of the screen (sky.js sets the centre, px in pin space):
     desktop and tablets (>= 700px)  clip-path: circle() on the pin, a 1px ring on its edge;
     phones (< 700px)                 a 1px seed ring draws, then .sky-disc (a compositor-only scaled disc) grows.
   Then one narrator block (.sky-c3), the dotted map flying to the four live cities, their gold pins, and the names: leader
   labels on desktop, a numbered list on phones. The scene releases on that frame and #faq follows in normal flow. */

#sky{
  --gold-t:#f5c04a;              /* gold as text on blue: --gold itself is too dark to read at 11px on #1f6bc4 */
  /* scroll range: 1.45 pin heights (.5 aperture, then the scene), in pin heights so a phone toolbar never moves it */
  position:relative;z-index:5;height:calc(var(--pin-h) * 2.45);margin-top:calc(-1 * var(--pin-h));
  color:#fff;pointer-events:none;
  overflow:clip;                 /* the pin's 14vh strip never paints over the next section when the pin leaves */
}
/* The foot of the pin is exactly the strip's colour (#0d2f78), so a phone toolbar collapsing never shows a seam above it. */
#sky .sky-pin{
  position:sticky;top:0;height:var(--pin-h);overflow:hidden;pointer-events:auto;isolation:isolate;
  box-shadow:0 14vh 0 0 #0d2f78;
  clip-path:circle(0px at 50% 56%);
}
/* the sky itself, on a layer of its own so phones can fade it in over the disc as the aperture completes */
#sky .sky-pin::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,47,120,0) 72%,#0d2f78 100%),radial-gradient(120% 90% at 50% 56%,#1f6bc4 0%,#1f62de 35%,#0d2f78 100%)}
/* #skylive: the menu's anchor, on the composed live-merchants frame (s = .94) */
#sky .sky-live{position:absolute;left:0;top:calc(var(--pin-h) * 2.2);width:1px;height:1px;pointer-events:none}

/* ---------------------------------------------------------------- the aperture's edge (desktop): 1px, inside the clip */
#sky .sky-iris{position:absolute;inset:0;z-index:6;width:100%;height:100%;max-width:none;overflow:visible;pointer-events:none;visibility:hidden}
#sky .sky-iris circle{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1;
  vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;transform:scale(0)}
/* phones only (sky.js shows them): the seed ring and the disc */
#sky .sky-disc,#sky .sky-seed{display:none}

/* ---------------------------------------------------------------- map: canvas dots + HTML pins from the same transform */
#sky .sky-world{position:absolute;inset:0;z-index:0}
/* Desktop: the dots step back behind the right column (the copy, then the leader labels as the view zooms; --rk 1 -> .2).
   --lx is the label column's left edge, --c1b the narrator's bottom (pin px, measured on resize). */
#sky .sky-map{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(var(--lx,66%) - 72px),transparent calc(var(--lx,66%) - 8px)),linear-gradient(180deg,rgba(0,0,0,.16) 0,rgba(0,0,0,.16) calc(var(--c1b,28%) + 8px),rgba(0,0,0,var(--rk,1)) calc(var(--c1b,28%) + 110px));
          mask-image:linear-gradient(90deg,#000 calc(var(--lx,66%) - 72px),transparent calc(var(--lx,66%) - 8px)),linear-gradient(180deg,rgba(0,0,0,.16) 0,rgba(0,0,0,.16) calc(var(--c1b,28%) + 8px),rgba(0,0,0,var(--rk,1)) calc(var(--c1b,28%) + 110px));
  -webkit-mask-composite:source-over;mask-composite:add}
#sky .sky-locs{position:absolute;inset:0;pointer-events:none}
#sky .sky-loc{position:absolute;left:0;top:0;width:0;height:0;visibility:hidden}
#sky .sky-loc.sky-in{visibility:visible}
#sky .sky-fx{position:absolute;left:0;top:0;width:1px;height:1px;max-width:none;overflow:visible;pointer-events:none}
#sky .sky-ring{fill:none;stroke:#d9ad12;stroke-width:1;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center}
#sky .sky-burst{fill:none;stroke:#fff;stroke-width:1;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;opacity:0}
#sky .sky-lead{fill:none;stroke:#d9ad12;stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:var(--len,0) 2000;stroke-dashoffset:var(--len,0)}
#sky .sky-dot{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%;pointer-events:auto;-webkit-tap-highlight-color:transparent}
#sky .sky-dot::before{content:"";position:absolute;left:19px;top:19px;width:6px;height:6px;border-radius:50%;background:#d9ad12}
#sky .sky-dot:focus-visible{outline-offset:-10px}
#sky .sky-pn{display:none}

/* leader labels (desktop). The run is the city's baseline rule: caps above it, names below it. */
#sky .sky-lbl{position:absolute;left:0;top:0;width:max-content;white-space:nowrap;visibility:hidden}
#sky .sky-lbl.sky-r{text-align:right}
#sky .sky-lbl.sky-on{visibility:visible}
#sky .sky-city{display:block;height:11px;margin-bottom:13px;font-family:var(--cond);font-weight:600;font-size:11px;line-height:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff}
#sky .sky-nm{display:block;white-space:normal;font-family:var(--sans);font-weight:400;font-size:13px;line-height:18px;color:rgba(255,255,255,.86)}

/* ---------------------------------------------------------------- the narrator (right column on desktop) */
#sky .sky-copy{position:absolute;z-index:2;right:var(--g);top:calc(var(--nav-h) + 10vh);width:min(440px,34vw)}
html.js:not(.reduce) #sky .sky-copy:not(.sky-on){visibility:hidden}
#sky .sky-lab{margin:0 0 14px;font-family:var(--cond);font-weight:600;font-size:11px;line-height:14px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8)}
#sky .sky-labrow{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
#sky .sky-labrow .sky-lab{margin:0}
#sky .sky-all{flex:none;display:inline-block;padding:15px 0 15px 16px;margin:-15px 0;font-family:var(--cond);font-weight:600;font-size:11px;line-height:14px;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;-webkit-tap-highlight-color:transparent}
#sky .sky-all:hover{text-decoration-color:var(--gold-t)}
#sky .sky-copy h2{font-family:var(--sans);font-weight:400;font-size:clamp(30px,2.75vw,42px);line-height:1.06;letter-spacing:-.026em;text-wrap:balance;color:#fff}
#sky .sky-p{margin-top:20px;max-width:400px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.85);text-wrap:pretty}
#sky .sky-pm{display:none}
#sky .sky-list{display:none;list-style:none;margin:0;padding:0}
#sky .sky-row{position:relative;display:grid;grid-template-columns:24px 104px minmax(0,1fr);column-gap:10px;align-items:start;width:100%;min-height:44px;
  padding:12px 0 11px;margin:0;border:0;background:none;color:#fff;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
#sky .sky-row::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.34);transform-origin:0 0;transition:background-color .24s linear}
#sky .sky-row.sky-flash::before{background:var(--gold-t);transition:none}
#sky .sky-row:active{background:rgba(255,255,255,.06)}
#sky .sky-no{font-family:var(--mono);font-weight:500;font-size:11px;line-height:20px;color:var(--gold-t)}
#sky .sky-lc{display:block;padding-top:3px;font-family:var(--cond);font-weight:600;font-size:11px;line-height:14px;letter-spacing:.14em;text-transform:uppercase;color:#fff}
#sky .sky-ms{display:block;font-size:14px;line-height:20px;color:rgba(255,255,255,.9)}
/* map.json failed: the live merchants are named in the ruled list (desktop too) */
#sky.sky-nomap .sky-list{display:block;margin-top:22px}


/* ---------------------------------------------------------------- tablets: the desktop composition, scaled */
@media (min-width:700px) and (max-width:979.98px){
  #sky .sky-copy{width:46%}
  #sky .sky-copy h2{font-size:30px}
}

/* ---------------------------------------------------------------- phones: designed for the phone */
@media (max-width:699.98px){
  #sky .sky-pin{clip-path:none}
  #sky .sky-copy{left:var(--g);right:var(--g);top:calc(var(--nav-h) + 20px);width:auto}
  #sky .sky-lab{margin-bottom:10px}
  #sky .sky-labrow{margin-bottom:10px}
  #sky .sky-copy h2{font-size:28px;line-height:1.08;letter-spacing:-.022em}
  #sky .sky-p{margin-top:10px;max-width:46ch;font-size:15px;line-height:1.45}
  #sky .sky-list{display:block;margin-top:14px}
  #sky .sky-list li:last-child .sky-row::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.34);transform-origin:0 0;
    transform:scaleX(0);transition:transform .4s var(--out) 360ms}
  #sky .sky-list.sky-on li:last-child .sky-row::after{transform:none}
  #sky .sky-lbl{display:none}


  /* the aperture: until the disc covers the screen the pin is see-through and lets touches through to flow */
  html.js:not(.reduce) #sky .sky-pin:not(.sky-open){box-shadow:none;pointer-events:none}
  html.js:not(.reduce) #sky .sky-pin:not(.sky-open)::before{opacity:0}
  html.js:not(.reduce) #sky .sky-pin.sky-open::before{transition:opacity .3s linear}
  html.js:not(.reduce) #sky .sky-pin:not(.sky-open) :is(.sky-world,.sky-copy){visibility:hidden}
  html.js:not(.reduce) #sky .sky-pin.sky-open :is(.sky-copy){animation:sky-in .2s linear}
  html.js:not(.reduce) #sky .sky-disc{display:block;position:absolute;z-index:0;left:var(--dx,0);top:var(--dy,0);width:var(--dd,0);height:var(--dd,0);border-radius:50%;
    background:radial-gradient(closest-side,#1f6bc4 0%,#1f6bc4 45%,#1653cc 100%);transform:scale(0);visibility:hidden;will-change:transform;pointer-events:auto}
  html.js:not(.reduce) #sky .sky-pin.sky-open .sky-disc{visibility:hidden!important;pointer-events:none;transition:visibility 0s .3s}
  html.js:not(.reduce) #sky .sky-seed{display:block;position:absolute;inset:0;z-index:1;width:100%;height:100%;max-width:none;overflow:visible;pointer-events:none;visibility:hidden}
  #sky .sky-seed circle{fill:none;stroke:#fff;stroke-width:1;stroke-dasharray:100 100;stroke-dashoffset:100;transform:rotate(-90deg);transform-box:fill-box;transform-origin:center}

  /* the map is framed in the band under the merchant list (--mt..--mb, pin px, sky.js); behind the copy it stays at 12% */
  #sky .sky-map{-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.12) 0,rgba(0,0,0,.12) calc(var(--mt,60%) - 24px),#000 calc(var(--mt,60%) + 12px),#000 100%);
                        mask-image:linear-gradient(180deg,rgba(0,0,0,.12) 0,rgba(0,0,0,.12) calc(var(--mt,60%) - 24px),#000 calc(var(--mt,60%) + 12px),#000 100%)}
  #sky .sky-world.sky-nopins .sky-loc{visibility:hidden}
  #sky .sky-dot{pointer-events:none}
  #sky .sky-pn{display:block;position:absolute;top:-7px;left:9px;font-family:var(--mono);font-weight:500;font-size:10px;line-height:14px;color:var(--gold-t);white-space:nowrap}
  #sky .sky-loc[data-city=Toronto] .sky-pn{left:-25px;top:-17px}
  #sky .sky-loc[data-city="Las Vegas"] .sky-pn{left:-29px}

  /* the list's rules draw in (90ms stagger); names rise with CT.lines */
  #sky .sky-row::before{transform:scaleX(0);transition:transform .4s var(--out) calc(var(--i,0) * 90ms),background-color .24s linear}
  #sky .sky-list.sky-on .sky-row::before{transform:none}
}
@media (max-width:340px){
  #sky .sky-copy h2{font-size:26px}
  #sky .sky-p{font-size:14px}
  #sky .sky-row{grid-template-columns:22px 80px minmax(0,1fr);column-gap:8px}
  /* the list names the four cities: on the smallest phones the map needs that line's height */
  #sky .sky-c3 .sky-p{display:none}
}
@keyframes sky-in{from{opacity:0}to{opacity:1}}

/* ---------------------------------------------------------------- reduced motion (and no script): one static, finished scene */
:is(html.reduce,html:not(.js)) #sky{height:auto;margin-top:0;z-index:auto;pointer-events:auto;overflow:visible}
:is(html.reduce,html:not(.js)) #sky .sky-pin{position:relative;height:auto;min-height:min(var(--pin-h),820px);clip-path:none;box-shadow:none;
  display:grid;grid-template-columns:minmax(0,1fr) min(440px,34vw);grid-template-rows:auto 1fr;grid-template-areas:"map c3" "map .";
  column-gap:48px;row-gap:40px;align-items:start;padding:calc(var(--nav-h) + 10vh) var(--g) 10vh}
:is(html.reduce,html:not(.js)) #sky :is(.sky-iris,.sky-disc,.sky-seed){display:none}
:is(html.reduce,html:not(.js)) #sky .sky-world{position:relative;inset:auto;grid-area:map;align-self:stretch;min-height:440px}
:is(html.reduce,html:not(.js)) #sky .sky-map{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
:is(html.reduce,html:not(.js)) #sky .sky-copy{position:relative;left:auto;right:auto;top:auto;width:auto;grid-area:c3}
:is(html.reduce,html:not(.js)) #sky .sky-lbl{display:none}
:is(html.reduce,html:not(.js)) #sky .sky-loc{visibility:visible}
html:not(.js) #sky .sky-locs{display:none}
:is(html.reduce,html:not(.js)) #sky .sky-live{position:absolute;top:0;left:0}
:is(html.reduce,html:not(.js)) #sky .sky-list{display:block;margin-top:24px}
:is(html.reduce,html:not(.js)) #sky .sky-row::before{transform:none}
:is(html.reduce,html:not(.js)) #sky .sky-list li:last-child .sky-row::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.34);transform:none}
@media (min-width:700px){
  :is(html.reduce,html:not(.js)) #sky .sky-row{grid-template-columns:24px 112px minmax(0,1fr)}
}
@media (max-width:699.98px){
  :is(html.reduce,html:not(.js)) #sky .sky-pin{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"c3" "map";row-gap:0;
    padding:calc(var(--nav-h) + 20px) var(--g) calc(var(--safe-b) + 48px)}
  :is(html.reduce,html:not(.js)) #sky .sky-world{min-height:0;height:min(300px,46vh);margin-top:16px}
}