/* ============================================================
   Privy Consul — Premium Call-Out Component
   Discreet-luxury glass panel with animated liquid-gold rim.
   Reusable across all pages. Markup:

   <aside class="px-callout" role="note">
     <span class="px-eyebrow">Eyebrow label</span>
     <p class="px-title">Elevated statement.</p>
     <p class="px-text">Supporting copy.</p>
   </aside>

   Variants: .px-callout--quote (centred pull-quote)
             .px-callout--compact (tighter padding)
   ============================================================ */

@property --px-rot { syntax:'<angle>'; initial-value:0deg; inherits:false; }

.px-callout{
  position:relative;
  margin:2.6rem 0;
  padding:2.2rem 2.4rem;
  border-radius:18px;
  background:
    linear-gradient(160deg, rgba(244,241,234,.045), rgba(244,241,234,.015) 55%, rgba(216,188,133,.05)),
    rgba(18,18,20,.55);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  isolation:isolate;
  overflow:hidden;
  opacity:0;
  transform:translateY(22px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), box-shadow .5s ease;
}
.px-callout.px-in{opacity:1;transform:translateY(0)}
.px-callout:hover{box-shadow:0 18px 60px -30px rgba(216,188,133,.28)}

/* static faceted hairline */
.px-callout::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(115deg,
    rgba(216,188,133,.55) 0%, rgba(216,188,133,.12) 18%,
    rgba(244,241,234,.20) 36%, rgba(216,188,133,.10) 55%,
    rgba(216,188,133,.45) 78%, rgba(216,188,133,.10) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
/* slow liquid-gold current circulating the border */
.px-callout::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;
  background:conic-gradient(from var(--px-rot),
    transparent 0deg, transparent 288deg,
    rgba(216,188,133,.85) 322deg, rgba(244,241,234,.95) 336deg,
    rgba(216,188,133,.85) 350deg, transparent 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:pxRim 11s linear infinite;
  pointer-events:none;
}
@keyframes pxRim{to{--px-rot:360deg}}

/* ambient inner light */
.px-callout .px-ambient{
  position:absolute;top:-40%;right:-12%;width:60%;height:120%;
  background:radial-gradient(closest-side, rgba(216,188,133,.10), transparent 70%);
  pointer-events:none;z-index:-1;
}

.px-callout .px-eyebrow{
  display:block;
  font-family:var(--font-mono,'IBM Plex Mono',monospace);
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-2,#D8BC85);margin-bottom:.9rem;
}
.px-callout .px-title{
  font-family:var(--font-display,'Fraunces',Georgia,serif);
  font-weight:400;font-size:clamp(1.25rem,2.4vw,1.65rem);
  line-height:1.3;letter-spacing:.005em;
  color:var(--paper,#F4F1EA);margin:0;
}
.px-callout .px-text{
  margin-top:.9rem;font-size:.95rem;line-height:1.7;
  color:var(--muted,#8E8A80);
}
.px-callout .px-text b{color:var(--paper,#F4F1EA);font-weight:500}

/* --- pull-quote variant --- */
.px-callout--quote{text-align:center;padding:2.8rem 2.6rem}
.px-callout--quote .px-title{font-style:italic;font-size:clamp(1.35rem,2.8vw,1.9rem)}
.px-callout--quote .px-text{max-width:56ch;margin-left:auto;margin-right:auto}

/* --- compact variant --- */
.px-callout--compact{padding:1.6rem 1.8rem;margin:1.8rem 0}
.px-callout--compact .px-title{font-size:1.12rem}

@media (max-width:640px){
  .px-callout{padding:1.7rem 1.4rem}
  .px-callout--quote{padding:2.1rem 1.5rem}
}

@media (prefers-reduced-motion:reduce){
  .px-callout{opacity:1;transform:none;transition:none}
  .px-callout::after{animation:none}
}