/* The 90-second showreel: a dark player card with chapters, plus links into it from the hero and the projects. */
.film-section{padding-top:58px;padding-bottom:34px;scroll-margin-top:76px}
.film-section .section-heading{margin-bottom:28px}
.film-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,296px);gap:14px;padding:14px;border-radius:20px;background:radial-gradient(60% 80% at 0% 0%,#d4ff500d,transparent 70%),#0f1517;border:1px solid #1d282a;box-shadow:0 34px 80px -40px #10161999;color:#e7efeb;position:relative}
.film-player{position:relative;aspect-ratio:16/9;min-width:0;border-radius:12px;background:#080b0c}
.film-frame{position:absolute;inset:0;border-radius:12px;overflow:hidden;background:#000;transform-origin:0 0}
.film-video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.film-note{margin:14px 2px 0;font-size:12px;line-height:1.8;color:#7a8783}

/* chapters, also readable without JavaScript */
.film-side{position:relative;min-width:0}
.film-side-head{position:absolute;top:0;left:0;right:0;margin:0;padding:6px 10px 0 8px;display:flex;justify-content:space-between;font-size:11px;letter-spacing:1.4px;color:#83958f}
.film-chapters{position:absolute;inset:32px 0 0;margin:0;padding:0 4px 0 0;list-style:none;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ffffff26 transparent}
.film-chapters li{margin:0 0 3px}
.film-card:not(.is-enhanced) .film-chapters li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:8px 10px;border-bottom:1px solid #ffffff0f}
.film-card:not(.is-enhanced) .film-ch-time{grid-row:1/3;grid-column:2}
.film-ch{position:relative;width:100%;display:grid;grid-template-columns:76px minmax(0,1fr) auto;align-items:center;gap:12px;padding:7px 10px 7px 7px;border:0;border-radius:10px;background:transparent;color:inherit;text-align:left;overflow:hidden;transition:background .25s}
.film-ch:hover{background:#ffffff0b}
.film-ch-thumb{display:block;width:76px;aspect-ratio:16/9;border-radius:6px;background-color:#1a2427;background-repeat:no-repeat;background-size:1100% 100%;background-position:calc(var(--i) * 10%) 0;box-shadow:inset 0 0 0 1px #ffffff14}
.is-near .film-ch-thumb,.is-near .film-tip-thumb{background-image:url(assets/film/chapters.webp)}
.film-ch-text{min-width:0}
.film-ch-title{display:block;font-size:14px;line-height:1.45;color:#e3ece8;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.film-ch-sub{display:block;font-size:12px;line-height:1.5;color:#899b95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.film-ch-time{font-size:11px;color:#8fa19b;font-variant-numeric:tabular-nums;align-self:start;padding-top:2px}
.film-ch-bar{position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--lime);transform-origin:left;transform:scaleX(var(--p,0));opacity:0;transition:opacity .25s}
.film-ch[aria-current=true]{background:#d4ff5010}
.film-ch[aria-current=true] .film-ch-title{color:#f4ffd9}
.film-ch[aria-current=true] .film-ch-time{color:var(--lime)}
.film-ch[aria-current=true] .film-ch-bar{opacity:1}
.film-ch:focus-visible{outline:2px solid var(--lime);outline-offset:-2px}

/* cover: poster, then a muted preview once the card is on screen */
.film-cover{position:absolute;inset:0;z-index:4;cursor:pointer;background:#000;transition:opacity .45s var(--ease),visibility .45s}
.film-player.is-started .film-cover{opacity:0;visibility:hidden;pointer-events:none}
.film-poster,.film-teaser{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.film-teaser{opacity:0;transition:opacity .9s}
.film-cover.has-teaser .film-teaser{opacity:1}
.film-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#000000b8 0%,#0000 48%),linear-gradient(90deg,#00000059,#0000 52%);pointer-events:none}
.film-start{position:absolute;left:22px;bottom:20px;z-index:2;display:flex;align-items:center;gap:14px;border:1px solid #ffffff1c;background:#0a0e0fb8;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;padding:7px 24px 7px 7px;text-align:left;border-radius:999px;box-shadow:0 14px 34px -16px #000c}
.film-start-icon{position:relative;width:54px;height:54px;border-radius:50%;background:var(--lime);display:grid;place-items:center;color:#141817;box-shadow:0 10px 34px #d4ff503d;transition:transform .35s var(--ease);flex:none}
.film-start-icon svg{width:23px;height:23px;fill:currentColor;margin-left:3px}
.film-start-icon:after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid #d4ff5099;opacity:0;animation:film-ring 2.6s var(--ease) .6s 3;pointer-events:none}
.film-start:hover .film-start-icon:after{animation:film-ring 1.8s var(--ease) infinite}
.film-cover:hover .film-start-icon{transform:scale(1.07)}
.film-start-text b{display:block;font-size:16px;font-weight:600;letter-spacing:.3px}
.film-start-text small{display:block;font-size:12px;color:#c6d2ce;margin-top:4px}
.film-start:focus-visible{outline:2px solid var(--lime);outline-offset:6px}
.film-badge{position:absolute;top:14px;left:14px;z-index:2;display:none;align-items:center;gap:7px;font-size:11px;color:#d8e2de;background:#00000080;border:1px solid #ffffff1f;border-radius:999px;padding:5px 10px 5px 9px;backdrop-filter:blur(6px)}
.film-cover.has-teaser .film-badge{display:flex}
.film-badge:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);animation:film-blink 1.6s infinite}

/* controls */
.film-ui{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:46px 12px 6px;background:linear-gradient(to top,#000000c4,#00000059 55%,#0000);transition:opacity .3s,transform .35s var(--ease)}
.film-player:not(.is-started) .film-ui{display:none}
.film-player.is-idle .film-ui{opacity:0;transform:translateY(8px);pointer-events:none}
.film-player.is-idle .film-frame{cursor:none}
.film-scrub{position:relative;height:22px;display:flex;align-items:center;cursor:pointer;touch-action:none;outline:none;margin:0 4px}
.film-segs{display:flex;gap:3px;width:100%;height:4px;transition:height .18s}
.film-scrub:hover .film-segs,.film-scrub:focus-visible .film-segs,.is-scrubbing .film-segs{height:7px}
.film-seg{position:relative;min-width:3px;height:100%;background:#ffffff33;border-radius:2px;overflow:hidden;transition:background .2s}
.film-seg.is-hover{background:#ffffff5c}
.film-seg i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0)}
.film-seg .film-seg-buf{background:#ffffff38}
.film-seg .film-seg-fill{background:var(--lime)}
.film-knob{position:absolute;top:50%;left:0;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px #d4ff5038;transform:scale(0);transition:transform .18s;pointer-events:none}
.film-scrub:hover .film-knob,.film-scrub:focus-visible .film-knob,.is-scrubbing .film-knob{transform:scale(1)}
.film-scrub:focus-visible{box-shadow:0 0 0 2px #d4ff5066;border-radius:6px}
.film-tip{position:absolute;bottom:28px;left:0;width:176px;margin-left:-88px;padding:4px;border-radius:9px;background:#0c1113f2;border:1px solid #ffffff1f;box-shadow:0 14px 34px #000a;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s}
.film-tip.is-on{opacity:1;transform:none}
.film-tip-thumb{display:block;width:100%;aspect-ratio:16/9;border-radius:6px;background-color:#151d20;background-repeat:no-repeat;background-size:1100% 100%}
.film-tip-text{display:block;padding:6px 4px 2px;font-size:12px;line-height:1.4;color:#dfe8e4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.film-tip-text b{color:var(--lime);font-weight:600;font-variant-numeric:tabular-nums;margin-right:7px}
.film-bar{display:flex;align-items:center;gap:4px;color:#fff;min-width:0}
.film-btn{width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:#fff;padding:0;flex:none;transition:background .2s}
.film-btn:hover{background:#ffffff1c}
.film-btn:focus-visible{outline:2px solid var(--lime);outline-offset:0}
.film-btn svg{width:22px;height:22px;fill:currentColor}
.film-time{font-size:12px;font-variant-numeric:tabular-nums;color:#cfd9d5;white-space:nowrap;padding:0 8px 0 4px}
.film-time b{color:#fff;font-weight:500}
.film-now{flex:1;min-width:0;font-size:12px;color:#c4cfcb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.film-now i{font-style:normal;color:var(--lime);margin-right:7px;font-variant-numeric:tabular-nums}
.film-flash{position:absolute;left:50%;top:50%;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:50%;background:#0000008f;display:grid;place-items:center;color:#fff;opacity:0;pointer-events:none;z-index:2}
.film-flash svg{width:34px;height:34px;fill:currentColor}
.film-spinner{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:3px solid #ffffff2e;border-top-color:var(--lime);opacity:0;transition:opacity .2s;pointer-events:none;z-index:2;animation:film-spin .9s linear infinite}
.film-player.is-waiting .film-spinner{opacity:1}
.film-player.is-ended .film-cover{opacity:1;visibility:visible;pointer-events:auto}

/* mini player while the film keeps playing further down the page */
.film-dock{position:absolute;top:8px;right:8px;z-index:5;display:none;gap:4px}
.film-dock .film-btn{width:32px;height:32px;background:#000000a6;border-radius:7px}
.film-dock .film-btn svg{width:18px;height:18px}
.film-player.is-docked .film-dock{display:flex}
.film-player.is-docked .film-frame{position:fixed;inset:auto 24px 24px auto;width:min(384px,34vw);height:auto;aspect-ratio:16/9;z-index:70;box-shadow:0 24px 60px #000000b3,0 0 0 1px #ffffff21}
.film-player.is-docked .film-ui{padding:28px 6px 2px}
.film-player.is-docked .film-now,.film-player.is-docked .film-full,.film-player.is-docked .film-time{display:none}
.film-player.is-docked .film-btn{width:32px;height:32px}
.film-player.is-docked .film-tip{display:none}
.film-frame:fullscreen{border-radius:0}
.film-frame:-webkit-full-screen{border-radius:0;width:100%;height:100%}

/* entry points elsewhere on the page */
.exhibit-heading>p{margin-left:auto}
.film-cta{display:inline-flex;align-items:center;gap:12px;padding:6px 18px 6px 6px;border-radius:999px;border:1px solid #d4ff5045;background:#d4ff500d;color:#eef6e8;line-height:1.3;white-space:nowrap;flex:none;transition:background .3s,border-color .3s,transform .4s var(--ease)}
.film-cta:hover{background:#d4ff501f;border-color:#d4ff5088}
.film-cta-icon{position:relative;width:36px;height:36px;border-radius:50%;background:var(--lime);display:grid;place-items:center;color:#141817;flex:none}
.film-cta-icon svg{width:17px;height:17px;fill:currentColor;margin-left:2px}
.film-cta-icon:after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid #d4ff5070;opacity:0;animation:film-ring 2.6s var(--ease) 1.2s 3}
.film-cta:hover .film-cta-icon:after{animation:film-ring 1.8s var(--ease) infinite}
.film-cta b{display:block;font-size:14px;font-weight:600}
.film-cta small{display:block;font-size:11px;color:#a9bab4;margin-top:1px}
.film-chip{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:999px;background:#121a1c;color:#eef5ea;font-size:12px;line-height:1;white-space:nowrap;transition:transform .35s var(--ease),background .25s}
.film-chip:hover{transform:translateY(-2px);background:#1f2a2d}
.film-chip i{width:22px;height:22px;border-radius:50%;background:var(--lime);display:grid;place-items:center;color:#141817}
.film-chip svg{width:11px;height:11px;fill:currentColor;margin-left:1px}
.film-chip b{font-weight:500;color:#c9d5d0;font-variant-numeric:tabular-nums}
.case-bottom .film-chip{margin-left:auto}
.film-chip[hidden]{display:none}
@media(min-width:701px) and (max-width:800px){
  .exhibit-stage{height:540px;min-height:540px}   /* the longest project text needs about 540px in this band */
}
.case-bottom .film-chip+.case-detail{margin-left:0}
.internship-copy .film-chip{margin:15px 0 0 18px;vertical-align:middle}
.exhibit-actions .film-chip{background:#ffffff0f;border:1px solid #ffffff21}
.exhibit-actions .film-chip:hover{background:#ffffff1c}
.usage-copy .film-chip{margin-top:16px}
.exhibition .film-chip:focus-visible,.film-cta:focus-visible{outline-color:var(--lime)}

@keyframes film-ring{0%{transform:scale(.9);opacity:.9}70%,100%{transform:scale(1.32);opacity:0}}
@keyframes film-blink{50%{opacity:.25}}
@keyframes film-spin{to{transform:rotate(360deg)}}

@media(max-width:1150px){
  .film-card{grid-template-columns:minmax(0,1fr) 260px}
  .film-ch{grid-template-columns:64px minmax(0,1fr) auto;gap:10px}
  .film-ch-thumb{width:64px}
}
@media(max-width:1000px){
  .film-card{grid-template-columns:minmax(0,1fr);gap:10px;padding:10px;border-radius:16px}
  .film-side{position:static}
  .film-side-head{position:static;padding:4px 6px 8px}
  .film-chapters{position:static;display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:0 0 4px;scrollbar-width:none}
  .film-chapters::-webkit-scrollbar{display:none}
  .film-chapters li{flex:0 0 172px;margin:0;scroll-snap-align:start}
  .film-card:not(.is-enhanced) .film-chapters li{flex-basis:200px;border:1px solid #ffffff12;border-radius:10px}
  .film-ch{grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:6px 6px 10px;background:#ffffff07;align-items:start}
  .film-ch-thumb{grid-column:1/-1;width:100%}
  .film-ch-title{font-size:13px}
  .film-ch-sub{font-size:11px}
  .film-ch-time{padding-top:1px}
  .film-player.is-docked .film-frame{width:min(340px,46vw)}
}
@media(max-width:900px){
  .exhibit-heading>p{display:none}
}
@media(max-width:700px){
  .film-section{padding-top:38px;padding-bottom:26px}
  .film-section .section-heading{margin-bottom:20px}
  .film-start{left:11px;bottom:11px;gap:10px;padding:5px 16px 5px 5px}
  .film-start-icon{width:40px;height:40px}
  .film-start-icon svg{width:18px;height:18px;margin-left:2px}
  .film-start-icon:after{inset:-4px}
  .film-start-text b{font-size:14px}
  .film-start-text small{font-size:11px;margin-top:2px}
  .film-badge{top:10px;left:10px}
  .film-ui{padding:34px 4px 2px}
  .film-now{display:none}
  .film-time{flex:1;padding-left:2px}
  .film-btn{width:36px;height:36px}
  .film-tip{width:140px;margin-left:-70px;bottom:24px}
  .film-cta{padding:5px 14px 5px 5px;gap:10px}
  .film-cta-icon{width:30px;height:30px}
  .film-cta-icon svg{width:14px;height:14px}
  .film-cta b{font-size:13px}
  .film-cta small{display:none}
  .film-note{font-size:11px}
  .internship-copy .film-chip{margin-left:0;display:flex;width:max-content}
  .exhibit-actions .film-chip{display:none}
}
@media(max-width:360px){
  .film-cta{padding-right:11px}
  .film-cta b{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .film-start-icon:after,.film-cta-icon:after,.film-badge:before{animation:none}
  .film-cover,.film-ui,.film-teaser{transition:none}
}