/* One selfie. Every scene. (index.html #orbit, assets/cx-orbit.js)
   The picked creator's selfie sits in the middle of a tilted ellipse and their nine scene photos circle it. Each card's
   place on the ellipse is plain CSS trig from its index and --spin (the one value the script changes per frame), so the
   ring is laid out with no script too. --d is the card's depth (0 at the back, 1 at the front): it sets size, veil and
   stacking, and the selfie sits between the back half and the front half. Phones (<=760px): the selfie on top and the
   scenes in a swipeable row that curves like the ring. Follows the site theme. */

.cx-orbit{
  --cx-ig:linear-gradient(45deg,#feda75,#fa7e1e 28%,#d62976 52%,#962fbf 76%,#4f5bd5);
  --cx-ig-ring:conic-gradient(from 210deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5,#962fbf,#d62976,#fa7e1e,#feda75);
  --cx-paper:light-dark(oklch(.974 .007 80),oklch(.145 .022 290));
  position:relative;overflow:clip;isolation:isolate;background:var(--cx-paper)}
.cx-orbit-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(30% 36% at 50% 62%,light-dark(oklch(.82 .11 350/.3),oklch(.5 .2 345/.3)),transparent 72%),
  radial-gradient(26% 30% at 30% 74%,light-dark(oklch(.88 .1 70/.32),oklch(.62 .15 55/.14)),transparent 72%),
  radial-gradient(28% 34% at 72% 50%,light-dark(oklch(.84 .08 290/.32),oklch(.46 .18 290/.3)),transparent 72%)}
.cx-orbit-bg::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.05;mix-blend-mode:overlay}

/* ---------- heading and creator tabs ---------- */
.cx-orbit-head{display:grid;justify-items:center;gap:16px;max-width:54rem;margin-inline:auto;text-align:center}
.cx-orbit h2{font-size:clamp(2.4rem,1.2rem + 4.2vw,5.2rem);line-height:.95;letter-spacing:-.045em}
.cx-orbit h2 em{font-style:normal;color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(90deg,light-dark(#e0531a,#ffb36b),light-dark(#c8236a,#ff5fa2) 48%,light-dark(#7a35c4,#b57bff))}
.cx-orbit .lede{max-width:46ch;margin-inline:auto}

.cx-orbit-tabs{position:relative;display:flex;gap:2px;width:max-content;max-width:100%;margin:30px auto 0;padding:5px;border-radius:999px;
  background:color-mix(in oklab,var(--surface) 72%,transparent);border:1px solid var(--line);box-shadow:var(--shadow-1)}
.cx-orbit-tab{position:relative;z-index:1;padding:.72em 1.2em;border-radius:999px;font:600 .95rem/1 var(--f-text);color:var(--ink-2);
  white-space:nowrap;transition:color .35s,background .35s}
.cx-orbit-tab:hover{color:var(--ink)}
.cx-orbit-tab[aria-pressed="true"]{color:var(--bg);background:var(--ink)}
.cx-orbit-tab:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.cx-orbit-card:focus-visible{outline:none}
.cx-orbit-card:focus-visible .cx-orbit-in{outline:3px solid var(--accent);outline-offset:3px}
.cx-orbit-glide{position:absolute;left:0;top:5px;bottom:5px;width:var(--gw,0);transform:translateX(var(--gx,0));border-radius:999px;
  background:var(--ink);opacity:0;transition:transform .55s var(--ease),width .55s var(--ease)}
.cx-orbit-tabs.is-glide .cx-orbit-glide{opacity:1}
.cx-orbit-tabs.is-glide .cx-orbit-tab[aria-pressed="true"]{background:none}

/* ---------- the stage: a tilted ellipse, the selfie in its middle ---------- */
.cx-orbit-stage{position:relative;max-width:1240px;margin:clamp(18px,3vw,40px) auto 0}
.cx-orbit-ring{--cw:clamp(108px,11.8vw,176px);--ch:calc(var(--cw)*1.25);--tilt:-7deg;--spin:90deg;
  --rx:calc(50cqw - var(--cw)*.5 - 8px);--ry:calc(50cqh - var(--ch)*.5 - 16px);
  position:relative;height:clamp(460px,46vw,660px);container-type:size;isolation:isolate}
.cx-orbit-path{position:absolute;left:50%;top:50%;width:calc(2*var(--rx));height:calc(2*var(--ry));border-radius:50%;pointer-events:none;
  border:1px solid var(--line-strong);transform:translate(-50%,-50%) rotate(var(--tilt))}
.cx-orbit-path-2{width:calc(1.3*var(--rx));height:calc(1.3*var(--ry));border-style:dashed;opacity:.7}

.cx-orbit-me{--me:clamp(150px,15vw,224px);position:absolute;left:50%;top:50%;z-index:60;width:var(--me);aspect-ratio:1;translate:-50% -50%}
.cx-orbit-me::before{content:"";position:absolute;inset:-34%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,light-dark(oklch(.8 .14 350/.42),oklch(.6 .22 345/.38)),transparent)}
.cx-orbit-face{position:absolute;inset:0;border-radius:50%;overflow:hidden;box-shadow:0 30px 60px -24px oklch(.2 .08 330/.55)}
.cx-orbit-face::before{content:"";position:absolute;inset:0;background:var(--cx-ig-ring);animation:cx-orbit-turn 16s linear infinite}
.cx-orbit-face::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--cx-paper)}
.cx-orbit-selfie{position:absolute;z-index:1;inset:9px;width:calc(100% - 18px);height:calc(100% - 18px);border-radius:50%;object-fit:cover;object-position:50% 28%;
  transition:opacity .8s var(--ease),scale 1.1s var(--ease)}
