/* Lucent — work showcase: browser + phone stages, homepage hover list.
   Stage sizes use container units (cqw) so one component works at any size. */

/* ---------- Stage (shared) ---------- */
.stage{--c1:#1d2a6b;--c2:#8aa0ff;container-type:inline-size;position:relative;overflow:hidden;aspect-ratio:16/11.5;border-radius:22px;
  background:radial-gradient(circle at 82% 12%,var(--c2),transparent 56%),linear-gradient(150deg,var(--c1),color-mix(in srgb,var(--c1) 30%,#000))}
.bframe{position:absolute;left:6cqw;top:8cqw;width:72cqw;height:56cqw;border-radius:2cqw;background:#fff;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 3cqw 7cqw -2cqw rgba(0,0,0,.55),0 0 0 .25cqw rgba(255,255,255,.12)}
.bbar{flex:none;height:4.6cqw;background:#ececef;display:flex;align-items:center;gap:1cqw;padding:0 2cqw;border-bottom:.2cqw solid rgba(0,0,0,.08)}
.bbar i{width:1.4cqw;height:1.4cqw;border-radius:50%;background:#c9c9ce}
.bbar i:first-child{background:#ff6b5f}.bbar i:nth-child(2){background:#ffc04a}.bbar i:nth-child(3){background:#3fcf6b}
.bbar b{flex:1;max-width:34cqw;margin:0 auto;transform:translateX(-2cqw);height:2.8cqw;border-radius:99px;background:#fff;color:#6d6d73;font:500 1.55cqw/2.8cqw Inter,sans-serif;text-align:center;overflow:hidden;white-space:nowrap}
.bview,.pview{position:relative;overflow:hidden;background:#f4f3f0}
.bview{flex:1}
.bview img,.pview img{width:100%;height:auto;will-change:transform}
.pframe{position:absolute;width:24cqw;height:50cqw;border-radius:4cqw;background:#101012;padding:.9cqw;
  box-shadow:0 3cqw 6cqw -2cqw rgba(0,0,0,.6),0 0 0 .25cqw rgba(255,255,255,.18)}
.pview{width:100%;height:100%;border-radius:3.2cqw}
.pframe::after{content:"";position:absolute;left:50%;top:1.9cqw;width:6cqw;height:1.6cqw;border-radius:99px;background:#101012;transform:translateX(-50%);z-index:2}

/* layouts */
.l-both .pframe{right:4cqw;bottom:-7cqw}
.l-phones .pframe:nth-child(1){left:22cqw;top:8cqw;width:27cqw;height:56cqw;transform:rotate(-4deg)}
.l-phones .pframe:nth-child(2){left:52cqw;top:18cqw;width:27cqw;height:56cqw;transform:rotate(4deg)}
.l-phone .pframe{left:50%;top:7cqw;width:29cqw;height:60cqw;transform:translateX(-50%)}
.l-phone::before{content:"";position:absolute;left:50%;top:50%;width:62cqw;height:62cqw;border-radius:50%;transform:translate(-50%,-50%);
  border:.3cqw solid rgba(255,255,255,.22);box-shadow:0 0 0 7cqw rgba(255,255,255,.05),0 0 0 14cqw rgba(255,255,255,.03)}

/* ---------- Work page: cases ---------- */
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:56px 24px}
.case{display:block}.case[hidden]{display:none}
.case .stage{border-radius:26px;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.case:hover .stage,.case:focus-visible .stage{transform:scale(.988)}
.case .go{position:absolute;right:18px;top:18px;width:42px;height:42px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;opacity:0;transform:scale(.8);transition:.3s;z-index:3}
.case:hover .go,.case:focus-visible .go{opacity:1;transform:none}
.case .go .ic{width:18px;height:18px;vertical-align:0}
.case-meta{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:18px}
.case-meta h3{font-size:22px;letter-spacing:-.025em;font-weight:600;line-height:1.1}
.case-meta .cat{display:block;margin-top:6px;font-size:13px;color:var(--muted)}
.result{text-align:right;flex:none}
.result b{display:block;font-size:clamp(30px,3.4vw,46px);letter-spacing:-.05em;font-weight:600;line-height:1;color:var(--accent)}
.result small{display:block;margin-top:6px;font-size:12.5px;color:var(--muted);max-width:22ch;margin-left:auto}

/* ---------- Homepage: hover list ---------- */
.wl{border-top:1px solid var(--line-dark)}
.wl-row{display:grid;grid-template-columns:1.6fr 1fr 1.1fr 40px;gap:24px;align-items:center;padding:34px 0;border-bottom:1px solid var(--line-dark);transition:opacity .3s,padding .3s}
.wl:hover .wl-row:not(:hover){opacity:.3}
.wl-row:hover,.wl-row:focus-visible{padding-left:14px}
.wl-row h3{font-size:clamp(30px,5vw,76px);letter-spacing:-.045em;font-weight:500;line-height:1}
.wl-row .cat{font-size:14px;color:var(--muted)}
.wl-row .res{font-size:14px;color:var(--muted)}
.wl-row .res b{color:var(--ink);font-weight:600;font-size:18px;letter-spacing:-.02em;margin-right:6px}
.wl-row .go{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-dark);display:grid;place-items:center;transition:.3s}
.wl-row:hover .go,.wl-row:focus-visible .go{background:var(--accent);border-color:var(--accent);color:#fff}
.wl-row .go .ic{width:18px;height:18px;vertical-align:0}
.wl-row .stage{display:none}

.peek{position:fixed;left:0;top:0;width:min(400px,30vw);aspect-ratio:16/11.5;pointer-events:none;z-index:30;opacity:0;transition:opacity .25s;will-change:transform}
.peek.show{opacity:1}
.peek-layer{position:absolute;inset:0;opacity:0;transform:scale(.94);transition:opacity .25s,transform .35s cubic-bezier(.2,.7,.2,1)}
.peek-layer.on{opacity:1;transform:none}
.peek-layer .stage{width:100%;height:100%;box-shadow:0 30px 70px -24px rgba(0,0,0,.5)}

@media (max-width:1000px),(hover:none){
  .peek{display:none}
  .cases{grid-template-columns:1fr;gap:44px}
  .wl-row{grid-template-columns:1fr 40px;grid-template-areas:"name go" "cat go" "res res" "stage stage";gap:8px 16px;padding:28px 0}
  .wl:hover .wl-row:not(:hover){opacity:1}
  .wl-row:hover{padding-left:0}
  .wl-row h3{grid-area:name}.wl-row .cat{grid-area:cat}.wl-row .res{grid-area:res;margin-top:6px}.wl-row .go{grid-area:go;align-self:start}
  .wl-row .stage{display:block;grid-area:stage;margin-top:16px;width:100%}
}
@media (max-width:560px){.case-meta{flex-direction:column;align-items:flex-start}.result{text-align:left}.result small{margin-left:0}}
@media (hover:none){.case .go{display:none}}
@media (prefers-reduced-motion:reduce){.peek-layer,.peek,.case .stage{transition:none}}