/* =========================================================
   BFLOW FILMS · fita.css
   The home: one screen, a ribbon of films, four corners.
   ========================================================= */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("../assets/fonts/archivo-latin.woff2") format("woff2"); }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: "Archivo", system-ui, sans-serif; font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; overflow: hidden; }
h1, h2, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
video, svg, img { display: block; }
video { width: 100%; height: 100%; object-fit: cover; }
.logo { width: 96px; height: auto; color: currentColor; }
.top { position: absolute; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; justify-content: space-between; height: 76px; padding: 0 40px; }
.top nav { display: flex; gap: 28px; font-size: 13px; }
.top nav a { opacity: 0.72; }
.caps { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }

body { background: #000; color: #fff; overscroll-behavior: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; transition: opacity 0.6s; }
.is-dragging #gl { cursor: grabbing; }
.is-list #gl, .is-leaving #gl, .no-js #gl { opacity: 0; pointer-events: none; }
#caps { position: fixed; inset: 0; pointer-events: none; overflow: hidden; transition: opacity 0.4s; }
.is-list #caps, .is-leaving #caps, .is-about #caps { opacity: 0; }
.cap, .go { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform; transition: opacity 0.3s; }
.cap { transform-origin: 0 100%; margin-top: -1.5em; display: flex; align-items: baseline; gap: 0.6em; font-size: clamp(13px, 1.25vw, 19px); font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; text-shadow: 0 0 14px rgba(0, 0, 0, 0.6); }
.cap__n { font-size: 0.6em; letter-spacing: 0.08em; opacity: 0.7; }
.go { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #000; font-size: 13px; transition: opacity 0.3s, background-color 0.3s, color 0.3s; }
.go.is-on { background: #fff; color: #000; }

/* the four corners */
.corner { position: fixed; z-index: 10; padding: 28px clamp(18px, 2.8vw, 44px); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.corner a, .corner button { padding: 6px 0; text-transform: inherit; letter-spacing: inherit; font-weight: inherit; transition: opacity 0.3s; }
.tl { left: 0; top: 0; padding-top: 22px; }
.tr { right: 0; top: 0; }
.bl { left: 0; bottom: 0; display: flex; gap: 0.7em; align-items: center; }
.br { right: 0; bottom: 0; }
.bl button[aria-pressed="false"] { opacity: 0.45; }
.bl button:hover, .corner a:hover, .tr button:hover { opacity: 1; }
.mid { position: fixed; z-index: 10; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55; white-space: nowrap; }
.mid--t { top: 34px; }
.mid--b { bottom: 28px; padding: 6px 0; transition: opacity 0.3s; }
.mid--b:hover { opacity: 1; }
.hint { position: fixed; z-index: 10; left: 50%; bottom: 13vh; transform: translateX(-50%); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; white-space: nowrap; transition: opacity 0.6s; pointer-events: none; }
.hint.is-done, .is-list .hint, .is-about .hint, .no-js .hint { opacity: 0; }
.no-js #pause, .no-gl #pause, .no-js .bl, .no-gl .bl { display: none; }

/* the list: every film by name (also what shows without WebGL or JavaScript) */
.list { position: fixed; inset: 0; display: grid; place-items: center; padding: 90px clamp(18px, 6vw, 120px); opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0s 0.5s; overflow: auto; }
.is-list .list, .no-js .list { opacity: 1; visibility: visible; transition: opacity 0.5s; }
.list ol { max-width: 1100px; text-align: center; font-size: clamp(20px, 2.7vw, 42px); font-weight: 500; line-height: 1.42; letter-spacing: -0.025em; }
.list li { display: inline; }
.list li:not(:last-child)::after { content: " · "; opacity: 0.5; }
.list a { transition: opacity 0.3s; }
.list ol:hover a { opacity: 0.35; }
.list ol a:hover { opacity: 1; }

/* about */
.about { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; padding: 90px clamp(18px, 6vw, 120px); background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0s 0.5s; overflow: auto; }
.is-about .about { opacity: 1; visibility: visible; transition: opacity 0.5s; }
.about div { max-width: 760px; display: grid; gap: 22px; }
.about .big { font-size: clamp(22px, 2.5vw, 38px); font-weight: 500; line-height: 1.18; letter-spacing: -0.025em; }
.about p { color: rgba(255, 255, 255, 0.72); }
.about .big { color: #fff; }
.about .row { display: flex; flex-wrap: wrap; gap: 22px; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; }
@media (max-width: 767px) { .mid--t { display: none; } .mid--b { bottom: auto; top: 28px; } .hint { bottom: 15vh; } .cap { font-size: 15px; } }

body { animation: page-in 0.9s both; }
@keyframes page-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }