:root { --ease-ui:cubic-bezier(.22,1,.36,1); }
html { scrollbar-gutter:stable; }
dialog { overflow-x:hidden; overscroll-behavior:contain; transform-origin:50% 42%; }
dialog[open] { animation:detail-open .42s var(--ease-ui) both; }
dialog[open]::backdrop { animation:detail-dim .32s ease both; }
dialog.is-closing { animation:detail-close .19s ease-in both; pointer-events:none; }
dialog.is-closing::backdrop { animation:detail-undim .19s ease-in both; }
.dialog-content { position:relative; isolation:isolate; padding:37px; }
.dialog-top { position:relative; z-index:1; padding-right:37px; }
dialog[open] .dialog-top { animation:detail-content .52s var(--ease-ui) .05s both; }
dialog[open] .dialog-description { animation:detail-content .52s var(--ease-ui) .09s both; }
dialog[open] .dialog-metrics { animation:detail-content .52s var(--ease-ui) .13s both; }
dialog[open] .gallery-toolbar { animation:detail-content .52s var(--ease-ui) .16s both; }
dialog[open] .dialog-actions,dialog[open] .dialog-caption { animation:detail-content .55s var(--ease-ui) .24s both; }
.dialog-icon { box-shadow:0 7px 20px #0003; }
dialog[open] .dialog-icon { animation:icon-unpack .6s var(--ease-ui) .08s both; }
.dialog-flourish { position:absolute; right:90px; top:27px; width:145px; height:90px; z-index:-1; pointer-events:none; overflow:hidden; opacity:.65; }
.dialog-flourish i { position:absolute; width:7px; height:7px; border:1px solid #93b9ff; border-radius:2px; background:#7da7ef13; }
.dialog-flourish i:nth-child(1) { left:35%; top:30%; --scatter-x:-35px; --scatter-y:-17px; --scatter-r:-28deg; }
.dialog-flourish i:nth-child(2) { left:55%; top:55%; --scatter-x:27px; --scatter-y:24px; --scatter-r:42deg; width:11px; height:11px; }
.dialog-flourish i:nth-child(3) { left:80%; top:24%; --scatter-x:37px; --scatter-y:-15px; --scatter-r:58deg; width:5px; height:5px; background:#c4d9ff; }
.dialog-flourish i:nth-child(4) { left:16%; top:70%; --scatter-x:-23px; --scatter-y:16px; --scatter-r:20deg; width:5px; height:5px; }
.dialog-flourish i:nth-child(5) { left:72%; top:80%; --scatter-x:16px; --scatter-y:17px; --scatter-r:-12deg; }
dialog[open] .dialog-flourish i { animation:detail-scatter 1.1s var(--ease-ui) .07s both; }
.dialog-close { position:absolute; right:18px; top:18px; border:1px solid #53647f; transition:background .25s,transform .35s var(--ease-ui),box-shadow .25s; }
.dialog-close:hover { transform:rotate(90deg); background:#405475; box-shadow:0 0 0 4px #87b1ff12; }
.dialog-metrics { margin-bottom:15px; }
.gallery-toolbar { display:flex; align-items:center; justify-content:space-between; gap:15px; margin:0 0 12px; }
.gallery-toolbar > div { display:flex; align-items:center; gap:15px; }
.gallery-label { font-size:12px; color:#cad7ec; font-weight:650; }
.gallery-count { color:#9eafc8; font-size:11px; font-variant-numeric:tabular-nums; }
.gallery-controls { gap:8px!important; }
.gallery-arrow { display:grid; place-items:center; width:43px; height:40px; border-radius:8px; border:1px solid #4b5b74; background:#242f40; color:#dce9ff; font-size:21px; }
.gallery-arrow:hover:not([aria-disabled=true]) { background:#354b6b; border-color:#8eb6f5; transform:translateY(-2px); }
.gallery-arrow[aria-disabled=true] { opacity:.35; cursor:default; }
.dialog-gallery { --shot-height:280px; position:relative; gap:16px; padding:4px 0 14px; scroll-padding-left:0; scrollbar-width:thin; scrollbar-color:#627b9f #202a39; align-items:flex-start; }
.gallery-shot { margin:0; flex:0 0 auto; width:calc(var(--shot-ratio) * var(--shot-height)); max-width:100%; scroll-snap-align:start; }
dialog[open] .gallery-shot { animation:shot-unpack .7s var(--ease-ui) calc(.19s + var(--shot-index) * .085s) both; }
.shot-frame { position:relative; aspect-ratio:var(--shot-ratio); border:1px solid #43546d; border-radius:9px; overflow:hidden; background:#253248; isolation:isolate; }
.shot-frame:before { content:''; position:absolute; inset:0; background:linear-gradient(100deg,transparent 10%,#8fadd11c 45%,transparent 80%); transform:translateX(-100%); animation:shot-loading 1.3s ease-in-out infinite; }
.shot-frame.is-loaded:before { display:none; }
.dialog-gallery .shot-frame img { display:block; width:100%; height:100%; max-width:100%; object-fit:contain; border-radius:0; opacity:0; transform:scale(1.035); transition:opacity .4s ease,transform .75s var(--ease-ui); }
.dialog-gallery .shot-frame.is-loaded img { opacity:1; transform:scale(1); }
.gallery-shot figcaption { color:#95a8c4; font-size:10px; letter-spacing:.4px; padding-top:9px; }
.shot-frame.has-error { min-height:100px; }
.dialog-actions { margin-top:15px; }
/* Quick press feedback, a softer return on hover, and no moving game hitboxes. */
.button,.filter,.nav .nav-contact,.detail-button,.gallery-arrow { transition:transform .32s var(--ease-ui),background .28s ease,border-color .28s ease,color .28s ease,box-shadow .32s ease; }
.button { position:relative; overflow:hidden; isolation:isolate; }
.button:before { content:''; position:absolute; width:45%; inset:-60% auto -60% -65%; background:linear-gradient(90deg,transparent,#ffffff32,transparent); transform:skewX(-23deg); transition:left .65s var(--ease-ui); pointer-events:none; }
.button:hover:before { left:145%; }
.button:hover { transform:translateY(-3px); box-shadow:0 8px 24px #5a8de92a,inset 0 1px #ffffff32; }
.button > span { display:inline-block; transition:transform .35s var(--ease-ui); }
.button:hover > span:last-child { transform:translate(2px,-2px); }
.button-secondary:hover > span:first-child { transform:translateX(2px); }
.button:active,.filter:active,.gallery-arrow:active,.nav .nav-contact:active { transform:translateY(0) scale(.98); transition-duration:.1s; }
.filter:hover { transform:translateY(-2px); }
.detail-button { border-radius:6px; padding-inline:10px; }
.detail-button:hover { background:#9bbfff0d; transform:translateX(2px); }
.detail-button span { transition:transform .35s var(--ease-ui); }
.detail-button:hover span { transform:translate(3px,-3px); }
.nav .nav-contact:hover { background:#8ab4ff0b; border-color:#8baee5; transform:translateY(-2px); }
.plain-link,.email,.socials a { transition:color .25s,border-color .3s; }
.socials a { border-bottom:1px solid transparent; padding-block:7px; }
.socials a:hover { color:#bdd5ff; border-color:#6c8ebe; }
.brand-leaf { transition:transform .6s var(--ease-ui); }
.brand:hover .brand-leaf { transform:rotate(-13deg) translateY(-2px); }
.project-art { transition:transform .55s var(--ease-ui),box-shadow .45s,border-color .45s; }
.project-art:before { content:''; position:absolute; inset:0; z-index:3; opacity:0; pointer-events:none; background:radial-gradient(circle 230px at var(--pointer-x,50%) var(--pointer-y,50%),#bbd8ff1c,transparent 75%); transition:opacity .45s; }
.project-art:hover:before { opacity:1; }
.project-art > img { transition:transform .85s var(--ease-ui); }
.art-open { transition:transform .45s var(--ease-ui),background .3s; }
.project-art:hover .art-open { transform:translate(2px,-2px); }
.project-info h3 { transition:color .3s; }
.project-card:hover .project-info h3 { color:#c1d8ff; }
@keyframes detail-open { from { opacity:0; transform:translateY(18px) scale(.965); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes detail-close { to { opacity:0; transform:translateY(9px) scale(.982); } }
@keyframes detail-dim { from { background-color:#05080e00; backdrop-filter:blur(0); } to { background-color:#05080ec9; backdrop-filter:blur(4px); } }
@keyframes detail-undim { to { background-color:#05080e00; backdrop-filter:blur(0); } }
@keyframes detail-content { from { opacity:0; translate:0 10px; } to { opacity:1; translate:0 0; } }
@keyframes icon-unpack { from { transform:rotate(-8deg) scale(.85); } to { transform:rotate(0) scale(1); } }
@keyframes shot-unpack { from { opacity:0; translate:0 19px; transform:scale(.97); } to { opacity:1; translate:0 0; transform:scale(1); } }
@keyframes detail-scatter { 0% { opacity:0; transform:translate(0,0) scale(.4); } 35% { opacity:.8; } 100% { opacity:.25; transform:translate(var(--scatter-x),var(--scatter-y)) rotate(var(--scatter-r)) scale(1); } }
@keyframes shot-loading { to { transform:translateX(100%); } }
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) { .dialog-gallery .shot-frame.is-loaded:hover img { transform:scale(1.025); } }
@media(max-width:800px) { .dialog-content { padding:28px; } .dialog-gallery { --shot-height:250px; } }
@media(max-width:520px) { .dialog-content { padding:25px 19px; } .dialog-close { right:11px; top:11px; width:38px; height:38px; } .dialog-top { padding-right:30px; } .dialog-flourish { right:50px; width:100px; opacity:.35; } .dialog-gallery { --shot-height:235px; gap:13px; } .gallery-label { font-size:11px; } .gallery-toolbar > div { gap:10px; } .gallery-arrow { width:42px; height:42px; } .gallery-shot { max-width:88%; } .gallery-shot figcaption { font-size:9px; } .gallery-count { font-size:10px; } .dialog-metrics { gap:18px 26px; } .dialog-actions { gap:18px; } }
@media(hover:none) { .button:hover,.filter:hover,.nav .nav-contact:hover,.detail-button:hover { transform:none; } .button:before,.project-art:before { display:none; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } dialog[open],dialog.is-closing,dialog[open]::backdrop,dialog.is-closing::backdrop,dialog[open] .dialog-top,dialog[open] .dialog-icon,dialog[open] .dialog-description,dialog[open] .dialog-metrics,dialog[open] .gallery-toolbar,dialog[open] .gallery-shot,dialog[open] .dialog-actions,dialog[open] .dialog-caption,dialog[open] .dialog-flourish i { animation:none; } .dialog-flourish { display:none; } .shot-frame:before { animation:none; } .button,.button > span,.filter,.nav .nav-contact,.detail-button,.detail-button span,.gallery-arrow,.dialog-close,.project-art,.project-art > img,.shot-frame img,.brand-leaf { transition:none; } .button:hover,.button:active,.filter:hover,.filter:active,.nav .nav-contact:hover,.detail-button:hover,.project-art,.dialog-close:hover { transform:none; } }