/* A quiet, dismissible documentary preview anchored in the left corner. */
.floating-film { --bubble-size: 148px; position: fixed; left: max(24px, env(safe-area-inset-left)); bottom: max(24px, env(safe-area-inset-bottom)); z-index: 35; width: var(--bubble-size); height: var(--bubble-size); pointer-events: none; }
.floating-film[hidden] { display: none; }
.floating-film-open { position: relative; display: block; width: 100%; height: 100%; padding: 4px; border: 0; border-radius: 50%; isolation: isolate; overflow: hidden; cursor: pointer; pointer-events: auto; background: conic-gradient(from 30deg, #36c8ff, #0003d1 45%, #36c8ff 80%, #b5edff); box-shadow: 0 8px 28px #071d3133, 0 0 0 5px #36c8ff17; color: #fff; }
.floating-film-open > video { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); border-radius: 50%; object-fit: cover; pointer-events: none; }
.floating-film-open::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: linear-gradient(180deg, #071d3100 30%, #071d3166 65%, #071d31e6 100%); pointer-events: none; }
.floating-film-play { display: grid; place-items: center; position: absolute; left: 50%; top: 46%; width: 39px; height: 39px; border-radius: 50%; transform: translate(-50%, -50%); background: #fffffff0; color: #071d31; z-index: 1; box-shadow: 0 2px 12px #071d3126; }
.floating-film-play > svg { margin-left: 2px; }
.floating-film-caption { position: absolute; left: 0; right: 0; bottom: 20px; display: flex; align-items: center; justify-content: center; gap: 8px; z-index: 1; color: #fff; font: 500 8px/1.4 JAOF, Arial, sans-serif; letter-spacing: .13em; white-space: nowrap; }
.floating-film-caption > span { font: 400 14px/1 Arial, sans-serif; }
.floating-film-dismiss { position: absolute; top: -2px; right: -2px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid #d6eaf1; border-radius: 50%; background: #fff; color: #102d43; cursor: pointer; pointer-events: auto; z-index: 2; box-shadow: 0 2px 9px #071d311a; }
.floating-film :is(button):focus-visible { outline: 3px solid #03bafc; outline-offset: 5px; }
.floating-film.is-compact { --bubble-size: 76px; }
.floating-film.is-compact .floating-film-play { width: 29px; height: 29px; top: 50%; }
.floating-film.is-compact .floating-film-play > svg { width: 14px; height: 14px; }
.floating-film.is-compact .floating-film-caption { opacity: 0; transform: translateY(7px); }
.floating-film.is-compact .floating-film-dismiss { top: -7px; right: -7px; width: 27px; height: 27px; }
@media (hover: hover) { .floating-film-open:hover { box-shadow: 0 10px 35px #071d314d, 0 0 0 7px #36c8ff26; } .floating-film-open:hover .floating-film-play { background: #36c8ff; } .floating-film-dismiss:hover { color: #0003d1; background: #eaf8ff; } }
@media (prefers-reduced-motion: no-preference) { .floating-film { animation: film-bubble-appear .7s cubic-bezier(.22, 1, .36, 1) both; transition: width .45s cubic-bezier(.22, 1, .36, 1), height .45s cubic-bezier(.22, 1, .36, 1); } .floating-film-open { transition: box-shadow .35s ease; } .floating-film-play, .floating-film-caption, .floating-film-dismiss { transition: width .35s, height .35s, top .35s, right .35s, opacity .25s, transform .35s, background-color .25s; } }
@keyframes film-bubble-appear { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 650px) { .floating-film { --bubble-size: 112px; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); } .floating-film.is-compact { --bubble-size: 64px; } .floating-film-caption { font-size: 7px; bottom: 15px; gap: 4px; } .floating-film-play { width: 33px; height: 33px; top: 44%; } .floating-film-dismiss { width: 30px; height: 30px; top: -6px; right: -6px; } }
/* Full-screen presentation is used only after the visitor opens the bubble. */
html.is-foundation-film-open { overflow: hidden; }
#foundation-film.is-fullscreen-film { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; overflow: hidden; background: #020812; box-shadow: none; }
#foundation-film.is-fullscreen-film > video { width: 100%; height: 100%; max-height: none; object-fit: contain; background: #020812; }
#foundation-film.is-fullscreen-film .film-description { display: none; }
#foundation-film.is-fullscreen-film .dialog-close { top: max(20px, env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right)); width: 46px; height: 46px; background: #102d43d9; color: #fff; border: 1px solid #ffffff59; z-index: 5; box-shadow: 0 3px 18px #0005; }
#foundation-film.is-fullscreen-film .dialog-close:focus-visible { outline: 3px solid #36c8ff; outline-offset: 4px; }