/* ── WORK PAGE, DIRECTION A: CINEMA ──
   Loaded only by work-cinema.html. Every class starts .wc.
   One client at a time, the film edge to edge and fading into the mint
   grey at the frame edges, so the page and the film are one surface. The
   name sets in as a title card in aubergine on that mint margin. A thin
   chapter list of the nine names sits at the right edge.
   Without the script every client is a full screen frame in a column, so
   nothing is ever hidden behind a script that did not run. */

.wc-page { background: var(--bg); }

.wc {
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --expo: cubic-bezier(0.16, 1, 0.3, 1);
  --pad: 52px;
  position: relative;
  background: var(--bg);
}

.wc-h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── ONE SCENE ── */
.wc-scene {
  position: relative;
  display: block;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.wc-iris,
.wc-inner,
.wc-film {
  position: absolute;
  inset: 0;
  display: block;
}
.wc-film img,
.wc-film video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  display: block;
}
.wc-film video { opacity: 0; transition: opacity 500ms var(--ease); }
.wc-film video.is-play { opacity: 1; }

/* a still lives on a slow push while it is on screen */
.wc-still img { transform: scale(1.04); transform-origin: 55% 45%; }
.wc-scene.is-on .wc-still img { animation: wc-push 18s cubic-bezier(0.33, 0, 0.4, 1) infinite alternate; }
@keyframes wc-push { to { transform: scale(1.13) translate3d(-1%, -0.6%, 0); } }

/* FIG has no footage yet: the word on aubergine, never a borrowed image */
.wc-type {
  background: var(--ink);
  overflow: hidden;
}
.wc-type::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90vmax;
  height: 90vmax;
  margin: -45vmax 0 0 -45vmax;
  background: radial-gradient(closest-side, rgba(122, 191, 171, 0.32), rgba(122, 191, 171, 0) 70%);
  animation: wc-drift 14s ease-in-out infinite alternate;
}
@keyframes wc-drift {
  from { transform: translate3d(-14%, -6%, 0); }
  to { transform: translate3d(12%, 8%, 0); }
}
.wc-type-mark {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 44vw;
  line-height: 1;
  letter-spacing: -0.06em;
  color: rgba(224, 231, 231, 0.1);
  white-space: nowrap;
}

