/**
 * PromXAI Theme 2.0.0-RC20 — Service Page Motion System
 * Final motion owner for Explain, PRO and Request Design.
 * Keeps geometry stable; motion is restricted to ambient light, icons and
 * active/interactive surfaces.
 */

@keyframes pxServiceAuraDrift {
  0%,100% { transform: translate3d(0,0,0) scale(1); opacity:.72; }
  50% { transform: translate3d(-14px,10px,0) scale(1.08); opacity:1; }
}
@keyframes pxServiceFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(2deg); }
}
@keyframes pxServicePulse {
  0%,100% { box-shadow:0 0 0 rgba(101,91,255,0); }
  50% { box-shadow:0 0 24px rgba(101,91,255,.18); }
}
@keyframes pxServiceSheen {
  0% { transform:translateX(-150%); opacity:0; }
  18% { opacity:.95; }
  100% { transform:translateX(150%); opacity:0; }
}
@keyframes pxServiceOrbit {
  to { transform:rotate(360deg); }
}
@keyframes pxServiceDotPulse {
  0%,100% { opacity:.42; transform:scale(.88); }
  50% { opacity:1; transform:scale(1.18); }
}

/* Shared phone service header ------------------------------------------ */
.px-service-phone-head__hero {
  isolation:isolate;
}
.px-service-phone-head__hero::before {
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  inset:auto auto -92px -64px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(91,149,255,.16), rgba(142,82,255,.08) 42%, transparent 72%);
  filter:blur(8px);
  pointer-events:none;
  animation:pxServiceAuraDrift 10.5s ease-in-out infinite;
}
.px-service-phone-head__hero::after {
  animation:pxServiceOrbit 26s linear infinite;
}
.px-service-phone-head__icon {
  position:relative;
  z-index:1;
  animation:pxServiceFloat 6.4s ease-in-out infinite, pxServicePulse 5.4s ease-in-out infinite;
}
.px-service-phone-head__icon::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(110deg,transparent 12%,rgba(255,255,255,.25) 48%,transparent 86%);
  transform:translateX(-150%);
  pointer-events:none;
  animation:pxServiceSheen 6.8s ease-in-out infinite;
}

/* Explain --------------------------------------------------------------- */
.px-how-v2 .px-how-hero {
  isolation:isolate;
}
.px-how-v2 .px-how-hero.is-direct-entry {
  grid-template-columns:minmax(0,1fr);
  min-height:210px;
}
.px-how-v2 .px-how-hero.is-direct-entry .px-how-hero__intro {
  max-width:880px;
}
.px-how-v2 .px-how-hero__direct-note {
  width:min(100%,720px);
  margin-top:17px;
  padding:10px 12px;
  border:1px solid color-mix(in srgb,var(--px-accent-purple) 18%,var(--px-account-line));
  border-radius:13px;
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--px-account-muted);
  background:color-mix(in srgb,var(--px-account-surface-soft) 88%,transparent);
  font-size:9px;
  font-weight:780;
  line-height:1.65;
}
.px-how-v2 .px-how-hero__direct-note .px-icon {
  width:17px;
  height:17px;
  flex:0 0 auto;
  color:var(--px-accent-purple);
  animation:pxServiceFloat 6.8s ease-in-out infinite;
}
.px-how-v2 .px-how-hero::after {
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  inset:auto -90px -145px auto;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 38%, rgba(73,163,255,.24) 0 8%, transparent 10%),
    radial-gradient(circle at 56% 48%, rgba(148,84,255,.22) 0 11%, transparent 14%),
    radial-gradient(circle at 72% 34%, rgba(226,95,229,.15) 0 7%, transparent 10%),
    radial-gradient(circle, rgba(113,99,255,.08), transparent 65%);
  filter:blur(3px);
  pointer-events:none;
  animation:pxServiceAuraDrift 12s ease-in-out infinite;
}
.px-how-v2 .px-how-eyebrow,
.px-how-v2 .px-how-golden-rule__icon,
.px-how-v2 .px-how-help-hub__icon {
  animation:pxServiceFloat 7.2s ease-in-out infinite;
}
.px-how-v2 .px-how-tabs button,
.px-how-v2 .px-how-step,
.px-how-v2 .px-how-help-hub__action,
.px-how-v2 .px-how-golden-rule {
  position:relative;
  overflow:hidden;
}
.px-how-v2 .px-how-tabs button.is-active {
  animation:pxServicePulse 4.8s ease-in-out infinite;
}
.px-how-v2 .px-how-tabs button.is-active::after,
.px-how-v2 .px-how-golden-rule::after,
.px-how-v2 .px-how-help-hub__action.is-design::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(112deg,transparent 12%,rgba(255,255,255,.16) 48%,transparent 86%);
  transform:translateX(-150%);
  pointer-events:none;
  animation:pxServiceSheen 7.2s ease-in-out infinite;
}
.px-how-v2 .px-how-step__icon {
  animation:pxServiceFloat 7.6s ease-in-out infinite;
}
.px-how-v2 .px-how-step:nth-child(2n) .px-how-step__icon { animation-delay:-2.1s; }
.px-how-v2 .px-how-step:nth-child(3n) .px-how-step__icon { animation-delay:-4.2s; }

