/**
 * PromXAI Theme 2.0.0-RC21 — Unified Public Shell Motion Polish.
 * Scope: Homepage, Library and Favorites shared shell + phone filters/categories.
 * Motion language: restrained ambient light, branded sheen, active-state pulse.
 */

@keyframes pxHomeRailOrbA {
  0%,100% { transform: translate3d(0,0,0) scale(1); opacity:.58; }
  35% { transform: translate3d(13px,18px,0) scale(1.07); opacity:.78; }
  72% { transform: translate3d(-8px,7px,0) scale(.98); opacity:.64; }
}
@keyframes pxHomeRailOrbB {
  0%,100% { transform: translate3d(0,0,0) scale(1); opacity:.42; }
  42% { transform: translate3d(-12px,-15px,0) scale(1.08); opacity:.68; }
  76% { transform: translate3d(8px,-4px,0) scale(1.01); opacity:.50; }
}
@keyframes pxHomeRequestSheen {
  0%,72%,100% { transform: translateX(-155%) skewX(-18deg); opacity:0; }
  78% { opacity:.92; }
  90% { transform: translateX(155%) skewX(-18deg); opacity:0; }
}
@keyframes pxHomeRequestGlow {
  0%,100% { box-shadow:0 9px 21px rgb(124 58 237 / .17), inset 0 1px 0 rgb(255 255 255 / .16), 0 0 0 rgba(92,130,255,0); }
  50% { box-shadow:0 13px 29px rgb(124 58 237 / .24), inset 0 1px 0 rgb(255 255 255 / .20), 0 0 24px rgba(88,132,255,.13); }
}
@keyframes pxHomeSparkleFloat {
  0%,100% { transform:translateY(0) rotate(0deg) scale(1); }
  45% { transform:translateY(-2px) rotate(9deg) scale(1.08); }
  72% { transform:translateY(1px) rotate(-3deg) scale(.99); }
}
@keyframes pxHomeActivePulse {
  0% { box-shadow:0 0 0 0 rgba(111,92,255,.22), 0 7px 15px rgb(124 58 237 / .14); }
  58% { box-shadow:0 0 0 5px rgba(111,92,255,0), 0 10px 20px rgb(124 58 237 / .19); }
  100% { box-shadow:0 0 0 0 rgba(111,92,255,0), 0 7px 15px rgb(124 58 237 / .14); }
}
@keyframes pxHomeActiveSheen {
  0%,68%,100% { transform:translateX(-150%); opacity:0; }
  75% { opacity:.72; }
  88% { transform:translateX(150%); opacity:0; }
}
@keyframes pxHomeIconBreath {
  0%,100% { transform:translateY(0) scale(1); filter:drop-shadow(0 0 0 rgba(95,116,255,0)); }
  50% { transform:translateY(-1px) scale(1.04); filter:drop-shadow(0 0 7px rgba(95,116,255,.22)); }
}
@keyframes pxPhoneFilterOrbA {
  0%,100% { transform:translate3d(0,0,0) scale(1); opacity:.50; }
  50% { transform:translate3d(-12px,15px,0) scale(1.09); opacity:.68; }
}
@keyframes pxPhoneFilterOrbB {
  0%,100% { transform:translate3d(0,0,0) scale(1); opacity:.36; }
  50% { transform:translate3d(10px,-12px,0) scale(1.08); opacity:.54; }
}
@keyframes pxPhoneActiveBar {
  0%,100% { box-shadow:0 0 0 rgba(111,92,255,0); opacity:.92; }
  50% { box-shadow:0 0 12px rgba(111,92,255,.34); opacity:1; }
}


/* ========================================================================
   test376 — RC21 canvas retired.
   Home owns its approved local ambient canvas; Library/Favorites and the rest
   of the public site use global-ambient-background.css. This file no longer
   paints any document-level background, including phone mode.
   ======================================================================== */

/* ========================================================================
   Desktop / laptop: fixed left rail.
   ======================================================================== */
