/* SHOWLINE · case pages + real-UI reel. Loaded after site.css */

/* ---------- reel: real recordings of the app ---------- */
.reel{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel2)}
.reel-stage{position:relative;aspect-ratio:16/9;background:#000}
.reel-stage video{width:100%;height:100%;object-fit:cover}
.reel-badge{position:absolute;left:14px;top:14px;display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:999px;background:rgba(10,10,10,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:600 9.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.reel-badge i{width:7px;height:7px;border-radius:50%;background:#ff4545;box-shadow:0 0 0 0 rgba(255,69,69,.6);animation:recp 1.6s infinite}
@keyframes recp{0%{box-shadow:0 0 0 0 rgba(255,69,69,.55)}70%{box-shadow:0 0 0 8px rgba(255,69,69,0)}100%{box-shadow:0 0 0 0 rgba(255,69,69,0)}}
.reel-ctl{position:absolute;right:12px;top:12px;display:flex;gap:6px}
.icb{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(10,10,10,.7);display:grid;place-items:center;cursor:pointer;color:var(--paper)}
.icb:hover{border-color:var(--paper)}
.icb svg{width:15px;height:15px}
.reel-cap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(16px,3vw,48px);padding:clamp(18px,2.4vw,30px);border-top:1px solid var(--line)}
.reel-cap h3{margin:8px 0 0;font:500 clamp(22px,2.2vw,32px)/1.08 var(--f-sans);letter-spacing:-.025em}
.reel-cap p{margin:0;color:var(--soft);font-size:15.5px;max-width:62ch}
.reel-tabs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--line)}
.reel-tabs button{position:relative;text-align:left;border:0;border-right:1px solid var(--line);background:none;padding:14px 14px 16px;cursor:pointer;color:var(--mute);min-width:0}
.reel-tabs button:last-child{border-right:0}
.reel-tabs button b{display:block;font:600 9px/1 var(--f-mono);letter-spacing:.14em;color:var(--signal);margin-bottom:7px}
.reel-tabs button span{display:block;font:500 13px/1.25 var(--f-sans);color:inherit}
.reel-tabs button[aria-selected="true"]{color:var(--paper);background:rgba(255,255,255,.035)}
.reel-tabs button:hover{color:var(--paper)}
.reel-tabs button .pg{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--signal)}
.reel-note{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px;color:var(--mute)}
@media (max-width:1100px){.reel-tabs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);overflow-x:auto;scrollbar-width:none}.reel-tabs::-webkit-scrollbar{display:none}}
@media (max-width:760px){.reel-cap{grid-template-columns:1fr}.reel-badge{font-size:8px;left:10px;top:10px}.reel-ctl{top:auto;bottom:10px;right:10px}.icb{width:32px;height:32px}}