.cx-orbit-selfie.is-top{z-index:2}
.cx-orbit-selfie.is-gone{opacity:0;scale:1.08}
.cx-orbit-tag{position:absolute;left:50%;bottom:-8px;z-index:3;translate:-50% 0;padding:6px 11px;border-radius:999px;font-size:.7rem;line-height:1;white-space:nowrap;
  color:var(--bg);background:var(--ink);box-shadow:0 8px 18px -8px oklch(0 0 0/.5);transition:opacity .35s}
@keyframes cx-orbit-turn{to{rotate:1turn}}

/* the nine scenes: their place on the ellipse comes from --i and --spin */
.cx-orbit-cards{display:contents}
.cx-orbit-card{--i:0;--a:calc(var(--spin) - var(--i)*40deg);--s:sin(var(--a));--d:calc(var(--s)*.5 + .5);
  position:absolute;left:50%;top:50%;width:var(--cw);height:var(--ch);margin:calc(var(--ch)*-.5) 0 0 calc(var(--cw)*-.5);
  z-index:calc(10 + var(--d)*100);border-radius:16px;text-align:left;color:#fff;will-change:transform;
  transform:rotate(var(--tilt)) translate(calc(cos(var(--a))*var(--rx)),calc(var(--s)*var(--ry))) rotate(calc(-1*var(--tilt))) scale(calc(.5 + .5*var(--d)))}
.cx-orbit-card:nth-child(2){--i:1}.cx-orbit-card:nth-child(3){--i:2}.cx-orbit-card:nth-child(4){--i:3}.cx-orbit-card:nth-child(5){--i:4}
.cx-orbit-card:nth-child(6){--i:5}.cx-orbit-card:nth-child(7){--i:6}.cx-orbit-card:nth-child(8){--i:7}.cx-orbit-card:nth-child(9){--i:8}
.cx-orbit-in{position:absolute;inset:0;border-radius:inherit;overflow:hidden;background:var(--surface-3);
  box-shadow:0 1px 1px oklch(0 0 0/.12),0 20px 40px -18px oklch(.15 .05 300/.6);
  transition:transform .6s var(--ease),opacity .45s var(--ease),scale .5s var(--ease),box-shadow .4s;transition-delay:0s,calc(var(--i)*32ms),calc(var(--i)*32ms),0s}
.cx-orbit-in img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
/* the veil fades a card into the paper as it goes round the back */
.cx-orbit-in::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:var(--cx-paper);opacity:calc((1 - var(--d))*.6)}
/* an Instagram-story ring for the card that is picked */
.cx-orbit-in::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:2.5px;background:var(--cx-ig);opacity:0;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;transition:opacity .35s}
.cx-orbit-pill{position:absolute;left:7px;bottom:7px;z-index:1;display:inline-flex;align-items:center;gap:4px;max-width:calc(100% - 14px);
  padding:5px 9px 5px 6px;border-radius:999px;font:600 .68rem/1.1 var(--f-text);letter-spacing:.005em;white-space:nowrap;
  color:#fff;background:oklch(.17 .02 290/.74);box-shadow:0 0 0 1px oklch(1 0 0/.14) inset;transition:background .35s,color .35s}
.cx-orbit-pill svg{flex:none;width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
.cx-orbit-pill span{overflow:hidden;text-overflow:ellipsis}
.cx-orbit-card.is-cur .cx-orbit-pill{color:var(--on-accent);background:var(--accent)}
.cx-orbit-match{position:absolute;left:50%;top:8px;z-index:1;translate:-50% -4px;display:inline-flex;align-items:center;gap:5px;padding:5px 8px 5px 5px;border-radius:999px;
  font:600 .5rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:oklch(.2 .03 290);background:oklch(1 0 0/.9);
  box-shadow:0 6px 14px -6px oklch(0 0 0/.45);opacity:0;transition:opacity .3s,translate .45s var(--ease)}
.cx-orbit-match::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/8px no-repeat}
.cx-orbit-card.is-on .cx-orbit-match{opacity:1;translate:-50% 0}

/* hover, focus or tap brings a card to the front at full size; the others step back */
.cx-orbit-card.is-on{z-index:300}
.cx-orbit-card.is-on .cx-orbit-in{transform:scale(calc(1.12/(.5 + .5*var(--d))));box-shadow:0 2px 3px oklch(0 0 0/.14),0 40px 70px -26px oklch(.15 .06 320/.7)}
.cx-orbit-card.is-on .cx-orbit-in::before{opacity:1}
.cx-orbit-card.is-on .cx-orbit-in::after{opacity:0}
.cx-orbit-ring.is-held .cx-orbit-in::after{transition:opacity .4s}
.cx-orbit-ring:has(.is-on) .cx-orbit-card:not(.is-on) .cx-orbit-in::after{opacity:calc(.28 + (1 - var(--d))*.5)}

/* switching creators: the scenes dip out one after another and come back as the new person */
.cx-orbit.is-swap .cx-orbit-in{opacity:0;scale:.84}
.cx-orbit.is-swap .cx-orbit-tag,.cx-orbit.is-swap .cx-orbit-plate-txt{opacity:0}

/* ---------- under the stage: what the picked scene is, and the button ---------- */
.cx-orbit-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px;
  max-width:1240px;margin:clamp(20px,3vw,36px) auto 0;padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--line)}
