/* =====================================================================
THE FILMS - two YouTube films, click-to-play posters and the homepage overlay
Added 27 Sep 2026. Script: js/ergosphere-film.js.
The films (hosted on YouTube, never on this host - the masters are
~150 MB each and the shared host is the slow link):
gRjD-NPjTaI "Introducing ErgoSphere" 01:08 the introduction
esHcn5uQues "Human Factors Ain't Easy" 00:56 the short
Where they play:
index.html hero "Watch the Film" -> #esf_overlay (the introduction)
aspire.html #asp-film poster (the introduction, the booth loop)
students.html #film poster (the short, green accent)
news.html #on-film story, both posters inside the news reader
Poster markup (the script builds the button from the data attributes;
the fallback link inside is what shows without JavaScript):
Nothing from YouTube loads until the poster is clicked; the poster
image itself comes from i.ytimg.com. Accent colour: --esf-accent,
cyan by default, overridden per page (students.html sets green).
Buttons: plugins.css paints every globally, hence the
!important on background, border and colour below.
===================================================================== */
.esf_mono { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; }
/* ---------- click-to-play poster ---------- */
.esf_poster { --esf-accent: #00d4ff; --esf-accent-rgb: 0,212,255;
position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px;
background: #050c18; border: 1px solid rgba(255,255,255,.1);
box-shadow: 0 40px 70px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(var(--esf-accent-rgb),.08); }
.esf_poster > a { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
color: #fff; font-family: 'Poppins', sans-serif; font-size: 14px; text-decoration: none; }
.esf_poster button.esf_play { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0 !important; cursor: pointer;
display: block; text-align: left; background: transparent !important; border: 0 !important; border-radius: 0; box-shadow: none !important; outline: none; }
.esf_poster img.esf_img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
filter: saturate(.85) brightness(.82); transform: scale(1.02); transition: filter .5s ease, transform 1.4s cubic-bezier(.22,.8,.3,1); }
.esf_shade { position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(to top, rgba(4,10,20,.88) 0%, rgba(4,10,20,.35) 34%, rgba(4,10,20,0) 62%),
radial-gradient(ellipse 60% 55% at 50% 50%, rgba(var(--esf-accent-rgb),.10), transparent 70%); }
/* the play ring: a thin accent circle, no fill, the triangle set slightly right of centre */
.esf_ring { position: absolute; left: 50%; top: 50%; width: 78px; height: 78px; margin: -39px 0 0 -39px; border-radius: 50%;
display: flex; align-items: center; justify-content: center; color: #fff;
border: 1px solid rgba(255,255,255,.55); background: rgba(6,14,26,.45);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
box-shadow: 0 0 0 0 rgba(var(--esf-accent-rgb),.0), 0 18px 40px -16px rgba(0,0,0,.8);
transition: border-color .25s ease, box-shadow .35s ease, transform .35s cubic-bezier(.22,.8,.3,1), background-color .25s ease; }
.esf_ring svg { width: 30px; height: 30px; margin-left: 4px; fill: currentColor; }
.esf_poster button.esf_play:hover img.esf_img, .esf_poster button.esf_play:focus-visible img.esf_img { filter: saturate(1) brightness(.92); transform: scale(1); }
.esf_poster button.esf_play:hover .esf_ring, .esf_poster button.esf_play:focus-visible .esf_ring {
border-color: var(--esf-accent); color: var(--esf-accent); background: rgba(6,14,26,.7); transform: scale(1.08);
box-shadow: 0 0 0 10px rgba(var(--esf-accent-rgb),.12), 0 18px 40px -16px rgba(0,0,0,.8); }
.esf_poster button.esf_play:focus-visible { outline: 2px solid var(--esf-accent) !important; outline-offset: -2px; }
/* bottom strip: label + name on the left, the running time in mono on the right */
.esf_meta { position: absolute; left: 22px; right: 110px; bottom: 18px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.esf_label { font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; color: var(--esf-accent); }
.esf_name { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; color: #fff; line-height: 1.3; }
.esf_len { position: absolute; right: 18px; bottom: 18px; padding: 4px 10px; border-radius: 6px; pointer-events: none;
font-size: 12px; font-weight: 500; letter-spacing: 1px; color: rgba(255,255,255,.85);
background: rgba(6,14,26,.7); border: 1px solid rgba(255,255,255,.18); }
/* playing: the poster button goes, the iframe fills the frame */
.esf_poster.is-playing button.esf_play { display: none; }
.esf_poster iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #000; }
/* local preview (file://): YouTube cannot play without a Referer, so the script
shows this in place of the iframe. Never seen on the served site. */
.esf_local { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
padding: 24px; text-align: center; background: #050c18; font-family: 'Poppins', sans-serif; }
.esf_local b { font-size: 11px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; color: var(--esf-accent, #00d4ff); }
.esf_local span { max-width: 420px; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.6); }
.esf_local a { margin-top: 6px; padding: 9px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #fff; text-decoration: none;
background: rgba(0,212,255,.10); border: 1px solid rgba(0,212,255,.45); }
.esf_local a:hover, .esf_local a:focus-visible { background: rgba(0,212,255,.22); border-color: #00d4ff; outline: none; }
.esf_frame .esf_local { position: absolute; }
/* ---------- hero button (index.html) ---------- */
.grax_tm_hero .buttons .grax_tm_button a.esf_open { display: inline-flex; align-items: center; gap: 10px; }
.grax_tm_hero .buttons .grax_tm_button a.esf_open svg { width: 17px; height: 17px; flex: none; color: #00d4ff; }
/* ---------- the overlay (index.html only) ---------- */
.esf_overlay { position: fixed; inset: 0; z-index: 99992; display: none; flex-direction: column; font-family: 'Poppins', sans-serif; color: #fff; }
.esf_overlay.is-shown { display: flex; }
.esf_backdrop { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 55%, rgba(0,212,255,.10), transparent 70%), rgba(3,8,16,.94);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .3s ease; }
.esf_overlay.is-open .esf_backdrop { opacity: 1; }
.esf_dialog { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; height: 100dvh; outline: none;
opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .35s ease, transform .5s cubic-bezier(.22,.8,.3,1); }
.esf_overlay.is-open .esf_dialog { opacity: 1; transform: none; }
.esf_top { flex: none; display: flex; align-items: center; gap: 18px; padding: 18px 26px 0; min-height: 64px; }
.esf_ident { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.esf_kicker { font-size: 11px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; color: #00d4ff; }
.esf_title { font-size: 15px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esf_title em { font-style: normal; font-weight: 500; font-size: 12px; letter-spacing: 1px; color: rgba(255,255,255,.5); margin-left: 10px; }
.esf_actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.esf_overlay a.esf_yt { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 9px 14px; border-radius: 8px; text-decoration: none;
font-size: 13px; font-weight: 600; color: #fff; background: rgba(0,212,255,.10); border: 1px solid rgba(0,212,255,.45);
transition: background-color .2s ease, border-color .2s ease, transform .2s ease; }
.esf_overlay a.esf_yt svg { width: 16px; height: 16px; }
.esf_overlay a.esf_yt:hover, .esf_overlay a.esf_yt:focus-visible { background: rgba(0,212,255,.22); border-color: #00d4ff; transform: translateY(-1px); outline: none; }
.esf_overlay button.esf_x { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
background: rgba(10,20,34,.85) !important; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: rgba(255,255,255,.7) !important;
transition: color .2s ease, border-color .2s ease, transform .2s ease; }
.esf_overlay button.esf_x svg { width: 16px; height: 16px; }
.esf_overlay button.esf_x:hover, .esf_overlay button.esf_x:focus-visible { color: #00d4ff !important; border-color: rgba(0,212,255,.6); transform: rotate(90deg); outline: none; }
.esf_stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 16px; }
.esf_frame { position: relative; width: min(100%, calc((100vh - 170px) * 1.7778), 1400px); width: min(100%, calc((100dvh - 170px) * 1.7778), 1400px);
aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden;
border: 1px solid rgba(255,255,255,.1); box-shadow: 0 50px 90px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(0,212,255,.08), 0 0 80px -20px rgba(0,212,255,.25); }
.esf_frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.esf_foot { flex: none; padding: 0 26px 18px; text-align: center; }
.esf_hint { margin: 0; font-size: 12px; letter-spacing: .4px; color: rgba(255,255,255,.4); }
.esf_hint a { color: rgba(255,255,255,.7); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); }
.esf_hint a:hover, .esf_hint a:focus-visible { color: #00d4ff; border-bottom-color: #00d4ff; outline: none; }
.esf_hint kbd { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; font-size: 11px; padding: 1px 6px; border: 1px solid rgba(255,255,255,.2); border-radius: 4px; color: rgba(255,255,255,.7); }
/* ---------- where the posters sit ---------- */
.news_reader__body .esf_poster { margin: 6px 0 28px; }
.news_reader__body .esf_poster > a { border-bottom: 0; }
/* ---------- small screens ---------- */
@media (max-width: 767px) {
.esf_poster { border-radius: 8px; }
.esf_ring { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
.esf_ring svg { width: 24px; height: 24px; margin-left: 3px; }
.esf_meta { left: 14px; right: 80px; bottom: 12px; gap: 2px; }
.esf_label { font-size: 10px; letter-spacing: 2px; }
.esf_name { font-size: 13px; }
.esf_len { right: 12px; bottom: 12px; font-size: 11px; padding: 3px 8px; }
.esf_top { padding: 14px 16px 0; gap: 12px; }
.esf_title em { display: none; }
.esf_overlay a.esf_yt span { display: none; }
.esf_overlay a.esf_yt { padding: 9px 11px; }
.esf_stage { padding: 10px; }
.esf_frame { border-radius: 6px; }
.esf_foot { padding: 0 16px 14px; }
}
@media (max-width: 420px) {
.esf_name { display: none; }
}
/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
.esf_poster img.esf_img, .esf_ring, .esf_backdrop, .esf_dialog, .esf_overlay a.esf_yt, .esf_overlay button.esf_x { transition: none; }
.esf_poster img.esf_img { transform: none; }
.esf_poster button.esf_play:hover .esf_ring, .esf_poster button.esf_play:focus-visible .esf_ring { transform: none; }
.esf_overlay button.esf_x:hover, .esf_overlay button.esf_x:focus-visible { transform: none; }
}