/* Light moves beneath the page, in response to native scrolling. */
.gradient-surface {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #f3eee4;
}
.gradient-surface::before,
.gradient-surface::after {
  content: "";
  position: absolute;
  inset: -180px -12%;
  z-index: -1;
  pointer-events: none;
  transform-origin: 50% 50%;
}
.gradient-surface::before {
  background:
    radial-gradient(ellipse at 12% 30%, #c9a55970 0%, #d7be8938 28%, transparent 58%),
    radial-gradient(ellipse at 88% 75%, #a2afa14d 0%, transparent 55%),
    radial-gradient(ellipse at 65% 10%, #e3c6b83d 0%, transparent 50%);
  transform: translate3d(var(--wash-x, 0px), var(--wash-y, 0px), 0)
    rotate(var(--wash-turn, 0deg)) scale(var(--wash-scale, 1));
}
.gradient-surface::after {
  background:
    radial-gradient(ellipse at 74% 42%, #fffaf1c9 0%, #fffaf14d 24%, transparent 58%),
    radial-gradient(ellipse at 20% 90%, #d1b79442 0%, transparent 45%);
  transform: translate3d(calc(var(--wash-x, 0px) * -.6), calc(var(--wash-y, 0px) * -.45), 0)
    rotate(calc(var(--wash-turn, 0deg) * -.5));
}
.films.gradient-surface { background: #f6f2e9; }
.films.gradient-surface::before {
  background:
    radial-gradient(ellipse at 92% 25%, #bc985465 0%, transparent 52%),
    radial-gradient(ellipse at 5% 72%, #afbeb44d 0%, transparent 50%);
}
.testimonials.gradient-surface { background: #eae5d9; }
.contact.gradient-surface::before {
  background:
    radial-gradient(ellipse at 50% 75%, #c9a55985 0%, #dbc69c52 30%, transparent 65%),
    radial-gradient(ellipse at 10% 15%, #b8c1b54d 0%, transparent 48%);
}
.testimonial-portrait {
  width: 104px;
  height: 104px;
  flex: 0 0 auto;
  border-radius: 50%;
  background-image: url('assets/testimonials-original.png');
  background-repeat: no-repeat;
  background-size: 1043.478261% 586.956522%;
  box-shadow: 0 0 0 1px #c3a56b, 0 10px 25px #6451331a;
  margin: 3px 0 23px;
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}
@media (hover: hover) and (pointer: fine) {
  .testimonial-card:hover .testimonial-portrait { transform: translateY(-4px) scale(1.035); }
}
@media (max-width: 650px) {
  .gradient-surface::before, .gradient-surface::after { inset: -130px -35%; }
  .testimonial-portrait { width: 96px; height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-surface::before, .gradient-surface::after,
  .testimonial-card:hover .testimonial-portrait { transform: none; }
}