.cx-orbit-plate{display:flex;align-items:center;gap:16px;flex:1 1 360px;min-width:0}
.cx-orbit-plate-face{flex:none;width:60px;height:60px;padding:3px;border-radius:50%;background:var(--cx-ig)}
.cx-orbit-plate-face img{width:100%;height:100%;border-radius:50%;border:2px solid var(--cx-paper);object-fit:cover}
.cx-orbit-plate-txt{display:grid;min-width:0;transition:opacity .25s,translate .35s var(--ease)}
.cx-orbit-plate-txt.is-flip{opacity:0;translate:0 6px}
.cx-orbit-kicker{display:flex;align-items:center;gap:8px;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cx-orbit-check{flex:none;width:16px;height:16px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23111' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.cx-orbit-count{margin-left:2px;padding-left:10px;border-left:1px solid var(--line-strong)}
.cx-orbit-n{color:var(--ink)}
.cx-orbit-place{font:650 clamp(1.45rem,1.1rem + 1vw,2.05rem)/1.08 var(--f-display);letter-spacing:-.03em;margin:6px 0 3px}
.cx-orbit-line{font-size:.95rem;line-height:1.45;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-orbit-name{font-weight:600;color:var(--ink)}
.cx-orbit-cta{display:grid;justify-items:end;gap:12px}
.cx-orbit-cta .btn{margin:0}
.cx-orbit-cap{font-size:.72rem;color:var(--muted)}

.cx-orbit.is-off .cx-orbit-face::before{animation-play-state:paused}

@media (max-width:1023px){
  .cx-orbit-foot{justify-content:center}
  .cx-orbit-cap{text-align:center}
  .cx-orbit-plate{flex-basis:100%;justify-content:center}
  .cx-orbit-cta{justify-items:center}
}

/* ---------- phones: the selfie on top, the scenes in a swipeable curved row ---------- */
@media (max-width:760px){
  .cx-orbit-tabs{margin-top:24px}
  .cx-orbit-tab{padding:.66em .9em;font-size:.88rem}
  .cx-orbit-ring{height:auto;container-type:normal;display:grid;justify-items:center;gap:18px}
  .cx-orbit-path{width:350px;height:220px;top:112px}
  .cx-orbit-path-2{width:280px;height:170px}
  .cx-orbit-me{--me:144px;position:relative;left:auto;top:auto;translate:none;margin-top:40px}
  .cx-orbit-cards{display:flex;gap:12px;justify-self:stretch;margin-inline:calc(-1*var(--gutter));
    padding:22px calc(50% + var(--gutter) - min(29vw,120px)) 26px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
  .cx-orbit-cards::-webkit-scrollbar{display:none}
  .cx-orbit-card{--d:1;position:relative;left:auto;top:auto;flex:none;width:min(58vw,240px);height:auto;aspect-ratio:4/5;margin:0;z-index:auto;
    transform:none;will-change:auto;scroll-snap-align:center}
  .cx-orbit-card.is-on{z-index:auto}
  .cx-orbit-card.is-on .cx-orbit-in{transform:none}
  .cx-orbit-in::after{opacity:0}
  .cx-orbit-pill{font-size:.74rem;left:9px;bottom:9px;padding:6px 10px 6px 7px}
  .cx-orbit-match{top:10px;font-size:.6rem}
  .cx-orbit-card.is-cur .cx-orbit-match{opacity:1;translate:-50% 0}
  .cx-orbit-foot{margin-top:4px}
  .cx-orbit-plate{gap:12px}
  .cx-orbit-plate-face{width:52px;height:52px}
  .cx-orbit-line{white-space:normal}
  @supports (animation-timeline:view()){
    .cx-orbit-in{animation:cx-orbit-arc linear both;animation-timeline:view(inline);animation-range:cover 0% cover 100%}
    @keyframes cx-orbit-arc{
      0%{transform:translateY(34px) rotate(9deg) scale(.82);opacity:.5}
      50%{transform:none;opacity:1}
      100%{transform:translateY(34px) rotate(-9deg) scale(.82);opacity:.5}}
  }
}
@media (max-width:420px){.cx-orbit-tab{padding:.64em .74em;font-size:.84rem}}

@media (prefers-reduced-motion:reduce){
  .cx-orbit-face::before{animation:none}
  .cx-orbit-in{animation:none!important}
}