/* Hand-written work list on the home page (see work.js) */
html.lh-work #work [data-framer-name="Cases"],
html.lh-work #work [data-framer-name="Main wrapper"],
html.lh-work #work > .framer-pabwvz { display: none !important; }
#lh-work { --lw-ink: #1d1d1f; --lw-body: #5f6368; --lw-line: #e3e3e3; --lw-bubble: #efefed;
  width: 100%; display: grid; gap: 96px; padding: 24px 0 0; font-family: Manrope, Geist, Inter, system-ui, sans-serif; color: var(--lw-ink); text-align: left; }
#lh-work * { box-sizing: border-box; }
.lw-hd { margin: 0 0 56px; padding: 0 0 18px; border-bottom: 1px solid var(--lw-line); font-size: 22px; font-weight: 500; color: #444; letter-spacing: -0.005em; }
.lw-list { display: grid; gap: 88px; }
.lw-card { display: grid; grid-template-columns: minmax(0, 57fr) minmax(0, 40fr); gap: 32px; align-items: start; color: inherit; text-decoration: none; }
.lw-img { display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #eee; }
.lw-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* text side, after cindyquach.xyz: mono eyebrow, title, outcomes hung off a thin rule */
.lw-body { display: flex; flex-direction: column; align-items: flex-start; padding-top: 4px; }
.lw-eyebrow { font: 500 14px/1.4 "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; color: #6b6b6b; }
.lw-title { margin-top: 14px; font-size: 34px; line-height: 1.2; font-weight: 600; letter-spacing: -0.035em; }
.lw-card:hover .lw-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.lw-wins { display: flex; flex-direction: column; gap: 10px; margin-top: 36px; padding-left: 16px; border-left: 1px solid #cfcfcf; }
.lw-wins span { font-size: 17px; line-height: 1.45; color: #555; }
@media (max-width: 1199px) {
  .lw-card { gap: 28px; }
  .lw-title { font-size: 28px; }
  .lw-wins { margin-top: 26px; } .lw-wins span { font-size: 16px; }
}
@media (max-width: 809px) {
  #lh-work { gap: 64px; }
  .lw-hd { margin-bottom: 32px; font-size: 20px; }
  .lw-list { gap: 56px; }
  .lw-card { grid-template-columns: 1fr; gap: 20px; }
  .lw-eyebrow { font-size: 12px; }
  .lw-title { margin-top: 10px; font-size: 24px; }
  .lw-wins { margin-top: 18px; gap: 8px; padding-left: 14px; } .lw-wins span { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .lw-img img { transition: none; } }

/* ---- motion (after jiwonyarea.com): rise-in, hover zoom, arrow button, cursor pill ---- */
#lh-work { --lw-ease: cubic-bezier(.22, 1, .36, 1); }
.lw-card { position: relative; }
.rv-card { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--lw-ease), transform .9s var(--lw-ease); }
.rv-card.in { opacity: 1; transform: none; }
.rv-card .lw-body > * { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--lw-ease), transform .8s var(--lw-ease); }
.rv-card.in .lw-body > * { opacity: 1; transform: none; }
.rv-card.in .lw-body > :nth-child(2) { transition-delay: .08s; } .rv-card.in .lw-body > :nth-child(3) { transition-delay: .14s; }
.rv-card.in .lw-body > :nth-child(4) { transition-delay: .2s; }  .rv-card.in .lw-body > :nth-child(5) { transition-delay: .26s; }
.lw-arrow { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #111; color: #fff; transition: transform .24s var(--lw-ease), background .24s; }
.lw-card:hover .lw-arrow { transform: scale(1.08) rotate(-45deg); background: #194bfe; }
.lw-pill { position: fixed; top: 0; left: 0; z-index: 2147483000; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #111; color: #fff;
  font: 500 15px/1 Manrope, Geist, sans-serif; white-space: nowrap; pointer-events: none; opacity: 0; scale: .6; transition: opacity .18s ease-out, scale .32s var(--lw-ease, ease); }
.lw-pill.on { opacity: 1; scale: 1; }
@media (hover: hover) and (pointer: fine) { .lw-card { cursor: none; } }

/* ---- scene mockup: photo behind, dimmed, the app recording in front ---- */
.lw-scene { position: relative; display: block; background: #222; }
.lw-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lw-scene .lw-dim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.42)); }
/* the foreground sits dead centre; the wrapper carries the shadow (a mask on the video would clip a shadow on itself) */
.lw-fg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); aspect-ratio: var(--ratio); }
/* shadows are static boxes, not filters: a filter over a playing video is re-rasterised on every frame */
.lw-sh { position: absolute; inset: 1.5% 3%; border-radius: 15% / 7.5%; box-shadow: 0 24px 40px rgba(0,0,0,.45); }
.lw-browser { box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 24px 40px rgba(0,0,0,.35); }
.lw-screen { filter: drop-shadow(0 24px 40px rgba(0,0,0,.45)); }
.lw-fg video, .lw-fg img { display: block; width: 100%; height: 100%; object-fit: fill; }
.lw-phone { height: 86%; }
.lw-phone video { -webkit-mask: var(--mask) center / 100% 100% no-repeat; mask: var(--mask) center / 100% 100% no-repeat; }
.lw-browser { width: 80%; aspect-ratio: auto; border-radius: 10px; overflow: hidden; background: #fff; }
.lw-browser video { height: auto; aspect-ratio: var(--ratio); }
.lw-bar { display: flex; gap: 6px; align-items: center; height: 26px; padding: 0 12px; background: #ececec; border-bottom: 1px solid #ddd; }
.lw-bar b { width: 9px; height: 9px; border-radius: 50%; background: #c9c9c9; }
.lw-screen { width: 84%; }
@media (max-width: 809px) { .lw-arrow { display: none; } .lw-phone { height: 90%; } .lw-browser { width: 86%; } .lw-bar { height: 16px; gap: 4px; padding: 0 8px; } .lw-bar b { width: 6px; height: 6px; } .lw-screen { width: 90%; } }
@media (prefers-reduced-motion: reduce) {
  .rv-card, .rv-card .lw-body > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .lw-arrow { transition: none; }
}

/* ---- section heading (replaces Framer's) ---- */
.lw-intro { display: flex; flex-direction: column; align-items: flex-start; max-width: 880px; }
.lw-h { margin: 18px 0 0; font: 600 72px/1.02 Urbanist, Manrope, system-ui, sans-serif; letter-spacing: -0.045em; color: #0b0b0c; }
.lw-h .w { display: inline-block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; vertical-align: top; }
.lw-h .w > span { display: inline-block; }
.lw-h .mu { color: #a3a3a3; }
.lw-lede { margin: 26px 0 0; max-width: 620px; font-size: 19px; line-height: 1.6; color: #5f6368; }
.lw-hd { position: relative; border-bottom: 0; }
.lw-hd::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--lw-line); transform-origin: left; }
/* entrance: words rise out of their boxes one after another, then eyebrow / lede fade up, rules draw left to right */
.rv-in .lw-eyebrow, .rv-in .lw-lede { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--lw-ease), transform .9s var(--lw-ease); }
.rv-in .lw-h .w > span { transform: translateY(105%); transition: transform 1s var(--lw-ease); }
.rv-in.in .lw-eyebrow, .rv-in.in .lw-lede, .rv-in.in .lw-h .w > span { opacity: 1; transform: none; }
.rv-in.in .lw-h .w:nth-child(2) > span { transition-delay: .06s; } .rv-in.in .lw-h .w:nth-child(3) > span { transition-delay: .12s; }
.rv-in.in .lw-h .w:nth-child(4) > span { transition-delay: .18s; } .rv-in.in .lw-h .w:nth-child(5) > span { transition-delay: .24s; }
.rv-in.in .lw-h .w:nth-child(6) > span { transition-delay: .30s; } .rv-in.in .lw-h .w:nth-child(7) > span { transition-delay: .36s; }
.rv-in.in .lw-lede { transition-delay: .45s; }
.rv-in .lw-hd { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--lw-ease), transform .8s var(--lw-ease); }
.rv-in .lw-hd::after { transform: scaleX(0); transition: transform 1.2s var(--lw-ease) .15s; }
.rv-in.in .lw-hd { opacity: 1; transform: none; } .rv-in.in .lw-hd::after { transform: none; }
@media (max-width: 1199px) { .lw-h { font-size: 56px; } .lw-lede { font-size: 17px; } }
@media (max-width: 809px) { .lw-h { margin-top: 12px; font-size: 40px; } .lw-lede { margin-top: 18px; font-size: 16px; } }
@media (prefers-reduced-motion: reduce) {
  .rv-in .lw-eyebrow, .rv-in .lw-lede, .rv-in .lw-h .w > span, .rv-in .lw-hd, .rv-in .lw-hd::after { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- vibe coding: playground grid (after the reference "Playground" layout) ---- */
#lh-vibe { --lw-ease: cubic-bezier(.22, 1, .36, 1); --lw-line: #e3e3e3; width: 100%; padding: 160px 0 40px; font-family: Manrope, Geist, Inter, system-ui, sans-serif; color: #1d1d1f; text-align: left; }
#lh-vibe * { box-sizing: border-box; }
.lv-hd { display: flex; flex-direction: column; align-items: flex-start; }
.lv-h { margin: 16px 0 0; max-width: 900px; font: 600 40px/1.15 Urbanist, Manrope, system-ui, sans-serif; letter-spacing: -0.035em; color: #0b0b0c; }
.rv-in .lv-h { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--lw-ease) .08s, transform 1s var(--lw-ease) .08s; }
.rv-in.in .lv-h { opacity: 1; transform: none; }
.lv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 48px; }
.lv-tile { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.lv-tile .lw-scene { aspect-ratio: 1 / 1; border-radius: 10px; }
.lv-tile .lw-phone { height: 82%; }
.lv-tile .lw-browser { width: 90%; }
.lv-title { display: flex; align-items: baseline; gap: 8px; margin-top: 22px; font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.lv-title i { font-style: normal; font-size: 16px; color: #9a9a9a; transition: transform .3s var(--lw-ease), color .3s; }
.lv-tile:hover .lv-title i { transform: translate(2px, -2px); color: #194bfe; }
.lv-text { margin-top: 10px; font-size: 17px; line-height: 1.6; color: #737373; }
.rv-card.lv-tile:nth-child(2) { transition-delay: .08s; } .rv-card.lv-tile:nth-child(3) { transition-delay: .16s; }
@media (max-width: 1199px) { #lh-vibe { padding-top: 120px; } .lv-h { font-size: 32px; } .lv-title { font-size: 19px; } .lv-text { font-size: 15.5px; } .lv-grid { gap: 14px; } }
@media (max-width: 809px) { #lh-vibe { padding-top: 96px; } .lv-h { font-size: 26px; } .lv-grid { grid-template-columns: 1fr; gap: 40px; margin-top: 32px; } .lv-title { margin-top: 16px; } }
@media (prefers-reduced-motion: reduce) { .rv-in .lv-h { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* Until work.js has placed the list (~load + 200ms), reserve roughly its height so the page doesn't start short and then jump */
html.lh-work:not(.lh-placed) #work { min-height: calc(195vw + 2150px); }
@media (max-width: 809.98px) { html.lh-work:not(.lh-placed) #work { min-height: calc(440vw + 3250px); } }

/* ---- "Coming soon" card (Ping AI): not a link, no pill, no hover underline ---- */
.lw-card.is-soon:hover .lw-title { text-decoration: none; }
.lw-card.is-soon .lw-title { color: #6b7080; }
.lw-soon { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 26px); background: #eef1fb;
  background-image: linear-gradient(rgba(34, 75, 240, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 75, 240, .07) 1px, transparent 1px);
  background-size: 24px 24px; box-shadow: inset 0 0 0 1px rgba(34, 75, 240, .1); }
.lw-soon-px { position: absolute; inset: 0; pointer-events: none; }
.lw-soon img.lw-soon-logo { position: relative; width: 38%; max-width: 260px; height: auto; object-fit: contain; }
.lw-soon-tag { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
  font: 500 15px/1 "Pixelify Sans", "Geist Mono", monospace; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: #224bf0; box-shadow: 4px 4px 0 #111; }
.lw-soon-tag i { width: 8px; height: 14px; background: #fff; animation: lw-blink 1s steps(1) infinite; }
.lw-soon-px i { position: absolute; width: 10px; height: 10px; background: #224bf0; opacity: 0; animation: lw-tw 2.6s steps(1) infinite; animation-delay: var(--d); }
.lw-soon-px i:nth-child(3n) { background: #ffd23f; } .lw-soon-px i:nth-child(4n) { background: #111; width: 6px; height: 6px; }
@keyframes lw-blink { 50% { opacity: 0; } }
@keyframes lw-tw { 0%, 60% { opacity: 0; } 61%, 85% { opacity: .9; } }
#lh-work .lw-arrow.lw-arrow-soon, #lh-work .lw-card:hover .lw-arrow.lw-arrow-soon { width: auto; height: 34px; padding: 0 14px; border-radius: 999px; background: #e7e9ef !important; color: #6b7080 !important; font: 500 13px/1 Geist, sans-serif; transform: none !important; }
@media (prefers-reduced-motion: reduce) { .lw-soon-tag i, .lw-soon-px i { animation: none; } .lw-soon-px i { opacity: .6; } }

/* Ping AI card v2: helloping.ai in a browser window over its own sky */
.lw-soon-site { background: #8ec0f7; }
.lw-soon-site .lw-fg.lw-browser { transform: translate(-50%, -56%); }
.lw-soon-site .lw-browser img { height: auto; aspect-ratio: 1200 / 750; }
.lw-soon-site .lw-soon-tag { position: absolute; left: 50%; bottom: 7%; translate: -50% 0; }
@media (max-width: 809px) { .lw-soon-site .lw-soon-tag { font-size: 12px; padding: 7px 10px; bottom: 5%; } }