/* ==========================================================================
   More problems worth solving — the closing section every case study shares
   (Google, Coinbase, Upgrad and Limeroad each end on it, listing the other work)

   Each card carries a living mock from its project's own page: Sobi's agents, the redesigned Coinbase
   flow, Upgrad's job tracker, Limeroad's feed, Tinyowl's long tail and four-tap funnel. The mocks are composed in container
   units (cq*), so one design fits any card, from a four-up desktop row to a phone's two-up grid.
   They run only while the section is on screen (.is-live) and rest on their clearest frame without motion.
   Loads after site.css. Markup: .more > .more__wrap > .more__head + .wk-cards > a.wk-card
   ========================================================================== */

:root {
  --accent-google: #0b57d0;    --tint-google: #d3e3fd;
  --accent-coinbase: #0052ff;  --tint-coinbase: #dce5ff;
  --accent-upgrad: #e1323a;    --tint-upgrad: #ffe0de;
  --accent-limeroad: #4e9a1b;  --tint-limeroad: #e3f1d2;
  --accent-tinyowl: #e8641c;   --tint-tinyowl: #ffe5d3;
}

/* ---------- the section ---------- */
.more { padding: clamp(96px, 15vh, 170px) var(--gutter) 0; background: var(--sheet); color: var(--ink); }
.more__wrap { max-width: 1320px; margin-inline: auto; }
.more__head { display: grid; gap: 16px; margin-bottom: clamp(28px, 5vh, 56px); }
.more__title {
  margin: 0; max-width: 18ch;
  font: 300 clamp(36px, 4.4vw, 64px)/1.06 var(--font-serif); letter-spacing: -0.03em;
  font-optical-sizing: auto; font-variation-settings: "SOFT" 0, "WONK" 0; text-wrap: balance;
}
.more__label, .wk-label {
  display: flex; align-items: center; gap: 10px;
  margin: 0; font: 400 15px/1.3 var(--font-sans); letter-spacing: 0; color: var(--ink-2);
}
.more__label::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent, var(--ink)); }

