/* ============================================================
   CREWTHAT — PREMIUM LAYER (glass / depth / glow)
   ------------------------------------------------------------
   Top-tier visual treatment layered over site-public.css. Pure
   presentation: glassy translucent surfaces, lit-from-above sheen,
   layered elevation, accent glows, gradient brand actions, and
   refined micro-interactions. Consumes design-tokens.css.
   Load order: theme.css → design-tokens.css → site-public.css → premium.css
   ============================================================ */

/* deeper, richer page base with a fixed ambient gradient field (site-wide) */
body.pub {
  background:
    radial-gradient(125% 85% at 50% -15%, rgba(204,31,31,0.16), transparent 55%),
    radial-gradient(100% 75% at 92% 6%, rgba(255,176,32,0.11), transparent 52%),
    radial-gradient(120% 95% at 6% 100%, rgba(58,158,232,0.08), transparent 55%),
    linear-gradient(180deg, #141621 0%, #0c0d12 55%, #0a0a0c 100%) !important;
  background-attachment: fixed;
}

::selection { background: rgba(255,176,32,0.28); color: #fff; }

/* premium scrollbar */
.pub ::-webkit-scrollbar, .pub::-webkit-scrollbar { width: 11px; height: 11px; }
.pub ::-webkit-scrollbar-thumb { background: linear-gradient(#2a2d33, #1a1c20); border: 2px solid var(--color-bg, #0a0a0c); border-radius: 999px; }
.pub ::-webkit-scrollbar-thumb:hover { background: linear-gradient(#3a3d44, #24262b); }

/* ---------- glass nav ---------- */
.pub-nav {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  backdrop-filter: var(--glass-blur-lg);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 10px 30px -20px rgba(0,0,0,0.9);
}
.pub-brand .dot { box-shadow: 0 0 14px var(--ct-red), 0 0 4px var(--ct-red); }
.pub-nav-links a:not(.pub-btn) { position: relative; transition: color var(--dur-fast); }
.pub-nav-links a:not(.pub-btn)::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1px;
  background: var(--pub-gold); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out);
}
.pub-nav-links a:not(.pub-btn):hover::after { transform: scaleX(1); }

/* ---------- buttons: gradient + glow ---------- */
.pub-btn { transition: transform var(--dur-fast), box-shadow var(--dur-base), background var(--dur-base), border-color var(--dur-base); position: relative; }
.pub-btn.primary, .c-btn--primary {
  background: var(--grad-primary);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 22px -8px rgba(204,31,31,0.6);
}
.pub-btn.primary:hover, .c-btn--primary:hover { box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, var(--glow-red); transform: translateY(-1px); }
.pub-btn.ghost { background: rgba(255,255,255,0.02); border-color: var(--glass-border-hi); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pub-btn.ghost:hover { border-color: var(--pub-gold); box-shadow: var(--glow-soft-gold); transform: translateY(-1px); }
.pub-btn:active { transform: translateY(0); }

/* ---------- hero: layered depth + glow + entrance ---------- */
.pub-hero { background: transparent; }
.pub-hero::before { background: var(--grad-hero); }
.pub-hero::after { opacity: .6; }
/* floating accent orb */
.pub-hero .pub-wrap::before {
  content: ''; position: absolute; top: -80px; right: -60px; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(255,176,32,0.10), transparent 65%);
  filter: blur(20px); pointer-events: none; z-index: 0;
}
.pub-hero h1 { text-shadow: 0 2px 40px rgba(0,0,0,0.5); letter-spacing: 0.3px; }
.pub-hero h1 .accent {
  background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: var(--glow-soft-gold);
}
.pub-eyebrow {
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-color: rgba(255,176,32,0.35); box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, var(--glow-soft-gold);
}

/* fade-up entrance for hero content + section heads */
@keyframes ctRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.pub-hero .pub-eyebrow { animation: ctRise var(--dur-slow) var(--ease-out) both; }
.pub-hero h1 { animation: ctRise var(--dur-slow) 60ms var(--ease-out) both; }
.pub-hero .lede { animation: ctRise var(--dur-slow) 120ms var(--ease-out) both; }
.pub-hero .sub { animation: ctRise var(--dur-slow) 170ms var(--ease-out) both; }
.pub-hero .countdown, .pub-hero .cs-stats, .pub-hero .pub-hero-cta, .pub-hero .pub-stats { animation: ctRise var(--dur-slow) 220ms var(--ease-out) both; }

/* ---------- glass surfaces: cards, tiles, stats, countdown ---------- */
.pub-card, .pub-stat, .cat-tile, .svc-tile, .cd-cell, .plan-card, .mr-card {
  position: relative;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--elev-2);
}
/* lit-from-above sheen overlay */
.pub-card::before, .cat-tile::before, .svc-tile::before, .plan-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: var(--sheen); opacity: .9;
}
.pub-card > *, .cat-tile > *, .svc-tile > *, .plan-card > * { position: relative; z-index: 1; }

/* tile hover: lift + accent glow border */
.cat-tile, .svc-tile { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base); }
.cat-tile:hover, .svc-tile:hover { transform: translateY(-4px); box-shadow: var(--elev-3); border-color: var(--glass-border-hi); }
.cat-tile.is-live:hover, .svc-tile.is-live:hover { border-color: rgba(46,204,113,0.55); box-shadow: var(--elev-3), var(--glow-soft-green); }
.cat-tile.is-soon:hover, .svc-tile.is-soon:hover { border-color: rgba(255,176,32,0.55); box-shadow: var(--elev-3), var(--glow-soft-gold); }
.cat-tile.is-road:hover, .svc-tile.is-road:hover { border-color: rgba(58,158,232,0.5); box-shadow: var(--elev-3), 0 0 30px -8px rgba(58,158,232,0.5); }

/* status pills + tier badges get a soft glow */
.cat-pill.is-live, .c-badge--live { box-shadow: 0 0 16px -4px rgba(46,204,113,0.7); }
.cat-pill.is-soon, .c-badge--soon { box-shadow: 0 0 16px -4px rgba(255,176,32,0.6); }
.cat-pill.is-road, .c-badge--roadmap { box-shadow: 0 0 16px -4px rgba(58,158,232,0.6); }

/* stat strip: glass with accent number glow */
.pub-stat { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); }
.pub-stat:hover { transform: translateY(-3px); box-shadow: var(--elev-3); }
.pub-stat .n.green { text-shadow: var(--glow-soft-green); }
.pub-stat .n.gold  { text-shadow: var(--glow-soft-gold); }
.pub-stat .n.blue  { text-shadow: 0 0 30px -8px rgba(58,158,232,0.6); }

