/* Junk Raider — "Snap a photo, get a price" promo section + glowing CTA (Oct 20 2026).
   Used on the homepage and /pricing. Animation: phone snaps a real pile → AI spots items → price appears.
   Readable on purpose (licensing). Brand values live in the variables below. */
@property --pp-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

.pp {
  --pp-navy: #183C7A; --pp-deep: #16204D; --pp-green: #4F7A20; --pp-lime: #86B032; --pp-glow: #c6f06a;
  --pp-loop: 11s;
  position: relative; overflow: hidden; isolation: isolate; padding: 104px 0;
  background:
    radial-gradient(60% 70% at 12% 20%, rgba(134,176,50,.16), transparent 70%),
    radial-gradient(55% 65% at 92% 80%, rgba(43,86,163,.14), transparent 70%),
    linear-gradient(180deg, #fbfdf7, #f2f6fc);
}
.pp-in { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.pp-new { display: inline-flex; align-items: center; gap: 10px; font: 700 .84rem Inter, sans-serif; color: var(--pp-green); margin-bottom: 16px; }
.pp-new b { font: 800 .7rem Inter, sans-serif; letter-spacing: .08em; color: #fff; padding: 5px 10px; border-radius: 999px;
  background: linear-gradient(135deg, #8cc63f, var(--pp-green)); box-shadow: 0 0 0 0 rgba(134,176,50,.6); animation: ppPing 2.2s ease-out infinite; }
.pp h2 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1; }
.pp h2 .gt { display: block; }
.pp .lede { max-width: 520px; }

/* 3 steps — light up in sync with the phone */
.pp-steps { list-style: none; margin: 30px 0 34px; padding: 0; display: grid; gap: 12px; max-width: 470px; }
.pp-steps li { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px; background: rgba(255,255,255,.7);
  border: 1px solid #e4e9f2; font-weight: 700; color: var(--pp-deep); transition: .3s; }
.pp-steps li span { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #2b56a3, var(--pp-deep)); }
.pp-steps li:nth-child(2) span { background: linear-gradient(135deg, #8cc63f, var(--pp-green)); }
.pp-steps li:nth-child(3) span { background: linear-gradient(135deg, #f0b43c, #d4790f); }
.pp-steps svg { width: 20px; height: 20px; }
.pp-steps small { display: block; font-weight: 500; color: #5b6475; font-size: .86rem; margin-top: 1px; }
.pp-on .pp-steps li { animation: ppStep var(--pp-loop) infinite; }
.pp-on .pp-steps li:nth-child(1) { animation-name: ppStep1; }
.pp-on .pp-steps li:nth-child(2) { animation-name: ppStep2; }
.pp-on .pp-steps li:nth-child(3) { animation-name: ppStep3; }
@keyframes ppStep1 { 0%,16% { background:#fff; border-color: rgba(43,86,163,.45); box-shadow: 0 14px 30px -18px rgba(22,32,77,.45); transform: translateX(6px); } 20%,100% { transform: none; } }
@keyframes ppStep2 { 0%,17% { transform: none; } 20%,44% { background:#fff; border-color: rgba(79,122,32,.5); box-shadow: 0 14px 30px -18px rgba(79,122,32,.55); transform: translateX(6px); } 48%,100% { transform: none; } }
@keyframes ppStep3 { 0%,45% { transform: none; } 50%,92% { background:#fff; border-color: rgba(212,121,15,.5); box-shadow: 0 14px 30px -18px rgba(212,121,15,.5); transform: translateX(6px); } 96%,100% { transform: none; } }

/* The glowing, radiant CTA */
.pp-cta { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 12px; border: 0; cursor: pointer;
  padding: 20px 30px; border-radius: 18px; font: 800 1.12rem Inter, sans-serif; color: #fff; text-decoration: none;
  background: linear-gradient(135deg, #82b936, var(--pp-green) 55%, #3f6419);
  box-shadow: 0 18px 38px -12px rgba(79,122,32,.75), inset 0 1px 0 rgba(255,255,255,.35);
  animation: ppGlow 2.6s ease-in-out infinite; transition: transform .2s; }
.pp-cta svg { width: 24px; height: 24px; }
.pp-cta::before { content: ""; position: absolute; inset: -3px; border-radius: 21px; z-index: -1; padding: 3px;
  background: conic-gradient(from var(--pp-a), var(--pp-glow), #86B032, #2b56a3, #183C7A, #86B032, var(--pp-glow));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ppSpin 3.2s linear infinite; }
.pp-cta::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; border-radius: inherit;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); animation: ppSheen 3.4s ease-in-out infinite; }
.pp-cta:hover { transform: translateY(-2px) scale(1.02); }
.pp-cta:focus-visible { outline: 3px solid var(--pp-navy); outline-offset: 4px; }
.pp-fine { margin-top: 14px; font-size: .86rem; color: #5b6475; }
.pp-fine a { color: var(--pp-green); font-weight: 700; }

/* Phone */
.pp-stage { position: relative; display: grid; place-items: center; }
.pp-stage::before { content: ""; position: absolute; width: 120%; aspect-ratio: 1; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(134,176,50,.30), rgba(43,86,163,.12) 55%, transparent 72%); filter: blur(10px); animation: ppBreathe 5s ease-in-out infinite; }
.pp-phone { position: relative; width: 300px; max-width: 78vw; aspect-ratio: 9 / 19; border-radius: 46px; padding: 12px;
  background: linear-gradient(145deg, #2a3555, #0d1430); box-shadow: 0 50px 90px -30px rgba(13,20,48,.65), inset 0 0 0 2px rgba(255,255,255,.08); }
.pp-scr { position: relative; height: 100%; border-radius: 35px; overflow: hidden; background: #0b0f1d; }
.pp-notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; border-radius: 20px; background: #000; z-index: 6; }
.pp-cam { position: absolute; top: 44px; left: 0; right: 0; aspect-ratio: 3 / 4; overflow: hidden; }
.pp-cam img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-vf { position: absolute; inset: 14%; z-index: 2; }
.pp-vf i { position: absolute; width: 26px; height: 26px; border: 3px solid #fff; opacity: .9; }
.pp-vf i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.pp-vf i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.pp-vf i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.pp-vf i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.pp-flash { position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 7; pointer-events: none; }
.pp-scan { position: absolute; left: 0; right: 0; height: 70px; top: -70px; z-index: 3; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(134,176,50,.35) 70%, #c6f06a 98%, transparent); }
.pp-pill { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); z-index: 5; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 999px; background: rgba(15,24,56,.78); color: #fff; font: 700 .74rem Inter, sans-serif; white-space: nowrap; opacity: 0;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pp-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--pp-lime); box-shadow: 0 0 0 0 rgba(134,176,50,.7); animation: ppPing 1.1s ease-out infinite; }
.pp-box { position: absolute; z-index: 4; border: 2px solid #c6f06a; border-radius: 10px; opacity: 0; transform: scale(.85);
  box-shadow: 0 0 0 1px rgba(15,24,56,.25), 0 0 18px rgba(198,240,106,.45); }
.pp-box b { position: absolute; left: -2px; top: -24px; padding: 3px 8px; border-radius: 7px; background: #c6f06a; color: #16204D;
  font: 800 .66rem Inter, sans-serif; white-space: nowrap; }
.pp-box.b1 { left: 8%; top: 29%; width: 26%; height: 51%; }
.pp-box.b2 { left: 37%; top: 46%; width: 33%; height: 30%; }
.pp-box.b2 b { top: auto; bottom: -24px; }
.pp-box.b3 { left: 62%; top: 34%; width: 22%; height: 38%; }
.pp-box.b4 { left: 84%; top: 50%; width: 15%; height: 17%; }
.pp-box.b4 b { left: auto; right: -2px; }
.pp-shut { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: 64px; height: 64px; border-radius: 50%;
  border: 4px solid #fff; display: grid; place-items: center; z-index: 2; }
.pp-shut::before { content: ""; width: 48px; height: 48px; border-radius: 50%; background: #fff; }
.pp-tap { position: absolute; left: 50%; bottom: 26px; width: 64px; height: 64px; margin-left: -32px; border-radius: 50%; z-index: 3;
  border: 3px solid #c6f06a; opacity: 0; }
.pp-sheet { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 6; padding: 18px 18px 16px; border-radius: 26px;
  background: linear-gradient(160deg, #fff, #f3f7ee); box-shadow: 0 -10px 40px -10px rgba(0,0,0,.45); transform: translateY(115%); }
.pp-sheet small { display: flex; align-items: center; gap: 6px; font: 700 .72rem Inter, sans-serif; color: var(--pp-green); }
.pp-sheet small svg { width: 14px; height: 14px; }
.pp-load { margin: 10px 0 4px; display: flex; justify-content: space-between; font: 700 .78rem Inter, sans-serif; color: #5b6475; }
.pp-bar { height: 10px; border-radius: 99px; background: #e6ebf3; overflow: hidden; }
.pp-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #86B032, #4F7A20); }
.pp-price { margin: 12px 0 2px; font: 900 2.1rem/1 "Inter Tight", Inter, sans-serif; letter-spacing: -.02em; opacity: 0; transform: scale(.8); transform-origin: left center;
  background: linear-gradient(90deg, #16204D, #2b56a3 45%, #4F7A20); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pp-ex { font-size: .66rem; color: #7c8496; }
.pp-book { margin-top: 12px; padding: 12px; border-radius: 14px; text-align: center; color: #fff; font: 800 .86rem Inter, sans-serif;
  background: linear-gradient(135deg, #82b936, #4F7A20); }

/* Timeline (all on the same loop) */
.pp-on .pp-vf { animation: ppVf var(--pp-loop) infinite; }
.pp-on .pp-tap { animation: ppTap var(--pp-loop) infinite; }
.pp-on .pp-flash { animation: ppFlash var(--pp-loop) infinite; }
.pp-on .pp-scan { animation: ppScan var(--pp-loop) infinite; }
.pp-on .pp-pill { animation: ppPill var(--pp-loop) infinite; }
.pp-on .pp-box.b1 { animation: ppBox1 var(--pp-loop) infinite; }
.pp-on .pp-box.b2 { animation: ppBox2 var(--pp-loop) infinite; }
.pp-on .pp-box.b3 { animation: ppBox3 var(--pp-loop) infinite; }
.pp-on .pp-box.b4 { animation: ppBox4 var(--pp-loop) infinite; }
.pp-on .pp-sheet { animation: ppSheet var(--pp-loop) infinite cubic-bezier(.2,.9,.25,1); }
.pp-on .pp-bar i { animation: ppFill var(--pp-loop) infinite; }
.pp-on .pp-price { animation: ppPrice var(--pp-loop) infinite; }
.pp-on .pp-book { animation: ppBook var(--pp-loop) infinite; }
.pp-on .pp-cam img { animation: ppZoom var(--pp-loop) infinite; }

@keyframes ppVf { 0%,13% { opacity: 1; transform: scale(1); } 6% { transform: scale(.96); } 16%,96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ppTap { 0%,10% { opacity: 0; transform: scale(1); } 12% { opacity: 1; transform: scale(.9); } 16% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; } }
@keyframes ppFlash { 0%,13.5% { opacity: 0; } 14.5% { opacity: .95; } 19%,100% { opacity: 0; } }
@keyframes ppScan { 0%,18% { top: -70px; opacity: 0; } 19% { opacity: 1; } 40% { top: 60%; opacity: 1; } 42%,100% { opacity: 0; } }
@keyframes ppPill { 0%,18% { opacity: 0; } 21%,42% { opacity: 1; } 46%,100% { opacity: 0; } }
@keyframes ppBox1 { 0%,23% { opacity: 0; transform: scale(.85); } 26%,92% { opacity: 1; transform: scale(1); } 96%,100% { opacity: 0; } }
@keyframes ppBox2 { 0%,27% { opacity: 0; transform: scale(.85); } 30%,92% { opacity: 1; transform: scale(1); } 96%,100% { opacity: 0; } }
@keyframes ppBox3 { 0%,31% { opacity: 0; transform: scale(.85); } 34%,92% { opacity: 1; transform: scale(1); } 96%,100% { opacity: 0; } }
@keyframes ppBox4 { 0%,35% { opacity: 0; transform: scale(.85); } 38%,92% { opacity: 1; transform: scale(1); } 96%,100% { opacity: 0; } }
@keyframes ppSheet { 0%,44% { transform: translateY(115%); } 50%,92% { transform: translateY(0); } 98%,100% { transform: translateY(115%); } }
@keyframes ppFill { 0%,51% { width: 0; } 58%,94% { width: 25%; } 100% { width: 0; } }
@keyframes ppPrice { 0%,56% { opacity: 0; transform: scale(.8); } 60% { opacity: 1; transform: scale(1.06); } 63%,92% { opacity: 1; transform: scale(1); } 96%,100% { opacity: 0; } }
@keyframes ppBook { 0%,63% { box-shadow: 0 0 0 0 rgba(134,176,50,0); } 68% { box-shadow: 0 0 0 8px rgba(134,176,50,.35); } 74%,100% { box-shadow: 0 0 0 0 rgba(134,176,50,0); } }
@keyframes ppZoom { 0% { transform: scale(1.06); } 13% { transform: scale(1); } 100% { transform: scale(1); } }

@keyframes ppSpin { to { --pp-a: 360deg; } }
@keyframes ppGlow { 0%,100% { box-shadow: 0 18px 38px -12px rgba(79,122,32,.75), 0 0 0 0 rgba(198,240,106,0), inset 0 1px 0 rgba(255,255,255,.35); }
  50% { box-shadow: 0 18px 46px -10px rgba(79,122,32,.85), 0 0 34px 6px rgba(198,240,106,.55), inset 0 1px 0 rgba(255,255,255,.35); } }
@keyframes ppSheen { 0%,55% { left: -60%; } 85%,100% { left: 130%; } }
@keyframes ppPing { 0% { box-shadow: 0 0 0 0 rgba(134,176,50,.6); } 100% { box-shadow: 0 0 0 12px rgba(134,176,50,0); } }
@keyframes ppBreathe { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.06); opacity: 1; } }

@media (max-width: 960px) {
  .pp { padding: 80px 0; }
  .pp-in { grid-template-columns: 1fr; gap: 40px; }
  .pp-copy { display: contents; }
  .pp-head { order: 1; } .pp-stage { order: 2; } .pp-act { order: 3; text-align: center; } .pp-steps { order: 4; margin: 0 auto; width: 100%; }
  .pp-head { text-align: center; } .pp .lede { margin-left: auto; margin-right: auto; }
  .pp-cta { width: 100%; justify-content: center; padding: 19px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .pp *, .pp *::before, .pp *::after, .pp-cta, .pp-cta::before, .pp-cta::after { animation: none !important; }
  .pp-vf, .pp-pill, .pp-scan, .pp-tap, .pp-flash { opacity: 0 !important; }
  .pp-box { opacity: 1; transform: none; } .pp-sheet { transform: none; } .pp-bar i { width: 25%; } .pp-price { opacity: 1; transform: none; }
}

.pp-up { display: inline; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--pp-green); text-decoration: underline; cursor: pointer; }