/* ---------- the cards ---------- */
.wk-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); align-items: stretch; margin: 0; padding: 0; }
.wk-card {
  --dot: var(--c-accent);
  position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px;
  padding: 18px; border-radius: 22px; background: var(--c-tint); color: var(--ink);
  transition: transform 0.55s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.wk-card:hover { transform: translateY(-4px); }
.wk-label { font-size: 13px; }
.wk-label::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.wk-t { align-self: start; margin: 0; font: 600 clamp(17px, 1.3vw, 20px)/1.15 var(--font-sans); letter-spacing: -0.04em; text-wrap: balance; }
.wk-go { align-self: end; display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1 var(--font-sans); letter-spacing: -0.005em; }
.wk-go svg { width: 14px; height: 14px; transition: transform 0.55s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)); }
.wk-card:hover .wk-go svg { transform: translate(2px, -2px); }
.wk-card--here { background: var(--tint); }
.wk-here { margin: 0; font-size: 13px; color: var(--ink-2); }
.wk-media { position: relative; border-radius: 14px; overflow: hidden; min-height: 120px; background: #ECEAE4; }
.wk-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* reveal as the section arrives (only when scripts run and motion is welcome) */
.js .more:not(.is-in) .wk-card { opacity: 0; transform: translateY(26px); }
.js .more .wk-card { transition: opacity 0.7s var(--ease-out, ease), transform 0.8s var(--ease-out, ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .more.is-in .wk-card:hover { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .js .more:not(.is-in) .wk-card { opacity: 1; transform: none; } }

@media (max-width: 1099.98px) { .wk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 819.98px) {
  .more { padding-bottom: 0; }
  .wk-card { min-height: 0; padding: 14px; gap: 10px; }
  .wk-meta { display: none; }
  .wk-t { font-size: 15px; letter-spacing: -0.03em; }
}

/* ==========================================================================
   Mocks — one rule: sized in container units, paused until .is-live, one still frame without motion
   ========================================================================== */
.wk-mock {
  /* a definite shape (not a stretched grid track), so the container units inside always resolve */
  position: relative; container-type: size; width: 100%; align-self: start; aspect-ratio: 10 / 9; border-radius: 14px; overflow: hidden;
  background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 0 0 1px rgba(15, 15, 13, 0.05); isolation: isolate;
}
.wk-mock *, .wk-mock *::before, .wk-mock *::after { animation-play-state: paused; }
.is-live .wk-mock *, .is-live .wk-mock *::before, .is-live .wk-mock *::after { animation-play-state: running; }
/* four states, a quarter of the cycle each */
@keyframes wk-in4 { 0% { opacity: 0; translate: 0 6cqh; } 4%, 21% { opacity: 1; translate: 0 0; } 25%, 100% { opacity: 0; translate: 0 -6cqh; } }
@keyframes wk-fade4 { 0% { opacity: 0; scale: 1.04; } 5%, 22% { opacity: 1; scale: 1; } 27%, 100% { opacity: 0; scale: 1; } }
@keyframes wk-fill4 { 0% { transform: scaleX(0); } 25% { transform: scaleX(1); } 26%, 100% { transform: scaleX(0); } }
.wk-d1 { animation-delay: -9.6s !important; } .wk-d2 { animation-delay: -7.2s !important; } .wk-d3 { animation-delay: -4.8s !important; } .wk-d4 { animation-delay: -2.4s !important; }

/* ----- Google · Sobi: an agent and its coworkers, a status ticking from planning to done ----- */
.wk-mock--sobi { background: linear-gradient(180deg, #F7F9FE, #EEF2FB); }
.sb-lead { position: absolute; left: 50%; top: 38cqh; width: 25cqmin; height: 25cqmin; margin: -12.5cqmin 0 0 -12.5cqmin; border-radius: 50%; box-shadow: 0 6px 16px -6px rgba(30, 45, 90, 0.5), 0 0 0 0.9cqmin #fff; animation: sb-bob 3.2s ease-in-out infinite alternate; }
.sb-orbit { position: absolute; left: 50%; top: 38cqh; width: 66cqw; height: 34cqh; margin: -17cqh 0 0 -33cqw; animation: sb-spin 16s linear infinite; }
.sb-av { position: absolute; width: 12.5cqmin; height: 12.5cqmin; margin: -6.25cqmin 0 0 -6.25cqmin; border-radius: 50%; box-shadow: 0 0 0 0.6cqmin #fff, 0 3px 8px -3px rgba(30, 45, 90, 0.45); animation: sb-unspin 16s linear infinite; }
.sb-av--a { left: 0; top: 50%; } .sb-av--b { left: 100%; top: 42%; } .sb-av--c { left: 58%; top: 0; }
@keyframes sb-spin { to { rotate: 360deg; } }
@keyframes sb-unspin { to { rotate: -360deg; } }
@keyframes sb-bob { to { translate: 0 -1.6cqh; } }
.sb-chips { position: absolute; left: 0; right: 0; bottom: 7cqh; display: grid; justify-items: center; }
.sb-chip {
  grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 0.5em; height: 2.15em; padding: 0 0.9em 0 0.7em; border-radius: 999px;
  background: #fff; box-shadow: 0 0 0 1px #DCE2EE, 0 4px 10px -6px rgba(30, 45, 90, 0.4);
  font: 500 clamp(9px, 5cqw, 12px)/1 var(--font-sans); letter-spacing: -0.01em; color: #1B1B1F; white-space: nowrap;
  opacity: 0; animation: wk-in4 9.6s infinite both;
}
.sb-chip svg { width: 1.1em; height: 1.1em; flex: none; }
.sb-dot { width: 0.65em; height: 0.65em; border-radius: 50%; flex: none; }
.sb-dot--busy { background: #E37400; box-shadow: 0 0 0 0.28em rgba(227, 116, 0, 0.18); }
.sb-dot--wait { background: #0B57D0; box-shadow: 0 0 0 0.28em rgba(11, 87, 208, 0.18); }

/* ----- Coinbase: one familiar path, screen by screen, on one phone ----- */
.wk-mock--cb { display: grid; place-items: center; background: linear-gradient(180deg, #FFFFFF, #EEF3FF); }
.cb-phone { position: relative; height: 76cqh; aspect-ratio: 1000 / 2165; margin-top: -4cqh; border-radius: 3.6cqmin; overflow: hidden; background: #fff; box-shadow: 0 0 0 0.9cqmin #1d1d1f, 0 0 0 1.3cqmin #4a4b50, 0 10px 20px -8px rgba(0, 30, 120, 0.45); }
.cb-phone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: 0; animation: wk-fade4 9.6s infinite both; }
.cb-steps { position: absolute; left: 50%; bottom: 3.4cqh; translate: -50% 0; display: flex; gap: 1.6cqw; margin: 0; padding: 0; list-style: none; }
.cb-steps li { position: relative; width: 7cqw; height: 0.9cqh; min-height: 2px; border-radius: 2px; background: rgba(0, 82, 255, 0.16); overflow: hidden; }
.cb-steps li::after { content: ""; position: absolute; inset: 0; background: #0052FF; transform-origin: 0 50%; transform: scaleX(0); animation: wk-fill4 9.6s infinite both; }
.cb-steps li:nth-child(1)::after { animation-delay: -9.6s; } .cb-steps li:nth-child(2)::after { animation-delay: -7.2s; } .cb-steps li:nth-child(3)::after { animation-delay: -4.8s; } .cb-steps li:nth-child(4)::after { animation-delay: -2.4s; }

/* ----- Upgrad: the real job tracker, panned column by column, an interview landing as it goes ----- */
.wk-mock--ug { background: #1F2235; }
.ug-img { position: absolute; left: 0; top: 0; width: 250cqw; max-width: none; height: auto; transform-origin: 0 0; animation: ug-pan 12s cubic-bezier(0.65, 0, 0.35, 1) infinite both; }
@keyframes ug-pan {
  0%, 22% { translate: 0 0; }
  33%, 55% { translate: -76cqw 0; }
  66%, 88% { translate: -150cqw 0; }
  100% { translate: 0 0; }
}
.ug-fade { position: absolute; inset: auto 0 0 0; height: 26cqh; background: linear-gradient(180deg, rgba(242, 244, 247, 0), #F2F4F7 85%); pointer-events: none; }
.ug-chip {
  position: absolute; left: 50%; bottom: 6cqh; translate: -50% 0; display: inline-flex; align-items: center; gap: 0.55em; height: 2.2em; padding: 0 0.95em 0 0.75em;
  border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px #DFE5EE, 0 6px 14px -6px rgba(4, 23, 43, 0.45);
  font: 600 clamp(8px, 4.1cqw, 11px)/1 var(--font-sans); letter-spacing: -0.01em; color: #1D2433; white-space: nowrap; max-width: 94cqw; opacity: 0; animation: wk-in4 12s infinite both;
}
.ug-chip i { width: 0.7em; height: 0.7em; border-radius: 50%; background: #E1323A; box-shadow: 0 0 0 0.28em rgba(225, 50, 58, 0.18); flex: none; }
.ug-chip:nth-of-type(1) { animation-delay: -12s; } .ug-chip:nth-of-type(2) { animation-delay: -9s; } .ug-chip:nth-of-type(3) { animation-delay: -6s; } .ug-chip:nth-of-type(4) { animation-delay: -3s; }

/* ----- Limeroad: a feed curated by people — three phones, the middle one scrolling through the story ----- */
.wk-mock--lr { background: linear-gradient(180deg, #F8FCF1, #E8F3D7); display: grid; place-items: center; }
.lr-ph { position: absolute; top: 50%; aspect-ratio: 1000 / 2159; height: 74cqh; border-radius: 3.6cqmin; overflow: hidden; background: #FEFFFB; box-shadow: 0 0 0 0.7cqmin #E8E6E0, 0 10px 22px -10px rgba(40, 60, 10, 0.45); }
.lr-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.lr-ph--l { left: 50%; translate: -150% -50%; rotate: -7deg; scale: 0.86; opacity: 0.92; }
.lr-ph--r { left: 50%; translate: 50% -50%; rotate: 7deg; scale: 0.86; opacity: 0.92; }
.lr-ph--c { left: 50%; translate: -50% -50%; z-index: 2; height: 82cqh; animation: lr-bob 4.4s ease-in-out infinite alternate; }
.lr-ph--c img { opacity: 0; animation: wk-fade4 9.6s infinite both; }
@keyframes lr-bob { to { translate: -50% -52%; } }
.lr-heart { position: absolute; left: 50%; top: 40%; z-index: 3; width: 16cqmin; margin: -8cqmin 0 0 -8cqmin; opacity: 0; scale: 0.3; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.3)); animation: lr-heart 9.6s infinite both; }
@keyframes lr-heart { 0%, 25% { opacity: 0; scale: 0.3; } 31% { opacity: 1; scale: 1.1; } 40% { opacity: 1; scale: 1; } 46%, 100% { opacity: 0; scale: 1.3; } }

/* ----- Tinyowl: a long tail, a short funnel ------------------------------------------------------
   Behind, the endless homemade menu drifts up in two tilted columns: the long tail of choice.
   In front, one phone runs the four-tap funnel to a dispatched order. Five beats of 2.2s (11s loop):
   each screen pushes in from the right like the app, holds, takes a tap (a ripple on the very button),
   then slides back a third as the next one arrives. The chip names the beat; the last one is a check. */
.wk-mock--ty { background: radial-gradient(120% 90% at 50% 100%, #FFE7D3 0%, #FFF6EE 55%, #FFFCF9 100%); }
.ty-tail {
  position: absolute; top: -12cqh; width: 30cqw; height: 124cqh; overflow: hidden;
  border-radius: 3cqmin; opacity: 0.5;
  -webkit-mask: linear-gradient(180deg, transparent 4%, #000 26%, #000 74%, transparent 96%);
  mask: linear-gradient(180deg, transparent 4%, #000 26%, #000 74%, transparent 96%);
}
.ty-tail--l { left: 2cqw; rotate: -7deg; }
.ty-tail--r { right: 2cqw; rotate: 7deg; }
.ty-reel { display: flex; flex-direction: column; animation: ty-tail 26s linear infinite; }
.ty-tail--r .ty-reel { animation-duration: 32s; animation-direction: reverse; }
.ty-reel img { display: block; width: 100%; height: auto; }
@keyframes ty-tail { to { transform: translateY(-50%); } }

.ty-phone {
  position: absolute; left: 50%; top: 5cqh; z-index: 2;
  height: 78cqh; aspect-ratio: 390 / 844; translate: -50% 0;
  border-radius: 3.6cqmin; overflow: hidden; background: #F9F9F7;
  box-shadow: 0 0 0 0.9cqmin #1D1D1F, 0 0 0 1.3cqmin #4A4B50, 0 14px 26px -10px rgba(120, 50, 10, 0.45);
}
.ty-s { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: 0; animation: ty-push 11s cubic-bezier(0.32, 0.72, 0, 1) infinite both; }
/* a beat: in from the right (0 → 4%), hold, then back a third and dimmed as the next arrives (20 → 24%) */
@keyframes ty-push {
  0% { opacity: 1; transform: translateX(100%); filter: none; }
  4%, 20% { opacity: 1; transform: translateX(0); filter: none; }
  24% { opacity: 1; transform: translateX(-30%); filter: brightness(0.82); }
  24.01%, 100% { opacity: 0; transform: translateX(100%); filter: none; }
}
.ty-s1 { animation-delay: -11s; z-index: 1; } .ty-s2 { animation-delay: -8.8s; z-index: 2; } .ty-s3 { animation-delay: -6.6s; z-index: 3; }
.ty-s4 { animation-delay: -4.4s; z-index: 4; } .ty-s5 { animation-delay: -2.2s; z-index: 5; }

/* the tap, on the very control of each screen, just before the next one pushes in */
.ty-tap {
  position: absolute; z-index: 6; left: var(--x); top: var(--y); width: 9cqmin; height: 9cqmin; margin: -4.5cqmin 0 0 -4.5cqmin;
  border-radius: 50%; background: rgba(232, 100, 28, 0.38); box-shadow: inset 0 0 0 0.45cqmin rgba(255, 255, 255, 0.95), 0 0 0 0.5cqmin rgba(232, 100, 28, 0.7), 0 2px 8px rgba(0, 0, 0, 0.25);   /* a white ring reads on any screen, orange food included */
  opacity: 0; scale: 0.4; animation: ty-tap 11s ease-out infinite both;
}
@keyframes ty-tap { 0%, 13% { opacity: 0; scale: 0.4; } 14.5% { opacity: 1; scale: 0.7; } 19% { opacity: 0; scale: 1.7; } 100% { opacity: 0; scale: 0.4; } }
.ty-t1 { --x: 25%; --y: 49%; animation-delay: -11s; }    /* home: today's lunch */
.ty-t2 { --x: 50%; --y: 80%; animation-delay: -8.8s; }   /* listing: Paneer Butter Masala */
.ty-t3 { --x: 87%; --y: 50%; animation-delay: -6.6s; }   /* details: + ADD */
.ty-t4 { --x: 50%; --y: 95%; animation-delay: -4.4s; }   /* slot: PROCEED */

.ty-chips { position: absolute; left: 0; right: 0; bottom: 5cqh; z-index: 3; display: grid; justify-items: center; }
.ty-chip {
  grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 0.5em; height: 2.15em; padding: 0 0.9em 0 0.7em;
  border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(232, 100, 28, 0.18), 0 6px 14px -6px rgba(120, 50, 10, 0.45);
  font: 500 clamp(9px, 5cqw, 12px)/1 var(--font-sans); letter-spacing: -0.01em; color: #2A1608; white-space: nowrap;
  opacity: 0; animation: ty-chip 11s infinite both;
}
.ty-chip i { width: 0.65em; height: 0.65em; flex: none; border-radius: 50%; background: #E8641C; box-shadow: 0 0 0 0.28em rgba(232, 100, 28, 0.18); }
.ty-chip svg { width: 1.1em; height: 1.1em; flex: none; }
@keyframes ty-chip { 0% { opacity: 0; translate: 0 5cqh; } 4%, 18% { opacity: 1; translate: 0 0; } 21%, 100% { opacity: 0; translate: 0 -5cqh; } }
.ty-c1 { animation-delay: -11s; } .ty-c2 { animation-delay: -8.8s; } .ty-c3 { animation-delay: -6.6s; } .ty-c4 { animation-delay: -4.4s; } .ty-c5 { animation-delay: -2.2s; }

/* without motion, each mock rests on its most telling frame */
@media (prefers-reduced-motion: reduce) {
  .wk-mock *, .wk-mock *::before, .wk-mock *::after { animation: none !important; }
  .sb-chip[data-rest], .ug-chip[data-rest], .cb-phone img[data-rest], .lr-ph--c img[data-rest], .ty-s[data-rest], .ty-chip[data-rest] { opacity: 1; }
  .cb-steps li:first-child::after { transform: scaleX(1); }
  .ug-img { translate: -76cqw 0; }
}