/* ==========================================================================
   Work / case studies — a 3D book of cases on a huge rotating starburst.
   Desktop: open spread (image page | quote page), fanned side pages with the
   client names on their spines; pages turn with a drag (rotateY on the spine).
   ≤991px: sticky flip deck (image on top, quote below) that flips up with scroll.
   ========================================================================== */

.s-work {
  --work-half: 300rem;                 /* mobile: height of one half of the deck */
  --work-off: 6rem;                    /* mobile: stacked-page offset */
  position: relative;
  z-index: 0;
  padding: 367rem 0 317rem;            /* the dashes below the book add 50rem */
  overflow-x: clip;                    /* clip the fan + burst sideways, let the burst bleed vertically */
  -webkit-user-select: none;
  user-select: none;
}

.work__stage { position: relative; max-width: 1920rem; margin: 0 auto; padding: 0 80rem; }
.work__drag { position: relative; height: 600rem; touch-action: pan-y; }

/* ---------- Starburst (rotates with scroll) ---------- */
.work__burst {
  position: absolute; left: 50%; top: 50%; z-index: 0;
  width: 1320rem; height: 1320rem; margin: -660rem 0 0 -660rem;   /* the long rays clear the book top and bottom, like the reference star */
  pointer-events: none;
}
.work__burst-svg { width: 100%; height: 100%; overflow: visible; will-change: transform; }
.work__burst-svg path { fill: var(--blue); }

/* ---------- Fanned side pages (one per case, client name on the spine) ---------- */
.work__fans { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.work__fan {
  position: absolute; top: 0;
  width: 450rem; height: 600rem;
  pointer-events: auto;
  border-radius: 16rem;
}
.work__fan--d1 { z-index: 3; }
.work__fan--d2 { z-index: 2; }
.work__fan--d3 { z-index: 1; }
.work__fan--l.work__fan--d3 { left: 0; }
.work__fan--l.work__fan--d2 { left: 140rem; }
.work__fan--l.work__fan--d1 { left: 280rem; }
.work__fan--r.work__fan--d1 { right: 280rem; }
.work__fan--r.work__fan--d2 { right: 140rem; }
.work__fan--r.work__fan--d3 { right: 0; }

.work__fan-card {
  position: absolute; inset: 0; display: block;
  padding: 18rem;
  background: var(--ice);
  border-radius: 16rem;
  scale: var(--fan-scale, 1);
  transition: translate .3s cubic-bezier(.3, 1.25, .45, 1);
}
.work__fan--d1 .work__fan-card { --fan-scale: .95; }
.work__fan--d2 .work__fan-card { --fan-scale: .9; }
.work__fan--d3 .work__fan-card { --fan-scale: .85; }
.work__fan--l .work__fan-card { box-shadow: -14rem 0 40rem rgba(7, 11, 31, .35); }
.work__fan--r .work__fan-card { box-shadow: 14rem 0 40rem rgba(7, 11, 31, .35); }
.work__fan-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 12rem; pointer-events: none; }

/* the spine label: a dark vertical pill on the visible edge */
.work__spine {
  position: absolute; top: 50%; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 40rem; padding: 20rem 0;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  border-radius: 40rem;
  background: rgba(7, 11, 31, .78);
  color: var(--white);
  font-size: 15rem; font-weight: 700; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  transition: letter-spacing .3s cubic-bezier(.3, 1.25, .45, 1), background-color .3s ease, color .3s ease;
}
.work__fan--l .work__spine { left: 26rem; }
.work__fan--r .work__spine { right: 26rem; }
.work__fan:hover .work__spine { letter-spacing: .2em; }
.work__fan.is-current .work__spine { background: var(--cyan); color: var(--ink); box-shadow: 0 0 0 3rem var(--ink); }
.work__fan--l:hover .work__fan-card { translate: -24rem 0; }
.work__fan--r:hover .work__fan-card { translate: 24rem 0; }
.work__fan--l.is-current .work__fan-card { translate: -14rem 0; }
.work__fan--r.is-current .work__fan-card { translate: 14rem 0; }
.work__fan:focus-visible { outline: none; }
.work__fan:focus-visible .work__fan-card { outline: 3rem solid var(--cyan); outline-offset: 4rem; }
/* the card is mostly tucked behind its neighbour, so keyboard focus also slides it out and rings the spine */
.work__fan--l:focus-visible .work__fan-card { translate: -24rem 0; }
.work__fan--r:focus-visible .work__fan-card { translate: 24rem 0; }
.work__fan:focus-visible .work__spine { box-shadow: 0 0 0 3rem var(--ink), 0 0 0 6rem var(--cyan); }

