/* Ali Pournassari: graph-editor portfolio.
   Colour language: the X / Y / Z channel colours of an animation curve editor.
   Each page owns one channel (--ch); the playhead blends between them as it moves. */

@font-face{font-family:Bricolage;font-weight:800;font-display:swap;src:url(../fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:Bricolage;font-weight:600;font-display:swap;src:url(../fonts/bricolage-grotesque-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(../fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:500;font-display:swap;src:url(../fonts/inter-latin-500-normal.woff2) format("woff2")}

:root{
  --bg:#1b1d21;
  --panel:#23262b;
  --ink:#f2f1ed;
  --dim:#9a9ca3;
  --line:rgba(242,241,237,.14);
  --x:#ff4d5a; --y:#3ee08a; --z:#4a9dff; --w:#ffc233; --v:#b680ff;
  --ch:var(--ink);
  --phc:242,241,237;           /* playhead colour, rgb triplet, set by main.js */
  --display:Bricolage,"Arial Black",system-ui,sans-serif;
  --text:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --nav-h:76px;
  --gut:clamp(18px,4vw,56px);
  --ease:cubic-bezier(.2,.8,.2,1);
}
[data-page=games]{--ch:var(--y)}
[data-page=movies]{--ch:var(--x)}
[data-page=indie]{--ch:var(--w)}
[data-page=tools]{--ch:var(--z)}
[data-page=about]{--ch:var(--v)}
[data-page=learn]{--ch:#ff9a4d}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{display:flex;flex-direction:column;min-height:100svh;overflow-x:hidden;font:400 16px/1.6 var(--text);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ch);color:#111}
:focus-visible{outline:2px solid var(--ch);outline-offset:3px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* film grain over everything, very quiet */
body::before{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* graph-editor stage behind everything */
.stage{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%,rgba(255,255,255,.045),transparent 70%),
    linear-gradient(rgba(242,241,237,.098) 1px,transparent 1px) 0 0/96px 96px,
    linear-gradient(90deg,rgba(242,241,237,.098) 1px,transparent 1px) 0 0/96px 96px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 45%,#000 30%,transparent 100%);
          mask-image:radial-gradient(ellipse 90% 80% at 50% 45%,#000 30%,transparent 100%)}
.stage::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/16px 16px;opacity:.245}
html.can-grab,html.can-grab body,html.can-grab .hero{cursor:grab}
html.grabbing,html.grabbing *{cursor:grabbing!important;user-select:none;-webkit-user-select:none}
[data-page]:not([data-page=home]){--cv:.8}
.curves{position:absolute;inset:0;width:100%;height:100%;opacity:0;animation:fade 1.6s .2s forwards}
@keyframes fade{to{opacity:var(--cv,1)}}

/* header */
.top{position:relative;z-index:5;isolation:isolate;display:flex;align-items:center;justify-content:space-between;padding:18px var(--gut)}
/* the logo and name stay pinned while the page scrolls, on every screen, on a small glass capsule (a nod to Apple's
   Liquid Glass): it blurs and slightly bends what passes behind it, with a bright top edge and a faint rim.
   It fades in once you scroll, so the page at rest looks the same. */
.top{position:sticky;top:0}
.logo{position:relative;padding:7px 20px 7px 14px;margin:-7px 0 -7px -14px;border-radius:999px}
/* clear glass, in the spirit of Apple's Liquid Glass: you see through it, the edges bend and magnify what is behind
   them, and bright highlights run along the rim. No tint box. The logo and name switch between light and dark
   depending on what is behind them (data-tone, set by main.js), so they stay readable over any poster. */
.logo::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.025) 50%,rgba(255,255,255,.08));
  -webkit-backdrop-filter:blur(8px) saturate(1.8) brightness(1.06);backdrop-filter:blur(8px) saturate(1.8) brightness(1.06);
  backdrop-filter:url(#apglass) blur(2px) saturate(1.8) brightness(1.06);
  box-shadow:inset 2px 2px 3px -1px rgba(255,255,255,.75),inset -2px -2px 3px -1px rgba(255,255,255,.42),inset 0 0 0 1px rgba(255,255,255,.16),inset 0 0 22px rgba(255,255,255,.12),0 10px 28px rgba(0,0,0,.28)}
.top.glass .logo::before{opacity:1}
.logo-name,.logo-slot svg{transition:color .25s,stroke .25s}
.top.glass .logo-name{text-shadow:0 1px 6px rgba(0,0,0,.35)}
.top[data-tone=light] .logo-name{color:#101214;text-shadow:0 1px 6px rgba(255,255,255,.45)}
.top[data-tone=light] .logo-slot svg{stroke:#101214}
.top.glass .snd{color:var(--ink);filter:drop-shadow(0 1px 4px rgba(0,0,0,.75))} /* so does the sound button on the right */
.logo{display:flex;align-items:center;gap:14px}
.logo-slot{display:grid;place-items:center;width:48px;height:48px}
.logo-slot svg,.logo-slot img,.logo-slot video{width:100%;height:100%;object-fit:contain}
.logo-slot .draw{stroke-dasharray:140;stroke-dashoffset:140;animation:draw 1.5s .3s var(--ease) forwards}
.logo-slot .draw2{animation-delay:.7s}
/* the logo writes itself in on Home only; on every other page, even after a refresh, it is simply there */
[data-page]:not([data-page=home]) .logo-slot .draw{animation:none;stroke-dashoffset:0}
@keyframes draw{to{stroke-dashoffset:0}}
.logo-name{font:600 15px/1 var(--display);letter-spacing:.04em}
.meta{display:flex;align-items:center;gap:18px;font-size:13px;color:var(--dim)}
[data-split] .ch{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.snd{display:grid;place-items:center;width:34px;height:34px;margin-right:-8px;border-radius:50%;color:var(--dim);transition:color .2s,background .2s}
.snd:hover,.snd:focus-visible{color:var(--ink);background:rgba(242,241,237,.08)}
.snd svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.snd .cross{display:none}
.snd.off .waves{display:none}
.snd.off .cross{display:block}
.fc{min-width:4ch;text-align:right;color:rgb(var(--phc))}

/* big letters (split by fx.js) */
.ch{display:inline-block;will-change:transform;opacity:0}
.no-js .ch{opacity:1}

/* home */
[data-page=home]{height:100svh;overflow:hidden}
.hero{position:relative;z-index:3;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;padding:0 var(--gut) calc(var(--nav-h) + 24px)}
.name{font:800 22vw/.84 var(--display);letter-spacing:-.025em;text-transform:uppercase;touch-action:none;user-select:none;-webkit-user-select:none}
.name .line{display:block;width:max-content;white-space:nowrap}
.name .ch{color:color-mix(in srgb,var(--hit,#fff) calc(var(--h,0)*100%),var(--ink))}
.tag,.sub{text-shadow:0 0 14px var(--bg),0 0 5px var(--bg)}
.tag{margin-top:clamp(18px,3.5vh,36px);font:600 clamp(20px,2.6vw,34px)/1.15 var(--display);animation:rise .9s 1.5s var(--ease) both}
.sub{margin-top:8px;color:var(--dim);font-size:clamp(14px,1.3vw,17px);animation:rise .9s 1.65s var(--ease) both}
.hero .btn{align-self:flex-start;margin-top:clamp(20px,4vh,36px);animation:rise .9s 1.8s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}

.btn{display:inline-flex;align-items:center;gap:12px;padding:14px 24px;border:1px solid var(--ink);border-radius:100px;font:500 15px/1 var(--text);transition:background .25s,color .25s,border-color .25s}
.btn:hover{background:var(--ch,var(--ink));border-color:var(--ch,var(--ink));color:#111}
.btn .tri{width:0;height:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.btn .tri.down{transform:rotate(90deg)}
.btn.is-off{border-style:dashed;border-color:var(--line);color:var(--dim);pointer-events:none}

/* inner pages */
.page{position:relative;z-index:3;flex:1;width:100%;max-width:1400px;margin:0 auto;padding:clamp(16px,4vh,48px) var(--gut) calc(var(--nav-h) + 64px)}
.title{white-space:nowrap;font:800 clamp(40px,11vw,190px)/.9 var(--display);letter-spacing:-.025em;text-transform:uppercase;touch-action:pan-y}
.title .ch{color:color-mix(in srgb,var(--ch) calc(var(--h,0)*100%),var(--ink))}
.lede{max-width:34em;margin:clamp(22px,4vh,40px) 0 clamp(36px,7vh,72px);font:600 clamp(20px,2.3vw,30px)/1.25 var(--display);color:var(--ink)}
.lede span{color:var(--dim)}
.group{margin:clamp(40px,7vh,72px) 0 8px;font:600 clamp(18px,1.8vw,24px)/1 var(--display);color:var(--ch)}

/* project rows */
.work{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:end;padding:28px 0 36px;border-top:1px solid var(--line)}
.work h3{font:800 clamp(26px,3.4vw,48px)/1 var(--display);letter-spacing:-.02em}
.work .where{margin:10px 0 14px;color:var(--ch);font-weight:500;font-size:15px}
.work p:last-child{color:var(--dim);max-width:30em}
.media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--panel);border:1px solid var(--line)}
.media::before{content:"";position:absolute;inset:-60%;background:repeating-linear-gradient(115deg,transparent 0 16px,rgba(255,255,255,.04) 16px 17px);animation:drift 24s linear infinite}
.media::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 110%,rgb(from var(--ch) r g b/.28),transparent 60%)}
@supports not (color:rgb(from red r g b)){.media::after{display:none}}
@keyframes drift{to{transform:translateX(34px)}}
.media img,.media video,.media iframe{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover;border:0}
.media .soon{position:absolute;z-index:1;left:16px;bottom:14px;font-size:13px;color:var(--dim)}
.play{position:absolute;z-index:1;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;transition:background .25s,border-color .25s}
.play::before{content:"";margin-left:4px;border-left:13px solid var(--ink);border-top:8px solid transparent;border-bottom:8px solid transparent;transition:border-color .25s}
.work:hover .play{background:var(--ch);border-color:var(--ch)}
.work:hover .play::before{border-left-color:#111}

/* tool rows: each tool is a keyframe on the timeline */
.tool{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:6px 18px;align-items:baseline;padding:24px 0;border-top:1px solid var(--line)}
.tool .key{width:14px;height:14px;background:var(--ch);transform:rotate(45deg) translateY(3px);transition:transform .35s var(--ease)}
.tool:hover .key{transform:rotate(225deg) scale(1.5) translateY(3px)}
.tool h3{font:800 clamp(24px,3vw,40px)/1.05 var(--display);letter-spacing:-.02em}
.tool p{grid-column:2;color:var(--dim);max-width:34em}
.tool .on{grid-column:3;grid-row:1;color:var(--dim);font-size:14px}

/* about */
.about{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.me{display:grid;gap:clamp(20px,3vw,32px);justify-items:start}
.me img{display:block;width:180px;height:180px;object-fit:cover;border:1px solid var(--line);border-radius:4px}
.bio{font:600 clamp(22px,2.8vw,40px)/1.18 var(--display);letter-spacing:-.01em}
.bio span{color:var(--dim)}
.links{list-style:none;border-bottom:1px solid var(--line)}
.links a,.links .off{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 0;border-top:1px solid var(--line);font:500 18px/1.2 var(--text);transition:padding .3s var(--ease),color .2s}
.links a:hover{padding-left:12px;color:var(--ch)}
.links .off{color:var(--dim)}
.links small{font-size:13px;color:var(--dim);font-weight:400}
/* about: no ruled lines between links */
[data-page=about] .links{border-bottom:0}
[data-page=about] .links a{border-top:0;padding:12px 0;font-size:20px}
[data-page=about] .links a:hover{padding-left:0;color:var(--ch)}
[data-page=about] .links small{font-size:14px}

/* timeline navigation */
.timeline{touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;position:fixed;left:0;right:0;bottom:0;height:var(--nav-h);z-index:40;background:rgba(27,29,33,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.tl-ruler{position:absolute;left:0;right:0;top:0;height:16px;
  background:
    repeating-linear-gradient(90deg,rgba(242,241,237,.55) 0 1px,transparent 1px 60px) 0 0/100% 15px no-repeat,
    repeating-linear-gradient(90deg,rgba(242,241,237,.25) 0 1px,transparent 1px 12px) 0 0/100% 7px no-repeat}
.tl-keys{list-style:none;position:absolute;left:0;right:0;top:16px;bottom:0}
.tl-keys li{position:absolute;top:0;bottom:0;left:calc(var(--p)*100%);transform:translateX(-50%)}
.tl-keys a{display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;padding:11px clamp(8px,2vw,22px) 0;font:500 14px/1 var(--text);color:var(--dim);transition:color .2s}
.tl-keys .key{width:11px;height:11px;background:var(--ink);opacity:.35;transform:rotate(45deg);transition:transform .35s var(--ease),opacity .2s}
.timeline.scrubbing{cursor:grabbing}
.tl-keys a{cursor:pointer;-webkit-user-drag:none}
.tl-keys a:hover,.tl-keys a:focus-visible,.tl-keys a[aria-current],.tl-keys a.snap{color:var(--ink)}
.tl-keys a:hover .key,.tl-keys a:focus-visible .key,.tl-keys a[aria-current] .key,.tl-keys a.snap .key{background:var(--k);opacity:1;transform:rotate(45deg) scale(1.45)}
.tl-head{position:absolute;top:0;bottom:0;left:0;width:0;pointer-events:none;z-index:2}
.tl-head::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:rgb(var(--phc))}
.tl-flag{white-space:nowrap;position:absolute;left:0;top:-1px;transform:translateX(-50%);padding:3px 7px 6px;background:rgb(var(--phc));color:#111;font:500 11px/1 var(--text);clip-path:polygon(0 0,100% 0,100% 72%,50% 100%,0 72%)}
.playline{position:fixed;top:0;bottom:var(--nav-h);left:0;width:1px;z-index:2;pointer-events:none;background:rgba(var(--phc),.275)}

.foot{position:relative;z-index:3;padding:0 var(--gut) calc(var(--nav-h) + 28px);color:var(--dim);font-size:13px}
.page + .foot{margin-top:-40px}

/* page transitions: the playhead does the talking, the page just steps aside */
main{transition:opacity .38s,transform .38s var(--ease),filter .38s}
body.leaving main{opacity:0;transform:translateY(-10px);filter:blur(6px)}
[data-page]:not([data-page=home]) .page{animation:enter .6s var(--ease) both}
@keyframes enter{from{opacity:0;transform:translateY(12px)}}

/* reel modal */
dialog.reel{border:0;padding:0;background:transparent;width:min(1100px,92vw);max-width:none;color:var(--ink);margin:auto}
dialog.reel::backdrop{background:rgba(10,11,13,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.reel-box{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--line);display:grid;place-items:center;text-align:center;padding:24px;color:var(--dim)}
.reel-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.reel-close{display:block;margin:0 0 12px auto;padding:8px 14px;font:500 14px/1 var(--text);border:1px solid var(--line);border-radius:100px}
.reel-close:hover{background:var(--ink);color:#111}

/* small screens */
@media (max-width:760px){
  :root{--nav-h:72px}
  .work,.about{grid-template-columns:1fr}
  .work{align-items:start}
  .tool{grid-template-columns:28px minmax(0,1fr)}
  .tool .on{grid-column:2;grid-row:auto}
  .tl-keys a{font-size:11px;padding-left:1px;padding-right:1px;letter-spacing:-.01em}
  .meta .city{display:none}
  .logo-name{font-size:13px}
}
@media (max-height:520px) and (orientation:landscape){.tag,.sub{display:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .ch{opacity:1}
}
.title + .about{margin-top:clamp(28px,5vh,56px)}

.status{margin-top:18px;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--dim);text-shadow:0 0 14px var(--bg),0 0 5px var(--bg);animation:rise .9s 1.9s var(--ease) both}
.status::before{content:"";width:8px;height:8px;background:rgb(var(--phc));transform:rotate(45deg)}

/* contact */
[data-page=contact]{--ch:#ff8fc7}
.contact{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.form{display:grid;gap:22px;padding:clamp(20px,3vw,36px);background:#23262b;border:1px solid var(--line);border-radius:16px}
.field{display:grid;gap:8px}
.field span{font:500 15px/1.2 var(--text);color:var(--ink)}
.field input,.field textarea{width:100%;padding:15px 16px;font:400 18px/1.4 var(--text);color:var(--ink);background:#15171a;border:1px solid rgba(242,241,237,.22);border-radius:10px;outline:0;resize:vertical;transition:border-color .2s,box-shadow .2s}
.field input::placeholder,.field textarea::placeholder{color:#8d8f97}
.field input:focus,.field textarea:focus{border-color:var(--ch);box-shadow:0 0 0 3px rgba(255,143,199,.22)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:6px}
.form .btn{background:var(--ch);border-color:var(--ch);color:#111;font-weight:500}
.form .btn:hover{background:#fff;border-color:#fff}
.form .btn[disabled]{opacity:.5;pointer-events:none}
.note{font-size:15px;color:var(--dim)}
.note.ok{color:var(--y)}
.note.bad{color:#ff7a84}
.aside{color:#c9cacf;font-size:18px;display:grid;gap:14px;max-width:24em}
@media (max-width:760px){.contact{grid-template-columns:1fr}}

/* sliding pages */
.strip{position:fixed;left:0;right:0;top:0;bottom:var(--nav-h);z-index:4;overflow:hidden;pointer-events:none}
.pane{position:absolute;inset:0;padding-top:var(--top-h,84px);display:flex;flex-direction:column;will-change:transform}
.pane *,.pane *::before,.pane *::after{animation:none!important}
.pane .hero{padding-bottom:24px}
body.sliding>main,body.sliding>.foot{visibility:hidden}
html.arrive .page,html.arrive .tag,html.arrive .sub,html.arrive .status,html.arrive .hero .btn{animation:none!important;opacity:1}
html.arrive .curves{animation:none!important;opacity:var(--cv,1)}
.name{font-size:min(10.5vw,210px)}

/* tools: one column per program */
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px);align-items:start}
.col h2{font:800 clamp(30px,3.4vw,52px)/1 var(--display);letter-spacing:-.02em;padding-bottom:16px;border-bottom:2px solid var(--ch)}
.cols .tool{grid-template-columns:24px minmax(0,1fr);gap:4px 14px;padding:20px 0}
.cols .tool h3{font-size:clamp(20px,1.8vw,26px)}
.cols .tool .on{grid-column:2;grid-row:auto;font-size:13px;color:var(--ch)}
.cols .tool p{grid-column:2;font-size:16px}
@media (max-width:980px){.cols{grid-template-columns:1fr}}

/* movies: reel on top, then a poster wall */
.reel-tile{position:relative;display:block;width:100%;aspect-ratio:21/9;max-height:min(46vh,400px);margin-bottom:clamp(28px,5vw,56px);overflow:hidden;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:4px;transition:border-color .25s}
.reel-tile::before{content:"";position:absolute;inset:-60%;background:repeating-linear-gradient(115deg,transparent 0 16px,rgba(255,255,255,.04) 16px 17px);animation:drift 24s linear infinite}
.reel-tile::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 120%,rgb(from var(--ch) r g b/.3),transparent 60%)}
.reel-tile .play{z-index:1}
.reel-tile .rt{position:absolute;z-index:1;left:clamp(16px,2.4vw,32px);bottom:clamp(14px,2vw,26px);display:grid;gap:2px}
.reel-tile b{font:800 clamp(24px,3.4vw,48px)/1 var(--display);letter-spacing:-.02em}
.reel-tile small{font-size:15px;color:var(--dim)}
.reel-tile:hover{border-color:var(--ch)}
.reel-tile:hover .play,.poster:hover .play{background:var(--ch);border-color:var(--ch)}
.reel-tile:hover .play::before,.poster:hover .play::before{border-left-color:#111}
.posters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.4vw,36px)}
.poster{display:grid;gap:12px;text-align:left}
.poster .art{position:relative;display:block;aspect-ratio:2/3;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:4px;transition:transform .45s var(--ease),border-color .25s}
.poster .art::before{content:"";position:absolute;inset:-60%;background:repeating-linear-gradient(115deg,transparent 0 16px,rgba(255,255,255,.04) 16px 17px)}
.poster .art::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 120%,rgb(from var(--ch) r g b/.32),transparent 65%)}
.poster img,.poster video{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover}
.poster:hover .art{transform:translateY(-6px);border-color:var(--ch)}
.poster .soon{position:absolute;z-index:1;left:14px;bottom:12px;font-size:13px;color:var(--dim)}
.poster .play{width:52px;height:52px;margin:-26px 0 0 -26px}
.poster .cap{display:grid;gap:2px}
.poster .cap b{font:800 clamp(16px,1.7vw,22px)/1.1 var(--display);letter-spacing:-.01em}
.poster .cap small{font-size:14px;color:var(--dim)}
@media (max-width:560px){.posters{grid-template-columns:repeat(2,minmax(0,1fr))}.reel-tile{aspect-ratio:16/9}}

.work .media{display:block}
/* learn: workshop columns */
.workshops{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(20px,2.4vw,36px);padding-top:8px}
.workshop{display:grid;grid-template-rows:auto 1fr;gap:18px;align-content:start}
.workshop .media{display:block}
.workshop .media{transition:transform .45s var(--ease),border-color .25s}
.workshop:hover .media{transform:translateY(-6px);border-color:var(--ch)}
.workshop:hover .media .play{background:var(--ch);border-color:var(--ch)}
.workshop:hover .media .play::before{border-left-color:#111}
.workshop h3{font:800 clamp(20px,2vw,28px)/1.08 var(--display);letter-spacing:-.015em}
.workshop .where{margin:8px 0 12px;color:var(--ch);font-weight:500;font-size:15px}
.workshop .desc{color:var(--dim);max-width:30em}
.workshop .acts{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px}
.workshop .acts .btn{padding:12px 20px;font-size:14px;color:var(--ink)}

.acts{margin-top:18px;display:flex;flex-wrap:wrap;gap:12px}
.work .acts .btn{padding:12px 20px;font-size:14px;color:var(--ink)}
.more{margin-top:clamp(28px,5vw,56px)}
.more .btn{color:var(--ink)}
.work:hover .media .play{background:var(--ch);border-color:var(--ch)}

/* each program keeps its own colour */
.col[data-prog=maya]{--pc:#4a9dff}
.col[data-prog=blender]{--pc:#f5792a}
.col[data-prog=unity]{--pc:#eceef2}
.col h2{border-bottom-color:var(--pc,var(--ch))}
.cols .tool .key{background:var(--pc,var(--ch))}
.cols .tool .on{color:var(--pc,var(--ch))}

.hero{position:relative;z-index:3}

/* posters: slate timecode, keyframe diamond, hover-to-play */
.poster .tc,.feature .tc{position:absolute;z-index:4;top:10px;left:12px;font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;color:var(--ink);background:rgba(20,22,25,.72);padding:5px 7px;border-radius:2px;opacity:.55;transition:opacity .25s}
.poster .tc::before,.feature .tc::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;background:var(--ch);transform:rotate(45deg);vertical-align:0}
.poster:hover .tc,.poster.on .tc,.feature:hover .tc,.feature.on .tc{opacity:1}
.poster.on .art,.poster:focus-visible .art{border-color:var(--ch)}
.poster.on .play,.poster.on .soon,.feature.on .play,.feature.on .soon{opacity:0;transition:opacity .2s}
.poster video,.feature video{opacity:0;transition:opacity .3s}
.poster.on video,.feature.on video{opacity:1}
.poster.live video{opacity:1}
.poster.on .art::after{background:radial-gradient(circle at 50% 120%,rgb(from var(--ch) r g b/.5),transparent 65%)}

/* indie: one wide feature */
.feature{display:grid;gap:clamp(16px,2.4vw,28px);padding-top:8px;cursor:pointer;outline:none}
.feature .fm{position:relative;aspect-ratio:21/9;max-height:62vh;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:4px;transition:border-color .25s,transform .45s var(--ease)}
.feature .fm::before{content:"";position:absolute;inset:-60%;background:repeating-linear-gradient(115deg,transparent 0 16px,rgba(255,255,255,.04) 16px 17px);animation:drift 24s linear infinite}
.feature .fm::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 120%,rgb(from var(--ch) r g b/.38),transparent 60%)}
.feature .fm video{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover}
.feature .play{z-index:3}
.feature .soon{position:absolute;z-index:3;left:16px;bottom:14px;font-size:13px;color:var(--dim)}
.feature:hover .fm,.feature:focus-visible .fm{border-color:var(--ch)}
.feature:hover .play{background:var(--ch);border-color:var(--ch)}
.feature .ft{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:6px clamp(20px,4vw,64px);align-items:start}
.feature h3{grid-row:span 2;font:800 clamp(40px,7vw,104px)/.9 var(--display);letter-spacing:-.03em}
.feature .where{color:var(--ch);font-weight:500;font-size:15px;align-self:end}
.feature .ft p:last-child{color:var(--dim);max-width:34em}
@media (max-width:700px){.feature .fm{aspect-ratio:16/10}.feature .ft{grid-template-columns:1fr}.feature h3{grid-row:auto}}