/* the mint veils that used to sit over the film are gone, see THE EDGE FADE at the end */
.js-wc.is-type .wc-ch-link { color: #e0e7e7; }
.js-wc.is-type .wc-ch-star { background: #e0e7e7; }

/* ── THE TITLE CARD ── */
.wc-card {
  position: absolute;
  left: var(--pad);
  right: 300px;
  bottom: 48px;
  z-index: 2;
  display: block;
  pointer-events: none;
}
/* the URAL star tag, top left of the name and small, in place of a count.
   One mask from the brand kit, so its colour is set here */
.wc-star {
  display: block;
  width: 26px;
  height: 27px;
  margin: 0 0 16px 0.04em;
  background: var(--wc-star, var(--ink));
  -webkit-mask: url('work/cinema/star-tag.png') center / contain no-repeat;
  mask: url('work/cinema/star-tag.png') center / contain no-repeat;
}
.wc-name {
  display: block;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(52px, 8.4vw, 140px);
  line-height: 0.94;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.wc-word {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: top;
  padding: 0.06em 0.02em 0.14em;
  margin: -0.06em -0.02em -0.14em;
}
.wc-ch { display: inline-block; }
.wc-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 18px;
  font-family: var(--ff);
  font-size: 16px;
  line-height: 1.35;
  color: var(--ink);
}
.wc-fmt {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(49, 27, 66, 0.62);
}
.wc-fmt::before {
  content: '';
  width: 22px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--mint);
}

.wc-scene:focus-visible { outline: none; }
.wc-scene:focus-visible .wc-name,
.wc.is-focus .wc-card.is-on .wc-name { text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 3px; text-underline-offset: 0.12em; }

/* ── THE CHAPTER LIST ── */
.wc-chapters { display: none; }

.wc-hint { display: none; }

/* ── SCRIPTED ── the scenes stack in one frame, one on at a time */
.wc.js-wc {
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  touch-action: none;
}
.js-wc .wc-stage {
  position: absolute;
  inset: 0;
}
.js-wc .wc-scene {
  position: absolute;
  inset: 0;
  height: auto;
  visibility: hidden;
  z-index: 1;
}
.js-wc .wc-scene.is-on { visibility: visible; }

/* the iris: a circle as wide as the frame's diagonal, centred on it. The
   script scales the circle open and the film inside it by the inverse,
   so the film holds still while the circle grows. Once open the clip is
   dropped */
.js-wc .wc-iris {
  left: calc(50% - var(--D, 200vmax) / 2);
  top: calc(50% - var(--D, 200vmax) / 2);
  right: auto;
  bottom: auto;
  width: var(--D, 200vmax);
  height: var(--D, 200vmax);
  border-radius: 50%;
  overflow: hidden;
  transform-origin: 50% 50%;
}
.js-wc .wc-inner {
  left: calc(var(--D, 200vmax) / 2 - var(--W, 100vw) / 2);
  top: calc(var(--D, 200vmax) / 2 - var(--H, 100vh) / 2);
  right: auto;
  bottom: auto;
  width: var(--W, 100vw);
  height: var(--H, 100vh);
  transform-origin: 50% 50%;
}
.js-wc .wc-scene.is-settled .wc-iris { overflow: visible; border-radius: 0; }
.js-wc .wc-scene.is-entering .wc-iris,
.js-wc .wc-scene.is-entering .wc-inner,
.js-wc .wc-scene.is-leaving .wc-inner { will-change: transform; }

/* title card: the letters rise out of the line one after another, the
   small line follows. The outgoing card clears in 260ms, all at once */
.js-wc .wc-ch {
  transform: translate3d(0, 112%, 0);
  transition: transform 1000ms var(--expo);
  transition-delay: calc(var(--k, 0) * 32ms);
}
.js-wc .wc-star,
.js-wc .wc-line {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 700ms var(--ease), transform 900ms var(--expo);
}
.js-wc .wc-card.is-in .wc-ch { transform: none; }
.js-wc .wc-card.is-in .wc-star { opacity: 1; transform: none; transition-delay: 120ms; }
.js-wc .wc-card.is-in .wc-line { opacity: 1; transform: none; transition-delay: 520ms; }
.js-wc .wc-cards {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.js-wc .wc-card { visibility: hidden; }
.js-wc .wc-card.is-on { visibility: visible; }
.js-wc .wc-card.is-out {
  opacity: 0;
  transition: opacity 260ms ease;
}

.js-wc .wc-chapters {
  display: block;
  position: absolute;
  right: 40px;
  top: 50%;
  z-index: 5;
  transform: translateY(-50%);
}
.wc-chapters ol {
  list-style: none;
  margin: 0;
  padding: 0 16px 0 0;
}
.wc-ch-link {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  font-family: var(--ff);
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.4;
  transition: opacity 420ms var(--ease), color 600ms var(--ease);
}
.wc-ch-star {
  align-self: center;
  width: 10px;
  height: 10px;
  background: var(--ink);
  -webkit-mask: url('work/cinema/star-tag.png') center / contain no-repeat;
  mask: url('work/cinema/star-tag.png') center / contain no-repeat;
  opacity: 0;
  transform: scale(0.5) rotate(-60deg);
  transition: opacity 420ms var(--ease), transform 700ms var(--expo);
}
.wc-ch-link.is-on .wc-ch-star { opacity: 1; transform: none; }
.wc-ch-link:hover,
.wc-ch-link:focus-visible { opacity: 0.8; outline: none; }
.wc-ch-link.is-on { opacity: 1; }
.wc-mark {
  position: absolute;
  right: 0;
  top: 0;
  width: 2px;
  height: 16px;
  margin-top: -8px;
  border-radius: 2px;
  background: var(--mint);
  transition: transform 700ms var(--expo);
}

.js-wc .wc-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  position: absolute;
  right: 56px;
  bottom: 52px;
  z-index: 5;
  font-family: var(--ff);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(49, 27, 66, 0.6);
  transition: opacity 600ms var(--ease);
  pointer-events: none;
}
.wc-hint i {
  position: relative;
  width: 1.5px;
  height: 28px;
  overflow: hidden;
  background: rgba(49, 27, 66, 0.14);
}
.wc-hint i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--mint);
  transform: translateY(-100%);
  animation: wc-hint 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes wc-hint {
  50% { transform: none; }
  100% { transform: translateY(100%); }
}
.wc.is-moved .wc-hint { opacity: 0; }