/* ---------- case cards (home) ---------- */
.cases{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.case{grid-column:span 2;display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel2);transition:border-color .3s,transform .5s var(--ease)}
.case.wide{grid-column:span 3}
.case:hover{border-color:var(--line2);transform:translateY(-3px)}
.case .cph{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.case .cph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.case:hover .ph img{transform:scale(1.035)}
.case .cph em{position:absolute;left:12px;top:12px;font:600 9px/1 var(--f-mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;padding:6px 8px;border-radius:999px;background:rgba(10,10,10,.72)}
.case .tx{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.case .tx b{font:500 21px/1.15 var(--f-sans);letter-spacing:-.02em}
.case .tx p{margin:0;color:var(--soft);font-size:14.5px}
.case .tx .go{margin-top:auto;padding-top:10px;color:var(--signal);font:600 10px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
@media (max-width:1100px){.case,.case.wide{grid-column:span 3}}
@media (max-width:700px){.cases{grid-template-columns:1fr}.case,.case.wide{grid-column:auto}}

/* ---------- case page ---------- */
.chero{padding-top:118px;padding-bottom:clamp(32px,4vw,56px)}
.crumb{display:flex;gap:10px;align-items:center;color:var(--mute);margin-bottom:22px}
.crumb a{text-decoration:none;color:var(--soft)}.crumb a:hover{color:var(--paper)}
.chero h1{font:500 clamp(42px,7vw,112px)/.94 var(--f-sans);letter-spacing:-.045em;margin:0;max-width:14ch}
.chero .clede{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:end;margin-top:clamp(24px,3vw,40px)}
.chero .clede p{margin:0;color:var(--soft);font-size:clamp(16px,1.25vw,19px);max-width:56ch}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags span{font:500 10px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;padding:8px 10px;border:1px solid var(--line2);border-radius:999px;color:var(--soft)}
.cfacts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:clamp(32px,4vw,56px)}
.cfacts div{padding:20px 18px;border-right:1px solid var(--line)}
.cfacts div:last-child{border-right:0}
.cfacts b{display:block;font:500 clamp(20px,1.9vw,30px)/1.05 var(--f-sans);letter-spacing:-.03em}
.cfacts span{display:block;margin-top:8px;color:var(--mute);font-size:13px;line-height:1.35}
@media (max-width:1000px){.cfacts{grid-template-columns:repeat(3,minmax(0,1fr))}.cfacts div:nth-child(3n){border-right:0}.cfacts div:nth-child(-n+3){border-bottom:1px solid var(--line)}}
@media (max-width:760px){.chero .clede{grid-template-columns:1fr}.cfacts{grid-template-columns:repeat(2,minmax(0,1fr))}.cfacts div{border-right:0!important;border-bottom:1px solid var(--line)}.cfacts div:nth-child(odd){border-right:1px solid var(--line)!important}}

.blk{padding-block:clamp(56px,7vw,110px);border-top:1px solid var(--line)}
.blk .intro{margin-bottom:clamp(28px,4vw,52px)}
.blk h2{font:500 clamp(32px,4.4vw,68px)/.98 var(--f-sans);letter-spacing:-.035em;margin:0;max-width:18ch}

/* live embed (iframe loads on demand) */
.embed{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#000;aspect-ratio:16/9}
.embed.tall{aspect-ratio:16/10}
.embed img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.02)}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#121212}
.embed .start{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,rgba(10,10,10,.05),rgba(10,10,10,.55));border:0;cursor:pointer;color:var(--paper)}
.embed .start span{display:inline-flex;align-items:center;gap:12px;padding:16px 22px;border-radius:999px;background:var(--signal);color:var(--ink);font:600 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;box-shadow:0 10px 40px rgba(0,0,0,.45);transition:transform .4s var(--pop)}
.embed .start:hover span{transform:scale(1.05)}
.embed .start small{position:absolute;bottom:16px;left:0;right:0;text-align:center;font:500 10px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.ebar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-top:12px}
.ebar .mono{color:var(--mute)}
@media (max-width:760px){.embed,.embed.tall{aspect-ratio:3/4}}

/* video blocks */
.vid{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#000;position:relative}
.vid video{width:100%;height:auto;display:block}
.vid .lbl{position:absolute;left:12px;top:12px;font:600 9px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;padding:6px 8px;border-radius:999px;background:rgba(10,10,10,.72)}
.vid .snd{position:absolute;right:12px;bottom:12px}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.two.k{grid-template-columns:minmax(0,.62fr) minmax(0,1fr);align-items:start}
.cap2{margin-top:12px;display:flex;justify-content:space-between;gap:16px;color:var(--soft);font-size:14.5px}
.cap2 b{color:var(--paper);font-weight:500}
@media (max-width:860px){.two,.two.k{grid-template-columns:1fr}}

/* gallery + lightbox */
.gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.gal.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gal button{padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0d0d0d;cursor:zoom-in;text-align:left}
.gal button img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform 1s var(--ease)}
.gal button:hover img{transform:scale(1.03)}
.gal button span{display:block;padding:10px 12px;font:500 10px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
@media (max-width:860px){.gal,.gal.g2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.gal,.gal.g2{grid-template-columns:1fr}}
.lb{position:fixed;inset:0;z-index:200;background:rgba(6,6,6,.94);display:none;flex-direction:column}
.lb.on{display:flex}
.lb .lbt{display:flex;align-items:center;gap:12px;padding:14px var(--gut);color:var(--soft)}
.lb .lbt .sp{flex:1}
.lb .lbs{flex:1;overflow:auto;display:grid;place-items:center;padding:0 var(--gut) var(--gut)}
.lb .lbs img{max-width:100%;max-height:calc(100vh - 90px);border-radius:8px;cursor:zoom-in}
.lb .lbs.zoom img{max-width:none;max-height:none;width:min(2600px,250vw);cursor:zoom-out}

/* wall variants viewer */
.wv{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#0b0912}
.wv .wvbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #1f1a2c;background:#0e0b16}
.wv .wvbox{position:relative;overflow:hidden}
.wv .wvsz{position:relative;overflow:hidden}
.wv .wvin{width:1720px;height:1000px;transform-origin:0 0}
@media (max-width:700px){.wv .wvbox{overflow-x:auto!important;-webkit-overflow-scrolling:touch}}
.wv.hz .z{opacity:0}.wv.hc .c{opacity:0}
.wv .z,.wv .c{transition:opacity .35s}
.wvnote{margin-top:10px;color:var(--mute)}

/* list of what we built */
.did{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.did div{border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--panel2)}
.did b{display:block;font:500 18px/1.2 var(--f-sans);letter-spacing:-.015em;margin-bottom:8px}
.did p{margin:0;color:var(--soft);font-size:14.5px}
.did .n{display:block;font:600 9.5px/1 var(--f-mono);letter-spacing:.14em;color:var(--signal);margin-bottom:12px}
@media (max-width:900px){.did{grid-template-columns:1fr}}

.next{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.next a{text-decoration:none;border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:6px;transition:border-color .3s}
.next a:hover{border-color:var(--signal)}
.next a span{font:600 9.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.next a b{font:500 16px/1.2 var(--f-sans)}
@media (max-width:900px){.next{grid-template-columns:repeat(2,minmax(0,1fr))}}