/* still — what the choice, film and sound all stand on, and what stays while
   they change into one another (still-shell.js): the font, the black, the
   paper, the clouds, the title between two pages. */

/* Still Grotesk: Mona Sans at width 104 with the a from Inter, built by
   tools/font/build_font.py. size-adjust brings its x-height to that of
   Neue Haas Grotesk Display (510 against 517 thousandths). */
@font-face {
  font-family: "Still Grotesk";
  src: url("/assets/fonts/StillGrotesk.woff2?v=068ae204") format("woff2-variations"),
       url("/assets/fonts/StillGrotesk.woff2?v=068ae204") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  size-adjust: 98.6%;
}
/* the roman slanted 11 degrees, like Neue Haas Display's italic
   (tools/font/build_italic.py) */
@font-face {
  font-family: "Still Grotesk";
  src: url("/assets/fonts/StillGrotesk-Italic.woff2?v=18b73528") format("woff2-variations"),
       url("/assets/fonts/StillGrotesk-Italic.woff2?v=18b73528") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
  size-adjust: 98.6%;
}
em, i { font-synthesis: none; }
:root { --font: "Still Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif; }

/* ===== the ground =====
   --split: where the paper begins. --m: how much of the paper is there.
   At rest film has no paper, sound nothing else, the choice the line in the
   middle. Between pages still-shell.js moves them. */
@property --split { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --m { syntax: "<number>"; inherits: false; initial-value: 1; }
/* what the page draws with is --line and --paper, a copy ambient.js puts on each element that
   uses them, every frame they move. Passing them down with "inherit" doesn't hold in Safari: it
   doesn't look again at the elements below when such a value changes, so they stayed behind until
   something else made it look, and the paper stood open between them and the clouds. These
   only count before the first frame. */
@property --line { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --paper { syntax: "<number>"; inherits: false; initial-value: 1; }
html { --split: 100%; --m: 1; }
html[data-site="sound"] #still-paper { --line: 0%; }
html:has(.entrance) #still-paper, .entrance__word, .entrance__half { --line: 50%; }
html[data-site="sound"] { --split: 0%; }
html:has(.entrance) { --split: 50%; transition: --split .8s cubic-bezier(.65, 0, .25, 1); }
html:has(.entrance[data-lean="film"]) { --split: 53%; }
html:has(.entrance[data-lean="sound"]) { --split: 47%; }

/* under everything: the black, the paper as far as the line, and over both the
   clouds (ambient.js). The page lies on top of them, with its pictures */
#still-ground { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: #000; }
#still-paper {
  position: absolute; top: 0; bottom: 0; right: 0; left: var(--line);
  background: #fcfcfc; opacity: var(--paper);
}
#still-field { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }

/* ===== the title =====
   "still" stands on the same spot on every page of both sites; under it, when
   the mouse comes near, the other side's whole title, its "still" exactly
   under this one. */
.still-switch {
  position: absolute; left: 0; top: calc(100% - 2px);
  font-family: var(--font); font-weight: 900; font-style: normal;
  font-size: 42px; line-height: 1.2; letter-spacing: 1px; word-spacing: 0; white-space: nowrap;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .45s ease, transform .5s cubic-bezier(.2,.7,.2,1), color .25s ease;
}
.still-switch em { font-style: italic; }
@media (max-width: 750px) { .still-switch { font-size: 30px; } }
/* right after arriving the mouse is still on the title: it stays alone until the mouse moves again */
html.title-rests .still-switch { opacity: 0 !important; pointer-events: none !important; }

/* between two sites the title leaves its page and is only this:
   three layers of the two lines, see lift() in still-shell.js */
.still-morph {
  position: fixed; z-index: 9000; pointer-events: none;
  font-family: var(--font); font-weight: 900; font-style: normal;
  line-height: 1.2; letter-spacing: 1px; word-spacing: 0; white-space: nowrap;
}
.still-morph em { font-style: italic; }
.still-morph__line { position: absolute; left: 0; top: 0; }
/* what rolls away upward disappears at the top of the title's line */
.still-morph__roll { position: absolute; left: 0; top: 0; right: 0; height: 0; clip-path: inset(-4px -100vw -100vh -100vw); }
.still-morph .st-ch { transition: -webkit-text-stroke-width .5s ease, text-shadow .5s ease; }

/* the menu, between two sites */
.still-morph--menu { font-weight: 700; font-size: 13px; line-height: 26px; letter-spacing: 1.25px; color: var(--m-menu); transition: color .24s linear; }
.still-morph--menu span { position: absolute; color: var(--m-menu); transition: color .24s linear; }
.still-morph--menu span.is-on { color: var(--m-menu-on); }

/* the portrait, while its page is set over from the one site to the other (holdPicture in still-shell.js) */
.still-morph--shot { z-index: 1; will-change: transform; }
.still-morph--shot, .still-morph--shot * { box-sizing: border-box; }

/* no hover on a phone: the other side of still stands under the title, quietly, while you
   are at the top of a page. On a side's home page it is also a swipe away (still-shell.js) */
@media (hover: none) {
  .still-switch { opacity: .36; transform: none; pointer-events: auto; transition: opacity .3s ease; }
  html.title-rests .still-switch { opacity: .36 !important; pointer-events: auto !important; }
  .is-away .still-switch { opacity: 0; pointer-events: none; }
  html.title-rests .is-away .still-switch { opacity: 0 !important; pointer-events: none !important; }
}

/* a menu on a small screen is no box laid over the page: the page steps back, and the words
   stand on the ground by themselves (is-menu-open: STILL_menus in ambient.js) */
#still-lines { transition: opacity .42s ease; }
html.is-menu-open #page, html.is-menu-open main, html.is-menu-open #still-lines { opacity: .08 !important; pointer-events: none; }
html.is-menu-open, html.is-menu-open body { cursor: pointer; }  /* or a phone doesn't report a tap on nothing */
@keyframes still-menu-in { from { opacity: 0; } }

/* ===== the tray: card, way here, mail, sound, languages (still-tray.js) ===== */
.still-tray {
  position: fixed; z-index: 9000;
  right: max(75px, calc(50% - 600px)); bottom: 22px;
  display: flex; flex-direction: column; align-items: flex-end; row-gap: 2px;
  font-family: var(--font); font-weight: 700; font-style: normal; font-size: 13px; line-height: 1.6; letter-spacing: 1.25px;
  color: var(--m-link);
  transition: color .24s linear, opacity .6s ease;
}
/* the choice has the tray on its paper */
html:has(.entrance):not(.ink-films) .still-tray { color: #222; }
.still-tray.is-idle { opacity: 0; transition: opacity 3s linear; }
.still-tray.is-idle:focus-within { opacity: 1; }
/* the words over the button nearest the mouse: from the middle, the letters fan out */
.still-tray__say {
  position: absolute; left: 50%; bottom: calc(100% + 1px); transform: translateX(-50%);
  white-space: pre; pointer-events: none; text-transform: none !important;
}
.still-tray__say i {
  display: inline-block; font-style: normal; white-space: pre; transform-origin: 50% 100%;
  opacity: 0; transform: translate(var(--x), 7px) rotate(var(--a)) scale(.72);
  transition: opacity .16s ease, transform .22s cubic-bezier(.4, 0, .6, 1);
}
.still-tray__b.is-near .still-tray__say i {
  opacity: 1; transform: none;
  transition: opacity .12s linear var(--d), transform .56s cubic-bezier(.3, .6, .15, 1) var(--d);
}
.still-tray__say.is-setting i { transition: none !important; }
.still-tray__line { display: flex; align-items: center; }
.still-tray__row { display: flex; align-items: center; }
.still-tray__b {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
  color: inherit; font: inherit; letter-spacing: inherit; text-decoration: none;
  opacity: 0; transform: translateX(14px); pointer-events: none;
  transition: opacity .28s ease, transform .42s cubic-bezier(.2,.7,.2,1);
}
.still-tray__b:visited, .still-tray__b:hover { color: inherit; }
.still-tray__b svg { width: 21px; height: 21px; display: block; }
.still-tray__b .off { display: none; }
.still-tray__b.is-off .on { display: none; }
.still-tray__b.is-off .off { display: inline; }
.still-tray__word { width: 30px; text-transform: lowercase !important; }
.still-tray.is-open .still-tray__b { opacity: .62; transform: none; pointer-events: auto; }
.still-tray.is-open .still-tray__b[aria-current] { opacity: 1; }
.still-tray.is-open .still-tray__b.is-near, .still-tray.is-open .still-tray__b:hover { opacity: 1; }
.still-tray.is-open .still-tray__b:nth-child(7) { transition-delay: 0s; }
.still-tray.is-open .still-tray__b:nth-child(6) { transition-delay: .03s; }
.still-tray.is-open .still-tray__b:nth-child(5) { transition-delay: .06s; }
.still-tray.is-open .still-tray__b:nth-child(4) { transition-delay: .09s; }
.still-tray.is-open .still-tray__b:nth-child(3) { transition-delay: .12s; }
.still-tray.is-open .still-tray__b:nth-child(2) { transition-delay: .15s; }
.still-tray.is-open .still-tray__b:nth-child(1) { transition-delay: .18s; }
/* the plus: the studio's, turning as it opens */
.still-tray__open {
  position: relative; width: 38px; height: 38px; padding: 0; margin: 0 0 0 2px; border: 0; background: none; cursor: pointer; color: inherit;
  opacity: .8; transition: opacity .3s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.still-tray__open span::before, .still-tray__open span::after {
  content: ""; position: absolute; left: 11px; right: 11px; top: 50%; height: 2px; margin-top: -1px; background: currentColor; border-radius: 2px;
}
.still-tray__open span::after { transform: rotate(90deg); }
.still-tray.is-open .still-tray__open { transform: rotate(45deg); opacity: 1; }
.still-tray.is-fixed .still-tray__open { display: none; }
/* on a phone, and wherever there is no mouse: a list that a tap opens, with the words beside the buttons */
@media (max-width: 750px), (hover: none) {
  .still-tray { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); row-gap: 0; }
  .still-tray__say { display: none; }
  .still-tray__line { flex-direction: column; align-items: flex-end; }
  .still-tray__row { display: none; grid-template-columns: repeat(3, auto); justify-content: end; justify-items: end; padding: 0 0 4px; }
  .still-tray.is-open .still-tray__row { display: grid; }
  .still-tray__b { grid-column: 1 / -1; width: auto; height: 46px; justify-content: flex-end; padding: 0 8px; column-gap: 12px; font-size: 16px; }
  .still-tray__b::before { content: attr(data-say); order: -1; font-weight: 600; letter-spacing: .4px; text-transform: none; }
  .still-tray.is-open .still-tray__b { opacity: 1; animation: still-menu-in .35s ease both; }
  .still-tray__word { grid-column: auto; width: auto; min-width: 42px; }
  .still-tray__word[aria-current] { text-decoration: underline; text-underline-offset: 3px; }
}

/* ===== frames: stills scattered down the page, on both sides ===== */
.frames, .frames__round {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(12px, 1.6vw, 24px);
  row-gap: clamp(90px, 24vh, 260px);
}
/* the endless page: rounds of frames going by on a transform, and nothing for the browser to
   scroll, so no bar along the side either (endless in site.js) */
.frames[data-loop] { display: block; }
.frames__round { padding-bottom: var(--round-gap, 0); }
html.is-looping, html.is-looping body { height: 100%; min-height: 0; overflow: hidden; overscroll-behavior: none; }
html.is-looping { touch-action: pinch-zoom; }
.frame {
  grid-column: var(--col) / span var(--span);
  display: block;
  margin: 0;
  position: relative;
}
.frame__media {
  display: block;
  position: relative;
  aspect-ratio: var(--ratio);
  overflow: hidden;
}
.frame__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* a picture never smacks in: on the graphics card it comes in there
   (still-lines.js), otherwise here, once it has loaded */
.frame__media img:not(.frame__ghost) { opacity: 0; transition: opacity 1.2s ease; }
.frame__media img.is-in { opacity: 1; }
/* the smear: --wash runs 0..1 with the scroll speed (site.js). The image
   stretches away from where it is heading; its motion-blurred ghost fades in. */
.frame__media img { transform-origin: 50% var(--wash-up, 0%); }
.frame__media img:not(.frame__ghost) {
  transform: scaleY(calc(1 + var(--wash, 0) * .35));
}
.frame__ghost {
  position: absolute;
  inset: 0;
  opacity: calc(var(--wash, 0) * 1.6);
  transform: scaleY(calc(1.05 + var(--wash, 0) * .55));
  will-change: transform, opacity;
  pointer-events: none;
}
/* drawn by still-lines.js: the image stays for layout and links, hidden */
#still-lines { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
html.is-leaving #still-lines { opacity: 0; }   /* the pictures go with the page, on both sides */
/* on a page the browser scrolls it lies on the page, as far as that goes (attach in still-lines.js) */
#still-lines-box { position: absolute; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
#still-lines-box #still-lines { position: absolute; inset: auto; left: 0; }
.frame.is-gl .frame__media img { visibility: hidden; }
.frames.is-pointing .frame.is-gl:not(:hover) { opacity: 1; }
.frames.is-pointing .frame.is-gl:not(:hover) .frame__cap { opacity: 0; }

.frame__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  color: var(--ink-3, var(--m-faint));
  font-size: 13px;
  background:
    radial-gradient(120% 90% at 30% 35%, rgba(236,235,230,.07), transparent 60%),
    radial-gradient(90% 120% at 80% 80%, rgba(236,235,230,.04), transparent 55%),
    #0a0a0a;
  box-shadow: inset 0 0 0 1px rgba(236,235,230,.06);
}
.frame__cap {
  display: block;
  margin-top: .7em;
  font-size: 13px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .4s ease, transform .4s ease;
}
.frame__cap .frame__meta { color: var(--ink-2, var(--m-text)); }
.frame:hover .frame__cap, .frame:focus-visible .frame__cap { opacity: 1; transform: none; }
.frames .frame { transition: opacity .5s ease; }
.frames.is-pointing .frame:not(:hover) { opacity: .28; }
.frame { -webkit-touch-callout: none; }
/* the endless page goes by under a mouse that holds still: .is-under (site.js) is its :hover */
@media (hover: hover) {
  html.is-looping .frame:hover .frame__cap { opacity: 0; transform: translateY(4px); }
  html.is-looping .frame.is-under .frame__cap, html.is-looping .frame:focus-visible .frame__cap { opacity: 1; transform: none; }
  html.is-looping .frames.is-pointing .frame:not(.is-under):not(.is-gl) { opacity: .28; }
  html.is-looping .frames.is-pointing .frame.is-under { opacity: 1; }
  html.is-looping .frames.is-pointing .frame.is-gl:not(.is-under) .frame__cap { opacity: 0; }
  html.is-looping .frames.is-pointing .frame.is-gl.is-under .frame__cap { opacity: 1; transform: none; }
}
@media (hover: none) { .frame__cap { opacity: 1; transform: none; } }
/* a phone has no pointing to bring the words up, so they are there, and they make way while a hand
   moves the page: quickly out, slowly back (is-rushing: ENDLESS in site.js). The pictures lie on the
   graphics card, so what the grid draws is only the words, and fading it all is one layer's work */
@media (hover: none) {
  .frames[data-loop] { transition: opacity 1.1s ease; }
  .frames[data-loop].is-rushing { opacity: 0; transition: opacity .2s ease; }
}
@media (max-width: 640px) {
  .frames, .frames__round { row-gap: 80px; }
  .frame:nth-child(3n+1) { grid-column: 1 / span 9; }
  .frame:nth-child(3n+2) { grid-column: 4 / span 9; }
  .frame:nth-child(3n) { grid-column: 2 / span 10; }
}
@media (prefers-reduced-motion: reduce) {
  .frame__ghost { display: none; }
}

/* ===== what arrives later comes in softly ===== */
.still-soft { transition: opacity 1s ease !important; }
.still-soft.is-waiting { opacity: 0 !important; }

/* a full load, should there be one, is only a dissolve: the clouds stay where they are */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}