/**
 * premium-hero.css — Immersive premium reveal hero (page-agnostic).
 *
 * Generalizes the proven `.rih-hero` pattern (built for Resume Intelligence
 * Home — dark `--gradient-hero` ground, drifting `--gradient-aurora-dark`
 * mesh, masked grid texture) into a reusable, un-namespaced component per
 * docs/dashboard-experience-v2/DESIGN_LANGUAGE.md §2, so any future surface
 * needing a "product reveal" moment can adopt it without copy-pasting.
 *
 * First consumer: the Dashboard's first-time (no analysis yet) welcome
 * experience — see #dashboard-locked-welcome in dashboard.html. Composes
 * entirely from existing tokens (css/tokens.css) and motion utilities
 * (css/motion.css) — no new custom properties introduced.
 *
 * Usage:
 *   <section class="premium-hero">
 *     <div class="premium-hero__bg" aria-hidden="true"></div>
 *     <div class="premium-hero__copy">
 *       <p class="premium-hero__eyebrow">Eyebrow</p>
 *       <h1 class="premium-hero__heading">Headline</h1>
 *       <p class="premium-hero__subhead">Subhead</p>
 *       <ul class="premium-hero__proof">…</ul>
 *       <div class="premium-hero__actions">
 *         <a class="btn btn--primary premium-hero__cta" href="…">CTA</a>
 *         <p class="premium-hero__microcopy">Microcopy</p>
 *       </div>
 *     </div>
 *     <div class="premium-hero__visual">
 *       <div class="premium-hero__gauge-card">…</div>
 *       <div class="premium-hero__stat-chip premium-hero__stat-chip--a">…</div>
 *       <div class="premium-hero__stat-chip premium-hero__stat-chip--b">…</div>
 *     </div>
 *   </section>
 */

.premium-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-16) var(--space-12);
  border-radius: var(--radius-2xl);
  background: var(--gradient-hero);
  box-shadow: var(--shadow-2xl);
  overflow: hidden;
  isolation: isolate;
}

/* Drifting aurora mesh — same proven motion as marketing.css / rih-hero */
.premium-hero__bg {
  position: absolute;
  inset: -20%;
  background: var(--gradient-aurora-dark);
  pointer-events: none;
  filter: blur(8px);
  animation: premium-hero-aurora-drift 26s var(--ease-in-out) infinite alternate;
  z-index: 0;
}

@keyframes premium-hero-aurora-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(2%, -3%, 0) scale(1.08); }
}

/* Faint grid texture, mirrors .dashboard-hero's signature but on dark ground */
.premium-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgb(246 249 252 / 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(246 249 252 / 0.05) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 20% 30%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 75% 85% at 20% 30%, #000 0%, transparent 75%);
  z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
  .premium-hero__bg { animation: none; }
}

.premium-hero > * { position: relative; z-index: 1; }

/* ── Copy column ─────────────────────────────────────────────────────────── */

.premium-hero__copy {
  flex: 1 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.premium-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 4px 12px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: #ffffff;
  background: rgb(255 255 255 / 0.10);
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: var(--radius-full);
}

.premium-hero__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-band-leading);
  box-shadow: 0 0 0 3px rgb(22 163 74 / 0.25);
}

.premium-hero__heading {
  margin: 0;
  font-size: var(--font-size-display-1);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--line-height-tight);
  color: #ffffff;
  max-width: 18ch;
}

.premium-hero__subhead {
  margin: 0;
  max-width: 52ch;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: rgb(246 249 252 / 0.74);
}

/* Short "why we're different" proof points */
.premium-hero__proof {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.premium-hero__proof li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: rgb(246 249 252 / 0.88);
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: var(--radius-full);
  backdrop-filter: blur(6px);
}

.premium-hero__proof li svg {
  width: 14px;
  height: 14px;
  stroke: var(--color-band-leading);
  fill: none;
  flex-shrink: 0;
}

/* ── CTA row ─────────────────────────────────────────────────────────────── */

.premium-hero__actions {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.premium-hero__cta.btn.btn--primary {
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-size-body);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-primary-lg);
}

.premium-hero__microcopy {
  margin: 0;
  font-size: var(--font-size-xs);
  color: rgb(246 249 252 / 0.56);
}

/* ── Visual column — floating gauge card + stat chips ───────────────────── */

.premium-hero__visual {
  position: relative;
  flex: 0 0 auto;
  width: 300px;
  height: 300px;
  display: none;
}

@media (min-width: 900px) {
  .premium-hero__visual { display: block; }
}

.premium-hero__gauge-card {
  position: absolute;
  top: 30px;
  left: 20px;
  width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  border-radius: var(--radius-xl);
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.18);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -14px rgb(0 0 0 / 0.5);
  padding: var(--space-5) var(--space-5) var(--space-4);
  animation: premium-hero-card-float 7s var(--ease-in-out) infinite;
}

.premium-hero__gauge-card-label {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: rgb(246 249 252 / 0.6);
}

.premium-hero__gauge-slot {
  width: 100%;
}

/* Gauge text renders white on this dark glass card (overrides gauge.css's
   light-theme default), band chip keeps its own semantic band color. */
.premium-hero__gauge-slot .ci-gauge__score { color: #ffffff; }

.premium-hero__sample-tag {
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgb(246 249 252 / 0.5);
}

@keyframes premium-hero-card-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.premium-hero__stat-chip {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 0.10);
  border: 1px solid rgb(255 255 255 / 0.18);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px -10px rgb(0 0 0 / 0.45);
  animation: premium-hero-card-float 7s var(--ease-in-out) infinite;
}

.premium-hero__stat-chip--a {
  top: 4px;
  right: 0;
  transform: rotate(-4deg);
  animation-delay: -2.3s;
}

.premium-hero__stat-chip--b {
  bottom: 10px;
  right: 10px;
  transform: rotate(3deg);
  animation-delay: -4.6s;
}

.premium-hero__stat-chip-value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.premium-hero__stat-chip-label {
  font-size: 0.7rem;
  font-weight: var(--font-weight-medium);
  color: rgb(246 249 252 / 0.64);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .premium-hero__gauge-card,
  .premium-hero__stat-chip { animation: none; }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .premium-hero { padding: var(--space-10) var(--space-8); }
  .premium-hero__heading { max-width: none; }
}

@media (max-width: 768px) {
  .premium-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-8) var(--space-6);
    gap: var(--space-6);
    text-align: left;
  }
  .premium-hero__visual { display: none; }
  .premium-hero__heading { font-size: var(--font-size-display-2); }
  .premium-hero__actions { width: 100%; }
  .premium-hero__cta.btn.btn--primary { width: 100%; }
}