/* Request Design -------------------------------------------------------- */
.px-request-v4__panel,
.px-request-v4__hero {
  isolation:isolate;
}
.px-request-v4__panel::before,
.px-request-v4__panel::after {
  animation:pxServiceAuraDrift 13s ease-in-out infinite;
}
.px-request-v4__panel::after { animation-delay:-5.2s; }
.px-request-v4__hero::after {
  content:"";
  position:absolute;
  width:250px;
  height:250px;
  inset:-130px auto auto -95px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(59,157,255,.16), rgba(159,78,255,.10) 44%, transparent 71%);
  filter:blur(6px);
  z-index:0;
  pointer-events:none;
  animation:pxServiceAuraDrift 11.8s ease-in-out infinite;
}
.px-request-v4__hero-copy,
.px-request-v4__process { position:relative; z-index:1; }
.px-request-v4__eyebrow,
.px-request-v4__process article > span,
.px-request-summary__icon,
.px-request-summary__flow-head-icon {
  animation:pxServiceFloat 6.9s ease-in-out infinite;
}
.px-request-v4__process article:nth-child(2) > span { animation-delay:-2.1s; }
.px-request-v4__process article:nth-child(3) > span { animation-delay:-4.2s; }
.px-request-v4__hero-actions .px-primary-button,
.px-choice-card.is-selected,
.px-request-progress li.is-active,
.px-request-summary__flow-head {
  position:relative;
  overflow:hidden;
}
.px-request-v4__hero-actions .px-primary-button::after,
.px-choice-card.is-selected::before,
.px-request-progress li.is-active::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(112deg,transparent 14%,rgba(255,255,255,.20) 48%,transparent 84%);
  transform:translateX(-150%);
  pointer-events:none;
  animation:pxServiceSheen 6.6s ease-in-out infinite;
}
.px-choice-card.is-selected,
.px-request-progress li.is-active {
  animation:pxServicePulse 5.4s ease-in-out infinite;
}

/* Unified Design Studio icon motion wherever Request Design appears. */
:is(.px-account-v3__request-cta,.px-desktop-rail__request,.px-service-phone-head--request,.px-phone-service-shortcuts__item.is-request,.px-how-help-hub__action.is-design,.px-primary-actions .px-primary-button) .px-icon {
  transform-origin:center;
}
:is(.px-account-v3__request-cta,.px-desktop-rail__request,.px-service-phone-head--request,.px-phone-service-shortcuts__item.is-request,.px-how-help-hub__action.is-design) .px-icon {
  animation:pxServiceFloat 6.2s ease-in-out infinite;
}

