/* ===========================================================================
   Play button shine v2: same look, zero paint cost

   WHY A V2.  PageSpeed flags "avoid non-composited animations: 11 animated
   elements found".  The v1 sheen animated background-position, which the
   browser must repaint every frame on the main thread.  This version moves
   the sheen to a transform of a tiny overlay element, which runs entirely on
   the compositor: visually identical, and it costs the main thread nothing.
   The pulse ring already animated transform and opacity, so it stays.

   INSTALL: REPLACES play-button-shine.css entirely.  One tiny markup
   addition per button (six in total: the five Shorts cards and the
   explainer): add this as the LAST child inside each button/play element:

     <span class="bsw-glint" aria-hidden="true"></span>

   For the Shorts, inside each <button class="bsw-vid__btn">.
   For the explainer, inside <span class="bsw-xv__play">.
   =========================================================================== */

/* ---- the five Shorts cards ---------------------------------------------- */

/* pulse ring (composited: transform + opacity only) */
.bsw-vid__btn::before{
  content:''; position:absolute; left:50%; top:50%;
  width:58px; height:58px; transform:translate(-50%,-50%);
  border-radius:50%; border:2px solid rgba(255,255,255,.65);
  z-index:1; pointer-events:none;
  animation:bswPulse 2.8s ease-out infinite;
}

/* the disc: pink, glowing, STATIC background (no animated paint) */
.bsw-vid__btn::after{
  width:58px; height:58px; z-index:2;
  background:#C10460 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") no-repeat 56% 50%/21px;
  backdrop-filter:none;
  box-shadow:0 6px 22px rgba(193,4,96,.5);
}
.bsw-vid__btn:hover::after,.bsw-vid__btn:focus-visible::after{
  background-color:#A80354;
  transform:translate(-50%,-50%) scale(1.1);
}
.bsw-vid__dur{ z-index:4; }

/* the glint: a clipped circle over the disc; only transform animates */
.bsw-vid__btn .bsw-glint{
  position:absolute; left:50%; top:50%;
  width:58px; height:58px; margin:-29px 0 0 -29px;
  border-radius:50%; overflow:hidden;
  z-index:3; pointer-events:none;
}
.bsw-glint::before{
  content:''; position:absolute; top:-30%; bottom:-30%; left:0; width:46%;
  background:linear-gradient(105deg, rgba(255,255,255,0), rgba(255,255,255,.85), rgba(255,255,255,0));
  transform:translateX(-160%) rotate(12deg);
  animation:bswGlint 4.6s ease-in-out infinite;
  will-change:transform;
}

/* ---- the explainer facade ----------------------------------------------- */

.bsw-xv__play{
  background:#C10460;
  box-shadow:0 8px 26px rgba(193,4,96,.5);
  overflow:hidden;
}
.bsw-xv__play::before{
  content:''; position:absolute; inset:-9px;
  border-radius:50%; border:2px solid rgba(255,255,255,.55);
  animation:bswPulseInset 2.8s ease-out infinite;
  pointer-events:none;
}
.bsw-xv__play .bsw-glint{
  position:absolute; inset:0; border-radius:50%; overflow:hidden;
  pointer-events:none;
}
.bsw-xv__btn:hover .bsw-xv__play{ background:#A80354; }

/* ---- shared keyframes (transform and opacity only, all composited) ------- */

@keyframes bswPulse{
  0%   { opacity:.75; transform:translate(-50%,-50%) scale(.92); }
  70%  { opacity:0;   transform:translate(-50%,-50%) scale(1.55); }
  100% { opacity:0;   transform:translate(-50%,-50%) scale(1.55); }
}
@keyframes bswPulseInset{
  0%   { opacity:.7; transform:scale(.94); }
  70%  { opacity:0;  transform:scale(1.35); }
  100% { opacity:0;  transform:scale(1.35); }
}
@keyframes bswGlint{
  0%, 62%   { transform:translateX(-160%) rotate(12deg); }
  86%, 100% { transform:translateX(420%) rotate(12deg); }
}

/* ---- reduced motion: still pink, simply still ---------------------------- */
@media (prefers-reduced-motion: reduce){
  .bsw-vid__btn::before, .bsw-xv__play::before, .bsw-glint{ display:none; }
}