/* pop-ui.css — house "pop/alive" standard (Neon Drive Vegas brand vars).
   Dark luxury theme: buttons float w/ colored glow, cards lift on solid fill,
   headings pop, hero floats. Respects prefers-reduced-motion. */
:root{
  --pop-accent:      #ffc93c;   /* Vegas gold — primary button / accent */
  --pop-accent-dark: #e5a911;   /* darker gold stop */
  --pop-neon:        #2f7bff;   /* electric blue neon */
  --pop-cyan:        #22d3ee;   /* cyan neon */
  --pop-ink:         #0a0a12;
  --pop-bg:          #07070d;   /* near-black base */
  --pop-bg-2:        #0d0d18;
  --pop-card-a:      #191926;   /* card gradient top */
  --pop-card-b:      #12121d;   /* card gradient bottom */
  --pop-line:        rgba(255,255,255,.09);
  --pop-shadow:      3,3,10;     /* deep shadow rgb */
  --pop-text:        #f4f2ff;
  --pop-mut:         #a7a3c2;
}

/* --- BUTTONS float (accent gold) --- */
.btn-accent{
  background-image:linear-gradient(180deg,
     color-mix(in srgb,var(--pop-accent) 82%,white) 0%,
     var(--pop-accent) 46%, var(--pop-accent-dark) 100%);
  color:#241a02;
  box-shadow:0 18px 44px -8px color-mix(in srgb,var(--pop-accent) 60%,transparent),
             0 10px 22px -6px rgba(var(--pop-shadow),.6),
             inset 0 1px 0 rgba(255,255,255,.75), inset 0 -2px 0 rgba(0,0,0,.22);
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease;
}
.btn-accent:hover{
  transform:translateY(-6px) scale(1.045);
  box-shadow:0 30px 66px -8px color-mix(in srgb,var(--pop-accent) 78%,transparent),
             0 16px 34px -8px rgba(var(--pop-shadow),.65),
             inset 0 1px 0 rgba(255,255,255,.85);
}
/* neon (magenta) button */
.btn-neon{
  background-image:linear-gradient(180deg,
     color-mix(in srgb,var(--pop-neon) 82%,white) 0%,
     var(--pop-neon) 48%, #1a56c4 100%);
  color:#fff;
  box-shadow:0 18px 44px -8px color-mix(in srgb,var(--pop-neon) 60%,transparent),
             0 10px 22px -6px rgba(var(--pop-shadow),.6),
             inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25);
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease;
}
.btn-neon:hover{ transform:translateY(-6px) scale(1.045);
  box-shadow:0 30px 66px -8px color-mix(in srgb,var(--pop-neon) 80%,transparent),0 16px 34px -8px rgba(var(--pop-shadow),.65); }

/* ghost / outline button */
.btn-ghost{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  color:var(--pop-text); border:1px solid rgba(255,255,255,.18);
  box-shadow:0 12px 30px -12px rgba(var(--pop-shadow),.6), inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, border-color .2s;
}
.btn-ghost:hover{ transform:translateY(-5px); border-color:color-mix(in srgb,var(--pop-cyan) 60%,transparent);
  box-shadow:0 24px 50px -12px color-mix(in srgb,var(--pop-cyan) 30%,transparent); }

/* --- CARDS lift (solid elevated fill so shadow has something to lift) --- */
.card{
  background-image:linear-gradient(158deg,var(--pop-card-a) 0%, var(--pop-card-b) 100%);
  border:1px solid var(--pop-line);
  box-shadow:0 22px 50px -16px rgba(var(--pop-shadow),.8), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease, border-color .24s;
}
.card:hover{
  transform:translateY(-8px);
  box-shadow:0 46px 90px -20px rgba(var(--pop-shadow),.92),
             0 0 0 1px color-mix(in srgb,var(--pop-accent) 22%,transparent),
             inset 0 1px 0 rgba(255,255,255,.09);
  border-color:color-mix(in srgb,var(--pop-accent) 30%,transparent);
}

/* --- HEADINGS pop --- */
h1,h2,h3,.pop-heading{ text-shadow:0 3px 14px rgba(0,0,0,.55); }
.pop-accent-text{ color:var(--pop-accent);
  text-shadow:0 2px 10px rgba(0,0,0,.5), 0 0 22px color-mix(in srgb,var(--pop-accent) 45%,transparent); }
.pop-neon-text{ color:var(--pop-neon);
  text-shadow:0 2px 10px rgba(0,0,0,.5), 0 0 24px color-mix(in srgb,var(--pop-neon) 55%,transparent); }

/* --- HERO / LOGO floats --- */
@keyframes pop-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.pop-float{ filter:drop-shadow(0 34px 40px rgba(0,0,0,.7)); animation:pop-float 5s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ .pop-float{animation:none} }