/* the track record starts just under the cinema */
.wc-after { padding-top: 96px; }

/* ── PHONE ── the chapter list becomes nine ticks at the edge, the title
   card takes the width and may break between words */
@media (max-width: 700px) {
  .wc { --pad: 22px; }
  .wc-card { right: 52px; bottom: 34px; }
  .wc-star { width: 20px; height: 21px; margin-bottom: 12px; }
  .wc-name { font-size: clamp(40px, 13vw, 64px); line-height: 0.96; }
  .wc-line { margin-top: 12px; font-size: 14px; gap: 6px 12px; }
  .wc-fmt { gap: 9px; }
  .wc-fmt::before { width: 16px; }
  .wc-type-mark { font-size: 64vw; top: 40%; }
  .wc-film img,
  .wc-film video { object-position: var(--ppos, var(--pos, 50% 50%)); }
  .js-wc .wc-chapters { right: 6px; }
  .wc-chapters ol { padding: 0; }
  .wc-ch-link {
    width: 34px;
    height: 24px;
    padding: 0;
    align-items: center;
    opacity: 1;
  }
  .wc-ch-star,
  .wc-ch-name { display: none; }
  .wc-ch-link::after {
    content: '';
    width: 10px;
    height: 1.5px;
    margin-right: 10px;
    border-radius: 1px;
    background: rgba(49, 27, 66, 0.35);
    transform-origin: 100% 50%;
    transition: transform 500ms var(--expo), background-color 500ms var(--ease);
  }
  .wc-ch-link.is-on::after { transform: scaleX(2.2); background: var(--ink); }
  .wc-mark { display: none; }
  .js-wc .wc-hint { right: auto; left: 50%; bottom: auto; top: 88px; transform: translateX(-50%); display: none; }
  .wc-after { padding-top: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .js-wc .wc-ch,
  .js-wc .wc-star,
  .js-wc .wc-line,
  .wc-ch-star,
  .wc-mark,
  .wc-ch-link::after { transition: none !important; transform: none; }
  .wc-scene.is-on .wc-still img,
  .wc-type::before,
  .wc-hint i::after { animation: none; }
}

/* without the script each frame carries its own fade under the card */
.wc:not(.js-wc) .wc-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #e0e7e7 0%, rgba(224, 231, 231, 0.85) 22%, rgba(224, 231, 231, 0) 50%);
}

/* ── THE NAV ON THIS PAGE ── no frosted band and no line. The film runs
   up under the nav and a soft mint grey scrim, eased so it has no edge,
   keeps the links readable on every client. The same scrim lets the
   track record dissolve under the nav further down. This page only */
.wc-page nav.scrolled {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
.wc-page nav::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100% + 72px);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(224, 231, 231, 0.96) 0%, rgba(224, 231, 231, 0.93) 26%,
    rgba(224, 231, 231, 0.78) 42%, rgba(224, 231, 231, 0.52) 57%,
    rgba(224, 231, 231, 0.26) 72%, rgba(224, 231, 231, 0.08) 87%,
    rgba(224, 231, 231, 0) 100%);
}
/* the drawer carries no numbers on this page either */
.wc-page #menu .menu-num { display: none; }

/* ── THE TRACK RECORD IN NUMBERS ── after the names. Four rows, each a
   big Halenoir figure that counts up while the star runs along a scale
   and lands beside the label. The figures are written in the HTML, so
   without the script they simply sit there finished */
