/**
 * hero-section.css — Immersive premium hero panel (RI-scoped for now).
 *
 * Built for Resume Intelligence Home per
 * docs/resume-intelligence-experience-v2/DESIGN_LANGUAGE.md §2 — an
 * in-app hero (nav shell stays visible, unlike the full-viewport marketing
 * `.hero-section` in css/pages/marketing.css), using the same proven
 * `--gradient-hero` / `--gradient-aurora-dark` token pair.
 *
 * Namespaced `.rih-*` (Resume Intelligence Home) to avoid any collision
 * with `.hero-section`/`.dashboard-hero`. Phase 8 documents how another
 * page would generalize this into a page-agnostic component; that
 * generalization is deliberately NOT done here (see ROADMAP.md Phase 8).
 */

.rih-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 — identical proven motion as marketing.css's hero */
.rih-hero__bg {
  position: absolute;
  inset: -20%;
  background: var(--gradient-aurora-dark);
  pointer-events: none;
  filter: blur(8px);
  animation: rih-aurora-drift 26s var(--ease-in-out) infinite alternate;
  z-index: 0;
}

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

/* Faint grid, mirrors .dashboard-hero's signature but on dark ground */
.rih-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) {
  .rih-hero__bg { animation: none; }
}

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

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

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

.rih-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: var(--color-ai);
  background: rgb(122 115 255 / 0.16);
  border: 1px solid rgb(122 115 255 / 0.3);
  border-radius: var(--radius-full);
}

.rih-hero__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-ai);
  box-shadow: 0 0 0 3px rgb(122 115 255 / 0.25);
}

.rih-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: 16ch;
}

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

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

.rih-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);
}

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

/* ── Visual column — layered floating "document/score" cards ───────────── */

.rih-hero__visual {
  position: relative;
  flex: 0 0 auto;
  width: 280px;
  height: 260px;
  display: none;
}

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

.rih-hero__ghost-card {
  position: absolute;
  width: 220px;
  border-radius: var(--radius-xl);
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.16);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 50px -12px rgb(0 0 0 / 0.45);
  padding: var(--space-4);
  animation: rih-card-float 7s var(--ease-in-out) infinite;
}

.rih-hero__ghost-card--back {
  top: 6px;
  left: 40px;
  transform: rotate(-7deg);
  opacity: 0.55;
  animation-delay: -2.3s;
}

.rih-hero__ghost-card--mid {
  top: 46px;
  left: 8px;
  transform: rotate(4deg);
  opacity: 0.8;
  animation-delay: -4.6s;
}

.rih-hero__ghost-card--front {
  top: 92px;
  left: 24px;
  z-index: 1;
  animation-delay: 0s;
}

@keyframes rih-card-float {
  0%, 100% { transform: translateY(0) rotate(var(--rih-rot, 0deg)); }
  50%      { transform: translateY(-10px) rotate(var(--rih-rot, 0deg)); }
}

.rih-hero__ghost-card--back  { --rih-rot: -7deg; }
.rih-hero__ghost-card--mid   { --rih-rot: 4deg; }
.rih-hero__ghost-card--front { --rih-rot: 0deg; }

.rih-hero__ghost-line {
  height: 8px;
  border-radius: var(--radius-full);
  background: rgb(255 255 255 / 0.22);
  margin-bottom: 8px;
}

.rih-hero__ghost-line:nth-child(1) { width: 60%; height: 10px; background: rgb(255 255 255 / 0.35); }
.rih-hero__ghost-line:nth-child(2) { width: 90%; }
.rih-hero__ghost-line:nth-child(3) { width: 75%; }

.rih-hero__ghost-score {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: var(--space-3);
}

.rih-hero__ghost-score strong {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.rih-hero__ghost-score span {
  font-size: var(--font-size-xs);
  color: var(--color-band-leading);
  font-weight: var(--font-weight-semibold);
}

@media (prefers-reduced-motion: reduce) {
  .rih-hero__ghost-card { animation: none; }
}

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

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

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