@media (min-width:1050px) {
  .px-desktop-rail {
    isolation:isolate;
  }

  .px-desktop-rail::before,
  .px-desktop-rail::after {
    content:"";
    position:absolute;
    z-index:0;
    border-radius:50%;
    pointer-events:none;
    will-change:transform,opacity;
  }
  .px-desktop-rail::before {
    width:190px;
    height:190px;
    inset:9% -88px auto auto;
    background:
      radial-gradient(circle at 40% 42%, rgba(72,157,255,.26) 0 10%, rgba(72,157,255,.11) 11% 25%, transparent 57%),
      radial-gradient(circle at 66% 58%, rgba(151,83,255,.20) 0 12%, transparent 48%);
    filter:blur(10px);
    animation:pxHomeRailOrbA 12.8s ease-in-out infinite;
  }
  .px-desktop-rail::after {
    width:176px;
    height:176px;
    inset:auto auto 11% -92px;
    background:
      radial-gradient(circle at 58% 42%, rgba(194,73,238,.22) 0 11%, rgba(194,73,238,.08) 12% 28%, transparent 58%),
      radial-gradient(circle at 35% 66%, rgba(65,151,255,.18) 0 12%, transparent 49%);
    filter:blur(12px);
    animation:pxHomeRailOrbB 15.2s ease-in-out infinite;
  }

  .px-desktop-rail > * {
    position:relative;
    z-index:1;
  }

  /* Main conversion CTA — visible but premium, not flashy. */
  .px-desktop-rail__request {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    animation:pxHomeRequestGlow 6.8s ease-in-out infinite;
  }
  .px-desktop-rail__request::before {
    content:"";
    position:absolute;
    z-index:0;
    inset:-30% auto -30% -36%;
    width:28%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.52),transparent);
    filter:blur(1px);
    transform:translateX(-155%) skewX(-18deg);
    animation:pxHomeRequestSheen 7.4s ease-in-out infinite;
    pointer-events:none;
  }
  .px-desktop-rail__request > * {
    position:relative;
    z-index:1;
  }
  .px-desktop-rail__request .px-icon {
    animation:pxHomeSparkleFloat 5.4s ease-in-out infinite;
    transform-origin:center;
  }
  .px-desktop-rail__request:hover,
  .px-desktop-rail__request:focus-visible {
    transform:translateY(-2px) scale(1.012);
  }

  /* Utilities: motion only as quiet micro-interaction. */
  .px-desktop-rail__tool {
    position:relative;
    overflow:hidden;
  }
  .px-desktop-rail__tool::before {
    content:"";
    position:absolute;
    inset:7px;
    border-radius:9px;
    background:radial-gradient(circle at 50% 50%,rgba(91,120,255,.14),transparent 68%);
    opacity:0;
    transform:scale(.72);
    transition:opacity .22s ease,transform .22s ease;
    pointer-events:none;
  }
  .px-desktop-rail__tool:hover::before,
  .px-desktop-rail__tool:focus-visible::before,
  .px-desktop-rail__utilities.is-open .px-desktop-rail__search-toggle::before {
    opacity:1;
    transform:scale(1);
  }
  .px-desktop-rail__tool:hover .px-desktop-rail__tool-icon,
  .px-desktop-rail__tool:focus-visible .px-desktop-rail__tool-icon {
    animation:pxHomeIconBreath 1.6s ease-in-out infinite;
  }

  /* Content type + categories: active state feels alive, inactive state stays calm. */
  body.home .px-home-sidebar__type-tabs button,
  body.home .px-home-sidebar__categories .px-category-button {
    position:relative;
    overflow:hidden;
  }
  body.home .px-home-sidebar__type-tabs button.is-active,
  body.home .px-home-sidebar__categories .px-category-button.is-active {
    animation:pxHomeActivePulse 2.6s ease-out 1;
  }
  body.home .px-home-sidebar__type-tabs button.is-active::after,
  body.home .px-home-sidebar__categories .px-category-button.is-active::after {
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(112deg,transparent 0%,rgba(255,255,255,.19) 48%,transparent 100%);
    transform:translateX(-150%);
    animation:pxHomeActiveSheen 8.4s ease-in-out infinite;
    pointer-events:none;
  }
  body.home .px-home-sidebar__type-tabs button > *,
  body.home .px-home-sidebar__categories .px-category-button > * {
    position:relative;
    z-index:1;
  }
  body.home .px-home-sidebar__categories .px-category-button__count {
    transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
  }
  body.home .px-home-sidebar__categories .px-category-button:hover .px-category-button__count,
  body.home .px-home-sidebar__categories .px-category-button:focus-visible .px-category-button__count,
  body.home .px-home-sidebar__categories .px-category-button.is-active .px-category-button__count {
    transform:translateY(-1px);
    box-shadow:0 5px 12px rgba(69,86,155,.10);
  }


  /* Library/Favorites inherit the same active-state motion as Home categories. */
  :is(.px-library-modern__kind-filters button,.px-favorites-sidebar__filters button) {
    position:relative;
    overflow:hidden;
  }
  :is(.px-library-modern__kind-filters button,.px-favorites-sidebar__filters button).is-active {
    animation:pxHomeActivePulse 2.6s ease-out 1;
  }
  :is(.px-library-modern__kind-filters button,.px-favorites-sidebar__filters button).is-active::after {
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(112deg,transparent 0%,rgba(255,255,255,.18) 48%,transparent 100%);
    transform:translateX(-150%);
    animation:pxHomeActiveSheen 8.4s ease-in-out infinite;
    pointer-events:none;
  }
  :is(.px-library-modern__kind-filters button,.px-favorites-sidebar__filters button) > * { position:relative; z-index:1; }
  :is(.px-library-modern__kind-filters button,.px-favorites-sidebar__filters button) small {
    transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
  }
  :is(.px-library-modern__kind-filters button,.px-favorites-sidebar__filters button):is(:hover,:focus-visible,.is-active) small {
    transform:translateY(-1px);
    box-shadow:0 5px 12px rgba(69,86,155,.10);
  }

  html[data-theme="light"] .px-desktop-rail::before { opacity:.38; filter:blur(14px) saturate(.88); }
  html[data-theme="light"] .px-desktop-rail::after { opacity:.30; filter:blur(15px) saturate(.84); }
}

