/* "Your day, in stories." (index.html #stories, assets/cx-story.js): an iPhone (assets/iphone.css) plays the made-up
   creators' avatar photos as Instagram stories, and four story rings beside it jump between creators. Always dark.
   Inside the phone, sizes are iPhone points: --spt is 1/393 of the screen's width (iphone.css); the screen is about
   393 x 840 points, the story picture 9:16 from 54 points down, the reply bar under it.
   Plain styles are the finished state; motion lives under prefers-reduced-motion: no-preference. */

.cx-story{position:relative;color:var(--o-on-navy);background:oklch(.13 .02 292);overflow:clip;isolation:isolate;
  --cx-ig:linear-gradient(45deg,#feda75,#fa7e1e 28%,#d62976 52%,#962fbf 76%,#4f5bd5);
  --cx-ring:conic-gradient(from 200deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5,#d62976,#feda75)}
.cx-story-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(42% 52% at 22% 46%,oklch(.42 .15 345/.32),transparent 70%),
  radial-gradient(34% 44% at 96% 6%,oklch(.55 .14 60/.16),transparent 70%),
  radial-gradient(30% 40% at 70% 100%,oklch(.4 .14 290/.3),transparent 70%),
  linear-gradient(180deg,oklch(.11 .018 285),oklch(.145 .028 300))}
.cx-story-bg::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.05;mix-blend-mode:overlay}

/* the phone left, the copy right; on narrow screens the rings come before the phone, like Instagram's own tray */
.cx-story-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(32px,7vw,120px);
  grid-template-areas:"fig ." "fig head" "fig rings" "fig ctl" "fig cta" "fig .";grid-template-rows:1fr auto auto auto auto 1fr}
.cx-story-head{grid-area:head}
.cx-story-rings{grid-area:rings}
.cx-story-ctl{grid-area:ctl}
.cx-story-cta{grid-area:cta}
.cx-story-fig{grid-area:fig}