/* PRO ------------------------------------------------------------------- */
.px-pro-v2__heading-badge .px-icon,
.px-pro-v2__hero-points .px-icon,
.px-pro-v2__plan-title > span,
.px-pro-v2__active-membership > span,
.px-pro-v2__gate-lock {
  animation:pxServiceFloat 6.8s ease-in-out infinite;
}
.px-pro-v2__hero-points > span,
.px-pro-v2__heading-badge,
.px-pro-v2__plan.is-featured {
  position:relative;
  overflow:hidden;
}
.px-pro-v2__hero-points > span::after,
.px-pro-v2__heading-badge::after,
.px-pro-v2__plan.is-featured::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(112deg,transparent 14%,rgba(255,255,255,.15) 48%,transparent 84%);
  transform:translateX(-150%);
  pointer-events:none;
  animation:pxServiceSheen 7.4s ease-in-out infinite;
}
.px-pro-v2__hero-points > span:nth-child(2)::after { animation-delay:-2.4s; }
.px-pro-v2__hero-points > span:nth-child(3)::after { animation-delay:-4.8s; }

/* Phone: direct Explain entry should not leave an empty hero box. */
@media (max-width:760px) {
  .px-how-v2 .px-how-hero.is-direct-entry {
    display:none !important;
  }
  .px-service-phone-head--how {
    margin-bottom:10px;
  }
  .px-request-v4__process article > span,
  .px-request-summary__icon,
  .px-service-phone-head__icon {
    animation-duration:7.4s;
  }
}

@media (prefers-reduced-motion:reduce) {
  .px-service-phone-head__hero::before,
  .px-service-phone-head__hero::after,
  .px-service-phone-head__icon,
  .px-service-phone-head__icon::after,
  .px-how-v2 .px-how-hero::after,
  .px-how-v2 .px-how-hero__direct-note .px-icon,
  .px-how-v2 .px-how-eyebrow,
  .px-how-v2 .px-how-golden-rule__icon,
  .px-how-v2 .px-how-help-hub__icon,
  .px-how-v2 .px-how-tabs button.is-active,
  .px-how-v2 .px-how-tabs button.is-active::after,
  .px-how-v2 .px-how-golden-rule::after,
  .px-how-v2 .px-how-help-hub__action.is-design::after,
  .px-how-v2 .px-how-step__icon,
  .px-request-v4__panel::before,
  .px-request-v4__panel::after,
  .px-request-v4__hero::after,
  .px-request-v4__eyebrow,
  .px-request-v4__process article > span,
  .px-request-summary__icon,
  .px-request-summary__flow-head-icon,
  .px-request-v4__hero-actions .px-primary-button::after,
  .px-choice-card.is-selected::before,
  .px-request-progress li.is-active::after,
  .px-choice-card.is-selected,
  .px-request-progress li.is-active,
  :is(.px-account-v3__request-cta,.px-desktop-rail__request,.px-service-phone-head--request,.px-phone-service-shortcuts__item.is-request,.px-how-help-hub__action.is-design) .px-icon,
  .px-pro-v2__heading-badge .px-icon,
  .px-pro-v2__hero-points .px-icon,
  .px-pro-v2__plan-title > span,
  .px-pro-v2__active-membership > span,
  .px-pro-v2__gate-lock,
  .px-pro-v2__hero-points > span::after,
  .px-pro-v2__heading-badge::after,
  .px-pro-v2__plan.is-featured::after {
    animation:none !important;
  }
}

/* -----------------------------------------------------------------------
   2.0.0-RC23 — richer ambient orb language for Explain / PRO / Request.
   Keeps layout stable and adds only restrained branded depth.
   ----------------------------------------------------------------------- */
.px-how-v2 .px-how-page {
  position: relative;
  isolation: isolate;
}
.px-how-v2 .px-how-page::before,
.px-how-v2 .px-how-page::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.px-how-v2 .px-how-page::before {
  width: 220px;
  height: 220px;
  inset: -78px auto auto -84px;
  background:
    radial-gradient(circle at 34% 36%, rgba(86,162,255,.18) 0 10%, transparent 13%),
    radial-gradient(circle at 60% 50%, rgba(150,90,255,.16) 0 12%, transparent 16%),
    radial-gradient(circle, rgba(96,126,255,.08), transparent 69%);
  filter: blur(5px);
  animation: pxServiceAuraDrift 12.6s ease-in-out infinite;
}
.px-how-v2 .px-how-page::after {
  width: 170px;
  height: 170px;
  inset: auto -50px 54px auto;
  background:
    radial-gradient(circle at 34% 40%, rgba(80,164,255,.12) 0 9%, transparent 12%),
    radial-gradient(circle at 64% 44%, rgba(226,95,229,.14) 0 8%, transparent 11%),
    radial-gradient(circle, rgba(132,99,255,.07), transparent 71%);
  filter: blur(4px);
  animation: pxServiceAuraDrift 15.2s ease-in-out infinite;
}
.px-how-v2 .px-how-page > * { position: relative; z-index: 1; }

