Pełnoekranowy podgląd pracy w galerii światła

<main class="gallery-room">
  <header><span>GALERIA 08 / SALA PÓŁNOCNA</span><p>Kolekcja: <b id="collection-count">0</b></p></header>
  <section class="wall" aria-labelledby="gallery-title"><div class="mini-art" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></div><div class="label"><span>WYSTAWA 2026</span><h1 id="gallery-title">Przesunięcie<br>światła</h1><p>Mira Kłos / 2026</p><button id="art-open" type="button">Otwórz pracę</button></div></section>
  <p id="gallery-state" class="gallery-state" role="status">Wybierz pracę, aby zobaczyć ją w powiększeniu.</p>
</main>
<dialog id="art-dialog" aria-labelledby="art-dialog-title" aria-describedby="art-dialog-desc">
  <button class="art-close" type="button" aria-label="Zamknij podgląd pracy">Zamknij ×</button>
  <div class="art-stage" aria-hidden="true"><svg viewBox="0 0 760 760"><path class="trail cyan" d="M-40 585C115 490 175 95 390 128S655 535 810 315"/><path class="trail pink" d="M-30 270C160 390 254 620 475 568S652 180 802 94"/><path class="trail white" d="M84 724C205 610 178 335 354 315S595 506 716 398"/><g class="signal"><circle cx="390" cy="128" r="8"/><circle cx="475" cy="568" r="8"/><circle cx="354" cy="315" r="8"/></g></svg><span>17</span></div>
  <aside><h2 id="art-dialog-title" tabindex="-1">Przesunięcie światła</h2><p id="art-dialog-desc">Trzy świetlne smugi przecinają czarne pole i zbiegają się przy zielonych punktach.</p><dl><div><dt>Autorka</dt><dd>Mira Kłos</dd></div><div><dt>Format</dt><dd>140 × 180 cm</dd></div><div><dt>Sala</dt><dd>Północna</dd></div></dl><button id="collect-art" type="button" aria-pressed="false">Dodaj do kolekcji</button><p id="art-result" role="status" aria-live="polite"></p></aside>
</dialog>

