/* Redraw — native hero video player.
   Replaces the old Vimeo "Vídeo explicativo sobre a Redraw" embed.
   Behaviour: muted autoplay background loop; the "Assistir/Watch/Ver" CTA
   unmutes + restarts from 0; custom play/pause + mute + volume controls.
   Single source of truth — referenced by every page that shows the home video. */

/* Hide the legacy Webflow circular play button; the .rd-player CTA replaces it. */
.video_lightbox .video_play-wrap { display: none !important; }

/* Maximally-compatible layout: the <video> is a normal block element sized by
   its own 16:9 intrinsic ratio (width:100%; height:auto) — NO absolute
   positioning, NO object-fit, NO aspect-ratio container tricks. Those can make a
   GPU-composited <video> render black on some browsers/GPUs, which is exactly
   the failure we hit. Overrides the legacy .video_input-play min-height
   (40.25rem) that forced a near-square box and cropped the video, and drops the
   static poster background of .video_lightbox (the old "thumb"). Scoped via
   :has() so the is-transforms videos sharing .video_lightbox are untouched. */
.video_lightbox:has(.rd-player) {
  height: auto !important;
  min-height: 0 !important;
  background-image: none !important;
  background: #0a0a0a;
}

.rd-player {
  position: relative;
  display: block;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  background: #0a0a0a;
  /* The legacy Webflow video used a fade-in interaction (opacity:0 initial state)
     that no longer fires now that .rd-player drives playback — it left the player
     stuck invisible (black). Force it visible; the player manages its own states. */
  opacity: 1 !important;
}

.rd-player__video {
  display: block;
  width: 100%;
  height: auto;            /* intrinsic 16:9 — full video, no crop */
  border-radius: 1rem;
  background: #0a0a0a;
}

/* "Assistir" pill — shown in the muted/background state, centered over the video. */
.rd-player__cta {
  position: absolute;
  inset: 0;
  margin: auto;
  width: -moz-max-content;
  width: max-content;
  height: -moz-max-content;
  height: max-content;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.65rem 0.55rem 1.35rem;
  border: 0;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  transition: transform 0.2s ease, opacity 0.3s ease, background 0.2s ease;
}
.rd-player__cta:hover { transform: scale(1.04); background: rgba(10, 10, 10, 0.85); }
.rd-player__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.rd-player__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #fff;
  flex: 0 0 auto;
}
.rd-player__cta-icon svg { width: 42%; height: 42%; display: block; margin-left: 2px; }

/* Custom controls bar — shown only after the user engages (sound on). */
.rd-player__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  z-index: 3;
}
.rd-player.is-engaged .rd-player__controls { opacity: 1; transform: none; pointer-events: auto; }
.rd-player.is-engaged .rd-player__cta { opacity: 0; pointer-events: none; }

.rd-player__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 0.2s ease;
}
.rd-player__btn:hover { background: rgba(255, 255, 255, 0.26); }
.rd-player__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rd-player__btn svg { width: 1rem; height: 1rem; display: block; }

/* Icon visibility driven by state classes on .rd-player. */
.rd-player__toggle .rd-ico-play { display: none; }
.rd-player__toggle .rd-ico-pause { display: block; }
.rd-player.is-paused .rd-player__toggle .rd-ico-play { display: block; }
.rd-player.is-paused .rd-player__toggle .rd-ico-pause { display: none; }

.rd-player__mute .rd-ico-muted { display: none; }
.rd-player__mute .rd-ico-volume { display: block; }
.rd-player.is-muted .rd-player__mute .rd-ico-muted { display: block; }
.rd-player.is-muted .rd-player__mute .rd-ico-volume { display: none; }

.rd-player__volume {
  width: 6rem;
  max-width: 35vw;
  height: 4px;
  accent-color: #fff;
  cursor: pointer;
}

@media (max-width: 479px) {
  .rd-player__cta { font-size: 0.95rem; padding-left: 1.1rem; }
  .rd-player__cta-icon { width: 2.1rem; height: 2.1rem; }
  .rd-player__volume { width: 4rem; }
}