/* ============================================================
   AffilioPedia — reviews hero: CTA + click-to-play video card
   Upload to /assets/css/ap-hero.css  (replaces the previous file)

   The video no longer sits behind the headline, so there is no
   scrim and no blur. Nothing downloads until the poster is clicked.
   ============================================================ */

.hero{ padding: 58px 26px 42px; }

/* ---- call to action ---- */
.aphv-actions{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
}
.aphv-cta{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 30px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 15.5px;
  color: #fff;
  background: linear-gradient(96deg, var(--violet-bright) 0%, var(--violet) 100%);
  box-shadow: 0 10px 30px -8px rgba(124,58,237,.7), inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .18s ease, box-shadow .18s ease;
}
.aphv-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -8px rgba(124,58,237,.85), inset 0 1px 0 rgba(255,255,255,.28);
}
.aphv-cta:focus-visible{ outline: 3px solid #cfa6ff; outline-offset: 3px; }

/* The button previews the gesture it asks for. */
.aphv-stars{ display: inline-flex; gap: 3px; }
.aphv-stars svg{
  width: 15px; height: 15px;
  fill: rgba(255,255,255,.34);
  transition: fill .22s ease, transform .22s ease;
}
.aphv-cta:hover .aphv-stars svg,
.aphv-cta:focus-visible .aphv-stars svg{ fill: var(--gold); transform: translateY(-1px); }
.aphv-stars svg:nth-child(1){ transition-delay: 0ms }
.aphv-stars svg:nth-child(2){ transition-delay: 55ms }
.aphv-stars svg:nth-child(3){ transition-delay: 110ms }
.aphv-stars svg:nth-child(4){ transition-delay: 165ms }
.aphv-stars svg:nth-child(5){ transition-delay: 220ms }

.aphv-note{ font-size: 13px; color: var(--gray); }

/* ---- heading above the player ---- */
.aphv-watch{
  margin: 32px 0 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #dfe6ff;
}

/* ---- video card ---- */
/* aspect-ratio reserves the height before the poster loads, so the
   stats below it never jump. */
.aphv-player{
  position: relative;
  width: 100%;
  max-width: 820px;
  margin: 14px auto 0;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #0b1020;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.85);
}
.aphv-facade{
  position: absolute;
  inset: 0;
  z-index: 2;
  transition: opacity .35s ease;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.aphv-poster{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.aphv-play{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--violet);
  display: grid;
  place-items: center;
  box-shadow: 0 14px 38px -10px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .2s ease, background-color .2s ease;
}
.aphv-play svg{ width: 30px; height: 30px; fill: #fff; margin-left: 5px; }
.aphv-facade:hover .aphv-play{
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--violet-bright);
}
.aphv-facade:focus-visible{ outline: 3px solid #cfa6ff; outline-offset: 3px; }

.aphv-duration{
  position: absolute;
  right: 14px;
  bottom: 13px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(5, 8, 22, .74);
  color: #e6ebff;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .01em;
}
.aphv-player video{
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  background: #0b1020;
}

/* While playing, the poster steps aside. When the clip ends the JS drops
   this class, so the card returns to the poster and play button instead of
   sitting on the final logo frame. */
.aphv-player.is-playing .aphv-facade{
  opacity: 0;
  pointer-events: none;
}

/* ---- responsive ---- */
@media (max-width: 860px){
  .hero{ padding: 46px 18px 34px; }
  .aphv-cta{ width: 100%; justify-content: center; }
  .aphv-actions{ width: 100%; }
  .aphv-watch{ font-size: 15px; margin-top: 24px; }
  .aphv-player{ margin-top: 12px; border-radius: 14px; }
  .aphv-play{ width: 68px; height: 68px; }
  .aphv-play svg{ width: 24px; height: 24px; }
}

/* ---- quality floor ---- */
@media (prefers-reduced-motion: reduce){
  .aphv-cta, .aphv-stars svg, .aphv-play, .aphv-facade{ transition: none; }
  .aphv-cta:hover{ transform: none; }
  .aphv-facade:hover .aphv-play{ transform: translate(-50%, -50%); }
}