/* ==========================================================================
   UNIT 1b · VIDEO (Vimeo) — the "screen" rising out of the hero
   --------------------------------------------------------------------------
   • The section background is split: navy on top (continuing the hero),
     cloud below (leading into the next section), so the video frame
     straddles the two — a bridge between hero and page.
   • The frame pulls up over the hero's lower edge and grows from a
     slightly smaller, rounder card to full size as it scrolls in
     (--vp 0 → 1, live-measured by vfilm.js; static = 1).
   • Performance facade: only a local poster + custom play button load
     with the page. The Vimeo iframe is injected on click (autoplay,
     dnt=1). Without JS the play button is a plain link to Vimeo.
   ========================================================================== */

.vfilm {
  --vp: 1;
  position: relative;
  z-index: 1;                    /* BELOW the hero (z 2): the hero's country
                                    popup may extend over this section */
  padding-block: 0 clamp(3rem, 6vw, 5rem);
  background: linear-gradient(180deg, #031848 0%, #031848 42%, var(--c-cloud) 42%, var(--c-cloud) 100%);
}

/* Soft teal light under the frame */
.vfilm__decor {
  background: radial-gradient(ellipse 50% 40% at 50% 42%, rgba(0, 169, 182, 0.22), transparent 70%);
}

.vfilm__stage {
  position: relative;
  max-inline-size: 64rem;
  margin-inline: auto;
  padding-block-start: clamp(1rem, 3vw, 2rem);
}

/* ---------------------------------------------------------------------------
   Frame
   --------------------------------------------------------------------------- */
.vfilm__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: calc(24px + (1 - var(--vp)) * 24px);
  background-color: var(--c-navy);
  box-shadow: 0 50px 100px -40px rgba(2, 17, 58, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: scale(calc(0.9 + var(--vp) * 0.1));
  transform-origin: 50% 0%;
  isolation: isolate;
}

/* Transmission-gradient hairline around the screen */
.vfilm__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 2px;
  border-radius: inherit;
  background: var(--g-transmission);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.vfilm__poster,
.vfilm__poster img,
.vfilm__frame iframe {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

.vfilm__poster img {
  object-fit: cover;
}

/* Gentle navy vignette so the play button reads on any frame */
.vfilm__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(2, 17, 58, 0.05) 30%, rgba(2, 17, 58, 0.55) 100%);
}

/* ---------------------------------------------------------------------------
   Play button (link without JS, button behaviour with JS)
   --------------------------------------------------------------------------- */
.vfilm__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: var(--c-navy);
}

.vfilm__play-btn {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: clamp(4rem, 3rem + 4vw, 5.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--c-teal);
  box-shadow: 0 20px 50px -12px rgba(0, 169, 182, 0.75);
  transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}

/* Two pulse rings */
.vfilm__play-btn::before,
.vfilm__play-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(0, 169, 182, 0.7);
  animation: vfilm-pulse 2.4s var(--ease-out) infinite;
}

.vfilm__play-btn::after {
  animation-delay: 1.2s;
}

@keyframes vfilm-pulse {
  0%   { opacity: 0.9; scale: 1; }
  100% { opacity: 0;   scale: 1.7; }
}

/* The triangle path is already drawn optically centred in its 24×24 box
   (its bounding box sits slightly toward inline-end), so no extra offset. */
.vfilm__play-btn svg {
  inline-size: 38%;
  block-size: 38%;
}

[dir="rtl"] .vfilm__play-btn svg {
  scale: -1 1;
}

.vfilm__play:hover .vfilm__play-btn,
.vfilm__play:focus-visible .vfilm__play-btn {
  transform: scale(1.08);
  background-color: #12B9C6;
}

.vfilm__play:focus-visible {
  outline: none;
}

.vfilm__play:focus-visible .vfilm__play-btn {
  box-shadow: 0 0 0 4px var(--c-white), 0 0 0 8px var(--c-teal);
}

/* Duration chip */
.vfilm__chip {
  position: absolute;
  inset-block-end: clamp(0.75rem, 2vw, 1.25rem);
  inset-inline-start: clamp(0.75rem, 2vw, 1.25rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-block: 0.35rem;
  padding-inline: 0.75rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-glass-border);
  background-color: rgba(2, 17, 58, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--c-white);
  font-size: var(--fs-caption);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.vfilm__chip svg {
  inline-size: 0.875rem;
  block-size: 0.875rem;
  color: var(--c-teal);
}

/* Pixel-F cluster dispersing from the frame's upper inline-end corner */
.vfilm__pixels {
  position: absolute;
  inset-block-start: -0.25rem;
  inset-inline-end: -0.5rem;
  z-index: 4;
  inline-size: clamp(4.5rem, 8vw, 7rem);
  pointer-events: none;
}

[dir="rtl"] .vfilm__pixels {
  scale: -1 1;
}

/* Once playing: the facade is gone */
.vfilm.is-playing .vfilm__poster,
.vfilm.is-playing .vfilm__play,
.vfilm.is-playing .vfilm__chip {
  display: none;
}

@media (max-width: 47.99rem) {
  .vfilm__frame {
    border-radius: calc(16px + (1 - var(--vp)) * 16px);
  }
}