/* Selected work: coverflow carousel. Uses tokens from styles.css. */
#work{--cf-ease:cubic-bezier(.22,.8,.24,1)}
.cf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
.cf-head .section-heading{margin:0}
.cf-switch{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:5px;border:1px solid var(--line);border-radius:999px;background:var(--panel)}
.cf-switch button{position:relative;z-index:1;border:0;background:none;padding:12px 26px;border-radius:999px;font-size:15px;font-weight:500;color:var(--muted);transition:color .35s var(--cf-ease);white-space:nowrap}
.cf-switch button[aria-selected="true"]{color:#17200f}
.cf-switch button small{font-size:11px;opacity:.7;margin-left:6px}
.cf-switch .cf-pill{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:var(--accent);transition:transform .45s var(--cf-ease)}
.cf-switch[data-format="short"] .cf-pill{transform:translateX(100%)}
.cf-switch.single .cf-pill{width:calc(100% - 10px);transform:none}
.cf-niches{display:flex;gap:10px;flex-wrap:wrap;margin:30px 0 0}
.cf-niches button{border:1px solid var(--line);background:transparent;border-radius:999px;padding:10px 18px;font-size:14px;color:var(--muted);transition:border-color .25s,color .25s,background .25s}
.cf-niches button:hover{color:var(--text);border-color:#4c5143}
.cf-niches button[aria-pressed="true"]{color:var(--text);border-color:var(--accent);background:#c1f5680f}
.cf-niches button span{font-size:11px;margin-left:8px;color:var(--accent)}

.cf-stage{position:relative;margin-top:26px;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#0b0c0a;isolation:isolate}
.cf-backdrop{position:absolute;inset:-60px;z-index:-2;background-size:cover;background-position:center;filter:blur(60px) saturate(1.3);opacity:.32;transform:scale(1.1);transition:opacity .6s var(--cf-ease)}
.cf-backdrop.fade{opacity:0}
.cf-stage::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 30%,#0b0c0a 85%)}
.cf-track{position:relative;height:var(--h,560px);perspective:1600px;transition:height .5s var(--cf-ease);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.cf-card{position:absolute;left:50%;top:50%;width:var(--cw);aspect-ratio:var(--ar);border:1px solid #ffffff1f;border-radius:16px;overflow:hidden;background:#000;
  transform:translate(-50%,-50%) translateX(var(--x,0)) translateZ(var(--z,0)) rotateY(var(--ry,0)) scale(var(--s,1));
  opacity:var(--o,1);filter:brightness(var(--b,1));z-index:var(--zi,1);
  transition:transform .75s var(--cf-ease),opacity .6s var(--cf-ease),filter .6s var(--cf-ease),box-shadow .6s;box-shadow:0 30px 60px -20px #000c}
.cf-card.active{box-shadow:0 40px 90px -25px #000,0 0 0 1px #c1f56855}
.cf-card.enter{transition:none;transform:translate(-50%,-50%) scale(.7);opacity:0}
.cf-face{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#000;display:block}
.cf-face:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.cf-face img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;transition:transform 1.2s var(--cf-ease)}
.cf-card.active .cf-face:hover img{transform:scale(1.04)}
.cf-play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#17200f;opacity:0;transform:scale(.6);transition:opacity .4s,transform .5s var(--cf-ease);pointer-events:none}
.cf-card.active .cf-play{opacity:1;transform:scale(1)}
.cf-card.active .cf-face:hover .cf-play{transform:scale(1.08)}
.cf-tag{position:absolute;left:14px;top:14px;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:#000a;backdrop-filter:blur(6px);color:var(--text);opacity:0;transition:opacity .4s}
.cf-card.active .cf-tag{opacity:1}
.cf-preview{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;background:#000;transform:scale(1.18);opacity:0;transition:opacity .6s}
video.cf-preview{object-fit:cover;transform:none}
.cf-card.live .cf-preview{opacity:1}
.cf-card.live .cf-face img{opacity:0;transition:opacity .6s}
.cf-card.live .cf-play{opacity:.85;transform:scale(.8)}
.cf-media{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;z-index:2}
video.cf-media{object-fit:contain}
.cf-external{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center;font-size:14px}
.cf-external a{color:var(--accent)}

.cf-foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:22px 28px 26px;border-top:1px solid #ffffff10;background:#0b0c0acc}
.cf-caption{min-height:46px;min-width:0}
.cf-caption h3{margin:0;font-size:19px;font-weight:500;letter-spacing:-.3px}
.cf-caption p{margin:5px 0 0;font-size:13px;color:var(--muted)}
.cf-views{color:var(--accent);font-weight:600}
a.cf-views:hover{text-decoration:underline}
.cf-caption.swap{animation:cf-swap .5s var(--cf-ease)}
@keyframes cf-swap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cf-counter{font-family:var(--display);font-size:22px;letter-spacing:1px;color:var(--muted)}
.cf-counter b{color:var(--text);font-weight:700}
.cf-controls{display:flex;align-items:center;gap:14px;justify-self:end}
.cf-arrow{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:transparent;display:grid;place-items:center;transition:border-color .2s,background .2s}
.cf-arrow:hover:not(:disabled){border-color:var(--accent);background:#c1f56814}
.cf-arrow:disabled{opacity:.35}
.cf-progress{width:120px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.cf-progress i{display:block;height:100%;width:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)}

@media(max-width:900px){.cf-foot{grid-template-columns:1fr auto}.cf-counter{display:none}}
@media(max-width:600px){.cf-switch button{padding:10px 18px;font-size:14px}.cf-foot{padding:18px}.cf-progress{display:none}.cf-play{width:60px;height:60px;margin:-30px 0 0 -30px}.cf-arrow{width:42px;height:42px}}
@media(prefers-reduced-motion:reduce){.cf-card,.cf-backdrop,.cf-track,.cf-switch .cf-pill{transition:none}.cf-caption.swap{animation:none}}