.wc-tr {
  --fs: clamp(64px, 10.4vw, 156px);
  list-style: none;
  margin: 56px 0 8px;
  padding: 0;
  border-top: 1px solid rgba(49, 27, 66, 0.1);
}
.wc-tr-row {
  display: grid;
  grid-template-columns: calc(var(--fs) * 2.62) minmax(0, 1fr) minmax(170px, 236px);
  align-items: end;
  column-gap: clamp(24px, 3.4vw, 52px);
  padding: clamp(22px, 2.6vw, 38px) 0 clamp(20px, 2.2vw, 32px);
  border-bottom: 1px solid rgba(49, 27, 66, 0.1);
}
.wc-tr-fig {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: var(--ink);
  white-space: nowrap;
  font-feature-settings: 'tnum' 1;
}
.wc-tr-plus {
  display: inline-block;
  margin-left: 0.03em;
  font-size: 0.5em;
  vertical-align: 0.74em;
  color: var(--mint);
}

/* the ruler: fine ticks like a timeline with a long tick every fifth.
   Over it a lit copy in mint, revealed up to the star, so the ticks
   light as the star passes. The star is the handle */
.wc-tr-scale {
  position: relative;
  display: block;
  height: 30px;
  margin-bottom: calc(var(--fs) * 0.02);
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.wc-tr-scale::before,
.wc-tr-lit-in {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--tc), var(--tc)) left bottom / 100% var(--tb, 1px) no-repeat,
    repeating-linear-gradient(to right, var(--tc) 0 1px, transparent 1px 60px) left bottom / 100% 12px no-repeat,
    repeating-linear-gradient(to right, var(--tc2) 0 1px, transparent 1px 12px) left bottom / 100% 6px no-repeat;
}
.wc-tr-scale::before { --tc: rgba(49, 27, 66, 0.2); --tc2: rgba(49, 27, 66, 0.12); }
.wc-tr-lit {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.wc-tr-lit-in { --tc: var(--mint); --tc2: var(--mint); --tb: 2px; }

.wc-tr-hold {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* 44px to grab, centred on the star at the head of the run */
.wc-tr-handle {
  position: absolute;
  right: -22px;
  bottom: -8px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  pointer-events: auto;
  outline: none;
}
.wc-tr-star {
  display: block;
  width: 18px;
  height: 19px;
  background: var(--mint);
  -webkit-mask: url('work/cinema/star-tag.png') center / contain no-repeat;
  mask: url('work/cinema/star-tag.png') center / contain no-repeat;
  transform-origin: 50% 55%;
}
.js-tr .wc-tr-scale { cursor: grab; }
.wc-tr-handle:focus-visible { box-shadow: inset 0 0 0 2px rgba(122, 191, 171, 0.9); }
.wc-tr-handle.is-grab .wc-tr-star { background: #5ea38f; }
html.wc-tr-grabbing,
html.wc-tr-grabbing * { cursor: grabbing !important; }

.wc-tr-label {
  align-self: end;
  padding-bottom: calc(var(--fs) * 0.01);
  font-family: var(--ff);
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink);
}
.wc-tr-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* scripted: the run starts empty and the star turned, the script drives
   both while the figure counts and while it is dragged */
.js-tr .wc-tr-lit,
.js-tr .wc-tr-hold { transform: translate3d(-100%, 0, 0); }
.js-tr .wc-tr-lit-in { transform: translate3d(100%, 0, 0); }
.js-tr .wc-tr-star { transform: rotate(-150deg); }
.js-tr .wc-tr-label { opacity: 0.35; transition: opacity 900ms var(--ease, ease); }
.js-tr .wc-tr-row.is-done .wc-tr-label { opacity: 1; }

/* phone: one column per row, the figure, its label right under it, then
   the ruler the full width with a thumb sized star */
@media (max-width: 700px) {
  .wc-tr { --fs: clamp(44px, 14vw, 60px); margin-top: 36px; }
  .wc-tr-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'fig' 'label' 'scale';
    row-gap: 0;
    padding: 26px 0 20px;
  }
  .wc-tr-fig { grid-area: fig; }
  .wc-tr-label { grid-area: label; margin-top: 10px; padding: 0; font-size: 14px; }
  .wc-tr-scale { grid-area: scale; height: 30px; margin: 4px 0 0; }
  .wc-tr-star { width: 20px; height: 21px; }
  .wc-tr-handle { bottom: -9px; }
}

@media (prefers-reduced-motion: reduce) {
  .js-tr .wc-tr-label { transition: none; }
}

/* ── THE EDGE FADE ── the film itself fades out at its edges: a mask on the
   stage, each edge eased from clear to solid on a smootherstep curve, the
   four intersected, so the page's mint grey shows through only where the
   film dissolves and the body of the frame keeps its full colour and
   contrast. Nothing is laid over the picture. The top edge starts clear so
   it runs on from the nav's scrim as one fade. Deepest along the bottom
   for the title card, wider at the right for the chapter list.
   (Replaces the mint veil overlays, 19 October 2026.) */
.js-wc .wc-stage {
  -webkit-mask-image:
    linear-gradient(to top, rgba(0,0,0,0.000) 0.00%, rgba(0,0,0,0.005) 4.00%, rgba(0,0,0,0.035) 8.00%, rgba(0,0,0,0.104) 12.00%, rgba(0,0,0,0.210) 16.00%, rgba(0,0,0,0.347) 20.00%, rgba(0,0,0,0.500) 24.00%, rgba(0,0,0,0.653) 28.00%, rgba(0,0,0,0.790) 32.00%, rgba(0,0,0,0.896) 36.00%, rgba(0,0,0,0.965) 40.00%, rgba(0,0,0,0.995) 44.00%, rgba(0,0,0,1.000) 48.00%, #000 48.00%),
    linear-gradient(to bottom, rgba(0,0,0,0.000) 0.00%, rgba(0,0,0,0.005) 1.67%, rgba(0,0,0,0.035) 3.33%, rgba(0,0,0,0.104) 5.00%, rgba(0,0,0,0.210) 6.67%, rgba(0,0,0,0.347) 8.33%, rgba(0,0,0,0.500) 10.00%, rgba(0,0,0,0.653) 11.67%, rgba(0,0,0,0.790) 13.33%, rgba(0,0,0,0.896) 15.00%, rgba(0,0,0,0.965) 16.67%, rgba(0,0,0,0.995) 18.33%, rgba(0,0,0,1.000) 20.00%, #000 20.00%),
    linear-gradient(to right, rgba(0,0,0,0.000) 0.00%, rgba(0,0,0,0.005) 0.83%, rgba(0,0,0,0.035) 1.67%, rgba(0,0,0,0.104) 2.50%, rgba(0,0,0,0.210) 3.33%, rgba(0,0,0,0.347) 4.17%, rgba(0,0,0,0.500) 5.00%, rgba(0,0,0,0.653) 5.83%, rgba(0,0,0,0.790) 6.67%, rgba(0,0,0,0.896) 7.50%, rgba(0,0,0,0.965) 8.33%, rgba(0,0,0,0.995) 9.17%, rgba(0,0,0,1.000) 10.00%, #000 10.00%),
    linear-gradient(to left, rgba(0,0,0,0.000) 0.00%, rgba(0,0,0,0.005) 2.00%, rgba(0,0,0,0.035) 4.00%, rgba(0,0,0,0.104) 6.00%, rgba(0,0,0,0.210) 8.00%, rgba(0,0,0,0.347) 10.00%, rgba(0,0,0,0.500) 12.00%, rgba(0,0,0,0.653) 14.00%, rgba(0,0,0,0.790) 16.00%, rgba(0,0,0,0.896) 18.00%, rgba(0,0,0,0.965) 20.00%, rgba(0,0,0,0.995) 22.00%, rgba(0,0,0,1.000) 24.00%, #000 24.00%);
  mask-image:
    linear-gradient(to top, rgba(0,0,0,0.000) 0.00%, rgba(0,0,0,0.005) 4.00%, rgba(0,0,0,0.035) 8.00%, rgba(0,0,0,0.104) 12.00%, rgba(0,0,0,0.210) 16.00%, rgba(0,0,0,0.347) 20.00%, rgba(0,0,0,0.500) 24.00%, rgba(0,0,0,0.653) 28.00%, rgba(0,0,0,0.790) 32.00%, rgba(0,0,0,0.896) 36.00%, rgba(0,0,0,0.965) 40.00%, rgba(0,0,0,0.995) 44.00%, rgba(0,0,0,1.000) 48.00%, #000 48.00%),
    linear-gradient(to bottom, rgba(0,0,0,0.000) 0.00%, rgba(0,0,0,0.005) 1.67%, rgba(0,0,0,0.035) 3.33%, rgba(0,0,0,0.104) 5.00%, rgba(0,0,0,0.210) 6.67%, rgba(0,0,0,0.347) 8.33%, rgba(0,0,0,0.500) 10.00%, rgba(0,0,0,0.653) 11.67%, rgba(0,0,0,0.790) 13.33%, rgba(0,0,0,0.896) 15.00%, rgba(0,0,0,0.965) 16.67%, rgba(0,0,0,0.995) 18.33%, rgba(0,0,0,1.000) 20.00%, #000 20.00%),
    linear-gradient(to right, rgba(0,0,0,0.000) 0.00%, rgba(0,0,0,0.005) 0.83%, rgba(0,0,0,0.035) 1.67%, rgba(0,0,0,0.104) 2.50%, rgba(0,0,0,0.210) 3.33%, rgba(0,0,0,0.347) 4.17%, rgba(0,0,0,0.500) 5.00%, rgba(0,0,0,0.653) 5.83%, rgba(0,0,0,0.790) 6.67%, rgba(0,0,0,0.896) 7.50%, rgba(0,0,0,0.965) 8.33%, rgba(0,0,0,0.995) 9.17%, rgba(0,0,0,1.000) 10.00%, #000 10.00%),
    linear-gradient(to left, rgba(0,0,0,0.000) 0.00%, rgba(0,0,0,0.005) 2.00%, rgba(0,0,0,0.035) 4.00%, rgba(0,0,0,0.104) 6.00%, rgba(0,0,0,0.210) 8.00%, rgba(0,0,0,0.347) 10.00%, rgba(0,0,0,0.500) 12.00%, rgba(0,0,0,0.653) 14.00%, rgba(0,0,0,0.790) 16.00%, rgba(0,0,0,0.896) 18.00%, rgba(0,0,0,0.965) 20.00%, rgba(0,0,0,0.995) 22.00%, rgba(0,0,0,1.000) 24.00%, #000 24.00%);
  -webkit-mask-composite: source-in, source-in, source-in;
  mask-composite: intersect;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@media (max-width: 700px) {
  .js-wc .wc-stage {
    -webkit-mask-image:
    linear-gradient(to top, rgba(0,0,0,0.000) 0.00%, rgba(0,0,0,0.005) 3.83%, rgba(0,0,0,0.035) 7.67%, rgba(0,0,0,0.104) 11.50%, rgba(0,0,0,0.210) 15.33%, rgba(0,0,0,0.347) 19.17%, rgba(0,0,0,0.500) 23.00%, rgba(0,0,0,0.653) 26.83%, rgba(0,0,0,0.790) 30.67%, rgba(0,0,0,0.896) 34.50%, rgba(0,0,0,0.965) 38.33%, rgba(0,0,0,0.995) 42.17%, rgba(0,0,0,1.000) 46.00%, #000 46.00%),
    linear-gradient(to bottom, rgba(0,0,0,0.000) 0.00%, rgba(0,0,0,0.005) 1.42%, rgba(0,0,0,0.035) 2.83%, rgba(0,0,0,0.104) 4.25%, rgba(0,0,0,0.210) 5.67%, rgba(0,0,0,0.347) 7.08%, rgba(0,0,0,0.500) 8.50%, rgba(0,0,0,0.653) 9.92%, rgba(0,0,0,0.790) 11.33%, rgba(0,0,0,0.896) 12.75%, rgba(0,0,0,0.965) 14.17%, rgba(0,0,0,0.995) 15.58%, rgba(0,0,0,1.000) 17.00%, #000 17.00%),
    linear-gradient(to right, rgba(0,0,0,0.000) 0.00%, rgba(0,0,0,0.005) 0.75%, rgba(0,0,0,0.035) 1.50%, rgba(0,0,0,0.104) 2.25%, rgba(0,0,0,0.210) 3.00%, rgba(0,0,0,0.347) 3.75%, rgba(0,0,0,0.500) 4.50%, rgba(0,0,0,0.653) 5.25%, rgba(0,0,0,0.790) 6.00%, rgba(0,0,0,0.896) 6.75%, rgba(0,0,0,0.965) 7.50%, rgba(0,0,0,0.995) 8.25%, rgba(0,0,0,1.000) 9.00%, #000 9.00%),
    linear-gradient(to left, rgba(0,0,0,0.000) 0.00%, rgba(0,0,0,0.005) 1.42%, rgba(0,0,0,0.035) 2.83%, rgba(0,0,0,0.104) 4.25%, rgba(0,0,0,0.210) 5.67%, rgba(0,0,0,0.347) 7.08%, rgba(0,0,0,0.500) 8.50%, rgba(0,0,0,0.653) 9.92%, rgba(0,0,0,0.790) 11.33%, rgba(0,0,0,0.896) 12.75%, rgba(0,0,0,0.965) 14.17%, rgba(0,0,0,0.995) 15.58%, rgba(0,0,0,1.000) 17.00%, #000 17.00%);
    mask-image:
    linear-gradient(to top, rgba(0,0,0,0.000) 0.00%, rgba(0,0,0,0.005) 3.83%, rgba(0,0,0,0.035) 7.67%, rgba(0,0,0,0.104) 11.50%, rgba(0,0,0,0.210) 15.33%, rgba(0,0,0,0.347) 19.17%, rgba(0,0,0,0.500) 23.00%, rgba(0,0,0,0.653) 26.83%, rgba(0,0,0,0.790) 30.67%, rgba(0,0,0,0.896) 34.50%, rgba(0,0,0,0.965) 38.33%, rgba(0,0,0,0.995) 42.17%, rgba(0,0,0,1.000) 46.00%, #000 46.00%),
    linear-gradient(to bottom, rgba(0,0,0,0.000) 0.00%, rgba(0,0,0,0.005) 1.42%, rgba(0,0,0,0.035) 2.83%, rgba(0,0,0,0.104) 4.25%, rgba(0,0,0,0.210) 5.67%, rgba(0,0,0,0.347) 7.08%, rgba(0,0,0,0.500) 8.50%, rgba(0,0,0,0.653) 9.92%, rgba(0,0,0,0.790) 11.33%, rgba(0,0,0,0.896) 12.75%, rgba(0,0,0,0.965) 14.17%, rgba(0,0,0,0.995) 15.58%, rgba(0,0,0,1.000) 17.00%, #000 17.00%),
    linear-gradient(to right, rgba(0,0,0,0.000) 0.00%, rgba(0,0,0,0.005) 0.75%, rgba(0,0,0,0.035) 1.50%, rgba(0,0,0,0.104) 2.25%, rgba(0,0,0,0.210) 3.00%, rgba(0,0,0,0.347) 3.75%, rgba(0,0,0,0.500) 4.50%, rgba(0,0,0,0.653) 5.25%, rgba(0,0,0,0.790) 6.00%, rgba(0,0,0,0.896) 6.75%, rgba(0,0,0,0.965) 7.50%, rgba(0,0,0,0.995) 8.25%, rgba(0,0,0,1.000) 9.00%, #000 9.00%),
    linear-gradient(to left, rgba(0,0,0,0.000) 0.00%, rgba(0,0,0,0.005) 1.42%, rgba(0,0,0,0.035) 2.83%, rgba(0,0,0,0.104) 4.25%, rgba(0,0,0,0.210) 5.67%, rgba(0,0,0,0.347) 7.08%, rgba(0,0,0,0.500) 8.50%, rgba(0,0,0,0.653) 9.92%, rgba(0,0,0,0.790) 11.33%, rgba(0,0,0,0.896) 12.75%, rgba(0,0,0,0.965) 14.17%, rgba(0,0,0,0.995) 15.58%, rgba(0,0,0,1.000) 17.00%, #000 17.00%);
  }
}