/* Film - ported from Framer code component Film.tsx
   Inline self-hosted video. Muted autoplay while on screen, paused the moment
   it leaves the viewport, with the source attached lazily (js/framer/film.js
   handles the IntersectionObserver, the 200px lazy-arm, the shared audible
   registry and the manual-pause memory). This sheet is the box + controls only.

   The box carries `aspect-ratio` so layout is stable before the video loads;
   there is no poster (metadata preload paints the first frame once armed). The
   round play/sound buttons take their sizes and colours from --fr-film-* props
   that the macro fills in from Film.tsx's defaults. Hover is offered only to
   real pointers and lifts the button 2px; reduced motion drops the lift (and
   the JS does not autoplay - the controls let the visitor start the film). */
.fr-film {
  --fr-film-accent: #A98A6E;
  --fr-film-bg: #0F0F0F;
  --fr-film-radius: 0px;
  --fr-film-control-size: 42px;
  --fr-film-control-bg: rgba(15, 15, 15, 0.58);
  --fr-film-control-border: rgba(244, 241, 234, 0.28);
  --fr-film-control-ink: rgba(244, 241, 234, 0.92);
  --fr-film-icon-size: 17px;
  --fr-film-inset: clamp(0.9rem, 2.4vw, 1.6rem);
  --fr-film-gap: 0.5rem;
  --fr-film-object-position: 50% 50%;
  --fr-film-ease: cubic-bezier(.16, 1, .3, 1);
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--fr-film-bg);
  border-radius: var(--fr-film-radius);
}
.fr-film__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fr-film-object-position);
  display: block;
}
.fr-film__controls {
  position: absolute;
  right: var(--fr-film-inset);
  bottom: var(--fr-film-inset);
  z-index: 2;
  display: flex;
  flex-direction: row;
  gap: var(--fr-film-gap);
}
.fr-film__controls[data-stack="column"] {
  flex-direction: column;
  gap: 12px;
}
.fr-film__btn {
  width: var(--fr-film-control-size);
  height: var(--fr-film-control-size);
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--fr-film-b, var(--fr-film-control-border));
  color: var(--fr-film-c, var(--fr-film-control-ink));
  background: var(--fr-film-control-bg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  padding: 0;
  transform: translateY(var(--fr-film-y, 0px));
  transition: color 220ms var(--fr-film-ease), border-color 220ms var(--fr-film-ease), transform 220ms var(--fr-film-ease);
}
.fr-film__btn svg {
  width: var(--fr-film-icon-size);
  height: var(--fr-film-icon-size);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fr-film__btn svg .s { fill: currentColor; stroke: none; }
.fr-film__btn:focus { outline: none; }
.fr-film__btn:focus-visible { outline: 2px solid var(--fr-film-accent); outline-offset: 3px; }
/* Icon swap follows the film's state class, set by the JS. Rest: play + muted. */
.fr-film__ico--pause, .fr-film__ico--loud { display: none; }
.fr-film.is-playing .fr-film__ico--play { display: none; }
.fr-film.is-playing .fr-film__ico--pause { display: block; }
.fr-film.is-sound .fr-film__ico--muted { display: none; }
.fr-film.is-sound .fr-film__ico--loud { display: block; }
@media (hover: hover) {
  .fr-film__btn:hover { --fr-film-c: #F4F1EA; --fr-film-b: var(--fr-film-accent); --fr-film-y: -2px; }
}
@media (prefers-reduced-motion: reduce) {
  .fr-film__btn { transition: none; }
  .fr-film__btn:hover { --fr-film-y: 0px; }
}