.cx-story h2{font-size:clamp(2.2rem,1.3rem + 3.2vw,4.2rem);line-height:.98;letter-spacing:-.04em;color:#fff;margin:14px 0 18px;max-width:11ch}
.cx-story h2 em{font-style:normal;background:linear-gradient(90deg,#feda75,#fa7e1e 30%,#d62976 62%,#b57bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.cx-story .eyebrow{color:oklch(.85 .1 20)}
.cx-story .lede{color:var(--o-on-navy-2);max-width:44ch}

/* ---------- the story rings ---------- */
.cx-story-rings{display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,26px);margin:32px 0 6px}
.cx-story-ring{display:grid;justify-items:center;gap:9px;min-width:0;color:#fff;border-radius:18px;padding:4px;transition:transform .35s var(--ease)}
.cx-story-ring:hover{transform:translateY(-2px)}
.cx-story-ring:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.cx-story-pic{position:relative;display:block;width:clamp(66px,6.2vw,88px);aspect-ratio:1;border-radius:50%;padding:3px;isolation:isolate}
.cx-story-pic::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:var(--cx-ring);transition:opacity .5s}
.cx-story-pic img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid oklch(.13 .02 292);background:oklch(.22 .03 292)}
.cx-story-ring.is-seen .cx-story-pic::before{background:oklch(1 0 0/.26)}
.cx-story-ring[aria-pressed="true"] .cx-story-pic{box-shadow:0 0 0 1px oklch(1 0 0/.06),0 16px 34px -14px oklch(.6 .22 350/.8)}
.cx-story-ring b{font:650 .94rem/1.1 var(--f-text);color:var(--o-on-navy-2);transition:color .3s}
.cx-story-ring small{font:600 .64rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:oklch(.7 .02 280)}
.cx-story-ring[aria-pressed="true"] b{color:#fff}

/* pause control and the how-to line */
.cx-story-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:16px}
.cx-story-pause{display:inline-flex;align-items:center;gap:8px;padding:9px 15px 9px 12px;border-radius:999px;font:600 .84rem/1 var(--f-text);
  color:#fff;background:oklch(1 0 0/.06);border:1px solid oklch(1 0 0/.22);transition:background .25s,color .25s,border-color .25s}
.cx-story-pause:hover{background:oklch(1 0 0/.14);border-color:oklch(1 0 0/.4)}
.cx-story-pause[data-paused]{background:#fff;color:oklch(.2 .04 300);border-color:#fff}
.cx-story-pause:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.cx-story-pause svg{width:14px;height:14px;fill:currentColor}
.cx-story-pause .is-play,.cx-story-pause[data-paused] .is-pause{display:none}
.cx-story-pause[data-paused] .is-play{display:block}
.cx-story-hint{font-size:.74rem;line-height:1.45;color:var(--o-on-navy-2)}
html:not(.js) .cx-story-ctl,html:not(.js) .cx-story-tap{display:none}

.cx-story-cta{margin-top:30px}

/* ---------- the phone ---------- */
.cx-story-fig{position:relative;justify-self:center;align-self:center;margin:0;display:grid;justify-items:center;gap:18px}
.cx-story-device{position:relative;width:clamp(260px,min(25vw,(100svh - 150px) / 2.1),344px)}
.cx-story-device .iphone:hover .iphone-body{transform:none}   /* the tap zones cover the phone: no lift under them */
/* the room's light: the story itself, blurred big behind the phone (two layers, crossfaded) */
.cx-story-glow{position:absolute;inset:4% -46% 0;z-index:-1;pointer-events:none;filter:blur(64px) saturate(1.6);opacity:.5;transform:translateZ(0)}
.cx-story-glow img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease}
.cx-story-glow img.is-on{opacity:1}
.cx-story-cap{font-size:.72rem;color:var(--o-on-navy-2);text-align:center}

/* the screen: Instagram's story viewer, dark */
.cx-story-app{position:absolute;inset:0;z-index:0;background:#000;color:#fff;overflow:hidden;line-height:1.2;text-align:left;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.cx-story-app svg{display:block;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cx-story-cube{position:absolute;inset:0;perspective:calc(var(--spt) * 1000)}
/* each creator's stories are one face of a cube: it turns round its own centre, half a screen behind the glass */
.cx-story-pane{position:absolute;inset:0;visibility:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transform-origin:50% 50% calc(var(--spt) * -196.5)}
.cx-story-pane.is-on{visibility:visible}
.cx-story-media{position:absolute;left:0;right:0;top:calc(var(--spt) * 54);aspect-ratio:9/16;overflow:hidden;
  border-radius:calc(var(--spt) * 10);background:#16161a}
.cx-story-media img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;max-width:none;transform-origin:50% 38%}
.cx-story-media::before,.cx-story-media::after{content:"";position:absolute;left:0;right:0;z-index:1;pointer-events:none}
.cx-story-media::before{top:0;height:calc(var(--spt) * 120);background:linear-gradient(oklch(0 0 0/.5),transparent)}
.cx-story-media::after{bottom:0;height:calc(var(--spt) * 90);background:linear-gradient(transparent,oklch(0 0 0/.28))}

.cx-story-top{position:absolute;z-index:2;left:0;right:0;top:calc(var(--spt) * 54);padding:calc(var(--spt) * 8) calc(var(--spt) * 8) 0}
.cx-story-bars{display:flex;gap:calc(var(--spt) * 3)}
.cx-story-bars i{flex:1;height:calc(var(--spt) * 2.4);border-radius:99px;background:oklch(1 0 0/.35);overflow:hidden}
.cx-story-bars b{display:block;height:100%;border-radius:inherit;background:#fff;transform-origin:left;transform:scaleX(0)}
.cx-story-bars .is-done b{transform:none}
.cx-story-bars .is-now b{transform:scaleX(var(--p,.42))}
.cx-story-who{display:flex;align-items:center;gap:calc(var(--spt) * 8);margin-top:calc(var(--spt) * 10);padding-left:calc(var(--spt) * 4)}
.cx-story-face{flex:none;width:calc(var(--spt) * 32);height:calc(var(--spt) * 32);border-radius:50%;object-fit:cover;max-width:none;
  box-shadow:0 0 0 calc(var(--spt) * 1) oklch(1 0 0/.25)}
.cx-story-handle{font-size:calc(var(--spt) * 14);font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 calc(var(--spt) * 8) oklch(0 0 0/.3)}
.cx-story-age{font-size:calc(var(--spt) * 14);color:oklch(1 0 0/.72)}
.cx-story-icons{margin-left:auto;display:flex;align-items:center;gap:calc(var(--spt) * 16);padding-right:calc(var(--spt) * 4)}
.cx-story-icons svg{width:calc(var(--spt) * 24);height:calc(var(--spt) * 24)}
.cx-story-icons .dots{fill:currentColor;stroke:none}

/* Instagram's location sticker: white card, gradient capitals */
.cx-story-sticker{position:absolute;z-index:2;left:50%;top:calc(var(--spt) * 512);translate:-50% 0;rotate:-4deg;
  display:inline-flex;align-items:center;gap:calc(var(--spt) * 5);max-width:84%;padding:calc(var(--spt) * 8) calc(var(--spt) * 13) calc(var(--spt) * 8) calc(var(--spt) * 10);
  border-radius:calc(var(--spt) * 8);background:#fff;box-shadow:0 calc(var(--spt) * 8) calc(var(--spt) * 24) oklch(0 0 0/.35)}
.cx-story-sticker svg{width:calc(var(--spt) * 19);height:calc(var(--spt) * 19);fill:#d62976;stroke:none}
.cx-story-place{font:800 calc(var(--spt) * 21)/1.05 var(--f-display);font-stretch:75%;letter-spacing:.005em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#c13584;background:var(--cx-ig);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

.cx-story-reply{position:absolute;z-index:3;left:calc(var(--spt) * 12);right:calc(var(--spt) * 14);bottom:calc(var(--spt) * 34);
  display:flex;align-items:center;gap:calc(var(--spt) * 18)}
.cx-story-input{flex:1;min-width:0;height:calc(var(--spt) * 44);display:flex;align-items:center;padding:0 calc(var(--spt) * 18);
  border:calc(var(--spt) * 1.2) solid oklch(1 0 0/.5);border-radius:999px;font-size:calc(var(--spt) * 15);color:oklch(1 0 0/.92);white-space:nowrap}
.cx-story-reply svg{width:calc(var(--spt) * 27);height:calc(var(--spt) * 27)}

/* tap zones over the screen (outside the aria-hidden phone): left half goes back, right half goes on */
.cx-story-tap{position:absolute;z-index:5;top:12%;bottom:12%;width:44%;display:flex;align-items:center;padding:0 3%;cursor:pointer;
  border-radius:14px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.cx-story-prev{left:4%}
.cx-story-next{right:4%;justify-content:flex-end}
.cx-story-tap span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:#fff;background:oklch(0 0 0/.35);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transform:scale(.85);transition:opacity .25s,transform .3s var(--ease)}
.cx-story-tap span svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cx-story-device:hover .cx-story-tap span{opacity:.75;transform:none}
.cx-story-tap:hover span,.cx-story-tap:focus-visible span{opacity:1;transform:none}
.cx-story-tap:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}

@media (prefers-reduced-motion:no-preference){
  .cx-story-pane.go .cx-story-media img{animation:cx-story-kb var(--cx-dur,3.2s) linear both}
  .cx-story-pane.go .cx-story-sticker{animation:cx-story-pop .6s cubic-bezier(.34,1.56,.64,1) .25s both}
  .cx-story-ring[aria-pressed="true"] .cx-story-pic::before{animation:cx-story-spin 5s linear infinite}
  .cx-story.is-paused .cx-story-media img,.cx-story.is-paused .cx-story-pic::before{animation-play-state:paused}
  .cx-story[data-turn="on"] .cx-story-pane.is-out{animation:cx-story-out .7s cubic-bezier(.65,0,.35,1) both}
  .cx-story[data-turn="on"] .cx-story-pane.is-in{animation:cx-story-in .7s cubic-bezier(.65,0,.35,1) both}
  .cx-story[data-turn="back"] .cx-story-pane.is-out{animation:cx-story-in .7s cubic-bezier(.65,0,.35,1) reverse both}
  .cx-story[data-turn="back"] .cx-story-pane.is-in{animation:cx-story-out .7s cubic-bezier(.65,0,.35,1) reverse both}
}
@keyframes cx-story-kb{from{scale:1.02}to{scale:1.1}}
@keyframes cx-story-pop{from{opacity:0;scale:.55}to{opacity:1;scale:1}}
@keyframes cx-story-spin{to{rotate:1turn}}
@keyframes cx-story-out{from{transform:rotateY(0)}to{transform:rotateY(-90deg)}}
@keyframes cx-story-in{from{transform:rotateY(90deg)}to{transform:rotateY(0)}}

@media (max-width:900px){
  .cx-story-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "rings" "fig" "ctl" "cta";grid-template-rows:none}
  .cx-story h2{max-width:none}
  .cx-story-rings{margin:26px 0 34px}
  .cx-story-device{width:min(62vw,340px,(100svh - 140px) / 2.1)}
  .cx-story-ctl{justify-content:center;text-align:center;margin-top:22px}
  .cx-story-cta{justify-self:center;margin-top:26px}
}
@media (max-width:560px){
  .cx-story-rings{flex-wrap:nowrap;justify-content:space-between;gap:6px}
  .cx-story-ring{padding:2px}
  .cx-story-pic{width:clamp(60px,18vw,76px)}
  .cx-story-ring small{font-size:.58rem;letter-spacing:.08em}
  .cx-story-device{width:min(82vw,320px)}
  .cx-story-glow{inset:4% -20% 0}
  .cx-story-cta .btn-lg{white-space:normal;text-align:center}
}