/* ============================================================================
 * pd-motion.css — site-wide motion + micro-interaction primitives.
 *
 * Design intent: subtle / premium (Linear, Stripe, Notion style). No bouncing,
 * no spinning, no parallax. All animations are short (300-700ms), use
 * cubic-bezier(0.16, 1, 0.3, 1) ("ease-out-expo"), and degrade to no-op for
 * users with prefers-reduced-motion.
 *
 * Class API:
 *   [data-reveal]                  → element fades+slides up when 15% in view
 *   [data-reveal="fade"]           → fade only, no translate
 *   [data-reveal="scale"]          → fade + small scale-up
 *   [data-reveal="left"]           → fade + slide from left
 *   [data-reveal="right"]          → fade + slide from right
 *   [data-reveal-delay="120"]      → 120ms stagger (max 600, in 60-step units)
 *
 *   .pd-card-lift                  → hover translateY + shadow lift
 *   .pd-image-zoom                 → wrapper class; child <img> scales on hover
 *   .pd-btn-press                  → button micro-press on :active
 *   .pd-shine                      → gradient sheen sweep across element
 *   .pd-pulse-dot                  → ::before pulsing halo around a dot
 *   .pd-gradient-text              → brand green gradient text fill
 *   .pd-link-underline             → animated underline (left→right) on hover
 *   .pd-skeleton                   → shimmer skeleton loader
 *
 * Performance: ~3KB minified. No layout thrash — only opacity/transform.
 * ========================================================================== */

:root {
  --pd-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pd-dur: 700ms;
  --pd-brand: #24A556;
  --pd-brand-2: #77B248;
}

/* -----------------------------------------------------------------------------
 * Reveal-on-scroll: hidden by default, revealed when JS sets data-revealed=true.
 * If JS is disabled, the .pd-motion-ready class is absent → fall through to the
 * "always visible" state (no FOUC, no broken pages).
 * --------------------------------------------------------------------------- */
html.pd-motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--pd-dur) var(--pd-ease),
    transform var(--pd-dur) var(--pd-ease);
  will-change: opacity, transform;
}
html.pd-motion-ready [data-reveal="fade"]  { transform: none; }
html.pd-motion-ready [data-reveal="scale"] { transform: scale(0.96); }
html.pd-motion-ready [data-reveal="left"]  { transform: translateX(-32px); }
html.pd-motion-ready [data-reveal="right"] { transform: translateX(32px); }

html.pd-motion-ready [data-reveal][data-revealed="true"] {
  opacity: 1;
  transform: none;
}

/* Stagger delays (only need a small set) */
html.pd-motion-ready [data-reveal-delay="60"]  { transition-delay: 60ms; }
html.pd-motion-ready [data-reveal-delay="120"] { transition-delay: 120ms; }
html.pd-motion-ready [data-reveal-delay="180"] { transition-delay: 180ms; }
html.pd-motion-ready [data-reveal-delay="240"] { transition-delay: 240ms; }
html.pd-motion-ready [data-reveal-delay="300"] { transition-delay: 300ms; }
html.pd-motion-ready [data-reveal-delay="360"] { transition-delay: 360ms; }
html.pd-motion-ready [data-reveal-delay="420"] { transition-delay: 420ms; }
html.pd-motion-ready [data-reveal-delay="480"] { transition-delay: 480ms; }

/* -----------------------------------------------------------------------------
 * Micro-interactions
 * --------------------------------------------------------------------------- */

.pd-card-lift {
  transition: transform 250ms var(--pd-ease), box-shadow 250ms var(--pd-ease);
  will-change: transform;
}
.pd-card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -16px rgba(16, 24, 40, 0.18), 0 4px 12px -4px rgba(16, 24, 40, 0.08);
}

.pd-image-zoom {
  overflow: hidden;
}
.pd-image-zoom img {
  transition: transform 700ms var(--pd-ease);
  will-change: transform;
}
.pd-image-zoom:hover img {
  transform: scale(1.04);
}

