#portfolio{border-top:1px solid var(--line);padding:100px 0;position:relative}#portfolio .head{margin-bottom:56px}#portfolio .head h2{font-size:clamp(1.8rem,4vw,2.4rem)}#portfolio .head p{color:var(--text-mid);max-width:620px;margin-top:8px;font-size:1rem}.bento{grid-template-columns:repeat(12,1fr);grid-auto-flow:dense;gap:14px;display:grid}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.bento-tile{background:linear-gradient(135deg, var(--bg-2), var(--surface));border:1px solid var(--line);cursor:pointer;appearance:none;color:inherit;text-align:left;opacity:0;min-height:0;transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .7s cubic-bezier(.16,1,.3,1),border-color .45s cubic-bezier(.16,1,.3,1),box-shadow .45s cubic-bezier(.16,1,.3,1);transition-delay:var(--enter-delay,0s);will-change:transform, opacity;border-radius:10px;padding:0;display:block;position:relative;overflow:hidden}.bento-tile.enter-left{transform:translate3d(var(--enter-x,-260px), 0, 0) scale(.94)}.bento-tile.enter-right{transform:translate3d(var(--enter-x,260px), 0, 0) scale(.94)}.bento-tile.enter-center{transform:translate3d(0, var(--enter-y,64px), 0) scale(.94)}.bento-tile.in{opacity:1;transform:translate(0,0)scale(1)}.bento-tile.in:hover{border-color:#ff1a1a66;transition-delay:0s;transform:translateY(-4px)scale(1);box-shadow:0 14px 36px -16px #ff1a1a73,inset 0 0 0 1px #ff1a1a2e}.bento-tile.in:focus-visible{border-color:var(--red);outline:none;transition-delay:0s;box-shadow:0 0 0 2px #ff1a1a4d}@media (prefers-reduced-motion:reduce){.bento-tile{opacity:1!important;transition:none!important;transform:none!important}}.bento-img{object-fit:cover;filter:grayscale(.08)brightness(.78)contrast(1.04);transition:filter .5s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);inset:0;width:100%!important;height:100%!important;position:absolute!important}.bento-tile:hover .bento-img{filter:grayscale(0)brightness(.96)contrast(1.06);transform:scale(1.04)}.tile-corner{pointer-events:none;opacity:0;width:28px;height:28px;transition:opacity .4s;position:absolute;top:0;right:0}.tile-corner:before,.tile-corner:after{content:"";background:var(--red);position:absolute}.tile-corner:before{width:14px;height:1px;top:0;right:0}.tile-corner:after{width:1px;height:14px;top:0;right:0}.bento-tile:hover .tile-corner{opacity:1}.tile-overlay{pointer-events:none;opacity:.85;background:linear-gradient(#0000 45%,#000000d1 100%);transition:opacity .45s cubic-bezier(.16,1,.3,1);position:absolute;inset:0}.bento-tile:hover .tile-overlay{opacity:.6}@media (max-width:1100px){.bento{gap:12px}}@media (max-width:700px){.bento{grid-template-columns:repeat(2,1fr);gap:10px}.bento-tile{height:220px;aspect-ratio:auto!important;grid-column:span 2!important}.bento-tile:nth-child(3n+1){grid-column:span 2!important}.bento-tile:nth-child(3n+2),.bento-tile:nth-child(3n+3){grid-column:span 1!important}.bento-tile.enter-left,.bento-tile.enter-right,.bento-tile.enter-center{transform:translateY(24px)scale(.98)!important}}.reveal{opacity:0;filter:blur(8px);transition:opacity .8s cubic-bezier(.16,1,.3,1),filter .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}.reveal-up{transform:translateY(20px)}.reveal.in{opacity:1;filter:blur();transform:translateY(0)}.lightbox{-webkit-backdrop-filter:blur(8px);z-index:1000;background:#000000eb;justify-content:center;align-items:center;padding:48px;animation:.2s both fadeInFast;display:flex;position:fixed;inset:0}@keyframes fadeInFast{0%{opacity:0}to{opacity:1}}.lightbox-stage{flex-direction:column;align-items:center;gap:16px;width:100%;max-width:1280px;max-height:100%;display:flex;position:relative}.lightbox-frame{justify-content:center;align-items:center;max-width:100%;max-height:calc(100vh - 160px);display:flex}.lightbox-img{object-fit:contain;border:1px solid var(--line);background:var(--bg-2);border-radius:8px;max-width:100%;max-height:calc(100vh - 160px);width:auto!important;height:auto!important}.lightbox-close,.lightbox-arrow{border:1px solid var(--line);color:var(--white);cursor:pointer;background:#00000080;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;font-size:1.2rem;transition:background .2s,border-color .2s,color .2s;display:flex;position:absolute}.lightbox-close:hover,.lightbox-arrow:hover{border-color:var(--red);color:var(--red);background:#ff1a1a2e}.lightbox-close{font-size:1.4rem;top:-56px;right:0}.lightbox-arrow-prev{top:50%;left:-56px;transform:translateY(-50%)}.lightbox-arrow-next{top:50%;right:-56px;transform:translateY(-50%)}@media (max-width:900px){.lightbox{padding:32px 16px}.lightbox-close{top:8px;right:8px}.lightbox-arrow-prev{top:auto;bottom:100px;left:8px;transform:none}.lightbox-arrow-next{top:auto;bottom:100px;right:8px;transform:none}}