/* ============================================================
   Prolific Society — the house "pop / alive" look.

   Cards sit ABOVE the page on a solid fill. Translucent fills that
   dissolve into the background are the single biggest reason a site
   reads flat, so every card here gets an opaque gradient.
   Buttons float with a coloured glow AT REST, not only on hover.
   ============================================================ */

/* ---------------- BUTTONS float ---------------- */
.btn{
  display:inline-block; padding:14px 27px; border-radius:14px;
  font-weight:650; font-size:15px; text-decoration:none; cursor:pointer;
  border:0; font-family:inherit; letter-spacing:.005em;
}
.btn-gold{
  background-image:linear-gradient(180deg,
    color-mix(in srgb, var(--ps-gold) 80%, white) 0%,
    var(--ps-gold) 46%, #a8871c 100%);
  color:#1c1607;
  box-shadow:
    0 18px 42px -8px color-mix(in srgb, var(--ps-gold) 58%, transparent),
    0 10px 24px -8px rgba(var(--ps-shadow),.6),
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -2px 0 rgba(0,0,0,.22);
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease;
}
.btn-gold:hover{
  transform:translateY(-6px) scale(1.035);
  box-shadow:
    0 30px 66px -8px color-mix(in srgb, var(--ps-gold) 72%, transparent),
    0 16px 34px -10px rgba(var(--ps-shadow),.66),
    inset 0 1px 0 rgba(255,255,255,.8);
}
.btn-ghost{
  background-image:linear-gradient(180deg,#1d3560,#132646);
  color:var(--ps-txt); border:1px solid var(--ps-line);
  box-shadow:0 16px 36px -14px rgba(var(--ps-shadow),.8),
             inset 0 1px 0 rgba(255,255,255,.13);
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease;
}
.btn-ghost:hover{
  transform:translateY(-5px);
  box-shadow:0 26px 52px -14px rgba(var(--ps-shadow),.88),
             inset 0 1px 0 rgba(255,255,255,.2);
}

/* ---------------- CARDS lift ----------------
   Targeted by structural pattern, not one-by-one, so any new card
   picks the treatment up automatically. */
.card,
:is(article,aside,div,li,label,a).pop{
  background-image:linear-gradient(180deg, var(--ps-card), var(--ps-card-2));
  border:1px solid var(--ps-line);
  border-radius:18px;
  box-shadow:0 22px 50px -14px rgba(var(--ps-shadow),.8),
             inset 0 1px 0 rgba(255,255,255,.09);
  transition:transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease,
             border-color .24s ease;
  will-change:transform;
}
.card:hover,
:is(article,aside,div,li,label,a).pop:hover{
  box-shadow:0 34px 74px -14px rgba(var(--ps-shadow),.9),
             inset 0 1px 0 rgba(255,255,255,.15);
  border-color:color-mix(in srgb, var(--ps-gold) 34%, var(--ps-line));
}

/* ---------------- HEADINGS have depth ---------------- */
h1,h2,h3{ text-shadow:0 2px 18px rgba(0,0,0,.55); }
.accent{
  color:var(--ps-gold);
  text-shadow:0 0 30px color-mix(in srgb, var(--ps-gold) 42%, transparent);
}

/* ---------------- hero mark floats ---------------- */
@keyframes ps-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.floaty{
  animation:ps-float 6.5s ease-in-out infinite;
  filter:drop-shadow(0 24px 38px rgba(var(--ps-shadow),.85));
}
@media (prefers-reduced-motion:reduce){ .floaty{animation:none} }