/* Use on <button>/<a> — adds a small "tap" press on click without layout shift */
.pd-btn-press {
  transition: transform 150ms var(--pd-ease), box-shadow 200ms var(--pd-ease), filter 200ms var(--pd-ease);
}
.pd-btn-press:hover { filter: brightness(1.04); }
.pd-btn-press:active { transform: scale(0.97); }

/* Sheen sweep — apply to a positioned wrapper. The pseudo-element runs once
 * on hover so it doesn't compete with attention while idle. */
.pd-shine {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.pd-shine::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 900ms var(--pd-ease);
  pointer-events: none;
  z-index: 1;
}
.pd-shine:hover::after {
  transform: translateX(120%);
}

/* Pulse halo around a small dot — apply to a positioned dot element */
.pd-pulse-dot {
  position: relative;
}
.pd-pulse-dot::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 9999px;
  background: var(--pd-brand);
  opacity: 0.35;
  animation: pdPulse 2.4s var(--pd-ease) infinite;
  z-index: -1;
}
@keyframes pdPulse {
  0%   { transform: scale(0.6); opacity: 0.45; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

.pd-gradient-text {
  background: linear-gradient(110deg, var(--pd-brand-2), var(--pd-brand));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.pd-link-underline {
  position: relative;
  display: inline-block;
}
.pd-link-underline::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 2px;
  background: currentColor;
  transition: right 300ms var(--pd-ease);
}
.pd-link-underline:hover::after { right: 0; }

/* Skeleton shimmer — apply to a block element with a background color */
.pd-skeleton {
  background: linear-gradient(90deg, #ECEEF1 0%, #F5F6F8 50%, #ECEEF1 100%);
  background-size: 200% 100%;
  animation: pdShimmer 1.4s linear infinite;
}
@keyframes pdShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Subtle float-up entrance for hero CTAs */
@keyframes pdHeroIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.pd-hero-in {
  animation: pdHeroIn 700ms var(--pd-ease) both;
}
.pd-hero-in[data-delay="1"] { animation-delay: 120ms; }
.pd-hero-in[data-delay="2"] { animation-delay: 240ms; }
.pd-hero-in[data-delay="3"] { animation-delay: 360ms; }
.pd-hero-in[data-delay="4"] { animation-delay: 480ms; }

/* Soft focus glow for form inputs — opt-in via .pd-input-glow */
.pd-input-glow {
  transition: border-color 200ms var(--pd-ease), box-shadow 200ms var(--pd-ease);
}
.pd-input-glow:focus {
  border-color: var(--pd-brand) !important;
  box-shadow: 0 0 0 4px rgba(36, 165, 86, 0.16);
  outline: none;
}

/* Decorative radial-gradient mesh for dark hero backgrounds — apply to a
 * positioned overlay div with this class. Pure CSS, no JS, no images. */
.pd-mesh-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 18% 22%, rgba(119, 178, 72, 0.22), transparent 60%),
    radial-gradient(50% 45% at 88% 78%, rgba(36, 165, 86, 0.18), transparent 65%),
    radial-gradient(45% 40% at 80% 12%, rgba(255, 255, 255, 0.08), transparent 60%);
  mix-blend-mode: screen;
}

/* Animated counter — set width via CSS variable, transitions smoothly */
.pd-counter-bar {
  position: relative;
  height: 8px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.pd-counter-bar > i {
  display: block;
  height: 100%;
  width: var(--pd-pct, 0%);
  background: linear-gradient(90deg, var(--pd-brand-2), var(--pd-brand));
  border-radius: inherit;
  transition: width 1200ms var(--pd-ease);
}

/* -----------------------------------------------------------------------------
 * Reduced-motion safety net — disable everything that moves.
 * --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.pd-motion-ready [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .pd-card-lift,
  .pd-image-zoom img,
  .pd-btn-press,
  .pd-shine::after,
  .pd-link-underline::after,
  .pd-input-glow,
  .pd-counter-bar > i {
    transition: none !important;
  }
  .pd-pulse-dot::before,
  .pd-skeleton,
  .pd-hero-in {
    animation: none !important;
  }
}