/* ========================================================================
   Phone: Categories / filters sheet. Same identity, lower motion intensity.
   ======================================================================== */
@media (max-width:760px) {
  html.px-phone-ui body.promxai-mobile-app-page .px-mobile-app-sheet--filters .px-mobile-app-sheet__panel {
    isolation:isolate;
    overflow:hidden;
  }
  html.px-phone-ui body.promxai-mobile-app-page .px-mobile-app-sheet--filters .px-mobile-app-sheet__panel::before,
  html.px-phone-ui body.promxai-mobile-app-page .px-mobile-app-sheet--filters .px-mobile-app-sheet__panel::after {
    content:"";
    position:absolute;
    z-index:0;
    border-radius:50%;
    pointer-events:none;
    will-change:transform,opacity;
  }
  html.px-phone-ui body.promxai-mobile-app-page .px-mobile-app-sheet--filters .px-mobile-app-sheet__panel::before {
    width:210px;
    height:210px;
    inset:-76px -96px auto auto;
    background:
      radial-gradient(circle at 44% 44%,rgba(61,151,255,.24) 0 12%,rgba(61,151,255,.08) 13% 28%,transparent 60%),
      radial-gradient(circle at 68% 62%,rgba(145,88,255,.17) 0 11%,transparent 48%);
    filter:blur(12px);
    animation:pxPhoneFilterOrbA 13.5s ease-in-out infinite;
  }
  html.px-phone-ui body.promxai-mobile-app-page .px-mobile-app-sheet--filters .px-mobile-app-sheet__panel::after {
    width:190px;
    height:190px;
    inset:auto auto -80px -94px;
    background:
      radial-gradient(circle at 58% 44%,rgba(183,84,244,.19) 0 11%,rgba(183,84,244,.07) 12% 27%,transparent 58%),
      radial-gradient(circle at 35% 63%,rgba(63,145,255,.15) 0 12%,transparent 48%);
    filter:blur(13px);
    animation:pxPhoneFilterOrbB 15.6s ease-in-out infinite;
  }
  html.px-phone-ui body.promxai-mobile-app-page .px-mobile-app-sheet--filters .px-mobile-app-sheet__panel > * {
    position:relative;
    z-index:1;
  }

  html.px-phone-ui body.promxai-mobile-app-page .px-mobile-app-preference,
  html.px-phone-ui body.promxai-mobile-app-page .px-mobile-app-choice-grid > :is(button,a),
  html.px-phone-ui body.promxai-mobile-app-page .px-mobile-app-category-list > :is(button,a) {
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
  }
  html.px-phone-ui body.promxai-mobile-app-page .px-mobile-app-preference:active,
  html.px-phone-ui body.promxai-mobile-app-page .px-mobile-app-choice-grid > :is(button,a):active,
  html.px-phone-ui body.promxai-mobile-app-page .px-mobile-app-category-list > :is(button,a):active {
    transform:scale(.985);
  }

  html.px-phone-ui body.promxai-mobile-app-page .px-mobile-app-choice-grid > :is(button,a).is-active,
  html.px-phone-ui body.promxai-mobile-app-page .px-mobile-app-category-list > :is(button,a).is-active {
    box-shadow:0 10px 24px rgba(78,91,177,.10),inset 0 0 0 1px rgba(125,108,255,.12);
  }
  html.px-phone-ui body.promxai-mobile-app-page .px-mobile-app-choice-grid > :is(button,a).is-active::after,
  html.px-phone-ui body.promxai-mobile-app-page .px-mobile-app-category-list > :is(button,a).is-active::before {
    animation:pxPhoneActiveBar 2.8s ease-in-out infinite;
  }

  /* Category dock icon gets a quiet glow when the sheet is open. */
  html.px-phone-ui body.promxai-mobile-app-page .px-mobile-app-dock > button[data-mobile-filter-launcher][aria-expanded="true"] .px-mobile-app-dock__icon,
  html.px-phone-ui body.promxai-mobile-app-page.px-mobile-app-sheet-open .px-mobile-app-dock > button[data-mobile-filter-launcher] .px-mobile-app-dock__icon {
    filter:drop-shadow(0 0 8px rgba(101,91,245,.27));
  }

  html.px-phone-ui[data-theme="light"] body.promxai-mobile-app-page .px-mobile-app-sheet--filters .px-mobile-app-sheet__panel::before { opacity:.40; filter:blur(14px) saturate(.86); }
  html.px-phone-ui[data-theme="light"] body.promxai-mobile-app-page .px-mobile-app-sheet--filters .px-mobile-app-sheet__panel::after { opacity:.31; filter:blur(15px) saturate(.82); }
}

