.portfolio-art>img,.project-hero-image{object-fit:cover;object-position:var(--media-x,50%) var(--media-y,50%);transform:scale(var(--media-zoom,1));transform-origin:var(--media-x,50%) var(--media-y,50%)}
.portfolio-art{transition:transform .3s,border-color .3s,box-shadow .3s}.portfolio-card-link:hover .portfolio-art{transform:translateY(-5px);border-color:#b99bff70;box-shadow:0 24px 65px #09070d55}.portfolio-card-link:hover .portfolio-art>img{transform:scale(var(--media-zoom,1))}
.project-hero-media,.project-film-frame{position:relative;width:100%;overflow:hidden;border-radius:18px;background:#0c0912}.project-hero-media{margin-top:30px}.project-hero-image{display:block;width:100%;height:100%;margin:0}.project-film-frame video,.project-film-frame iframe{display:block;width:100%;height:100%;border:0;object-fit:cover;object-position:var(--media-x,50%) var(--media-y,50%);transform:scale(var(--media-zoom,1));transform-origin:var(--media-x,50%) var(--media-y,50%)}
.portfolio-section{position:relative;overflow:hidden;padding:clamp(78px,8vw,124px) 0;background:radial-gradient(circle at 85% 0,#7c35f41c,transparent 34%),linear-gradient(180deg,#111014,#19161f)}.portfolio-section:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,#0008,transparent 75%);pointer-events:none}.portfolio-section>.wrap{position:relative}.portfolio-section .sec-label{display:inline-flex;align-items:center;gap:10px;padding:8px 13px;border:1px solid #ffffff17;border-radius:999px;background:#ffffff08}.portfolio-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;padding-bottom:30px;border-bottom:1px solid #ffffff17}.portfolio-section-heading h2{max-width:760px;margin:14px 0 0;font-size:clamp(34px,4vw,62px);line-height:1.1;letter-spacing:-1.5px}.portfolio-section-heading .btn{flex:none;align-self:flex-end}
.portfolio-section .portfolio-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:36px}.portfolio-section .portfolio-card{min-width:0}.portfolio-section .portfolio-card-link{display:block;color:inherit;text-decoration:none}.portfolio-section .portfolio-art{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border:1px solid #ffffff17;border-radius:22px;background:#0d0b12}.portfolio-section .portfolio-art>img{display:block;width:100%;height:100%}.portfolio-section .portfolio-concept,.portfolio-section .portfolio-play{position:absolute;z-index:2;padding:8px 11px;border:1px solid #ffffff24;border-radius:999px;background:#111015d9;color:#fff;font-size:11px;font-weight:700;backdrop-filter:blur(12px)}.portfolio-section .portfolio-concept{top:14px;inset-inline-start:14px}.portfolio-section .portfolio-play{right:14px;bottom:14px}.portfolio-section .portfolio-card-body{padding:19px 4px 8px}.portfolio-section .portfolio-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#aaa5b3;font-size:10px;text-transform:uppercase;letter-spacing:.08em}.portfolio-section .portfolio-card h3{margin:13px 0 8px;font-size:clamp(21px,1.8vw,29px);line-height:1.15}.portfolio-section .portfolio-card p{min-height:2.8em;margin:0;color:#aaa5b3;line-height:1.55}.portfolio-section .portfolio-card-action{display:inline-flex;margin-top:16px;color:#c9adff;font-weight:650}
.portfolio-section-heading h2,.portfolio-section .portfolio-card h3{color:#fff}.portfolio-section-heading .btn{color:#fff;border-color:#ffffff2b;background:#ffffff08}.portfolio-section-heading .btn:hover{border-color:#b99bff;background:#ffffff10}
:root[data-theme=light] .portfolio-section{background:radial-gradient(circle at 85% 0,#7c35f414,transparent 34%),linear-gradient(180deg,#f7f5fa,#efebf6)}
:root[data-theme=light] .portfolio-section:before{background-image:linear-gradient(#6f65750a 1px,transparent 1px),linear-gradient(90deg,#6f65750a 1px,transparent 1px)}
:root[data-theme=light] .portfolio-section-heading{border-color:#24182e1c}
:root[data-theme=light] .portfolio-section-heading h2,:root[data-theme=light] .portfolio-section .portfolio-card h3{color:var(--ink)}
:root[data-theme=light] .portfolio-section .sec-label{border-color:#24182e1c;background:#fff8}
:root[data-theme=light] .portfolio-section-heading .btn{color:var(--ink);border-color:#24182e2b;background:#fff9}
:root[data-theme=light] .portfolio-section-heading .btn:hover{border-color:var(--violet);background:#fff}
:root[data-theme=light] .portfolio-section .portfolio-meta,:root[data-theme=light] .portfolio-section .portfolio-card p{color:var(--muted)}
@media(max-width:900px){.portfolio-section .portfolio-preview{grid-template-columns:repeat(2,minmax(0,1fr))}.portfolio-section-heading{align-items:flex-start}.portfolio-section .portfolio-card:last-child{display:block}}
@media(max-width:600px){.portfolio-section{padding:66px 0}.portfolio-section-heading{flex-direction:column;gap:22px;padding-bottom:22px}.portfolio-section-heading .btn{align-self:flex-start}.portfolio-section-heading h2{font-size:34px}.portfolio-section .portfolio-preview{grid-template-columns:1fr;gap:30px}.portfolio-section .portfolio-art,.project-hero-media,.project-film-frame{border-radius:16px}.portfolio-section .portfolio-card p{min-height:0}}
@media(prefers-reduced-motion:reduce){.portfolio-art,.portfolio-art>img,.project-hero-image,.project-film-frame video,.project-film-frame iframe{transition:none!important}}