/* =========================================================
   Praise Picker — rollover + page effects (all pages)
   Load after pp.css / nav.css:
   <link rel="stylesheet" href="/assets/pp-fx.css">
   ========================================================= */

:root { --pp-ease: cubic-bezier(.2,.8,.2,1); --pp-purple: var(--purple, #5B22B8); }
html { scroll-behavior: smooth; }

/* ---------- Page effects ---------- */
body { animation: pp-page-in .6s var(--pp-ease) both; }
@keyframes pp-page-in { from { opacity: 0; } to { opacity: 1; } }

.ppnav { transition: box-shadow .3s, background .3s; }
.ppnav.pp-scrolled { box-shadow: 0 8px 30px -18px rgba(35,22,52,.45); }
.ppnav-links > a, .ppnav-dd > a { position: relative; }
.ppnav-links > a::after, .ppnav-dd > a::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 2px; height: 2px; border-radius: 2px;
  background: var(--pp-purple); transform: scaleX(0); transition: transform .3s var(--pp-ease);
}
.ppnav-links > a:hover::after, .ppnav-dd > a:hover::after { transform: scaleX(1); }
.ppnav-dd-menu a { transition: background .2s, transform .25s var(--pp-ease); }
.ppnav-dd-menu a:hover { transform: translateX(4px); }

/* Scroll reveal (JS adds .pp-reveal, then .pp-in) */
.pp-reveal { opacity: 0; }
.pp-reveal.pp-in { opacity: 1; animation: pp-up .7s var(--pp-ease) both; }
@keyframes pp-up { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }

/* Buttons & links (site-wide) */
a.btn, .btn, .air-btn, .ppnav a[href$="book.html"] {
  transition: transform .25s var(--pp-ease), box-shadow .25s var(--pp-ease), filter .25s, background .2s;
}
a.btn:hover, .btn:hover, .air-btn:hover, .ppnav a[href$="book.html"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -12px rgba(91,34,184,.75);
  filter: brightness(1.08);
}
main p a, main li a {
  background: linear-gradient(currentColor,currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size .35s var(--pp-ease), color .2s;
}
main p a:hover, main li a:hover { background-size: 100% 2px; }

/* =========================================================
   SERVICES page
   ========================================================= */
ul.numbered li {
  position: relative; padding: 14px 16px !important; margin-left: -16px; margin-right: -16px; border-radius: 12px;
  transition: background .35s var(--pp-ease), transform .35s var(--pp-ease), box-shadow .35s var(--pp-ease);
}
ul.numbered li::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px;
  background: var(--pp-purple); transform: scaleY(0); transform-origin: top; transition: transform .35s var(--pp-ease);
}
ul.numbered li:hover { background: #fff; transform: translateX(6px); box-shadow: 0 10px 30px -18px rgba(35,22,52,.45); }
ul.numbered li:hover::before { transform: scaleY(1); }
ul.numbered .n { border-radius: 6px; transition: background .3s, color .3s, border-color .3s, transform .3s var(--pp-ease); }
ul.numbered li:hover .n { background: var(--pp-purple); color: #fff; border-color: var(--pp-purple); transform: scale(1.12) rotate(-4deg); }
ul.numbered li h4 { transition: color .3s; }
ul.numbered li:hover h4 { color: var(--pp-purple); }

.band--dark .grid > div { position: relative; overflow: hidden; transition: background .4s var(--pp-ease); }
.band--dark .grid > div::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(157,103,230,.28), transparent 60%);
}
.band--dark .grid > div:hover { background: #2e1a4a; }
.band--dark .grid > div:hover::after { opacity: 1; }
.band--dark .grid > div h3 { transition: transform .35s var(--pp-ease), color .35s; }
.band--dark .grid > div:hover h3 { transform: translateX(4px); color: #d9c3ff; }

.cards .card { position: relative; border-radius: 12px; transition: transform .4s var(--pp-ease), box-shadow .4s var(--pp-ease), background .4s; }
.cards .card::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
  background: linear-gradient(90deg,#6B34B0,#b07cf0,#6B34B0); background-size: 200% 100%;
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--pp-ease);
}
.cards .card:hover { transform: translateY(-8px); background: #fff; box-shadow: 0 2px 0 rgba(35,22,52,.04), 0 28px 50px -24px rgba(107,52,176,.55); }
.cards .card:hover::before { transform: scaleX(1); animation: pp-shimmer 2s linear infinite; }
@keyframes pp-shimmer { to { background-position: -200% 0; } }

.rows .row { position: relative; transition: background .3s, padding-left .3s var(--pp-ease); }
.rows .row:hover { background: #f3ecfc; padding-left: 30px !important; }
.rows .row::before {
  content: "→"; position: absolute; left: 10px; top: 50%; transform: translate(-6px,-50%); opacity: 0;
  color: var(--pp-purple); font-weight: 700; transition: opacity .3s, transform .3s var(--pp-ease);
}
.rows .row:hover::before { opacity: 1; transform: translate(0,-50%); }
.rows .row .v { transition: color .3s; }
.rows .row:hover .v { color: var(--pp-purple); }

/* =========================================================
   AI RECEPTIONIST page
   ========================================================= */
/* Hero: living illustration */
.air-halo { animation: pp-halo 5s ease-in-out infinite; }
@keyframes pp-halo { 0%,100% { scale: 1; } 50% { scale: 1.06; } }
.air-bub--hello  { animation: pp-bob 4s ease-in-out infinite; }
.air-bub--thanks { animation: pp-bob 4.6s ease-in-out .8s infinite; }
@keyframes pp-bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.air-wave > i { transform-origin: center; animation: pp-eq 1.1s ease-in-out infinite; }
.air-wave > i:nth-child(3n+1) { animation-delay: -.2s; }
.air-wave > i:nth-child(3n+2) { animation-delay: -.55s; animation-duration: .9s; }
.air-wave > i:nth-child(3n)   { animation-delay: -.8s;  animation-duration: 1.3s; }
@keyframes pp-eq { 0%,100% { transform: scaleY(.45); } 50% { transform: scaleY(1.15); } }
.air-phone { animation: pp-ring 3.2s ease-in-out infinite; }
@keyframes pp-ring { 0%,80%,100% { rotate: 0deg; } 84% { rotate: -12deg; } 88% { rotate: 12deg; } 92% { rotate: -8deg; } 96% { rotate: 6deg; } }

/* Hero cards */
.air-call, .air-res { transition: transform .35s var(--pp-ease), box-shadow .35s var(--pp-ease); }
.air-call:hover { transform: translateY(-5px) rotate(-.6deg); box-shadow: 0 30px 50px -26px rgba(91,34,184,.6); }
.air-res { cursor: default; }
.air-res:hover { transform: translateX(-6px) scale(1.03); box-shadow: 0 22px 40px -22px rgba(91,34,184,.55); }
.air-res-ico, .air-ok { transition: transform .35s var(--pp-ease); }
.air-res:hover .air-res-ico { transform: rotate(-10deg) scale(1.12); }
.air-res:hover .air-ok { transform: scale(1.25); }
.air-results .air-res { animation: pp-slide-in .7s var(--pp-ease) both; }
.air-results .air-res:nth-child(1) { animation-delay: .35s; }
.air-results .air-res:nth-child(2) { animation-delay: .55s; }
.air-results .air-res:nth-child(3) { animation-delay: .75s; }
@keyframes pp-slide-in { from { opacity: 0; translate: 24px 0; } to { opacity: 1; translate: 0 0; } }

.air-link { display: inline-flex; align-items: center; gap: 6px; transition: gap .25s var(--pp-ease), color .2s; }
.air-link:hover { gap: 12px; }
.air-checks li { transition: transform .25s var(--pp-ease); }
.air-checks li:hover { transform: translateX(3px); }

/* Pricing tiers */
.air-tier {
  transition: transform .35s var(--pp-ease), box-shadow .35s var(--pp-ease), border-color .3s;
  cursor: default;
}
.air-tier:hover {
  transform: translateY(-8px);
  border-color: var(--pp-purple);
  box-shadow: 0 26px 44px -24px rgba(91,34,184,.6);
}
.air-tier--hot { animation: pp-glow 3s ease-in-out infinite; }
.air-tier--hot:hover { transform: translateY(-10px) scale(1.02); }
@keyframes pp-glow {
  0%,100% { box-shadow: 0 0 0 0 rgba(91,34,184,0), 0 18px 34px -22px rgba(91,34,184,.5); }
  50%     { box-shadow: 0 0 0 6px rgba(91,34,184,.10), 0 18px 34px -22px rgba(91,34,184,.5); }
}

/* "What it does" list */
.air-does li { border-radius: 10px; transition: background .3s, transform .3s var(--pp-ease); }
.air-does li:hover { background: #f5effd; transform: translateX(4px); }
.air-does li .ic { transition: transform .35s var(--pp-ease), background .3s, color .3s; }
.air-does li:hover .ic { transform: scale(1.15) rotate(-8deg); }

/* Benefits row */
.air-ben { border-radius: 12px; transition: background .3s, transform .35s var(--pp-ease), box-shadow .35s; }
.air-ben:hover { background: #faf7ff; transform: translateY(-4px); box-shadow: 0 18px 32px -22px rgba(91,34,184,.5); }
.air-ben .ic { transition: transform .4s var(--pp-ease); }
.air-ben:hover .ic { transform: scale(1.15) rotate(8deg); }
.air-ben b { transition: color .3s; }
.air-ben:hover b { color: var(--pp-purple); }

/* =========================================================
   PRICING page + generic cards (only affects elements that exist)
   ========================================================= */
.plan, .price-card, .tier { transition: transform .35s var(--pp-ease), box-shadow .35s var(--pp-ease); }
.plan:hover, .price-card:hover, .tier:hover { transform: translateY(-8px); box-shadow: 0 28px 48px -26px rgba(91,34,184,.6); }
.plan--feature { animation: pp-glow 3s ease-in-out infinite; }
.plan li { transition: transform .25s var(--pp-ease); }
.plan li:hover { transform: translateX(4px); }
.stat { transition: transform .35s var(--pp-ease); }
.stat:hover { transform: translateY(-4px); }
.faq details, .faq > div { transition: background .3s; border-radius: 10px; }
.faq details:hover, .faq > div:hover { background: rgba(107,52,176,.05); }

/* Respect reduced-motion settings */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .pp-reveal { opacity: 1; }
  html { scroll-behavior: auto; }
}