/* countdown cells: glass + glowing numerals */
.cd-cell { box-shadow: var(--elev-1); }
.cd-n { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* plan cards: accent top-bar becomes a glow edge */
.plan-card.accent-green { box-shadow: var(--elev-2), inset 0 2px 0 var(--ct-green); border-top-color: transparent; }
.plan-card.accent-gold  { box-shadow: var(--elev-2), inset 0 2px 0 var(--pub-gold); border-top-color: transparent; }
.plan-card.accent-blue  { box-shadow: var(--elev-2), inset 0 2px 0 var(--ct-blue); border-top-color: transparent; }
.plan-card.accent-red   { box-shadow: var(--elev-2), inset 0 2px 0 var(--ct-red); border-top-color: transparent; }
.plan-card { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); }
.plan-card:hover { transform: translateY(-4px); box-shadow: var(--elev-3); }

/* inputs: subtle inset depth + premium focus */
.pub-field input, .pub-field textarea, .pub-field select, .c-input, .c-select, .c-textarea {
  background: rgba(0,0,0,0.25); box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
.pub-field input:focus, .pub-field textarea:focus, .pub-field select:focus, .c-input:focus, .c-select:focus, .c-textarea:focus {
  border-color: var(--ct-red); box-shadow: var(--ring), 0 0 24px -10px rgba(204,31,31,0.7); background: rgba(0,0,0,0.32);
}

/* section kickers get a leading accent tick */
.pub-section-head .kicker { display: inline-flex; align-items: center; gap: 8px; }
.pub-section-head .kicker::before { content: ''; width: 18px; height: 2px; background: var(--grad-primary); border-radius: 2px; }

/* footer: hairline top glow */
.pub-footer { border-top-color: var(--glass-border); box-shadow: 0 -1px 0 rgba(255,255,255,0.03) inset; }

/* toast: glass */
.ct-toast, .c-toast { background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--elev-3); }

@media (prefers-reduced-motion: reduce) {
  .pub-hero *[style], .pub-hero .pub-eyebrow, .pub-hero h1, .pub-hero .lede, .pub-hero .sub,
  .pub-hero .countdown, .pub-hero .cs-stats, .pub-hero .pub-hero-cta, .pub-hero .pub-stats { animation: none !important; }
  .cat-tile, .svc-tile, .plan-card, .pub-stat, .pub-btn { transition: none !important; }
}

/* ---------- auth / panel surfaces (signup, reset, confirm, profile, 404/500, awaiting) ---------- */
.pub-center { position: relative; }
.pub-center::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 46% at 50% 28%, rgba(204,31,31,0.12), transparent 60%),
    radial-gradient(46% 40% at 72% 82%, rgba(255,176,32,0.08), transparent 60%);
}
.pub-center > * { position: relative; z-index: 1; }
.pub-panel {
  position: relative;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl, 20px);
  box-shadow: var(--elev-3);
  padding: 40px 34px;
  overflow: hidden;
  animation: ctRise var(--dur-slow) var(--ease-out) both;
}
.pub-panel::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: var(--sheen-strong); }
.pub-panel::after { content: ''; position: absolute; top: 0; left: 28px; right: 28px; height: 2px; border-radius: 0 0 3px 3px; background: var(--grad-primary); opacity: .9; box-shadow: var(--glow-soft-red); }
.pub-panel > * { position: relative; z-index: 1; }
.pub-panel h1 { letter-spacing: .3px; }
.pub-msg { border-radius: var(--radius-md, 10px); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pub-msg.ok   { box-shadow: var(--glow-soft-green); }
.pub-msg.info { box-shadow: var(--glow-soft-gold); }