/* ============================================================
   Global Reach — looping London video with PXL. logo overlay
   Used on /about/pxl-design. The video file sits at
   /videos/global-reach.mp4 and is merged into dist/videos by
   scripts/vercel-build.js. The PXL. logo fades + scales in each
   time the video loops, resetting at wrap via a small JS shim
   in about/pxl-design.html.
   ============================================================ */

.gr-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111111;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  isolation: isolate;
}

.gr-video__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Hide mobile Safari's default controls / play button overlay if
     any user agent tries to render them. */
  pointer-events: none;
}

/* Subtle dark scrim so the white logo always has enough contrast
   whatever frame the video is on. */
.gr-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 50% 50%, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 65%);
  pointer-events: none;
  z-index: 1;
}

.gr-video__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20%;
  max-width: 180px;
  height: auto;
  transform: translate(-50%, -50%) scale(.95);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  /* Soft dark halo + a faint blue brand glow so the logo reads on
     any video frame, busy or smooth. */
  filter:
    drop-shadow(0 2px 10px rgba(0, 0, 0, .55))
    drop-shadow(0 0 40px rgba(91, 90, 255, .22));
  /* Start paused; first play is triggered on video 'playing' via JS. */
  animation-name: gr-logo-in;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(.2, .8, .3, 1);
  animation-delay: 1s;              /* ~1s into the video */
  animation-fill-mode: forwards;
  animation-play-state: paused;
}

/* When the video is actively playing the logo animation runs. The JS
   in about/pxl-design.html toggles .is-playing on the container and
   restarts this animation each time the video loops back. */
.gr-video.is-playing .gr-video__logo {
  animation-play-state: running;
}

@keyframes gr-logo-in {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.95);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ───────── Reduced motion ─────────
   Pause the video (handled in JS by calling .pause()) and render the
   logo statically centred so the section still communicates. */
@media (prefers-reduced-motion: reduce) {
  .gr-video__logo {
    animation: none !important;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}