/* filmsite shared pieces on top of film.css (base): transitions, chat, stories, new home blocks, footer, reading pages */

/* ── arrive / leave through black ── */
.fade{position:fixed;inset:0;z-index:95;background:#000;pointer-events:none;opacity:1;transition:opacity .6s var(--ease)}
html.arrived .fade{opacity:0}
html.leaving .fade{opacity:1;transition:opacity .3s ease}
html.leave-push .fade{transition:opacity .4s ease .25s}
html.leave-push .stage.active .copy{filter:blur(10px);opacity:0;transition:filter .5s ease,opacity .5s ease}
html.leave-push .screen{transition:transform .7s cubic-bezier(.6,0,.85,.35)!important;transform:translate(-50%,-50%) scale(2.6)!important}
html.leave-push #film{transform:scale(1.9);transition:transform .7s cubic-bezier(.6,0,.85,.35)}
@media (prefers-reduced-motion:reduce){.fade{transition:none}}

/* ── header / menu additions ── */
.menu-in{display:flex;flex-direction:column;gap:4px}
.menu-chat{margin-top:28px;display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.menu-chat:hover{color:var(--ink)}
.ar{width:1.05em;height:1.05em;flex:none;transition:transform .25s var(--ease)}
.pill:hover .ar{transform:translate(2px,-2px)}
.pill.tone{background:var(--accent);color:#08070c;box-shadow:0 8px 24px -10px var(--accent),inset 0 1px 0 rgb(255 255 255/.25)}
.pill.tone:hover{transform:translateY(-1px)}
.ic{width:100%;height:100%}

/* ── client film on glass, floating where the object is ── */
.screen{position:fixed;left:72%;top:50%;z-index:9;width:min(46vw,640px);aspect-ratio:16/9;pointer-events:none;opacity:0;visibility:hidden;
  transform:translate(-50%,-50%);will-change:transform,opacity}
.screen.tall{width:min(22vw,300px);aspect-ratio:9/16}
.scr{width:100%;height:100%;border-radius:20px;padding:6px;overflow:hidden;box-shadow:0 40px 120px rgb(0 0 0/.6),0 0 80px -20px var(--accent)}
.scr video{width:100%;height:100%;object-fit:cover;border-radius:15px;display:block;background:#000}
.screen::after{content:"";position:absolute;left:6%;right:6%;top:100%;height:38%;margin-top:14px;border-radius:20px;
  background:linear-gradient(rgb(255 255 255/.08),transparent);transform:scaleY(-1);filter:blur(6px);opacity:.6}

/* ── orbit: crew tokens on a ring. Positions come from site.js (depth: back tokens shrink, fade and drop their label) ── */
.orbit{position:relative;height:260px;width:min(760px,90vw);margin:6px auto 0}
.orbit-in{position:absolute;inset:0}
.tk{position:absolute;left:50%;top:42%;width:110px;margin-left:-55px;display:flex;flex-direction:column;align-items:center;gap:10px;will-change:transform,opacity}
.tk b{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:500;transition:opacity .3s ease}
@media (prefers-reduced-motion:reduce){.orbit{height:auto}.orbit-in{position:static;display:flex;flex-wrap:wrap;gap:18px;justify-content:center}.tk{position:static;margin:0}}
.token{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;padding:22px;color:var(--ink);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.3),0 20px 60px -20px var(--accent),0 0 0 1px rgb(255 255 255/.06)}
.token::after{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(60% 50% at 35% 25%,rgb(255 255 255/.32),transparent 60%);pointer-events:none}
.token .ic{color:color-mix(in srgb,var(--accent) 55%,#fff)}
@media (prefers-reduced-motion:reduce){.orbit-in,.tk>*{animation:none}.orbit{height:auto}.orbit-in{position:static;display:flex;flex-wrap:wrap;gap:18px;justify-content:center}.tk{position:static;margin:0;transform:none}}

/* ── rows: glass panels stacked in depth ── */
.rows{display:flex;flex-direction:column;gap:10px;perspective:1500px;margin-top:6px}
.row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;border-radius:18px;
  transform:translateZ(calc(20px + var(--i) * 18px)) rotateY(-9deg);transition:transform .45s var(--ease),background-color .3s ease}
.stage.right .row{transform:translateZ(calc(20px + var(--i) * 18px)) rotateY(9deg)}
.row b{display:block;font-size:19px;font-weight:600;letter-spacing:-.025em}
.row small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.row .ar{opacity:.6}
@media (hover:hover) and (pointer:fine){ .row:hover{transform:translate3d(-12px,-4px,120px) rotateY(-2deg);background:color-mix(in srgb,var(--accent) 14%,transparent)} }

/* ── film index ── */
.films button{grid-template-columns:22px 72px 1fr auto}
.films i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--muted)}
.films .play{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:rgb(255 255 255/.08)}
.films .play::before{content:"";border-left:8px solid var(--ink);border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}

/* ── tokens 2x2 (the practice) ── */
.tokens{display:grid;grid-template-columns:repeat(2,minmax(0,150px));gap:20px 28px;margin-top:6px}
.tcell{display:flex;flex-direction:column;align-items:center;gap:12px;padding:10px;border-radius:20px;transition:background-color .25s ease}
.tcell b{font-size:15px;font-weight:600;letter-spacing:-.02em}
.tcell .token{width:96px;height:96px;transition:transform .5s var(--ease)}
@media (hover:hover) and (pointer:fine){ .tcell:hover .token{transform:translateY(-4px) rotate(-6deg)} }

/* ── story dialogs (FLIP from their card) ── */
dialog.story{margin:auto;width:min(680px,92vw);max-height:84vh;overflow:auto;padding:0;border:0;color:var(--ink);border-radius:26px;
  background:linear-gradient(160deg,rgb(255 255 255/.11),rgb(255 255 255/.045) 50%,rgb(255 255 255/.06)),rgb(16 14 26/.72)}
dialog.story::backdrop{background:rgb(5 4 9/.5);backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%)}
.st-in{padding:40px 40px 36px;display:flex;flex-direction:column;gap:16px}
.st-in h2{font-size:clamp(32px,4.4vw,54px);font-weight:650;letter-spacing:-.055em;line-height:.95}
.st-line{font-size:19px;color:var(--ink)}
.st-in p{color:var(--muted);max-width:56ch}
.st-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.st-chips span{padding:7px 13px;border-radius:999px;font-size:13px;background:rgb(255 255 255/.07);box-shadow:inset 0 0 0 1px rgb(255 255 255/.14)}
.st-x{position:absolute;top:16px;right:18px;width:40px;height:40px;border-radius:50%;font-size:22px;background:rgb(255 255 255/.08)}

/* ── ending lines over the ring ── */
.end-lines{display:flex;flex-direction:column;gap:.05em;font-size:clamp(34px,4.2vw,64px);font-weight:650;letter-spacing:-.055em;line-height:1}
.grad,.title span:last-child{background:linear-gradient(90deg,#f4f1f8,color-mix(in srgb,var(--accent) 70%,#fff) 45%,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;
  padding:.06em .16em .26em .08em;margin:-.06em -.16em -.26em -.08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ── chat window ── */
dialog.chat{margin:auto;width:min(460px,94vw);height:min(640px,86vh);padding:0;border:0;border-radius:28px;color:var(--ink);display:none;flex-direction:column;
  background:linear-gradient(160deg,rgb(255 255 255/.12),rgb(255 255 255/.04) 50%,rgb(255 255 255/.06)),rgb(14 12 22/.74)}
dialog.chat[open]{display:flex}
dialog.chat::backdrop{background:rgb(5 4 9/.42);backdrop-filter:blur(20px) saturate(125%);-webkit-backdrop-filter:blur(20px) saturate(125%)}
.chat-head{display:flex;justify-content:space-between;align-items:center;padding:18px 18px 10px 22px}
.chat-x{width:38px;height:38px;border-radius:50%;font-size:20px;background:rgb(255 255 255/.08)}
.chat-log{flex:1;overflow:auto;padding:8px 18px 12px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:84%;padding:11px 15px;border-radius:20px;font-size:15px;line-height:1.45;white-space:pre-wrap;animation:msgin .45s var(--ease)}
.msg.them{background:rgb(255 255 255/.1);border-bottom-left-radius:6px}
.msg.me{align-self:flex-end;background:var(--ink);color:#000;border-bottom-right-radius:6px}
.msg.typing{display:flex;gap:4px;padding:15px 16px}
.msg.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink);opacity:.5;animation:dot 1s infinite}
.msg.typing i:nth-child(2){animation-delay:.15s}.msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes msgin{from{opacity:0;transform:translateY(8px) scale(.98);filter:blur(4px)}}
.chat form{display:flex;gap:8px;padding:12px;margin:0 12px 12px;border-radius:22px;background:rgb(255 255 255/.06);box-shadow:inset 0 0 0 1px rgb(255 255 255/.12)}
.chat textarea{flex:1;resize:none;background:none;border:0;color:var(--ink);font:inherit;font-size:15px;outline:none;padding:6px 8px;max-height:120px}
.send{width:40px;height:40px;border-radius:50%;background:var(--ink);color:#000;padding:10px;flex:none;align-self:flex-end}
.chat-sent{display:none;margin:0 22px 6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.chat.sent .chat-sent{display:block}

/* ── cursor label ── */
.ring::after{content:attr(data-label);position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:#000;opacity:0;transition:opacity .2s ease}
.ring.big[data-label]:not([data-label=""]){width:84px;height:84px;margin:-42px;background:var(--ink)}
.ring.big[data-label]:not([data-label=""])::after{opacity:1}

/* ── footer ── */
.foot{position:relative;z-index:5;display:flex;justify-content:space-between;gap:16px;padding:28px var(--g);font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.foot a:hover{color:var(--ink)}
.film-foot{position:fixed;left:0;right:0;bottom:0;opacity:0;transition:opacity .5s ease;pointer-events:none}
html.at-end .film-foot{opacity:1;pointer-events:auto}

/* ── reveal on normal pages ── */
html.js .rv{opacity:0;transform:scale(.97);filter:blur(6px);transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1),filter .55s cubic-bezier(.2,.7,.2,1)}
html.js .rv.in{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none;filter:none}}

/* ── reading pages (privacy, accessibility) ── */
.readpage body{background:#0b0a10}
.read{max-width:680px;margin:0 auto;padding:130px 20px 80px}
.read h1{font-size:clamp(30px,6vw,44px);font-weight:650;letter-spacing:-.04em;margin:18px 0 6px}
.read h2{font-size:19px;font-weight:600;margin:34px 0 8px}
.read p{color:#cdc8d8;font-size:16px;line-height:1.65;margin-bottom:12px}
.read .upd{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.back-l{font-size:14px;color:var(--muted)}

@media (max-width:820px){
  .screen{left:50%;top:27%;width:86vw}
  .screen.tall{width:38vw;top:24%}
  .orbit{height:200px}.tk{width:80px;margin-left:-40px}
  .token{width:62px;height:62px;padding:16px}
  .tokens{grid-template-columns:repeat(4,1fr);gap:8px}.tcell .token{width:64px;height:64px}.tcell b{font-size:12px}
  .row{transform:none!important;padding:12px 16px}.row b{font-size:16px}
  .st-in{padding:30px 22px}
  dialog.chat{width:100vw;height:100svh;max-height:none;max-width:none;border-radius:0}
  .foot{flex-direction:column;gap:6px}
}

/* back pill (case + about pages) */
.back{position:fixed;left:var(--g);top:76px;z-index:30;height:36px;font-size:13px}

/* ── card: the studio in one screen, inside the ring ── */
.cardpage body{overflow:hidden}
.card-pg{--d:min(100vw,64svh,660px);position:fixed;inset:0;display:grid;place-items:center;background:#000;overflow:hidden}
.card-ring{position:absolute;left:50%;top:50%;height:100svh;max-width:none;width:auto;min-width:100vw;object-fit:cover;transform:translate(-50%,-50%) scale(1.02);animation:breathe 8s ease-in-out infinite}
@keyframes breathe{50%{transform:translate(-50%,-50%) scale(1.06)}}
.card-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:calc(var(--d) * .025);text-align:center}
.card-name{font-size:calc(var(--d) * .085);font-weight:700;letter-spacing:-.04em;line-height:1}
.card-role{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.card-qr{display:block;width:calc(var(--d) * .3);aspect-ratio:1;padding:12px;margin-top:8px;border-radius:22px;background:#fff;box-shadow:0 0 60px -6px var(--accent,#9b6bff)}
.card-qr svg{width:100%;height:100%;display:block}
.card-url{font-size:13px;color:var(--muted)}
.card-btns{position:absolute;bottom:calc(46px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:12px}
.cbtn{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;padding:17px;position:relative}
.cbtn span{position:absolute;top:100%;margin-top:6px;font-size:10px;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.card-ring{animation:none}}
/* text over the glass (endings, centred chapters) keeps a soft dark halo so it reads on the ring */
.stage.ending .copy,.stage.center .copy{text-shadow:0 2px 30px rgb(0 0 0/.85),0 0 60px rgb(0 0 0/.6)}
.stage.ending .grad{filter:drop-shadow(0 2px 24px rgb(0 0 0/.8))}
.menu a.menu-chat{font-size:11px;font-family:var(--mono);letter-spacing:.24em;font-weight:500;opacity:.7;margin-top:22px;gap:10px}.menu a.menu-chat:hover{opacity:1}

/* ── about as a plain journey page (no film) ── */
.journeypage body{background:#050508}
.journey{max-width:1200px;margin:0 auto;padding:0 6vw}
.jsec{min-height:72vh;display:flex;align-items:center;padding:12vh 0;border-top:1px solid rgb(255 255 255/.06)}
.jsec:first-child{border-top:0;min-height:92vh}
.jsec:nth-child(even){justify-content:flex-end}
.jcopy{display:flex;flex-direction:column;gap:18px;max-width:620px}
.j-end{justify-content:center!important;text-align:center}.j-end .jcopy{align-items:center}
.jsec .kicker{color:color-mix(in srgb,var(--accent) 65%,#fff)}
.jsec .kicker::before{background:var(--accent);box-shadow:0 0 14px var(--accent)}
.jsec h2.h2{font-size:clamp(40px,5.6vw,88px)}
.jsec::after{content:"";position:absolute;width:40vw;height:40vw;max-width:520px;max-height:520px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 16%,transparent),transparent 68%);transform:translate(-30%,-10%);z-index:-1}
.jsec{position:relative;isolation:isolate}
.jcopy>.pill{align-self:flex-start}.j-end .jcopy>.pill{align-self:center}
/* glass creatures on a chapter's empty side */
.creature{position:fixed;top:50%;width:min(44vw,62vh);aspect-ratio:1;margin-top:calc(min(44vw,62vh) / -2);z-index:9;pointer-events:none;opacity:0;visibility:hidden;will-change:transform,opacity}
.creature.left{left:3vw}.creature.right{right:3vw}
.creature canvas{width:100%;height:100%;display:block}
@media (max-width:820px){.creature{width:76vw;left:12vw!important;right:auto!important;top:30%}}
/* a flyer in the empty sky above centred copy (founder: "an egal flying on top thats where the space is empty") */
.creature.top{left:50%;top:1vh;width:min(64vw,96vh);aspect-ratio:2/1;margin:0 0 0 calc(min(64vw,96vh) / -2)}
@media (max-width:820px){.creature.top{width:96vw;left:2vw!important;top:56px;margin:0}}
/* a creature with an entrance: a wide stage flush to the screen edge, so it walks / swims in from off screen */
.creature.walkon{width:62vw;aspect-ratio:16/9;margin-top:calc(62vw * 9 / -32)}
.creature.walkon.left{left:0}.creature.walkon.right{right:0;left:auto}
.creature.walkon.right canvas{transform:scaleX(-1)}
@media (max-width:820px){.creature.walkon{width:100vw;left:0!important;top:24%;margin-top:calc(100vw * 9 / -32)}}
.creature.top.walkon{left:0;width:100vw;aspect-ratio:2/1;top:-4vh;margin:0}
@media (max-width:820px){.creature.top.walkon{top:48px;margin:0}}
/* a filmed creature: the clip is light on pure black, so screening it leaves only the glass over the page's dots */
.creature.filmed video{width:100%;height:100%;display:block;object-fit:contain;mix-blend-mode:screen;background:#000}
.creature.filmed{mix-blend-mode:screen}
.creature.top.walkon.filmed{left:50%;width:min(70vw,112vh);aspect-ratio:16/9;top:-8vh;margin:0 0 0 calc(min(70vw,112vh) / -2)}
.creature.right.walkon.filmed{width:56vw;margin-top:calc(56vw * 9 / -32)}
@media (max-width:820px){.creature.top.walkon.filmed{width:100vw;left:0!important;top:40px;margin:0}.creature.right.walkon.filmed{width:100vw;margin-top:calc(100vw * 9 / -32)}}
/* sound: a quiet pill beside Contact; the four bars stand still when off and move when on */
.snd{height:40px;padding:0 14px 0 12px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;margin-right:8px;font-size:13px;color:var(--muted);
  background:rgb(255 255 255/.04);box-shadow:inset 0 0 0 1px rgb(255 255 255/.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:color .2s ease,background-color .2s ease}
.snd:hover{color:var(--ink)}.snd.on{color:var(--ink);background:rgb(255 255 255/.08)}
.snd .eq{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.snd .eq i{display:block;width:2px;height:3px;border-radius:1px;background:currentColor;transition:height .3s ease}
.snd.on .eq i{animation:snd-eq 1.1s ease-in-out infinite}
.snd.on .eq i:nth-child(2){animation-delay:-.4s}.snd.on .eq i:nth-child(3){animation-delay:-.75s}.snd.on .eq i:nth-child(4){animation-delay:-.2s}
.snd.wait{opacity:.6}
@keyframes snd-eq{0%,100%{height:3px}50%{height:12px}}
@media (max-width:820px){.snd .lbl{display:none}.snd{padding:0 12px;margin-right:6px}}
@media (prefers-reduced-motion:reduce){.snd.on .eq i{animation:none;height:8px}}
/* about: a glass tree grows on the empty side of its section (screened, so the black of the clip disappears) */
.jgrow{position:absolute;top:50%;width:min(40vw,62vh);aspect-ratio:3/4;transform:translateY(-50%);z-index:0;pointer-events:none;opacity:0;transition:opacity .8s ease;mix-blend-mode:screen}
.jgrow.on{opacity:1}
.jgrow video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
.jsec:nth-child(even) .jgrow{left:0}.jsec:nth-child(odd) .jgrow{right:0}
.jsec.has-grow .jcopy{position:relative;z-index:1}
@media (max-width:820px){.jsec.has-grow{flex-direction:column;align-items:stretch}.jgrow{position:relative;top:auto;transform:none;width:72vw;margin:0 auto 8px;left:auto!important;right:auto!important}}
.jsec.has-grow{isolation:auto}
.jgrow{width:min(34vw,58vh)}
@media (max-width:820px){.jgrow{width:72vw}}
.jsec:nth-child(even) .jgrow{left:-3vw}.jsec:nth-child(odd) .jgrow{right:-3vw}@media (max-width:820px){.jsec .jgrow{left:auto;right:auto}}
/* filmed glass moments: screened, so the clip's black disappears into the page */
.fx{pointer-events:none;mix-blend-mode:screen}
.fx video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
.fx.sky{position:absolute;left:50%;top:-3vh;width:min(100vw,170vh);aspect-ratio:16/9;transform:translateX(-50%);z-index:1}
.fx.ants{width:100%;max-width:1400px;margin:0 auto;aspect-ratio:1920/648;position:relative}
@media (max-width:820px){.fx.sky{top:40px;width:120vw}.fx.ants{width:140%;margin-left:-20%}}
/* episodes: a ring of film that turns slowly; pointing at it stops it, a tap plays that episode */
.eps{position:relative;width:min(980px,94vw);height:clamp(230px,26vw,330px);margin:8px auto 0;perspective:1700px}
.eps-in{position:absolute;inset:0;transform-style:preserve-3d;animation:eps-turn 30s linear infinite}
.eps:hover .eps-in,.eps:focus-within .eps-in{animation-play-state:paused}
.ep{position:absolute;left:50%;top:50%;width:clamp(230px,25vw,370px);aspect-ratio:16/9;border-radius:16px;overflow:hidden;padding:0;
  transform:translate(-50%,-50%) rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(clamp(150px,16vw,250px));box-shadow:0 30px 80px rgb(0 0 0/.6),inset 0 0 0 1px rgb(255 255 255/.14)}
.ep img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ep-shade{position:absolute;inset:0;background:linear-gradient(transparent 40%,rgb(0 0 0/.75))}
.ep-txt{position:absolute;left:14px;bottom:12px;right:14px;display:flex;flex-direction:column;gap:2px;text-align:left}
.ep-txt small{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--accent) 70%,#fff)}
.ep-txt b{font-size:clamp(15px,1.4vw,20px);font-weight:600;letter-spacing:-.01em}
.ep-play{position:absolute;right:12px;top:12px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;padding:12px;background:rgb(0 0 0/.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ep-soon{position:absolute;right:12px;top:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:rgb(0 0 0/.55);color:color-mix(in srgb,var(--accent) 75%,#fff)}
.ep.soon img{filter:saturate(.8) brightness(.8)}
@keyframes eps-turn{to{transform:rotateY(-360deg)}}
@media (max-width:820px){.eps{height:clamp(150px,44vw,220px)}.ep{width:min(62vw,300px)}.ep{transform:translate(-50%,-50%) rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(min(34vw,170px))}}
@media (prefers-reduced-motion:reduce){.eps{height:auto;perspective:none}.eps-in{position:static;animation:none;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}.ep{position:relative;left:auto;top:auto;transform:none}}
/* a filmed creature can be sized from the spec (creature.size, in vw): the horse runs bigger */
.creature.walkon.filmed[style*="--cw"]{width:var(--cw);margin-top:calc(var(--cw) * 9 / -32)}
@media (max-width:820px){.creature.walkon.filmed[style*="--cw"]{width:112vw;left:-6vw!important;margin-top:calc(112vw * 9 / -32)}}