.px-how-v2 .px-how-help-hub__action,
.px-how-v2 .px-how-golden-rule,
.px-how-v2 .px-how-step {
  isolation: isolate;
}
.px-how-v2 .px-how-help-hub__action::before,
.px-how-v2 .px-how-golden-rule::before {
  content: "";
  position: absolute;
  width: 92px;
  height: 92px;
  inset: auto auto -44px -16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(88,156,255,.10), transparent 72%);
  pointer-events: none;
  animation: pxServiceAuraDrift 11.4s ease-in-out infinite;
}

.px-request-v4__hero::before {
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  inset:auto 5% -86px auto;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 36%, rgba(86,162,255,.16) 0 10%, transparent 13%),
    radial-gradient(circle at 62% 42%, rgba(226,95,229,.16) 0 10%, transparent 12%),
    radial-gradient(circle, rgba(120,99,255,.08), transparent 71%);
  filter:blur(4px);
  pointer-events:none;
  animation:pxServiceAuraDrift 13.4s ease-in-out infinite;
}
.px-request-v4__hero-actions .px-primary-button,
.px-request-v4__hero-actions .px-secondary-button,
.px-request-summary__flow-head {
  isolation:isolate;
}
.px-request-v4__hero-actions .px-primary-button::before,
.px-request-v4__hero-actions .px-secondary-button::before,
.px-request-summary__flow-head::before {
  content:"";
  position:absolute;
  width:84px;
  height:84px;
  inset:auto auto -38px -12px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.13), rgba(255,255,255,.04) 52%, transparent 74%);
  pointer-events:none;
  animation:pxServiceAuraDrift 9.6s ease-in-out infinite;
}

.px-pro-v2__panel,
.px-pro-v2__hero {
  isolation:isolate;
}
.px-pro-v2__panel > *,
.px-pro-v2__hero > * {
  position:relative;
  z-index:1;
}
.px-pro-v2__hero::after {
  content:"";
  position:absolute;
  width:190px;
  height:190px;
  inset:auto auto -88px -44px;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 36%, rgba(70,205,255,.18) 0 11%, transparent 13%),
    radial-gradient(circle at 62% 42%, rgba(210,113,255,.18) 0 10%, transparent 13%),
    radial-gradient(circle, rgba(255,255,255,.08), transparent 72%);
  filter:blur(5px);
  pointer-events:none;
  animation:pxServiceAuraDrift 13.8s ease-in-out infinite;
}
.px-pro-v2__heading-badge,
.px-pro-v2__hero-points > span,
.px-pro-v2__plan-title,
.px-pro-v2__active-membership {
  isolation:isolate;
}
.px-pro-v2__heading-badge::before,
.px-pro-v2__active-membership::before {
  content:"";
  position:absolute;
  width:90px;
  height:90px;
  inset:auto auto -44px -12px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.12), rgba(255,255,255,.04) 54%, transparent 76%);
  pointer-events:none;
  animation:pxServiceAuraDrift 10.2s ease-in-out infinite;
}

@media (prefers-reduced-motion:reduce) {
  .px-how-v2 .px-how-page::before,
  .px-how-v2 .px-how-page::after,
  .px-how-v2 .px-how-help-hub__action::before,
  .px-how-v2 .px-how-golden-rule::before,
  .px-request-v4__hero::before,
  .px-request-v4__hero-actions .px-primary-button::before,
  .px-request-v4__hero-actions .px-secondary-button::before,
  .px-request-summary__flow-head::before,
  .px-pro-v2__hero::after,
  .px-pro-v2__heading-badge::before,
  .px-pro-v2__active-membership::before {
    animation:none !important;
  }
}