/* ---------- The book ---------- */
.work__deck {
  position: absolute; left: 50%; top: 0; z-index: 2;
  width: 900rem; height: 600rem; margin-left: -450rem;
  border-radius: 16rem;
}
.work__deck:focus { outline: none; }
.work__deck:focus-visible { outline: 3rem solid var(--cyan); outline-offset: 14rem; }
.work__book { position: relative; width: 100%; height: 100%; perspective: 1800rem; }
.work__book::before {                  /* soft drop shadow under the spread */
  content: ""; position: absolute; z-index: -1;
  left: 3%; right: 3%; top: 8%; bottom: 0;
  border-radius: 40rem;
  box-shadow: 0 60rem 110rem rgba(0, 0, 0, .5);
}
.work__sheet { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; }
.work__sheet--first { left: 0; transform-origin: 100% 50%; z-index: 1; }
.work__sheet--last { transform-origin: 0 50%; z-index: 1; }
.work__page { transform-origin: 0 50%; transform-style: preserve-3d; z-index: 10; will-change: transform; }

/* both faces of a page share the page box; the back is mirrored */
.work__face {
  position: absolute; inset: 0;
  background: var(--ice);
  color: var(--ink);
  border: 1rem solid rgba(7, 11, 31, .06);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.work__page .work__face *, .work__page .work__face::before, .work__page .work__face::after { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.work__page .work__face--back { transform: rotateY(180deg); visibility: hidden; }
.work__face--img { padding: 18rem; border-radius: 16rem 0 0 16rem; }
.work__img { width: 100%; height: 100%; object-fit: cover; border-radius: 12rem; background: var(--ice-2); }
.work__face--quote {
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  padding: 18rem 28rem;
  border-radius: 0 16rem 16rem 0;
  text-align: center;
}
/* gutter shading at the spine, like a real bound book */
.work__face::before, .work__face::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  border-radius: inherit; pointer-events: none;
}
.work__face--img::before { background: linear-gradient(270deg, rgba(7, 11, 31, .3), rgba(7, 11, 31, .08) 3%, rgba(7, 11, 31, 0) 12%); }
.work__face--quote::before { background: linear-gradient(90deg, rgba(7, 11, 31, .18), rgba(7, 11, 31, .04) 3%, rgba(7, 11, 31, 0) 12%); }
/* turning shade, driven by the page angle (--shade set in work.js) */
.work__face::after { z-index: 3; background: linear-gradient(90deg, rgba(7, 11, 31, .42), rgba(7, 11, 31, .06) 70%, rgba(255, 255, 255, .12)); opacity: var(--shade, 0); }
.work__face--back::after { background: linear-gradient(270deg, rgba(7, 11, 31, .42), rgba(7, 11, 31, .06) 70%, rgba(255, 255, 255, .12)); }

/* ---------- Quote page ---------- */
.work__count { font-size: 12rem; font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.work__count-sep { margin: 0 .15em; }
.work__content { display: flex; flex-direction: column; align-items: center; }
.work__quote {
  max-width: 380rem;
  font-family: var(--font-display);
  font-size: 40rem; line-height: 1.02; letter-spacing: .01em;
  text-transform: uppercase;
}
.work__quote em { font-style: normal; color: var(--blue); }
.work__link {
  display: inline-flex; align-items: center;
  margin-top: 28rem; padding: .2em .34em .1em;
  border-radius: 10rem;
  background: var(--ink); color: var(--cyan);
  font-family: var(--font-display); font-size: 36rem; line-height: .9; text-transform: uppercase;
  --bubble: var(--cyan); --bubble-fg: var(--ink);
  transition: color .35s ease, transform .45s var(--ease-back);
}
.work__link:hover { transform: rotate(-3deg) scale(1.06); }
.work__link.is-soon { color: var(--yellow); }
.work__link.is-soon:hover { color: var(--ink); }
.work__author { display: flex; align-items: center; gap: 12rem; margin-top: 24rem; }
.work__rating {
  display: grid; place-items: center; flex: none;
  width: 55rem; height: 55rem; border-radius: 50%;
  background: var(--ink); color: var(--white);
  font-family: var(--font-wide); font-stretch: 150%; font-variation-settings: "wdth" 150, "wght" 500;
  font-size: 16rem; line-height: 1;
}
.work__client {
  font-family: var(--font-wide); font-stretch: 150%; font-variation-settings: "wdth" 150, "wght" 650;
  font-size: 16rem; line-height: 1.1; text-transform: uppercase; text-align: left;
}
.work__tag {
  padding: 11rem 14rem;
  border-radius: 170rem;
  background: rgba(7, 11, 31, .07);
  font-size: 12rem; font-weight: 700; line-height: 1; letter-spacing: .05em; text-transform: uppercase;
}

/* ---------- Prev / next on the book's outer edges + progress dashes (desktop) ---------- */
.work__arrow {
  position: absolute; left: 50%; top: 50%; z-index: 4;
  display: grid; place-items: center;
  width: 64rem; height: 64rem; margin-top: -32rem; border-radius: 50%;
  background: var(--ice); color: var(--ink);
  box-shadow: 0 12rem 30rem rgba(7, 11, 31, .35), 0 0 0 5rem rgba(7, 11, 31, .12);
  --bubble: var(--cyan); --bubble-fg: var(--ink);
  transition: opacity .3s ease, transform .5s var(--ease-back), color .35s ease, visibility 0s linear 0s;
}
.work__arrow--prev { margin-left: -482rem; }      /* centred on the left edge of the 900rem spread */
.work__arrow--next { margin-left: 418rem; }       /* centred on the right edge */
.work__arrow svg { position: relative; width: 40%; height: 40%; transition: transform .45s var(--ease-back); }
.work__arrow:hover { transform: scale(1.1); }
.work__arrow--prev:hover svg { transform: translateX(-3rem); }
.work__arrow--next:hover svg { transform: translateX(3rem); }
/* nothing to turn that way: tuck the arrow away */
.work__arrow[aria-disabled="true"] {
  opacity: 0; transform: scale(.5); visibility: hidden; pointer-events: none;
  transition: opacity .3s ease, transform .4s ease, visibility 0s linear .4s;
}
.work__dashes { position: relative; z-index: 3; display: flex; justify-content: center; align-items: center; gap: 8rem; margin-top: 44rem; }
.work__dash { display: block; width: 16rem; height: 6rem; border-radius: 6rem; background: rgba(212, 226, 255, .28); transition: width .5s var(--ease-out), background-color .3s ease; }
.work__dash.is-on { width: 52rem; background: var(--cyan); }

/* ==========================================================================
   ≤991px — sticky flip deck: image half on top, quote half below; each page is
   hinged at the middle and flips up (rotateX) as you scroll. Side pages become
   tabs peeking above (cases 1–3) and below (cases 4–6) the deck.
   ========================================================================== */
@media (max-width: 991px) {
  .s-work {
    --work-peek: 32rem;
    --work-off: 7rem;
    --work-dock: 176rem;                 /* room for the fixed dock */
    --work-half: clamp(200rem, calc((var(--vhx, 100svh) - var(--work-peek) * 6 - var(--work-off) * 2 - var(--work-dock) - 24rem) / 2), 434rem);
    padding: 60rem 0 40rem;
    min-height: calc(100rem + var(--vhx, 100svh) * 4.1);
  }
  .work__pin {
    position: -webkit-sticky; position: sticky; top: 0;
    height: var(--vhx, 100svh);
    display: flex; flex-direction: column; justify-content: center;
    padding: calc(var(--work-peek) * 3 + 8rem) 0 calc(var(--work-peek) * 3 + var(--work-off) * 2 + var(--work-dock));
  }
  .work__stage { width: 100%; padding: 0 24rem; }
  .work__drag { width: 100%; max-width: 680rem; height: calc(var(--work-half) * 2); margin: 0 auto; touch-action: auto; }
  .work__burst { width: 900rem; height: 900rem; margin: -450rem 0 0 -450rem; }

  .work__deck { left: 0; top: 0; width: 100%; height: 100%; margin: 0; }
  .work__book { perspective: 1500rem; }
  .work__book::before { left: 4%; right: 4%; top: 10%; bottom: 2%; box-shadow: 0 40rem 80rem rgba(0, 0, 0, .45); }
  .work__sheet { left: 0; top: 50%; width: 100%; height: 50%; }
  .work__sheet--first { top: 0; transform-origin: 50% 100%; }
  .work__sheet--last { transform-origin: 50% 0; }
  .work__page { transform-origin: 50% 0; }
  .work__page .work__face--back { transform: rotateX(180deg); }
  .work__face--img { border-radius: 16rem 16rem 0 0; }
  .work__face--quote { border-radius: 0 0 16rem 16rem; box-shadow: 0 16rem 34rem rgba(7, 11, 31, .18); }
  .work__face--img::before { background: linear-gradient(0deg, rgba(7, 11, 31, .26), rgba(7, 11, 31, .06) 4%, rgba(7, 11, 31, 0) 14%); }
  .work__face--quote::before { background: linear-gradient(180deg, rgba(7, 11, 31, .16), rgba(7, 11, 31, .04) 4%, rgba(7, 11, 31, 0) 14%); }
  .work__face::after { background: linear-gradient(180deg, rgba(7, 11, 31, .42), rgba(7, 11, 31, .06) 70%, rgba(255, 255, 255, .12)); }
  .work__face--back::after { background: linear-gradient(0deg, rgba(7, 11, 31, .42), rgba(7, 11, 31, .06) 70%, rgba(255, 255, 255, .12)); }

  .work__face--img { padding: 14rem; }
  .work__face--quote { padding: 20rem 28rem 22rem; }
  .work__quote { max-width: 580rem; font-size: 33rem; line-height: 1.04; }
  .work__link { margin-top: 16rem; font-size: 28rem; border-radius: 8rem; }
  .work__author { margin-top: 14rem; }
  .work__rating { width: 46rem; height: 46rem; font-size: 14rem; }
  .work__client { font-size: 14rem; }
  .work__count { font-size: 12rem; }
  .work__tag { font-size: 11rem; padding: 9rem 12rem; }

  .work__arrow, .work__dashes { display: none; }

  /* side pages → tabs */
  .work__fan { left: auto; right: auto; top: auto; bottom: auto; width: auto; height: 220rem; }
  .work__fan--l.work__fan--d1, .work__fan--r.work__fan--d1 { left: 20rem; right: 20rem; }
  .work__fan--l.work__fan--d2, .work__fan--r.work__fan--d2 { left: 40rem; right: 40rem; }
  .work__fan--l.work__fan--d3, .work__fan--r.work__fan--d3 { left: 60rem; right: 60rem; }
  .work__fan--l.work__fan--d1 { top: calc(var(--work-peek) * -1); }
  .work__fan--l.work__fan--d2 { top: calc(var(--work-peek) * -2); }
  .work__fan--l.work__fan--d3 { top: calc(var(--work-peek) * -3); }
  .work__fan--r.work__fan--d1 { bottom: calc(var(--work-peek) * -1 - var(--work-off) * 2); }
  .work__fan--r.work__fan--d2 { bottom: calc(var(--work-peek) * -2 - var(--work-off) * 2); }
  .work__fan--r.work__fan--d3 { bottom: calc(var(--work-peek) * -3 - var(--work-off) * 2); }
  .work__fan .work__fan-card { --fan-scale: 1; padding: 6rem; }
  .work__fan--l .work__fan-card { box-shadow: 0 -6rem 20rem rgba(7, 11, 31, .25); }
  .work__fan--r .work__fan-card { box-shadow: 0 6rem 20rem rgba(7, 11, 31, .25); }
  .work__fan-card img { border-radius: 11rem; object-position: 50% 0; }
  .work__fan--r .work__fan-card img { object-position: 50% 100%; }
  .work__fan--l .work__spine, .work__fan--r .work__spine { left: 50%; right: auto; }
  .work__spine {
    top: 6rem;
    width: auto; height: calc(var(--work-peek) - 12rem); padding: 0 14rem;
    transform: translateX(-50%);
    writing-mode: horizontal-tb;
    font-size: 12rem; letter-spacing: .12em;
  }
  .work__fan--r .work__spine { top: auto; bottom: 6rem; }
  .work__fan:hover .work__spine { letter-spacing: .12em; }
  .work__fan--l:hover .work__fan-card, .work__fan--l:active .work__fan-card, .work__fan--l:focus-visible .work__fan-card { translate: 0 -6rem; }
  .work__fan--r:hover .work__fan-card, .work__fan--r:active .work__fan-card, .work__fan--r:focus-visible .work__fan-card { translate: 0 6rem; }
  .work__fan--l.is-current .work__fan-card, .work__fan--r.is-current .work__fan-card { translate: 0 0; }
}

@media (max-width: 743px) {
  .s-work {
    --work-peek: 24rem;
    --work-off: 5rem;
    --work-dock: 78rem;
    --work-half: clamp(200rem, calc((var(--vhx, 100svh) - var(--work-peek) * 6 - var(--work-off) * 2 - var(--work-dock) - 14rem) / 2), 340rem);
    padding: 40rem 0 20rem;
  }
  .work__stage { padding: 0 16rem; }
  .work__burst { width: 620rem; height: 620rem; margin: -310rem 0 0 -310rem; }
  .work__face--img { padding: 10rem; }
  .work__img { border-radius: 10rem; }
  .work__face--quote { padding: 18rem 18rem 18rem; }
  .work__quote { font-size: 24rem; line-height: 1.04; }
  .work__link { margin-top: 14rem; font-size: 23rem; border-radius: 7rem; }
  .work__author { margin-top: 13rem; gap: 9rem; }
  .work__rating { width: 38rem; height: 38rem; font-size: 12rem; }
  .work__client { font-size: 12rem; }
  .work__count { font-size: 10rem; }
  .work__tag { font-size: 10rem; padding: 8rem 11rem; }
  .work__fan--l.work__fan--d1, .work__fan--r.work__fan--d1 { left: 12rem; right: 12rem; }
  .work__fan--l.work__fan--d2, .work__fan--r.work__fan--d2 { left: 24rem; right: 24rem; }
  .work__fan--l.work__fan--d3, .work__fan--r.work__fan--d3 { left: 36rem; right: 36rem; }
  .work__fan { height: 160rem; }
  .work__fan .work__fan-card { padding: 4rem; }
  .work__fan-card img { border-radius: 8rem; }
  .work__spine { top: 4rem; height: calc(var(--work-peek) - 8rem); padding: 0 10rem; font-size: 9rem; letter-spacing: .12em; }
  .work__fan--r .work__spine { bottom: 4rem; }
}

/* reduced motion: no spring on the side pages */
@media (prefers-reduced-motion: reduce) {
  .work__fan-card, .work__spine, .work__dash { transition: none; }
}