/* about.html – B31 loop behind the statement + B14 film card and its dialog (markup and logic: sec-about-film.js) */

/* ---------- B31: L1 behind the statement (base layer: ambient.css, multiplied into the light page). The section opts out of
   the fx.js dissolve (data-no-dissolve): a mask would isolate it from the page it blends with ---------- */
.ab-statement{position:relative}
.ab-statement>.wrap{position:relative;z-index:1}
.ab-amb{top:-24vh;bottom:-20vh;--amb-o:.14;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 32%,#000 68%,transparent),linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent,#000 32%,#000 68%,transparent),linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-composite:intersect}
.ab-amb .amb__in>*{object-position:50% 38%}

/* ---------- B14: the film card ---------- */
.afilm{position:relative;padding:72px 0 0}
.afilm__pin{position:relative;max-width:calc(1180px + 2 * var(--gut));margin:0 auto;padding:0 var(--gut)}
.afilm__card{position:relative;display:block;width:100%;aspect-ratio:16/9;margin:0;padding:0;border:0;border-radius:var(--r2);overflow:hidden;isolation:isolate;
  background:var(--bg2);color:var(--text);text-align:left;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:0 60px 120px -60px rgba(var(--ink-rgb),.35),0 0 0 1px var(--line2)}
.afilm__card:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
.afilm__media,.afilm__media>img,.afilm__media>video{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.afilm__media>video{opacity:0;transition:opacity 1s var(--ease)}
.afilm__card.is-on .afilm__media>video{opacity:1}
.afilm__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,color-mix(in srgb,var(--bg) 70%,transparent)),radial-gradient(120% 90% at 50% 40%,transparent 60%,color-mix(in srgb,var(--bg) 45%,transparent))}
/* label: a glass pill at the bottom left (it sits over the film's own lower lines), lined up with the page column once the
   card is full width */
.afilm__ui{position:absolute;z-index:2;left:clamp(16px,calc((100% - var(--wrap)) / 2 + var(--gut)),40vw);bottom:clamp(14px,2.8vw,40px);display:flex;align-items:center;gap:14px;
  padding:8px 26px 8px 8px;border-radius:999px;pointer-events:none;background:color-mix(in srgb,var(--bg) 80%,transparent);
  box-shadow:inset 0 0 0 1px var(--line2),0 18px 40px -20px rgba(var(--ink-rgb),.3)}
.afilm__play{flex:none;display:grid;place-items:center;width:clamp(44px,3.8vw,56px);aspect-ratio:1;border-radius:50%;background:linear-gradient(140deg,var(--orange2),var(--orange));color:#1b0d00;
  box-shadow:0 12px 30px -12px rgba(245,132,31,.45);transition:transform .45s cubic-bezier(.3,1.5,.5,1),box-shadow .4s}
.afilm__play svg{width:42%;height:42%;margin-left:6%;fill:currentColor}
.afilm__txt{display:flex;flex-direction:column;gap:3px;line-height:1.15}
.afilm__txt small{font:700 11px/1.2 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--orange2)}
.afilm__txt b{font-size:clamp(20px,2.1vw,30px);font-weight:800;letter-spacing:-.02em}
.afilm__txt em{font-style:normal;font-size:13px;color:var(--muted)}
.afilm__card:hover .afilm__play,.afilm__card:focus-visible .afilm__play{transform:scale(1.08);box-shadow:0 16px 36px -12px rgba(245,132,31,.5),0 0 0 6px rgba(245,132,31,.14)}

/* desktop: pinned, the card grows to full bleed (transform only – sec-about-film.js sets scale; --r0 keeps the visible
   corner radius at 28 px at the start; at the end the card is scaled past the screen, so the corners leave it) */
.afilm--pin{padding:0}
.afilm--pin .afilm__pin{max-width:none;height:100vh;min-height:560px;padding:0;display:grid;place-items:center;overflow:hidden}
.afilm--pin .afilm__card{width:100vw;height:100vh;min-height:560px;aspect-ratio:auto;border-radius:var(--r0,28px);transform-origin:50% 50%;will-change:transform;
  box-shadow:0 0 0 1px rgba(var(--ink-rgb),calc(.15 - var(--g,0) * .15))}

/* reduced motion: the poster only (the film itself opens on tap) */
@media (prefers-reduced-motion:reduce){.afilm__media>video{display:none}}
/* phones: a tall card with the portrait cut of the warehouse; the label sits on the picture (the footage has no text) */
@media (max-width:768px){
  .afilm{padding-top:56px}
  .afilm__card{aspect-ratio:4/5;max-height:78svh;border-radius:22px}
  .afilm__ui{left:12px;right:12px;bottom:12px;gap:12px;padding:8px 18px 8px 8px}
  .afilm__play{width:46px}
  .afilm__txt small{font-size:10px}.afilm__txt b{font-size:19px}
}
/* ---------- the film dialog ---------- */
.afl{width:min(1180px,calc(100vw - 32px));max-width:none;max-height:none;padding:0;border:0;background:none;color:var(--text);overflow:visible}
.afl::backdrop{background:rgba(var(--bg-rgb),.94)}
.afl[open]{animation:afl-in .35s var(--ease)}
@keyframes afl-in{from{opacity:0;transform:translateY(14px) scale(.98)}}
.afl__box{position:relative;border-radius:22px;background:var(--surface-solid);box-shadow:0 50px 120px -30px rgba(var(--ink-rgb),.35),0 0 0 1px var(--line2);overflow:hidden}
.afl__v{display:block;width:100%;aspect-ratio:16/9;max-height:calc(100vh - 140px);background:var(--bg)}
.afl__cap{padding:14px 20px;font-size:13px;color:var(--muted)}.afl__cap b{color:var(--text)}
.afl__x{position:absolute;top:12px;right:12px;z-index:2;width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;color:var(--text);
  background:var(--surface-solid);box-shadow:inset 0 0 0 1px var(--line2);transition:background .2s,color .2s}
.afl__x:hover{background:var(--orange);color:#1b0d00}
.afl__x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
html.afl-open{overflow:hidden}
@media (max-width:600px){.afl{width:calc(100vw - 16px)}.afl__box{border-radius:16px}}
@media (prefers-reduced-motion:reduce){.afl[open]{animation:none}.afilm__play{transition:none}}
@media print{.afilm__ui{display:none}}