/* pop.css — Young Sales Training "pop / alive" house style (dark + gold).
   Implements the mandatory standard in docs/claude-context/web-design-standard.md,
   tuned for this site's dark background + gold (#d6a85b) brand. Linked on every page. */
:root {
  --gold:#d6a85b; --gold-lite:#f0cd8a; --gold-hi:#f7dca0; --gold-dk:#b88a44;
  --gold-rgb:214,168,91;
}

/* ---------- BUTTONS float ---------- */
.btn {
  border-radius:13px;
  position:relative;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, background .25s ease;
}
.btn-gold {
  background-image:linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 46%, var(--gold-dk) 100%);
  color:#2a1d06;
  box-shadow:0 16px 34px -8px rgba(var(--gold-rgb),.5), 0 8px 18px -6px rgba(0,0,0,.6),
             inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(0,0,0,.22);
}
.btn-gold:hover {
  transform:translateY(-5px) scale(1.04);
  box-shadow:0 28px 58px -8px rgba(var(--gold-rgb),.7), 0 12px 26px -8px rgba(0,0,0,.6),
             inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 0 rgba(0,0,0,.22);
}
.btn-outline {
  border:1.5px solid rgba(var(--gold-rgb),.6);
  color:var(--gold-lite);
  background:linear-gradient(180deg, rgba(214,168,91,.10), rgba(214,168,91,.03));
  box-shadow:0 10px 26px -12px rgba(var(--gold-rgb),.4), inset 0 1px 0 rgba(255,255,255,.06);
}
.btn-outline:hover {
  transform:translateY(-4px);
  border-color:var(--gold);
  background:linear-gradient(180deg, rgba(214,168,91,.20), rgba(214,168,91,.06));
  box-shadow:0 20px 44px -12px rgba(var(--gold-rgb),.55);
}

/* ---------- CARDS lift (solid dark fill so the shadow reads) ---------- */
.card, .pop-card {
  background-image:linear-gradient(158deg, #1b1610 0%, #0c0a08 100%);
  border:1px solid rgba(var(--gold-rgb),.32);
  border-radius:18px;
  box-shadow:0 22px 46px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(var(--gold-rgb),.05),
             inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease, border-color .24s ease;
}
.card:hover, .pop-card:hover {
  transform:translateY(-8px);
  border-color:rgba(var(--gold-rgb),.62);
  box-shadow:0 40px 74px -22px rgba(0,0,0,.95), 0 0 42px -6px rgba(var(--gold-rgb),.3);
}

/* ---------- HEADINGS pop ---------- */
h1, h2, h3, .pop-heading { text-shadow:0 2px 12px rgba(0,0,0,.55); }
.pop-accent-text { text-shadow:0 0 18px rgba(var(--gold-rgb),.5), 0 2px 6px rgba(0,0,0,.5); }

/* ---------- HERO / LOGO floats ---------- */
@keyframes pop-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.pop-float {
  animation:pop-float 5s ease-in-out infinite;
  filter:drop-shadow(0 30px 38px rgba(0,0,0,.7)) drop-shadow(0 0 42px rgba(var(--gold-rgb),.28));
}
@media (prefers-reduced-motion:reduce){ .pop-float{ animation:none } }

/* soft pulsing glow disc placed behind a hero graphic */
@keyframes pop-pulse { 0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)} 50%{opacity:.85;transform:translate(-50%,-50%) scale(1.09)} }
.pop-glow-disc {
  position:absolute; top:50%; left:50%; width:80%; padding-bottom:80%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(var(--gold-rgb),.34), rgba(var(--gold-rgb),.06) 55%, transparent 70%);
  border-radius:50%; z-index:0; pointer-events:none;
  animation:pop-pulse 6.5s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){ .pop-glow-disc{ animation:none } }