/* ==========================================================================
   Peekaboo CTA — a fixed "Try Filtru now" pill that reveals as you scroll past
   the top, using a pure-CSS scroll-driven animation (no JavaScript). Browsers
   without scroll-timeline support keep it hidden (graceful fallback). Also the
   hover-reveal App Store QR panels that attach to CTAs and the peekaboo pill.
   ========================================================================== */
.peekaboo {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px 10px 10px;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 900;
  font-size: 1.02rem;
  line-height: 1;
  border-radius: 999px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  /* Hidden until the scroll-reveal runs (or permanently, if unsupported). */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.peekaboo:hover {
  text-decoration: none;
  background: var(--color-accent-light);
}

.peekaboo__icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: block;
  flex: none;
}

/* visibility flips with the reveal so the pill is NOT keyboard-focusable while
   it's invisible at the top of the page (WCAG 2.4.7). */
@keyframes peekaboo-in {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    visibility: visible;
  }
}

@keyframes peekaboo-fade {
  to {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }
}

@supports (animation-timeline: scroll()) {
  .peekaboo {
    transform: translateY(18px) scale(0.96);
    animation: peekaboo-in linear both;
    animation-timeline: scroll(root);
    animation-range: 55vh 95vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .peekaboo {
    transform: none !important;
    animation-name: peekaboo-fade;
  }
}

/* ==========================================================================
   QR-on-hover for App Store CTAs (pure CSS; hover/desktop devices only).
   CTA buttons reveal the QR below; the peekaboo reveals it above.
   ========================================================================== */
.cta-qr {
  position: relative;
  display: inline-flex;
}

.cta-qr__panel,
.peekaboo__qr {
  position: absolute;
  z-index: 65;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 12px 12px 10px;
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.cta-qr__panel img,
.peekaboo__qr img {
  width: 200px;
  height: 200px;
  max-width: none;
  display: block;
  border-radius: 8px;
}

.cta-qr__cap {
  display: block;
  margin-top: 8px;
  text-align: center;
  color: #4a4a4a;
  font-size: 0.78rem;
  font-weight: 700;
}

/* CTA button → panel below, centred, with an up-pointing caret. */
.cta-qr__panel {
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
}

.cta-qr__panel::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-bottom-color: #fff;
}

.cta-qr:hover .cta-qr__panel,
.cta-qr:focus-within .cta-qr__panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

/* Peekaboo → panel above, right-aligned, with a down-pointing caret. */
.peekaboo__qr {
  bottom: calc(100% + 12px);
  right: 0;
  transform: translateY(6px);
}

.peekaboo__qr::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 34px;
  border: 7px solid transparent;
  border-top-color: #fff;
}

.peekaboo {
  transition: background 0.12s ease;
}

.peekaboo:hover .peekaboo__qr,
.peekaboo:focus-within .peekaboo__qr {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

/* Touch devices don't hover — QR is desktop-only; tapping just opens the App Store. */
@media (hover: none) {

  .cta-qr__panel,
  .peekaboo__qr {
    display: none;
  }
}