/* ===== Portfolio cards (v1.9.10) — image on top, readable text panel below ===== */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.2rem; }
.work-item { --k: #1F4FD8; position: relative; display: flex; flex-direction: column; margin: 0; border-radius: 22px; isolation: isolate;
  background: rgba(255,255,255,.82); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.9); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 18px 40px -26px rgba(11,31,58,.45);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, opacity .7s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), filter .7s ease var(--d, 0ms); }
.work-item:not(.tilt):hover { transform: translateY(-6px); }
.work-item:hover { box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 30px 60px -28px color-mix(in srgb, var(--k) 55%, rgba(11,31,58,.6)); }
/* animated gradient border on hover */
.work-item::before { content: ''; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; z-index: -1; opacity: 0; transition: opacity .4s ease;
  background: conic-gradient(from var(--spin, 0deg), var(--k), #22D3EE, #A855F7, #F472B6, var(--k));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.work-item:hover::before { opacity: 1; animation: spin 4s linear infinite; }

/* --- media --- */
.work-media { position: relative; aspect-ratio: 16/10; margin: 8px 8px 0; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, #16305A, #0B1F3A); }
.work-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s cubic-bezier(.2,.8,.2,1), filter .5s ease; }
.work-item:hover .work-media img { transform: scale(1.08); filter: saturate(1.15) contrast(1.03); }
.work-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,31,58,.38) 0%, transparent 32%, transparent 62%, rgba(11,31,58,.35) 100%); }
.work-sheen { position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%) skewX(-18deg);
  background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); }
.work-item:hover .work-sheen { transform: translateX(120%) skewX(-18deg); transition: transform 1s cubic-bezier(.2,.8,.2,1); }

.work-kind { position: absolute; top: .75rem; left: .75rem; display: inline-flex; align-items: center; gap: .35rem; z-index: 2;
  padding: .32rem .7rem .32rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 700; color: #fff; letter-spacing: .01em;
  background: color-mix(in srgb, var(--k) 82%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.35); box-shadow: 0 6px 16px -6px var(--k); transition: transform .3s ease; }
.work-kind svg { width: 14px; height: 14px; }
.work-item[data-kind="livestream"] .work-kind::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: wkLive 1.4s ease-in-out infinite; }
.work-item[data-kind="livestream"] .work-kind svg { display: none; }
@keyframes wkLive { 50% { opacity: .25; transform: scale(.7); } }
.work-year { position: absolute; top: .75rem; right: .75rem; z-index: 2; padding: .28rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 700; color: #fff;
  background: rgba(11,31,58,.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.25); }
.work-play { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; z-index: 2; display: grid; place-items: center; border-radius: 50%;
  color: #fff; background: rgba(255,255,255,.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.55);
  opacity: 0; transform: scale(.6); transition: opacity .35s ease, transform .45s cubic-bezier(.3,1.6,.5,1); }
.work-play svg { width: 22px; height: 22px; }
.work-play::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); opacity: 0; }
.work-item:hover .work-play { opacity: 1; transform: scale(1); }
.work-item:hover .work-play::after { animation: wkRipple 1.6s ease-out infinite; }
@keyframes wkRipple { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }

/* --- text panel --- */
.work-body { position: relative; display: flex; flex-direction: column; flex: 1; gap: .35rem; padding: 1rem 1.15rem 1.15rem; }
.work-body::before { content: ''; position: absolute; left: 1.15rem; top: 0; width: 34px; height: 3px; border-radius: 0 0 3px 3px; background: var(--k); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.work-item:hover .work-body::before { width: 72px; }
.work-client { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 700; color: var(--k); text-transform: uppercase; letter-spacing: .04em; margin-top: .25rem; }
.work-client svg { width: 13px; height: 13px; flex: none; }
.work-title { margin: 0; font-size: 1.08rem; font-weight: 800; line-height: 1.3; color: var(--ink); letter-spacing: -.005em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.work-desc { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.work-foot { margin-top: auto; padding-top: .75rem; }
.work-item .btn-album { margin: 0; display: inline-flex; align-items: center; gap: .45rem; background: color-mix(in srgb, var(--k) 10%, #fff); color: var(--k);
  border: 1px solid color-mix(in srgb, var(--k) 28%, transparent); border-radius: 999px; font-weight: 700; transition: background .25s ease, color .25s ease, gap .25s ease, box-shadow .25s ease; }
.work-item .btn-album svg { width: 16px; height: 16px; }
.work-item .btn-album:hover { background: var(--k); color: #fff; border-color: var(--k); gap: .65rem; box-shadow: 0 10px 22px -10px var(--k); }

/* tilt spotlight sits on top of the whole card */
.work-item.tilt::after { z-index: 3; }

/* --- filter bar --- */
.work-filter { position: relative; display: inline-flex; flex-wrap: wrap; gap: .3rem; padding: .35rem; border-radius: 999px; margin-top: 1.2rem;
  background: rgba(255,255,255,.65); border: 1px solid rgba(255,255,255,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px -20px rgba(11,31,58,.4); }
.work-filter button { position: relative; z-index: 1; border: 0 !important; background: transparent !important; padding: .5rem 1rem; }
.work-filter button.is-active { color: #fff !important; }
.work-filter button:not(.is-active):hover { color: var(--k, var(--cobalt)) !important; }
.work-filter button em { font-style: normal; font-size: .72rem; font-weight: 800; min-width: 1.4em; padding: .05rem .4rem; border-radius: 999px; background: rgba(11,31,58,.08); }
.work-filter button.is-active em { background: rgba(255,255,255,.25); }
.wf-pill { position: absolute; z-index: 0; top: .35rem; bottom: .35rem; left: 0; width: 0; border-radius: 999px; background: var(--k, var(--cobalt));
  box-shadow: 0 8px 20px -8px var(--k, var(--cobalt)); transition: left .45s cubic-bezier(.3,1.3,.5,1), width .45s cubic-bezier(.3,1.3,.5,1), background .3s ease; }
.work-filter:not(.has-pill) button.is-active { background: var(--cobalt) !important; border-radius: 999px; }

/* filter enter animation */
.work-item.wk-in { animation: wkIn .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--n, 0) * 60ms); }
@keyframes wkIn { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }

@media (max-width: 960px) { .work-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .work-grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .work-filter { display: flex; border-radius: 18px; }
  .work-play { opacity: .9; transform: scale(.85); }
}
@media (hover: none) { .work-play { opacity: .9; transform: scale(.85); } }
@media (prefers-reduced-motion: reduce) {
  .work-item, .work-media img, .work-sheen, .work-play, .wf-pill { transition: none !important; animation: none !important; }
  .work-item::before, .work-play::after, .work-item.wk-in { animation: none !important; }
}

/* ===== v1.9.13 — YouTube playback + YouTube / Google Drive quick icons ===== */
.work-item.has-video .work-media { cursor: pointer; }
.work-item.has-video .work-media:focus-visible { outline: 3px solid var(--k); outline-offset: 2px; }
.work-play.is-yt { opacity: .95; transform: scale(.92); background: rgba(255,0,51,.88); border-color: rgba(255,255,255,.7); box-shadow: 0 10px 26px -8px rgba(255,0,51,.8); }
.work-play.is-yt::after { border-color: rgba(255,0,51,.7); animation: wkRipple 2s ease-out infinite; }
.work-item:hover .work-play.is-yt { transform: scale(1.08); }
.work-links { position: absolute; right: .7rem; bottom: .7rem; z-index: 3; display: flex; gap: .4rem; }
.wl { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; border: 1px solid rgba(255,255,255,.8); cursor: pointer; padding: 0;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 8px 18px -8px rgba(11,31,58,.6);
  transition: transform .3s cubic-bezier(.3,1.6,.5,1), box-shadow .3s ease; animation: wlIn .6s cubic-bezier(.3,1.5,.5,1) both; }
.wl + .wl { animation-delay: .12s; }
.wl svg { width: 22px; height: 22px; }
.wl:hover { transform: translateY(-3px) scale(1.1); box-shadow: 0 14px 24px -10px rgba(11,31,58,.7); text-decoration: none; }
.wl-yt:hover { box-shadow: 0 14px 26px -8px rgba(255,0,51,.7); }
.wl-drive:hover { box-shadow: 0 14px 26px -8px rgba(66,133,244,.7); }
@keyframes wlIn { from { opacity: 0; transform: translateY(8px) scale(.7); } }
.work-foot { display: flex; flex-wrap: wrap; gap: .5rem; }
.work-item .btn-video { --k: #E11D48; background: #FF0033; color: #fff; border-color: #FF0033; }
.work-item .btn-video:hover { background: #D9002B; border-color: #D9002B; color: #fff; box-shadow: 0 10px 22px -10px #FF0033; }
.work-item .btn-video svg { width: 14px; height: 14px; }

/* video lightbox */
.video-modal { padding: 1.2rem; }
.video-modal .modal-backdrop { background: rgba(6,14,30,.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.video-card { position: relative; width: min(1100px, 100%); border-radius: 20px; overflow: hidden; background: #000; box-shadow: 0 40px 90px -30px rgba(0,0,0,.8);
  animation: vmIn .45s cubic-bezier(.2,.9,.25,1.15) both; }
@keyframes vmIn { from { opacity: 0; transform: translateY(24px) scale(.94); } }
.video-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .8rem .7rem 1.1rem; color: #fff; background: linear-gradient(90deg, #0B1F3A, #16305A); }
.video-bar b { font-size: .98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-bar .modal-close { position: static; color: #fff; background: rgba(255,255,255,.12); border: 0; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; flex: none; }
.video-bar .modal-close:hover { background: rgba(255,255,255,.25); }
.video-bar .modal-close svg { width: 18px; height: 18px; }
.video-frame { position: relative; aspect-ratio: 16/9; background: #000; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 600px) { .video-modal { padding: .5rem; } .video-card { border-radius: 14px; } .wl { width: 34px; height: 34px; } }
@media (prefers-reduced-motion: reduce) { .video-card, .wl { animation: none; } }