/* Motion is an enhancement of the existing composition. No layout dimensions change. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .65s ease;
}
.hero-visual.has-video-frame .hero-video { opacity: 1; }
.hero-video-toggle {
  position: absolute;
  top: 82px;
  right: 26px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 50%;
  background: rgba(23,32,29,.5);
  color: var(--white);
  backdrop-filter: blur(8px);
  transition: background .25s, color .25s, border-color .25s, transform .35s;
}
.hero-video-toggle[hidden] { display: none; }
.hero-video-toggle svg { fill: currentColor; grid-area: 1/1; }
.hero-video-toggle .pause-icon { display: none; }
.is-video-playing .hero-video-toggle .pause-icon { display: block; }
.is-video-playing .hero-video-toggle .resume-icon { display: none; }
.hero-video-toggle:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); transform: scale(1.07); }
.hero-video-toggle:focus-visible { outline-color: var(--lime); }
.hero-video-progress {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--lime);
  transform: scaleX(var(--reel-progress,0));
  transform-origin: left;
  opacity: 0;
  pointer-events: none;
}
.has-video-frame .hero-video-progress { opacity: .9; }

@media (prefers-reduced-motion: no-preference) {
  .motion-pending { opacity: 0; }
  .motion-media-frame { overflow: hidden; }
  .motion-media-frame > img,
  .hero-visual.motion-media-frame > .hero-image,
  .hero-visual.motion-media-frame > .hero-video {
    transform: translate3d(0,var(--media-y,0px),0) scale(var(--media-scale,1.09));
    scale: 1;
    transition: opacity .65s ease, scale .6s cubic-bezier(.22,1,.36,1);
  }
  .motion-enabled .film-card:hover .film-image img,
  .motion-enabled .photo-card:hover .photo-frame img,
  .motion-enabled .video-card:hover .video-cover img {
    transform: translate3d(0,var(--media-y,0px),0) scale(var(--media-scale,1.09));
  }
  @media (hover:hover) and (pointer:fine) {
    .motion-enabled .film-card:hover .film-image img,
    .motion-enabled .photo-card:hover .photo-frame img,
    .motion-enabled .video-card:hover .video-cover img { scale: 1.035; }
  }
  .motion-enabled .button,
  .motion-enabled .project-card {
    transition: transform .5s cubic-bezier(.22,1,.36,1), background .25s, box-shadow .5s;
  }
  .motion-enabled .button:hover { transform: translateY(-3px); }
  .motion-enabled .button > span,
  .motion-enabled .text-link > span,
  .motion-enabled .header-contact > span,
  .motion-enabled .showreel-arrow {
    display: inline-block;
    transition: transform .5s cubic-bezier(.22,1,.36,1);
  }
  .motion-enabled .button:hover > span,
  .motion-enabled .text-link:hover > span,
  .motion-enabled .header-contact:hover > span,
  .motion-enabled .showreel-link:hover .showreel-arrow { transform: translate(3px,-3px); }
  .motion-enabled .quiet-link span { display: inline-block; transition: transform .4s; }
  .motion-enabled .quiet-link:hover span { transform: translateY(4px); }
  .motion-enabled .play-circle { transition: background .3s, color .3s, border-color .3s, transform .5s cubic-bezier(.22,1,.36,1); }
  .motion-enabled .showreel-link:hover .play-circle,
  .motion-enabled .video-cover:hover .play-circle { transform: scale(1.1); }
  .motion-enabled .photo-expand { transition: transform .5s cubic-bezier(.22,1,.36,1); }
  .motion-enabled .photo-card:hover .photo-expand { transform: translate(-3px,-3px); }
  .motion-enabled .collaboration-logo img { transition: transform .5s cubic-bezier(.22,1,.36,1); }
  .motion-enabled .collaboration-logo:hover img { transform: scale(1.05); }
  .motion-enabled .project-card:hover { transform: translateY(-5px); box-shadow: 0 14px 28px #17201d0b; }
  .motion-enabled .faq-list details[open] > p { animation: answer-in .4s cubic-bezier(.22,1,.36,1) both; }
  @keyframes answer-in {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
  }
}
@media (max-width:700px) {
  .hero-video { object-position: 50% 50%; }
  .hero-video-toggle { top: 76px; right: 20px; }
}
@media (prefers-reduced-motion:reduce) {
  .motion-pending { opacity: 1; }
  .motion-media-frame > img,
  .hero-visual.motion-media-frame > .hero-image,
  .hero-visual.motion-media-frame > .hero-video { transform: none !important; }
}
@media print {
  .motion-pending { opacity: 1 !important; }
  .hero-video-toggle,.hero-video-progress { display: none !important; }
}