/* ============================================================
   PerfectBody LipoHP — Effects: shadows, glows, motion, overlays
   The system uses almost no resting shadow on light surfaces
   (hairline borders do the work). The one signature shadow is
   the blue glow under the primary pill button.
   ============================================================ */

:root {
  /* ---- Shadows / glows ---- */
  --pb-shadow-none:     none;
  --pb-glow-blue:       0 6px 24px rgba(46, 126, 240, 0.35);
  --pb-glow-blue-lg:    0 10px 30px rgba(46, 126, 240, 0.45);
  --pb-glow-blue-soft:  0 14px 32px rgba(46, 110, 240, 0.24);
  --pb-shadow-text:     0 2px 30px rgba(0, 0, 0, 0.45); /* serif on imagery */

  /* ---- Borders ---- */
  --pb-border-hairline: 1px solid var(--pb-rule);
  --pb-border-warm:     1px solid var(--pb-rule-warm);
  --pb-border-dark:     1px solid var(--pb-rule-dark);

  /* ---- Motion ---- *
     One signature easing across the brand: a confident ease-out. */
  --pb-ease:        cubic-bezier(.2, .7, .2, 1); /* @kind other */
  --pb-dur-fast:    0.2s;   /* @kind other */
  --pb-dur:         0.25s;  /* @kind other */
  --pb-dur-rise:    0.8s;   /* @kind other */
  --pb-rise-shift:  22px;   /* @kind spacing */

  /* ---- Overlays (for dark hero / cinematic sections) ---- */
  --pb-veil:        rgba(7, 13, 26, 0.42); /* @kind other */
  --pb-grade:       linear-gradient(180deg,
                      rgba(4, 7, 13, 0.72) 0%,
                      rgba(4, 7, 13, 0.12) 22%,
                      rgba(4, 7, 13, 0) 48%,
                      rgba(4, 7, 13, 0.55) 86%,
                      rgba(4, 7, 13, 0.80) 100%); /* @kind other */
  --pb-vignette:    radial-gradient(125% 125% at 50% 46%,
                      transparent 52%, rgba(2, 4, 9, 0.78) 100%); /* @kind other */
  /* Repeatable film grain — apply at opacity ~.07, mix-blend overlay */
  --pb-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); /* @kind other */
}

/* ---- Reveal-on-scroll utility (used across the brand) ---- */
.pb-rv {
  opacity: 0;
  transform: translateY(var(--pb-rise-shift));
  transition: opacity var(--pb-dur-rise) var(--pb-ease),
              transform var(--pb-dur-rise) var(--pb-ease);
}
.pb-rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pb-rv { opacity: 1; transform: none; transition: none; }
}