@media (prefers-reduced-motion:reduce) {
  .px-desktop-rail::before,
  .px-desktop-rail::after,
  .px-desktop-rail__request,
  .px-desktop-rail__request::before,
  .px-desktop-rail__request .px-icon,
  .px-desktop-rail__tool:hover .px-desktop-rail__tool-icon,
  .px-desktop-rail__tool:focus-visible .px-desktop-rail__tool-icon,
  body.home .px-home-sidebar__type-tabs button.is-active,
  body.home .px-home-sidebar__type-tabs button.is-active::after,
  body.home .px-home-sidebar__categories .px-category-button.is-active,
  body.home .px-home-sidebar__categories .px-category-button.is-active::after,
  .px-library-modern__kind-filters button.is-active,
  .px-library-modern__kind-filters button.is-active::after,
  .px-favorites-sidebar__filters button.is-active,
  .px-favorites-sidebar__filters button.is-active::after,
  html.px-phone-ui body.promxai-mobile-app-page .px-mobile-app-sheet--filters .px-mobile-app-sheet__panel::before,
  html.px-phone-ui body.promxai-mobile-app-page .px-mobile-app-sheet--filters .px-mobile-app-sheet__panel::after,
  html.px-phone-ui body.promxai-mobile-app-page .px-mobile-app-choice-grid > :is(button,a).is-active::after,
  html.px-phone-ui body.promxai-mobile-app-page .px-mobile-app-category-list > :is(button,a).is-active::before {
    animation:none !important;
  }
}