/* A moving photographic invitation; footer information sits below the frame. */
.footer.footer-film {
  --film-bg: #e8e3db;
  --film-glass: rgba(250, 247, 241, .88);
  --film-border: rgba(255, 255, 255, .78);
  --film-ink: #1d1e1a;
  --film-button: rgba(255, 255, 255, .86);
  --film-button-border: rgba(29, 30, 26, .14);
  --film-button-hover: #fff;
  align-self: center;
  width: calc(100% - var(--pad) * 2);
  max-width: calc(var(--max) - var(--pad) * 2);
  margin: 0 auto 1.5rem;
  padding: 0;
  border: 0;
  color: var(--muted);
}
html[data-theme="dark"] .footer-film {
  --film-bg: #252321;
  --film-glass: rgba(15, 17, 18, .87);
  --film-border: rgba(255, 255, 255, .16);
  --film-ink: #f5f2ec;
  --film-button: #303233;
  --film-button-border: rgba(255, 255, 255, .2);
  --film-button-hover: #404243;
}
.footer-film-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 16px;
  background: var(--film-bg);
}
.footer-film-art {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.footer-film-wall {
  position: absolute;
  top: -200px;
  left: 50%;
  width: calc(100% + 400px);
  min-width: 720px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  /* Rotate around the top, independent of the very tall duplicated tracks.
     Overscan covers both edges across the entire visible stage. */
  transform-origin: 50% 0;
  transform: translateX(-50%) rotate(-10deg);
}
.footer-film-track {
  min-width: 0;
  animation: footer-film-rise var(--film-duration, 54s) linear infinite;
  animation-delay: var(--film-offset, -12s);
  animation-play-state: paused;
}
.footer-film-track:nth-child(even) { animation-direction: reverse; }
.footer-film.is-moving .footer-film-track { animation-play-state: running; }
.footer-film-group { display: grid; gap: 16px; padding-bottom: 16px; }
.footer-film-photo {
  display: block;
  width: 100%;
  height: clamp(240px, 23vw, 390px);
  object-fit: cover;
  border-radius: 8px;
  background: var(--film-bg);
}
@keyframes footer-film-rise { to { transform: translate3d(0, -50%, 0); } }
.footer-film-invitation {
  min-height: clamp(320px, 28vw, 430px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.25rem;
}
.footer-film .footer-glass {
  background: var(--film-glass);
  border: 1px solid var(--film-border);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .1);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--film-ink);
}
.footer-film-callout {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  padding: 1rem 1rem 1rem 1.5rem;
}
.footer-film-callout h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--film-ink);
}
.footer-film .footer-project-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  padding: .8rem 1.2rem;
  border: 1px solid var(--film-button-border);
  border-radius: 5px;
  background: var(--film-button);
  color: var(--film-ink);
  font-size: .78rem;
  line-height: 1.3;
  white-space: nowrap;
  transition: background-color .2s ease, transform .2s ease;
}
.footer-film .footer-project-link:hover { background: var(--film-button-hover); transform: translateY(-2px); }
.footer-film .footer-row {
  width: 100%;
  padding: 1.5rem 0 1rem;
  gap: .85rem 1rem;
  font-size: .72rem;
}
.footer-film .footer-services {
  gap: .3rem 1.2rem;
  padding-top: .85rem;
  border-top: 1px solid var(--rule);
}
.footer-film .footer-services a {
  padding-block: .3rem;
  line-height: 1.45;
  color: var(--muted);
}
.footer-film .footer-services a:hover { color: var(--ink); text-decoration: underline; }
.footer-film .site-privacy-controls {
  margin: 0;
  padding: .35rem 0 0;
  gap: .5rem 1.25rem;
  color: var(--muted);
}
.footer-film .site-privacy-controls a,
.footer-film .site-privacy-controls button { opacity: 1; }
.footer-film :is(a, button):focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.footer-film .footer-project-link:focus-visible { outline-color: var(--film-ink); outline-offset: 5px; }
html.theme-fading :is(.footer-film-stage, .footer-film-callout, .footer-film .footer-services) {
  transition: background-color 1300ms cubic-bezier(.4, 0, .2, 1), color 1300ms cubic-bezier(.4, 0, .2, 1), border-color 1300ms cubic-bezier(.4, 0, .2, 1);
}
@media (max-width: 699px) {
  .footer.footer-film { width: calc(100% - 1.5rem); }
  .footer-film-stage { border-radius: 12px; }
  .footer-film-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .footer-film-track:nth-child(4) { display: none; }
  .footer-film-group { gap: 12px; padding-bottom: 12px; }
  .footer-film-photo { height: 230px; }
  .footer-film-invitation { min-height: 320px; padding: 3rem .8rem; }
  .footer-film-callout { flex-direction: column; align-items: stretch; gap: 1rem; padding: 1.25rem; text-align: center; }
  .footer-film-callout h2 { font-size: 2rem; }
  .footer-film .footer-row { padding: 1.25rem .5rem .75rem; font-size: .68rem; }
  .footer-film .footer-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem 1rem; }
  .footer-film .footer-services a { overflow-wrap: anywhere; }
  .footer-film .site-privacy-controls { font-size: .65rem; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-film .footer-film-track { animation-play-state: paused !important; }
  .footer-film .footer-project-link { transition: none; }
  .footer-film .footer-project-link:hover { transform: none; }
}