/*
 * Work section: a bridge line after the game + three minimal, horizontal work cards.
 * Plain HTML + this stylesheet (no JS). See README → "Work section" for the markup.
 * Restyle with: --ws-ink, --ws-muted, --ws-radius, --ws-font.
 */

.work-section {
  --ws-ink: #1d1d1f;
  --ws-muted: #6b6b6b;
  --ws-radius: 14px;
  margin: 88px 0 40px;
  font-family: var(--ws-font, inherit);
  color: var(--ws-ink);
}

/* the bridge from play to work */
.work-bridge { text-align: center; margin: 0 auto 36px; max-width: 30em; }
.work-bridge p { margin: 0; font-size: 20px; line-height: 1.4; }
.work-bridge p + p { margin-top: 4px; color: var(--ws-muted); }
.work-bridge em { font-style: italic; }
.work-bridge .arrow { display: inline-block; margin-top: 14px; color: var(--ws-muted); animation: ws-bob 2.4s ease-in-out infinite; }
@keyframes ws-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* three very quiet cards: just a cover and a small title */
.work-card { --ws-stroke: #b9b4c6; }
.work-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; list-style: none; margin: 0; padding: 0; }
.work-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; outline: none; }
.work-cover {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--ws-radius);
  background: var(--cover-tint, #f4f4f4);
  box-shadow: none; /* no stroke at rest */
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
.work-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.work-card:hover .work-cover, .work-card:focus-visible .work-cover { transform: translateY(-2px); }
.work-card:hover .work-cover img { transform: scale(1.03); }
.work-card:focus-visible .ws-ring path { stroke: #7c8cff; } /* keyboard focus: the outline turns blue */
/* placeholder cover until you add an image */
.work-cover:empty { background: var(--paper-grain, none), radial-gradient(120% 90% at 20% 0%, #fff 0%, var(--cover-tint, #f4f4f4) 75%); }
.work-title { margin: 0 2px; font-size: 15px; font-weight: 400; line-height: 1.25; color: var(--ws-muted); transition: color .3s ease; }
.work-card:hover .work-title { color: var(--ws-ink); }

.work-all { display: block; width: max-content; margin: 26px auto 0; font-size: 15px; color: var(--ws-muted); text-decoration: none; transition: color .25s ease; }
.work-all:hover { color: var(--ws-ink); }

/* barely-there brand tints for the placeholder covers */
.work-card[data-brand="swiggy"] { --cover-tint: #fdf1e8; --ws-stroke: #e8894a; }
.work-card[data-brand="zomato"] { --cover-tint: #fcecee; }
.work-card[data-brand="hike"]   { --cover-tint: #edf1fd; --ws-stroke: #6f8be6; }
.work-card[data-brand="play"]   { --cover-tint: #f3ecfb; --ws-stroke: #9a78d8; } /* side quests: a soft lavender */

/* phones: keep them horizontal as a swipeable row */
@media (max-width: 640px) {
  .work-section { margin-top: 64px; }
  .work-bridge p { font-size: 18px; }
  .work-cards {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px;
    margin: 0 -16px; padding: 4px 16px 12px; scrollbar-width: none;
  }
  .work-cards::-webkit-scrollbar { display: none; }
  .work-cards > li { flex: 0 0 78%; scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  .work-bridge .arrow { animation: none; }
  .work-cover, .work-cover img, .work-title { transition-duration: .01s; }
}



/* ---------- soft covers + an arrow that slides in on hover ---------- */
.work-cover { display: grid; place-items: center;
  background: var(--paper-grain, none), radial-gradient(120% 95% at 25% 0%, rgba(255,255,255,.95) 0%, var(--cover-tint, #f4f4f4) 70%); } /* same paper grain as the page */
/* smoothed corners (tile-shape.js clips the cover); on hover, a single stroke in the tile's own colour
   with a fading tail runs round the same shape */
.ws-ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; opacity: 0; transition: opacity .4s ease; }
.ws-ring path { fill: none; stroke: var(--ws-stroke); stroke-width: 1.4; }
.ws-ring .run { stroke-width: 1.8; stroke-linecap: butt; animation: ws-run 1.8s linear infinite; animation-play-state: paused; } /* segments: solid head, tail fading to nothing */
.work-card:hover .ws-ring, .work-card:focus-visible .ws-ring { opacity: 1; }
.work-card:hover .ws-ring .run, .work-card:focus-visible .ws-ring .run { animation-play-state: running; }
@keyframes ws-run { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .ws-ring .run { animation: none; } }
/* the clip would cut off a box-shadow, so the lift shadow lives on a wrapper and follows the smoothed shape */
.work-frame { transition: filter .4s ease; }
.work-card:hover .work-frame, .work-card:focus-visible .work-frame { filter: drop-shadow(0 12px 14px rgba(0,0,0,.05)); }
/* title row */
.work-title { display: flex; align-items: center; gap: 8px; color: var(--ws-ink); font-size: 17px; }
.work-arrow { width: 16px; height: auto; color: var(--ws-muted); opacity: 0; transform: translateX(-6px); transition: opacity .3s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
.work-card:hover .work-arrow, .work-card:focus-visible .work-arrow { opacity: 1; transform: none; }
@media (max-width: 640px) { .work-arrow { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .work-arrow { transition: none; }
}

/* ---------- tilt + sheen: the cover leans towards the cursor and light follows it (driven by tile-tilt.js) ---------- */
.work-cover { --rx: 0deg; --ry: 0deg; --sx: 50%; --sy: 50%; transform-style: preserve-3d; }
.work-card:hover .work-cover, .work-card:focus-visible .work-cover {
  transform: perspective(600px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px) scale(1.02);
  box-shadow: none; /* the lift shadow is on .work-frame, so it follows the smoothed corners */
}
.work-cover.tilting { transition: transform .12s ease-out, box-shadow .4s ease; } /* follow the cursor closely; ease back when it leaves */
.work-cover::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(170px circle at var(--sx) var(--sy), rgba(255,255,255,.85), rgba(255,255,255,0) 70%);
  opacity: 0; transition: opacity .35s ease;
}
.work-card:hover .work-cover::before { opacity: 1; }
html[data-theme="dark"] .work-cover::before { background: radial-gradient(160px circle at var(--sx) var(--sy), rgba(255,255,255,.22), rgba(255,255,255,0) 70%); mix-blend-mode: screen; }
@media (prefers-reduced-motion: reduce) { .work-cover::before { display: none; } }

/* ---------- three whole phones sitting in the cover, floating gently out of step; they spread a little on hover ---------- */

/* ---------- the file drawer (work-files.js): a paper pocket with three files tucked in, their writing just lines.
   On hover the files come up out of the pocket and past the tile's edge, each drawer in its own way:
   Swiggy fans open, Hike rises in a staircase, Side quests pops out and scatters. Every file has a resting
   transform (--rest) and an open one (--lift); touch screens, which can't hover, show them open. ---------- */
.work-cover { container-type: inline-size; }
.work-cover.has-files { overflow: visible; background: none; }
.work-cover.has-files::before { clip-path: var(--sq); }
.has-files .ws-ring { z-index: 1; } /* behind the files */
.has-files .ws-ring-front { z-index: 1; clip-path: inset(62% 0 0 0); } /* the pocket's copy: only over the pocket */
.wf { position: absolute; inset: 0; }
.wf-stack { position: absolute; inset: 0; z-index: 2; clip-path: inset(-200% -100% 30% -100%); } /* files can rise past the top, but never show below the pocket */
.wf-bg { position: absolute; inset: 0; z-index: 0; clip-path: var(--sq);
  background: var(--paper-grain, none), radial-gradient(120% 95% at 25% 0%, rgba(255,255,255,.95) 0%, var(--cover-tint, #f4f4f4) 70%); }

.wf-file {
  position: absolute; top: 24%; left: 27%; width: 46%; height: 82%; padding: 4.2cqw 4cqw 0; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 2.2cqw;
  background: var(--paper-grain, none), #fffdf9; border-radius: 1.6cqw;
  box-shadow: 0 0 0 1px rgba(40, 30, 20, .06), 0 2px 4px rgba(40, 30, 20, .04), 0 10px 22px rgba(40, 30, 20, .07);
  transform-origin: 50% 100%; transform: var(--rest);
  transition: transform .75s cubic-bezier(.3, 1.35, .45, 1);
}
.wf-file.f1 { z-index: 2; } .wf-file.f2 { z-index: 3; } .wf-file.f3 { z-index: 4; }
.work-card:is(:hover, :focus-visible) .wf-file { transform: var(--lift); }
@media (hover: none) { .wf-file { transform: var(--lift); } }

/* the writing, as lines */
.wf-kick { display: flex; align-items: center; gap: 1.4cqw; }
.wf-kick i, .wf-title i { display: block; border-radius: 1cqw; }
.wf-kick i { width: 11cqw; height: 1.1cqw; background: #e6e0d6; }
.wf-kick i.n { width: 2.6cqw; background: #d6cfc3; }
.wf-title { display: flex; flex-direction: column; gap: 1.3cqw; }
.wf-title i { height: 1.9cqw; background: #d2cbbf; }
.wf-title i:last-child { width: 62%; }
.wf-media { flex: 1; min-height: 0; margin: 1cqw 0 4cqw; border-radius: 1cqw; overflow: hidden; background: #f1eee8; }
.wf-media img, .wf-media video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.work-card:hover .wf-media img { transform: none; } /* no cover zoom on the file pictures */
.wf-blank { display: flex; flex-direction: column; gap: 1.8cqw; padding: 3cqw; }
.wf-blank i { height: 1.2cqw; border-radius: 1px; background: #e6e1d8; }
.wf-blank i:nth-child(2) { width: 82%; } .wf-blank i:nth-child(3) { width: 90%; } .wf-blank i:nth-child(4) { width: 50%; }

/* the pocket at the front: clipped to the tile's shape, with a thumb notch and an empty label holder */
.wf-pocket { position: absolute; inset: 0; z-index: 5; clip-path: var(--sq); pointer-events: none; }
.wf-face {
  position: absolute; left: 0; right: 0; bottom: 0; top: 62%;
  display: flex; align-items: flex-end; justify-content: space-between; padding: 0 5.5cqw 4.4cqw;
  font-size: 2.6cqw; letter-spacing: .08em; text-transform: uppercase; color: var(--wf-ink, #a08a78);
  background: var(--paper-grain, none), linear-gradient(180deg, var(--wf-pocket-top, #fbe9dc), var(--wf-pocket, #f6dfcd));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  -webkit-mask: radial-gradient(circle 4.6cqw at 50% 0, transparent 98%, #000 100%);
          mask: radial-gradient(circle 4.6cqw at 50% 0, transparent 98%, #000 100%);
}
.wf-face i { width: 17cqw; height: 4.6cqw; border-radius: 1cqw; box-shadow: inset 0 0 0 1px var(--wf-ink, #a08a78); opacity: .35; }
.work-card[data-brand="swiggy"] { --wf-pocket-top: #fbe8da; --wf-pocket: #f6dcc8; --wf-ink: #b08767; }
.work-card[data-brand="hike"]   { --wf-pocket-top: #e5ebfb; --wf-pocket: #d9e1f7; --wf-ink: #7d8db8; }
.work-card[data-brand="play"]   { --wf-pocket-top: #efe7fa; --wf-pocket: #e5daf4; --wf-ink: #9583b4; }

/* Swiggy: the files fan open */
[data-brand="swiggy"] .wf-file.f1 { left: 9%;  --rest: translateY(29%) rotate(-3deg); --lift: translate(-8%, -38%) rotate(-9deg); }
[data-brand="swiggy"] .wf-file.f2 { left: 27%; --rest: translateY(27%);               --lift: translateY(-47%); transition-delay: .04s; }
[data-brand="swiggy"] .wf-file.f3 { left: 45%; --rest: translateY(31%) rotate(3deg);  --lift: translate(8%, -35%) rotate(8deg); transition-delay: .08s; }

/* Hike: a diagonal cascade, like windows stepping down to the right: the back file up-left, the front one down-right */
[data-brand="hike"] .wf-file { width: 50%; left: 25%; transition: transform .8s cubic-bezier(.2, .9, .25, 1); }
[data-brand="hike"] .wf-file.f1 { --rest: translate(-3%, 27%); --lift: translate(-30%, -46%); }
[data-brand="hike"] .wf-file.f2 { --rest: translate(0, 29%);   --lift: translate(0, -30%); transition-delay: .06s; }
[data-brand="hike"] .wf-file.f3 { --rest: translate(3%, 31%);  --lift: translate(30%, -14%); transition-delay: .12s; }

/* Side quests: a little pile in the middle that deals out into a straight, level row; the clips play */
[data-brand="play"] .wf-file { width: 26%; left: 37%; height: 84%; padding: 2.6cqw 2.6cqw 0; gap: 1.6cqw;
  transition: transform .65s cubic-bezier(.3, 1.4, .5, 1); }
[data-brand="play"] .wf-title { display: none; }
[data-brand="play"] .wf-media { margin-bottom: 2.6cqw; border-radius: 1.6cqw; }
[data-brand="play"] .wf-file.f1 { --rest: translateY(37%) rotate(-4deg); --lift: translate(-112%, -36%); transition-delay: .1s; }
[data-brand="play"] .wf-file.f2 { --rest: translateY(34%);               --lift: translateY(-42%); }
[data-brand="play"] .wf-file.f3 { --rest: translateY(38%) rotate(4deg);  --lift: translate(112%, -36%); transition-delay: .1s; }

.work-bridge { margin-bottom: 64px; } /* room for the files to rise into */
@media (max-width: 640px) { .work-cards { padding-top: 20%; margin-top: -20%; } } /* the swipe row clips, so leave headroom */
@media (prefers-reduced-motion: reduce) { .wf-file { transition: none; } }
/* the pictures only show once the files are out (so nothing dark peeks through the thumb notch) */
.wf-media > * { opacity: 0; transition: opacity .3s ease; }
.work-card:is(:hover, :focus-visible) .wf-media > * { opacity: 1; transition-delay: .1s; }
@media (hover: none) { .wf-media > * { opacity: 1; } }
/* the company's logo, faint, in the tile's top-right corner (behind the files) */
.work-cover img.wf-logo { position: absolute; top: 6cqw; right: 6cqw; z-index: 1; height: 8.5cqw; width: 8.5cqw; object-fit: cover; object-position: 0 50%; opacity: .7; pointer-events: none; } /* just the mark: the wordmark is cropped off */
[data-brand="hike"] .work-cover img.wf-logo { width: 7.4cqw; } /* the speech-bubble mark is a little narrower than it is tall */
.work-card:hover .work-cover img.wf-logo { transform: none; }


/* ---------- the clean finish: crisp paper files with soft, layered shadows, writing as quiet rounded bars,
   and a smooth tinted pocket with a light catching its top edge (matches the hero and game box) ---------- */
.wf-file { background: linear-gradient(180deg, #fffefb, #fcf9f4); border-radius: 2cqw;
  box-shadow: 0 0 0 1px rgba(60, 40, 20, .07), 0 1px 2px rgba(60, 40, 20, .05), 0 8px 18px -6px rgba(60, 40, 20, .12); }
.work-card:is(:hover, :focus-visible) .wf-file { box-shadow: 0 0 0 1px rgba(60, 40, 20, .07), 0 2px 4px rgba(60, 40, 20, .05), 0 18px 30px -10px rgba(60, 40, 20, .2); }
.wf-kick i, .wf-title i, .wf-blank i { background: #e9e2d8; }
.wf-kick i { height: 1cqw; } .wf-kick i.n { background: var(--wf-accent, #e0d6c8); }
.wf-title i { height: 1.6cqw; background: #ddd4c8; }
.wf-blank i { height: 1cqw; }
.wf-media { border-radius: 1.2cqw; box-shadow: inset 0 0 0 1px rgba(60, 40, 20, .06); }
.wf-face { background: linear-gradient(180deg, var(--wf-pocket-top, #fbe9dc), var(--wf-pocket, #f6dfcd));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -18px 30px -24px rgba(60, 40, 20, .18); }

.wf-bg { background: radial-gradient(120% 100% at 30% 0%, #fffdf9 0%, var(--cover-tint, #f4f4f4) 72%); }
.work-card[data-brand="swiggy"] { --wf-accent: #f6c7a6; }
.work-card[data-brand="hike"]   { --wf-accent: #c4d0f3; }
.work-card[data-brand="play"]   { --wf-accent: #d9c8f0; }


/* ---------- glass pocket: the drawer's front is frosted glass. The file bottoms and a soft glow of brand colour show
   through it, blurred; a bright edge catches the light along its top. On hover the glow brightens as the files rise. ---------- */
.wf-pocket::before { content: ""; position: absolute; left: 4%; right: 4%; top: 64%; bottom: -6%; border-radius: 50%; filter: blur(8px);
  background: radial-gradient(40% 70% at 28% 40%, var(--gf-glow-a, #ffb27a), transparent 72%), radial-gradient(40% 70% at 74% 50%, var(--gf-glow-b, #ff8a5c), transparent 72%);
  opacity: .55; transition: opacity .6s ease, translate .75s cubic-bezier(.3, 1.35, .45, 1); }
.work-card:is(:hover, :focus-visible) .wf-pocket::before { opacity: .85; translate: 0 -8%; }
.wf-stack { clip-path: inset(-200% -100% 0 -100%); } /* the files carry on down behind the glass, so they show through it, blurred */
.wf-face { background: linear-gradient(180deg, color-mix(in srgb, var(--wf-pocket-top, #fbe9dc) 45%, transparent), color-mix(in srgb, var(--wf-pocket, #f6dfcd) 72%, transparent));
  backdrop-filter: blur(10px) saturate(1.35); -webkit-backdrop-filter: blur(10px) saturate(1.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 -20px 30px -24px rgba(60, 40, 20, .14); }
/* a faint sheen sliding across the glass on hover */
.wf-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 45%, transparent 60%) -120% 0 / 220% 100% no-repeat; transition: opacity .3s ease; }
.work-card:is(:hover, :focus-visible) .wf-face::after { opacity: .4; animation: wf-glint 1.1s cubic-bezier(.3, .7, .3, 1) forwards; } /* barely there */
@keyframes wf-glint { to { background-position: 120% 0; } }
/* every drawer gets the same warm sweep, left to right */
.wf-face::after { background: linear-gradient(105deg, transparent 30%, rgba(255, 236, 214, .75) 45%, rgba(255, 255, 255, .5) 50%, transparent 62%) -120% 0 / 220% 100% no-repeat; }
@media (prefers-reduced-motion: reduce) { .wf-face::after { animation: none; } }

/* ---------- folder shape: the drawer reads as a real folder: a tinted back with a tab on its top-left, the files
   standing inside it, and the frosted glass front covering their lower half, with the brand mark on it like a label.
   (The tile itself has no background, so the folder's outline is the shape you see.) ---------- */
.has-files .ws-ring, .has-files .ws-ring-front { display: none; }
.work-cover.has-files::before { display: none; }
.wf-bg { inset: 13% 3% 3% 3%; clip-path: none; border-radius: 0 3.6cqw 3.6cqw 3.6cqw;
  background: linear-gradient(180deg, var(--wf-pocket-top, #fbe9dc), var(--wf-pocket, #f6dfcd));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 1px rgba(60, 40, 20, .05); }
.wf-bg::before { content: ""; position: absolute; left: 0; bottom: calc(100% - 1px); width: 36%; height: 8.6cqw; border-radius: 2.8cqw 2.8cqw 0 0;
  background: var(--wf-pocket-top, #fbe9dc); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 1px rgba(60, 40, 20, .05); clip-path: inset(-2px -2px 1px -2px); }
.wf-bg::after { content: ""; position: absolute; left: calc(36% - 1px); bottom: calc(100% - 1px); width: 6cqw; height: 8.6cqw; background: var(--wf-pocket-top, #fbe9dc);
  -webkit-mask: radial-gradient(circle 6cqw at 100% 0, transparent 98%, #000 100%); mask: radial-gradient(circle 6cqw at 100% 0, transparent 98%, #000 100%); } /* the tab's curve down into the folder */
.wf-stack { clip-path: inset(-200% -100% 3% -100%); }
.wf-pocket { clip-path: none; }
.wf-face { left: 3%; right: 3%; bottom: 3%; top: 44%; border-radius: 3.6cqw;
  background: linear-gradient(180deg, rgba(255, 255, 255, .42), color-mix(in srgb, var(--wf-pocket, #f6dfcd) 55%, rgba(255, 255, 255, .3)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .45), 0 0 0 1px rgba(60, 40, 20, .05), 0 -4px 14px -8px rgba(60, 40, 20, .12); }
.wf-pocket::before { top: 50%; bottom: 0; }
/* the brand mark sits on the front, like a label */
.work-cover img.wf-logo { top: auto; bottom: 7cqw; right: auto; left: 7cqw; z-index: 6; width: 8cqw; height: 8cqw; border-radius: 2cqw; opacity: .85; }
[data-brand="hike"] .work-cover img.wf-logo { width: 7cqw; }

/* ---------- glass deck (work-deck.js): three frosted sheets stacked at an angle on the tile's tint. Hover parts them,
   each at its own depth, and they drift with the cursor (--px / --py, -1..1). ---------- */
.work-cover.has-deck { --px: 0; --py: 0;
  background: radial-gradient(120% 110% at 85% 100%, var(--deck-glow, #ffd9bf) 0%, transparent 55%),
              radial-gradient(130% 120% at 15% 0%, #fffdf9 0%, var(--cover-tint, #f4f4f4) 70%); }
.has-deck .ws-ring { display: none; } /* the deck is the hover; no running outline */
.wd { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.wd-sheet { position: absolute; left: 24%; top: 26%; width: 56%; height: 58%; border-radius: 3.6cqw;
  --tx: 0%; --ty: 0%; --r: 0deg; --d: 0; /* resting place; --d = how far it drifts with the cursor */
  transform: translate(calc(var(--tx) + var(--px) * var(--d) * 1cqw), calc(var(--ty) + var(--py) * var(--d) * 1cqw)) rotate(var(--r));
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease; }
.work-cover.tilting .wd-sheet { transition: transform .25s ease-out, box-shadow .5s ease; } /* follow the cursor closely while moving */
.wd-sheet.s3 { --tx: -9%; --ty: -12%; --r: -6deg; --d: .6; background: color-mix(in srgb, var(--deck-ink, #f08a4b) 14%, #fff); opacity: .7;
  box-shadow: 0 0 0 1px rgba(60, 40, 20, .05); }
.wd-sheet.s2 { --tx: -4.5%; --ty: -6%; --r: -3deg; --d: 1.2; background: color-mix(in srgb, var(--deck-ink, #f08a4b) 8%, #fff); opacity: .88;
  box-shadow: 0 0 0 1px rgba(60, 40, 20, .05), 0 6px 14px -8px rgba(60, 40, 20, .18); }
.wd-sheet.s1 { --d: 2; display: flex; flex-direction: column; justify-content: space-between; padding: 4.6cqw; box-sizing: border-box;
  background: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .7)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .8) inset, 0 0 0 1px rgba(60, 40, 20, .06), 0 2px 4px rgba(60, 40, 20, .04), 0 16px 28px -14px rgba(60, 40, 20, .25); }
/* hover: the deck parts, back sheets fanning up and out, the front one settling forward */
.work-card:is(:hover, :focus-visible) .wd-sheet.s3 { --tx: -20%; --ty: -24%; --r: -11deg; }
.work-card:is(:hover, :focus-visible) .wd-sheet.s2 { --tx: -10%; --ty: -12%; --r: -5deg; }
.work-card:is(:hover, :focus-visible) .wd-sheet.s1 { --tx: 3%; --ty: 3%; --r: 1.5deg;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .8) inset, 0 0 0 1px rgba(60, 40, 20, .06), 0 4px 8px rgba(60, 40, 20, .05), 0 26px 40px -18px rgba(60, 40, 20, .32); }
/* the front sheet: the brand mark, then two quiet lines where a title would be */
.wd-mark { display: block; width: 9cqw; height: 9cqw; }
.wd-logo { width: 100%; height: 100%; object-fit: cover; object-position: 0 50%; border-radius: 2.2cqw; }
[data-brand="hike"] .wd-mark { width: 8cqw; }
.wd-star { width: 100%; height: 100%; color: var(--deck-ink, #9a78d8); opacity: .8; }
.wd-lines { display: flex; flex-direction: column; gap: 1.6cqw; }
.wd-lines i { display: block; height: 1.5cqw; border-radius: 1cqw; background: color-mix(in srgb, var(--deck-ink, #f08a4b) 22%, #e8e1d7); }
.wd-lines i:first-child { width: 78%; } .wd-lines i:last-child { width: 46%; opacity: .6; }
.work-card[data-brand="swiggy"] { --deck-ink: #f08a4b; --deck-glow: #ffd8bd; }
.work-card[data-brand="hike"]   { --deck-ink: #6f8be6; --deck-glow: #d3defb; }
.work-card[data-brand="play"]   { --deck-ink: #9a78d8; --deck-glow: #e6d9f8; }
@media (prefers-reduced-motion: reduce) { .wd-sheet { transition: none; } }
.work-card:hover .work-cover img.wd-logo { transform: none; } /* no cover zoom on the mark */


/* ---------- letterpress (work-press.js): thick tinted cotton paper with a big letter pressed into it and a blind-embossed
   border. --lx / --ly point away from the light (default: light from the top left); hover moves the light with the cursor
   and lets a little ink into the letter. ---------- */
.work-cover.has-press { --lx: 1; --ly: 1;
  background: var(--paper-grain, none), radial-gradient(140% 120% at 20% 0%, color-mix(in srgb, var(--cover-tint, #f4f4f4) 55%, #fff) 0%, var(--cover-tint, #f4f4f4) 65%, var(--press-deep, #f6e2d2) 100%); }
.has-press .ws-ring { display: none; }
.wp { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: grid; place-items: center; }
/* the pressed border: a fine groove just inside the edge */
.wp-border { position: absolute; inset: 5.5cqw; border-radius: 3cqw;
  box-shadow: inset calc(var(--lx) * 1px) calc(var(--ly) * 1px) 0 rgba(80, 50, 25, .1), calc(var(--lx) * 1px) calc(var(--ly) * 1px) 0 rgba(255, 255, 255, .75);
  transition: box-shadow .6s ease; }
/* the letter: the paper's own colour, a shade deeper, with a highlight on the edge facing away from the light and a soft
   shadow on the side facing it (that's what makes it look pressed in, not raised) */
.wp-glyph { font: 400 46cqw/1 "Instrument Serif", "Cirka", Georgia, serif; letter-spacing: -.02em; translate: 0 4%;
  color: color-mix(in srgb, var(--press-ink, #e8894a) var(--ink, 0%), var(--press-deep, #f6e2d2));
  text-shadow: calc(var(--lx) * 1.2px) calc(var(--ly) * 1.2px) 0 rgba(255, 255, 255, .85),
               calc(var(--lx) * -1px) calc(var(--ly) * -1px) 1.5px rgba(80, 50, 25, .16);
  transition: color .9s ease, text-shadow .6s ease; }
.wp-glyph.star { font-size: 34cqw; translate: 0 0; }
.work-cover.tilting .wp-glyph, .work-cover.tilting .wp-border { transition: color .9s ease, text-shadow .15s ease-out, box-shadow .15s ease-out; }
@property --ink { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
.work-cover.has-press { transition: --ink .9s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
.work-card:is(:hover, :focus-visible) .work-cover.has-press { --ink: 55%; }
.work-card[data-brand="swiggy"] { --press-deep: #f6dcc8; --press-ink: #e8742f; }
.work-card[data-brand="hike"]   { --press-deep: #dbe3f8; --press-ink: #4f6fe0; }
.work-card[data-brand="play"]   { --press-deep: #e6dcf4; --press-ink: #8a63d2; }
@media (prefers-reduced-motion: reduce) { .wp-glyph, .wp-border { transition: none; } }


/* ---------- jelly blobs (work-blobs.js): a little wobbly creature in each tile; eyes follow the cursor ---------- */
.work-cover.has-blob { background: var(--paper-grain, none), radial-gradient(120% 110% at 50% 10%, #fffdf9 0%, var(--cover-tint, #f4f4f4) 75%); cursor: grab; }
.work-card:active .work-cover.has-blob { cursor: grabbing; }
.has-blob .ws-ring { display: none; }
.jb { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.jb svg { width: 100%; height: 100%; overflow: visible; }
.jb-shadow { fill: rgba(60, 40, 20, .1); }
.jb-cheek { fill: #ff8fa0; opacity: .45; }
.jb-say { opacity: 0; transform-box: fill-box; transform-origin: 0 100%; scale: .6; transition: opacity .2s ease, scale .35s cubic-bezier(.3, 1.8, .5, 1);
  filter: drop-shadow(0 2px 4px rgba(40, 30, 60, .12)); }
.jb-say text { font: italic 600 13px/1 "Cirka", "Instrument Serif", Georgia, serif; fill: #3f4fa8; }
.jb.talking .jb-say { opacity: 1; scale: 1; }
/* the work tilt would fight the jelly, so these tiles stay flat */
.work-card:hover .work-cover.has-blob { transform: translateY(-2px); }


/* ---------- jelly buddies (work-buddies.js): a wobbly creature shaped like the work: a delivery bag, a chat bubble, a phone ---------- */
.work-cover.has-buddy { background: var(--paper-grain, none), radial-gradient(120% 110% at 50% 10%, #fffdf9 0%, var(--cover-tint, #f4f4f4) 75%); cursor: grab; }
.work-card:active .work-cover.has-buddy { cursor: grabbing; }
.has-buddy .ws-ring { display: none; }
.work-card:hover .work-cover.has-buddy { transform: translateY(-2px); } /* no tilt: it would fight the jelly */
.bd { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.bd svg { width: 100%; height: 100%; overflow: visible; }
.bd-shadow { fill: rgba(60, 40, 20, .1); }
.bd-cheek { fill: #ff8fa0; opacity: .45; }
.bd-play .bd-cheek { opacity: .6; }
.bd-screen { fill: #2b2342; transition: fill .4s ease; }
.bd-play.on .bd-screen { fill: #43357a; }
/* Swiggy: steam curls up out of the bag */
.bd-steam { opacity: 0; transition: opacity .4s ease; } .bd-steam path { stroke-dasharray: 40; stroke-dashoffset: 40; }
.bd-swiggy.on .bd-steam { opacity: .9; } .bd-swiggy.on .bd-steam path { animation: bd-steam 1.6s ease-in-out infinite; }
.bd-swiggy.on .bd-steam path:nth-child(2) { animation-delay: .25s; } .bd-swiggy.on .bd-steam path:nth-child(3) { animation-delay: .5s; }
@keyframes bd-steam { 0% { stroke-dashoffset: 40; opacity: 0; translate: 0 6px; } 40% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; translate: 0 -6px; } }
/* Hike: typing… then "hi!" */
.bd-typing, .bd-say { opacity: 0; transform-box: fill-box; transform-origin: 0 100%; scale: .6; transition: opacity .2s ease, scale .35s cubic-bezier(.3, 1.8, .5, 1);
  filter: drop-shadow(0 2px 4px rgba(40, 30, 60, .12)); }
.bd-typing circle { fill: #9aa6d6; }
.bd-hike.on .bd-typing { animation: bd-type 1s ease forwards; }
.bd-hike.on .bd-typing circle { animation: bd-dot .6s ease-in-out infinite alternate; }
.bd-hike.on .bd-typing circle:nth-of-type(2) { animation-delay: .15s; } .bd-hike.on .bd-typing circle:nth-of-type(3) { animation-delay: .3s; }
@keyframes bd-type { 0% { opacity: 0; scale: .6; } 15%, 80% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
@keyframes bd-dot { to { translate: 0 -2px; fill: #4f6fe0; } }
.bd-hike.on .bd-say { opacity: 1; scale: 1; transition-delay: .8s; }
.bd-say text { font: italic 600 13px/1 "Cirka", "Instrument Serif", Georgia, serif; fill: #3f4fa8; }
/* Side quests: sparkles pop round the phone */
.bd-sparks path { opacity: 0; transform-box: fill-box; transform-origin: center; scale: 0; }
.bd-play.on .bd-sparks path { animation: bd-spark 1.2s ease-in-out infinite; }
.bd-play.on .bd-sparks path:nth-child(2) { animation-delay: .3s; } .bd-play.on .bd-sparks path:nth-child(3) { animation-delay: .6s; }
@keyframes bd-spark { 0%, 100% { opacity: 0; scale: 0; rotate: 0deg; } 50% { opacity: 1; scale: 1; rotate: 45deg; } }
@media (prefers-reduced-motion: reduce) { .bd * { animation: none !important; } }


/* ---------- glass folders (work-glass.js): a tab, colourful prints inside, a frosted front with the brand's mark.
   Hover: the front tips back a touch and the prints peek up out of the top, fanning a little (they stay in the folder). ---------- */
.work-cover.has-glass { overflow: visible; background: none; clip-path: none !important; }
.has-glass .ws-ring, .has-glass::before { display: none; }
.work-card:is(:hover, :focus-visible) .work-cover.has-glass { transform: none; } /* the folder does the moving, not the tile */
.work-frame:has(.has-glass) { filter: none !important; }
.gf { position: absolute; inset: 0; perspective: 900px; }
.gf-back { position: absolute; left: 5%; right: 5%; top: 16%; bottom: 8%; border-radius: 0 3.4cqw 3.4cqw 3.4cqw;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cover-tint) 60%, #fff), var(--cover-tint));
  box-shadow: 0 0 0 1px rgba(60, 40, 20, .06); }
/* colour sitting just behind the glass (over the files' lower half), so the frosted front has something to blur */
.gf-prints::after { content: ""; position: absolute; z-index: 4; left: 8%; right: 8%; top: 38%; bottom: 10%; border-radius: 40%; filter: blur(6px); pointer-events: none;
  background: radial-gradient(45% 60% at 30% 55%, var(--gf-glow-a, #ffb27a), transparent 72%), radial-gradient(45% 60% at 72% 50%, var(--gf-glow-b, #ff8a5c), transparent 72%);
  opacity: .75; transition: opacity .5s ease, translate .65s cubic-bezier(.2, .9, .25, 1); }
.work-card:is(:hover, :focus-visible) .gf-prints::after { opacity: .9; translate: 0 -6%; }
.work-card[data-brand="swiggy"] { --gf-glow-a: #ffb27a; --gf-glow-b: #ff7d4a; }
.work-card[data-brand="hike"]   { --gf-glow-a: #9fb6ff; --gf-glow-b: #5f7ef0; }
.work-card[data-brand="play"]   { --gf-glow-a: #d3b4ff; --gf-glow-b: #9a6be0; }
.gf-tab { position: absolute; left: 0; bottom: calc(100% - 1px); width: 30%; height: 7.5cqw; border-radius: 2.6cqw 2.6cqw 0 0;
  background: color-mix(in srgb, var(--cover-tint) 60%, #fff); box-shadow: 0 -1px 0 rgba(60, 40, 20, .05); }
/* the prints: like little photo prints, rich soft colour, a fine light edge and a real shadow */
.gf-prints { position: absolute; inset: 0; clip-path: inset(-200% -100% 9% -100%); } /* files can rise past the top, never show below the folder */
.gf-prints i { position: absolute; left: 27%; top: 20%; width: 46%; height: 70%; border-radius: 2cqw; pointer-events: auto; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 2.2cqw; padding: 4cqw 4cqw 0; background: linear-gradient(180deg, #fffefb, #fcf9f4);
  box-shadow: 0 0 0 1px rgba(60, 40, 20, .07), 0 2px 6px -3px rgba(60, 40, 20, .1);
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg)) scale(var(--s, 1));
  transition: transform .65s cubic-bezier(.2, .9, .25, 1.1), box-shadow .4s ease; }
.gf-prints .p1 { --x: -16%; --y: 4%; --r: -5deg; z-index: 1; }
.gf-prints .p2 { --x: 0%;   --y: 0%; --r: 1deg;  z-index: 2; }
.gf-prints .p3 { --x: 16%;  --y: 5%; --r: 5deg;  z-index: 3; }
/* hover: just a peek, the prints lift out of the top and spread a little */
.work-card:is(:hover, :focus-visible) .gf-prints .p1 { --x: -30%; --y: -22%; --r: -9deg; transition-delay: .03s; }
.work-card:is(:hover, :focus-visible) .gf-prints .p2 { --x: 0%;   --y: -30%; --r: 0deg; }
.work-card:is(:hover, :focus-visible) .gf-prints .p3 { --x: 30%;  --y: -21%; --r: 9deg; transition-delay: .06s; }
.work-card:is(:hover, :focus-visible) .gf-prints i:hover { --s: 1.05; --y: -36%; z-index: 4; }
/* the frosted front: half see-through; tips back a touch on hover */
.gf-front { position: absolute; left: 5%; right: 5%; top: 34%; bottom: 8%; border-radius: 3.4cqw; z-index: 5;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .5)); backdrop-filter: blur(9px) saturate(1.4); -webkit-backdrop-filter: blur(9px) saturate(1.4);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .85) inset, 0 0 0 1px rgba(60, 40, 20, .05), 0 6px 16px -10px rgba(60, 40, 20, .12);
  transform-origin: 50% 100%; transition: transform .65s cubic-bezier(.2, .9, .25, 1); }
.work-card:is(:hover, :focus-visible) .gf-front { transform: rotateX(16deg); }
.gf-logo, .gf-star { position: absolute; left: 5cqw; bottom: 4.6cqw; width: 7.4cqw; height: 7.4cqw; }
.work-cover img.gf-logo { width: 7.4cqw; height: 7.4cqw; object-fit: cover; object-position: 0 50%; border-radius: 1.8cqw; transform: none; }
[data-brand="hike"] .work-cover img.gf-logo { width: 6.6cqw; }
.gf-star { color: #8a63d2; } .gf-star svg { display: block; width: 100%; height: 100%; }
.gf-pin { position: absolute; right: -1.6cqw; top: 50%; width: 3.6cqw; height: 3.6cqw; margin-top: -1.8cqw; border-radius: 50%; background: #2b2420; }
/* the files' writing, as quiet rounded bars (a number tab in the brand's colour) */
.gf-prints b { display: block; border-radius: 1cqw; background: #e9e2d8; }
.gf-kick { display: flex; gap: 1.4cqw; } .gf-kick b { width: 11cqw; height: 1cqw; } .gf-kick b.n { width: 2.6cqw; background: var(--wf-accent, #e0d6c8); }
.gf-title { display: flex; flex-direction: column; gap: 1.3cqw; } .gf-title b { height: 1.6cqw; background: #ddd4c8; } .gf-title b:last-child { width: 62%; }
.gf-body { display: flex; flex-direction: column; gap: 1.6cqw; margin-top: 1.2cqw; } .gf-body b { height: 1cqw; }
.gf-body b:nth-child(2) { width: 84%; } .gf-body b:nth-child(3) { width: 92%; } .gf-body b:nth-child(4) { width: 55%; }
@media (hover: none) { .gf-front { transform: none; } }
@media (prefers-reduced-motion: reduce) { .gf-prints i, .gf-front { transition: none; } }
.wf-star { position: absolute; bottom: 7cqw; left: 7cqw; z-index: 6; width: 7cqw; height: 7cqw; color: #8a63d2; opacity: .85; pointer-events: none; }
.wf-star svg { display: block; width: 100%; height: 100%; }
/* folder shape: at rest the files' tops peek over the front, like papers in a real folder; no thumb notch */
.wf-face { -webkit-mask: none; mask: none; }
[data-brand="swiggy"] .wf-file.f1 { --rest: translateY(10%) rotate(-3deg); } [data-brand="swiggy"] .wf-file.f2 { --rest: translateY(7%); } [data-brand="swiggy"] .wf-file.f3 { --rest: translateY(12%) rotate(3deg); }
[data-brand="hike"] .wf-file.f1 { --rest: translate(-4%, 6%); } [data-brand="hike"] .wf-file.f2 { --rest: translate(0, 9%); } [data-brand="hike"] .wf-file.f3 { --rest: translate(4%, 12%); }
[data-brand="play"] .wf-file.f1 { --rest: translateY(18%) rotate(-4deg); } [data-brand="play"] .wf-file.f2 { --rest: translateY(14%); } [data-brand="play"] .wf-file.f3 { --rest: translateY(19%) rotate(4deg); }
/* folder shape, toned down: paler back and tab, a quieter glow behind the glass, a calmer front */
.wf-bg { background: linear-gradient(180deg, color-mix(in srgb, var(--wf-pocket-top, #fbe9dc) 55%, #fffdf9), color-mix(in srgb, var(--wf-pocket, #f6dfcd) 65%, #fffdf9)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 1px rgba(60, 40, 20, .04); }
.wf-bg::before, .wf-bg::after { background: color-mix(in srgb, var(--wf-pocket-top, #fbe9dc) 55%, #fffdf9); }
.wf-bg::before { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 1px rgba(60, 40, 20, .04); }
.wf-pocket::before { opacity: .28; }
.work-card:is(:hover, :focus-visible) .wf-pocket::before { opacity: .45; }
.wf-face { background: linear-gradient(180deg, rgba(255, 255, 255, .5), color-mix(in srgb, var(--wf-pocket, #f6dfcd) 35%, rgba(255, 255, 255, .55)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .4), 0 0 0 1px rgba(60, 40, 20, .04); }
.work-cover img.wf-logo, .wf-star { opacity: .7; }
/* smoothed corners (work-files.js draws the back + tab as one SVG shape and clips the glass and the files):
   the old CSS back and tab step aside; hairline edges come from soft drop-shadows so they follow the smooth shapes */
.wf-bg { visibility: hidden; }
.wf-back { position: absolute; z-index: 0; overflow: visible; filter: drop-shadow(0 0 .6px rgba(60, 40, 20, .16)); }
.wf-back .s0 { stop-color: color-mix(in srgb, var(--wf-pocket-top, #fbe9dc) 55%, #fffdf9); }
.wf-back .s1 { stop-color: color-mix(in srgb, var(--wf-pocket, #f6dfcd) 65%, #fffdf9); }
.wf-face { border-radius: 4.8cqw; }
.wf-file { border-radius: 2.8cqw; }
.wf-stack { filter: drop-shadow(0 0 .5px rgba(60, 40, 20, .18)) drop-shadow(0 6px 10px rgba(60, 40, 20, .05)); }
/* (no filter on the pocket: it would cut the glass off from what is behind it, and the blur would stop working) */