*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;min-width:320px;min-height:100vh;background:#090b10;color:#f0f2ec;font:16px/1.48 Arial,sans-serif}.gallery-room{width:min(1180px,100%);min-height:100vh;margin:auto;padding:24px 28px}.gallery-room>header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #3a414d;padding:10px 0 16px;color:#b7bec8;font:11px "Courier New",monospace;letter-spacing:.15em}.gallery-room>header p{margin:0}.gallery-room>header b{color:#baff52}.wall{display:grid;grid-template-columns:1.35fr .65fr;gap:52px;align-items:center;min-height:590px;padding:42px 0}.mini-art{position:relative;aspect-ratio:1.42;border:1px solid #3a414d;background:#05070a;overflow:hidden}.mini-art:before{content:"";position:absolute;inset:8%;border:1px solid #252b34}.mini-art i{position:absolute;display:block;height:5px;transform-origin:left center}.mini-art i:nth-child(1){left:-4%;top:73%;width:89%;background:#4ce6e6;transform:rotate(-24deg)}.mini-art i:nth-child(2){left:8%;top:20%;width:96%;background:#ff4f9a;transform:rotate(28deg)}.mini-art i:nth-child(3){left:23%;top:88%;width:74%;height:2px;background:#f0f2ec;transform:rotate(-55deg)}.mini-art i:nth-child(4){left:47%;top:9%;width:46%;height:1px;background:#baff52;transform:rotate(82deg)}.mini-art i:nth-child(5){right:17%;bottom:16%;width:54px;height:54px;border:2px solid #baff52;transform:rotate(18deg)}.label{align-self:end;padding-bottom:22px}.label>span{color:#baff52;font:11px "Courier New",monospace;letter-spacing:.16em}.label h1{margin:9px 0 13px;font:italic 500 clamp(43px,6vw,76px)/.91 Georgia,serif;letter-spacing:-.055em}.label p{margin:0 0 28px;color:#b7bec8}.gallery-state{min-height:24px;margin:0;border-top:1px solid #3a414d;padding-top:14px;color:#b7bec8;font-size:13px}button{min-height:46px;padding:10px 17px;border:1px solid #baff52;border-radius:0;background:#baff52;color:#090b10;font:800 14px Arial,sans-serif;cursor:pointer}button:hover{border-color:#f0f2ec;background:#f0f2ec}button:focus-visible,[tabindex]:focus-visible{outline:4px solid #ff4f9a;outline-offset:4px}dialog{width:min(1080px,calc(100% - 26px));height:min(720px,calc(100dvh - 26px));padding:0;border:1px solid #657080;background:#11141b;color:#f0f2ec;display:none;grid-template-columns:1.42fr .58fr}dialog[open]{display:grid;animation:art-in .25s ease-out}dialog::backdrop{background:rgba(2,3,6,.92)}.art-close{position:absolute;right:14px;top:14px;z-index:3;border-color:#f0f2ec;background:#11141b;color:#f0f2ec}.art-close:hover{border-color:#baff52;background:#baff52;color:#090b10}.art-stage{position:relative;min-height:100%;border-right:1px solid #3a414d;background:#05070a;overflow:hidden}.art-stage svg{display:block;width:100%;height:100%}.trail{fill:none;stroke-width:5;stroke-linecap:square}.trail.cyan{stroke:#4ce6e6}.trail.pink{stroke:#ff4f9a}.trail.white{stroke:#f0f2ec;stroke-width:2}.signal{fill:#05070a;stroke:#baff52;stroke-width:3}.art-stage>span{position:absolute;left:7%;bottom:2%;color:#05070a;font:900 clamp(110px,18vw,250px)/1 Arial,sans-serif;letter-spacing:-.09em;-webkit-text-stroke:1px #657080}dialog aside{display:flex;flex-direction:column;padding:74px 30px 30px;overflow:auto}.work-index{color:#baff52;font:10px "Courier New",monospace;letter-spacing:.15em}dialog h2{margin:13px 0 20px;font:italic 500 clamp(34px,3.6vw,48px)/.92 Georgia,serif;letter-spacing:-.055em}dialog aside>p{margin:0 0 22px;color:#c2c8d0}dialog dl{margin:auto 0 24px;border-top:1px solid #657080}dialog dl div{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid #3a414d;padding:9px 0}dt{color:#aeb6c1;font-size:12px}dd{margin:0;font-weight:800;text-align:right}#collect-art[aria-pressed=true]{border-color:#ff4f9a;background:#ff4f9a;color:#090b10}#art-result{min-height:23px;margin:10px 0 0;color:#baff52;font-weight:800}@keyframes art-in{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}@media(max-width:720px){.gallery-room{padding:16px}.wall{grid-template-columns:1fr;gap:24px;min-height:0;padding:30px 0}.mini-art{aspect-ratio:1}.label{padding:0}.label h1{font-size:49px}dialog{grid-template-columns:1fr;grid-template-rows:minmax(180px,43vh) minmax(0,1fr);height:calc(100dvh - 20px)}.art-stage{min-height:43vh;border-right:0;border-bottom:1px solid #3a414d}.art-stage>span{font-size:120px}dialog aside{padding:24px;min-height:0}dialog h2{font-size:43px}dialog dl{margin-top:8px}}@media(max-width:390px){.gallery-room{padding:12px}.gallery-room>header{align-items:flex-start;flex-direction:column;gap:6px}.wall{padding-top:18px}.mini-art{aspect-ratio:1.1}.label h1{font-size:43px}dialog{height:calc(100dvh - 12px);width:calc(100% - 12px)}.art-stage{min-height:34vh}dialog aside{padding:20px 17px}.art-close{right:8px;top:8px}.art-stage>span{font-size:92px}dialog dl div{padding:7px 0}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

$(function(){const dialog=$('#art-dialog')[0],$dialog=$(dialog),opener=$('#art-open')[0];let collected=false,downOutside=false;const outside=e=>{const r=dialog.getBoundingClientRect();return e.clientX<r.left||e.clientX>r.right||e.clientY<r.top||e.clientY>r.bottom};const trap=event=>{if(event.key!=='Tab')return;const items=[...dialog.querySelectorAll('button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[href],[tabindex]:not([tabindex="-1"])')].filter(item=>item.getClientRects().length),first=items[0],last=items[items.length-1],current=document.activeElement;if(!first){event.preventDefault();dialog.focus()}else if(event.shiftKey&&(current===first||!items.includes(current))){event.preventDefault();last.focus()}else if(!event.shiftKey&&current===last){event.preventDefault();first.focus()}};$('#art-open').on('click',function(){dialog.showModal();$('#art-dialog-title').trigger('focus')});$('.art-close').on('click',()=>dialog.close('close'));$('#collect-art').on('click',function(){collected=!collected;$(this).attr('aria-pressed',String(collected)).text(collected?'Usuń z kolekcji':'Dodaj do kolekcji');$('#collection-count').text(collected?'1':'0');$('#art-result').text(collected?'Dodano do kolekcji.':'Usunięto z kolekcji.');$('#gallery-state').text(collected?'Praca „Przesunięcie światła” jest w kolekcji.':'Praca nie jest już w kolekcji.')});$dialog.on('keydown',trap).on('cancel',function(event){event.preventDefault();dialog.close('cancel')}).on('close',()=>opener.focus()).on('pointerdown',event=>{downOutside=outside(event)}).on('pointerup',event=>{if(downOutside&&outside(event))dialog.close('backdrop');downOutside=false}).on('pointercancel',()=>{downOutside=false})});