/* Detail view refinements */
.project-overlay { background: rgba(0,0,0,.88); backdrop-filter: blur(14px); }
.project-panel { background: transparent; border: 0; }
@media (max-width: 900px) {
  .project-top { display: flex; flex-direction: column; }
  .project-info { order: -1; }
}
.work-card:nth-child(6n+1) .video-placeholder{background:linear-gradient(135deg,#47352e,#151515)}
.work-card:nth-child(6n+2) .video-placeholder{background:linear-gradient(135deg,#18333c,#151515)}
.work-card:nth-child(6n+3) .video-placeholder{background:linear-gradient(135deg,#412d3d,#151515)}
.work-card:nth-child(6n+4) .video-placeholder{background:linear-gradient(135deg,#293b2d,#151515)}
.work-card:nth-child(6n+5) .video-placeholder{background:linear-gradient(135deg,#38353e,#151515)}
.work-card:nth-child(6n) .video-placeholder{background:linear-gradient(135deg,#4b4029,#151515)}
.wordmark{display:inline-flex;align-items:center;position:relative;overflow:visible}.wordmark span{margin-left:4px}.wordmark::after{content:'— VFX';position:absolute;left:100%;margin-left:10px;opacity:0;white-space:nowrap;font-size:.5em;font-weight:300;letter-spacing:-.015em;transition:opacity .14s ease}.wordmark:hover::after{opacity:1}
.header-actions a{display:inline-flex;align-items:center;gap:5px}.external-icon{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.project-main{width:auto;max-width:100%;height:auto;max-height:50vh}.main-video-wrap{width:fit-content;max-width:100%;margin-inline:auto}.breakdowns{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:72px}.breakdowns video,.breakdowns img{flex:0 0 calc((100% - 32px)/3);width:calc((100% - 32px)/3)}
@media(max-width:900px){.breakdowns video,.breakdowns img{flex-basis:calc((100% - 16px)/2);width:calc((100% - 16px)/2)}}
@media(max-width:520px){.breakdowns video,.breakdowns img{flex-basis:100%;width:100%}}

/* On desktop, credits occupy the same visual height as the main video. */
.project-info{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#5a5a5a transparent}
.project-info::-webkit-scrollbar{width:5px}
.project-info::-webkit-scrollbar-thumb{background:#555;border-radius:999px}
@media(max-width:900px){.project-info{height:auto!important;overflow:visible}}

/* Media is visible as a light poster before a playable frame arrives. */
.grid-poster,.grid-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .18s ease,transform .55s ease,filter .55s ease}.grid-video{opacity:0}.work-card.is-playing .grid-video{opacity:1}.work-card.is-playing .grid-poster{opacity:0}.work-card:hover .grid-video,.work-card:hover .grid-poster{transform:scale(1.045);filter:brightness(.75)}
.main-video-wrap,.project-media{position:relative;background:#000}.project-poster{display:block;max-width:100%;max-height:50vh;width:auto;height:auto;min-height:180px;object-fit:contain}.project-main{position:absolute;inset:0;width:100%;height:100%;max-height:none;opacity:0;transition:opacity .15s ease}.project-media.is-playing .project-main{opacity:1}.project-media.is-playing .project-poster{opacity:0}.media-wait{position:absolute;inset:0;display:grid;place-items:center;color:#bbb;font-size:12px;pointer-events:none;opacity:0;transition:opacity .15s ease}.project-media.is-waiting .media-wait{opacity:1}.project-media.is-playing .media-wait,.project-media.has-error .media-wait{opacity:0}.media-retry{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:none;border:1px solid #777;background:#111;color:#fff;padding:9px 12px;cursor:pointer}.project-media.has-error .media-retry{display:block}.breakdown-media{position:relative;flex:0 0 calc((100% - 32px)/3);width:calc((100% - 32px)/3);background:#111}.breakdown-media img,.breakdown-media video{width:100%;height:auto;min-height:160px;max-height:540px;object-fit:contain}.breakdown-media video{position:absolute;inset:0;opacity:0;transition:opacity .15s ease}.breakdown-media.is-playing video{opacity:1}.breakdown-media.is-playing img{opacity:0}
@media(max-width:900px){.breakdown-media{flex-basis:calc((100% - 16px)/2);width:calc((100% - 16px)/2)}}
@media(max-width:520px){.breakdown-media{flex-basis:100%;width:100%}}