/* ============================================================
   VCC, Hero section
   Two-column: content left, animated end-to-end visual right
   ============================================================ */

.hero {
  position: relative;
  padding-top: calc(var(--nav-height) + clamp(40px, 6vw, 88px));
  padding-bottom: clamp(80px, 10vw, 140px);
  overflow: hidden;
  isolation: isolate;
}

/* Ambient backdrop, green radial glow behind the visual only */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.hero__bg::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -10%;
  width: 65%;
  height: 90%;
  background: radial-gradient(
    ellipse at center,
    rgba(116, 219, 139, 0.18) 0%,
    rgba(116, 219, 139, 0.08) 30%,
    transparent 70%
  );
  filter: blur(40px);
  opacity: 0.9;
}

/* Faint grid, masked so it fades at edges */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(116, 219, 139, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116, 219, 139, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 70% 40%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, black 20%, transparent 75%);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

@media (max-width: 980px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
}

/* ---------- Content column ---------- */

.hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.hero__title {
  font-size: var(--fs-hero);
  font-weight: var(--fw-light);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--text-primary);
  margin-top: var(--space-3);
  max-width: 16ch;
  text-wrap: balance;
}

.hero__title .accent {
  font-weight: var(--fw-bold);
  color: var(--accent);
}

.hero__lead {
  color: var(--text-secondary);
  max-width: 52ch;
  margin-top: var(--space-2);
}

.hero__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.hero__stat-value {
  font-family: var(--font-brand);
  font-size: clamp(1.75rem, 2.5vw + 0.5rem, 2.5rem);
  font-weight: var(--fw-light);
  line-height: 1;
  letter-spacing: var(--ls-heading);
  color: var(--text-primary);
}

.hero__stat-value .accent { color: var(--accent); font-weight: var(--fw-light); }
.hero__stat-value .mark   { color: var(--accent); }

.hero__stat-label {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  letter-spacing: var(--ls-mono);
  line-height: 1.4;
}

@media (max-width: 520px) {
  .hero__stats { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ============================================================
   Hero visual, SVG animated verification stage
   Central Helix, six operator nodes, private in, verified out
   ============================================================ */

.hero__visual {
  position: relative;
  aspect-ratio: 7 / 6;
  max-width: 560px;
  width: 100%;
  margin-left: auto;
  margin-right: 0;
}

@media (max-width: 980px) {
  .hero__visual { margin-inline: auto; max-width: 480px; }
}

.hv-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Static structural elements */
.hv-orbit {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1;
  stroke-dasharray: 2 6;
  opacity: 0.5;
  transform-origin: 280px 240px;
  animation: hv-orbit-rotate 80s linear infinite;
}

@keyframes hv-orbit-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.hv-ambient {
  fill: rgba(116, 219, 139, 0.08);
  animation: hv-ambient-pulse 4s ease-in-out infinite;
}

@keyframes hv-ambient-pulse {
  0%, 100% { opacity: 0.3; transform: scale(1); transform-origin: 280px 240px; }
  50%      { opacity: 0.5; transform: scale(1.08); transform-origin: 280px 240px; }
}

/* Central Helix, the consensus point */
.hv-helix-frame {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  opacity: 0.4;
}

.hv-helix-path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 12;
  stroke-linecap: round;
  animation: hv-helix-pulse 6s ease-in-out infinite;
}

@keyframes hv-helix-pulse {
  0%, 10%, 60%, 100% { opacity: 0.85; filter: drop-shadow(0 0 0 rgba(116, 219, 139, 0)); }
  15%                 { opacity: 1; filter: drop-shadow(0 0 12px rgba(116, 219, 139, 0.8)); }
  40%                 { opacity: 1; filter: drop-shadow(0 0 20px rgba(116, 219, 139, 0.95)); }
}

/* Operator nodes, six in an orbit, lighting up in sequence 15% to 45% of loop */
.hv-node circle {
  fill: var(--bg);
  stroke: var(--text-dim);
  stroke-width: 1.5;
  transition: none;
  animation: hv-node-verify 6s ease-in-out infinite;
}

.hv-node text {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--text-muted);
  text-anchor: middle;
  dominant-baseline: middle;
  animation: hv-node-label 6s ease-in-out infinite;
}

@keyframes hv-node-verify {
  0%, 12%      { stroke: var(--ew-purple-300); fill: var(--bg); }
  22%, 55%     { stroke: var(--accent); fill: rgba(116, 219, 139, 0.12); }
  62%, 100%    { stroke: var(--ew-purple-300); fill: var(--bg); }
}

@keyframes hv-node-label {
  0%, 12%      { fill: var(--text-dim); }
  22%, 55%     { fill: var(--accent); }
  62%, 100%    { fill: var(--text-dim); }
}

/* Stagger each node */
.hv-node--1 circle, .hv-node--1 text { animation-delay: 0s; }
.hv-node--2 circle, .hv-node--2 text { animation-delay: 0.1s; }
.hv-node--3 circle, .hv-node--3 text { animation-delay: 0.2s; }
.hv-node--4 circle, .hv-node--4 text { animation-delay: 0.3s; }
.hv-node--5 circle, .hv-node--5 text { animation-delay: 0.4s; }
.hv-node--6 circle, .hv-node--6 text { animation-delay: 0.5s; }

/* Consensus ring that emerges when nodes agree */
.hv-consensus-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  opacity: 0;
  transform-origin: 280px 240px;
  animation: hv-consensus 6s ease-out infinite;
}

@keyframes hv-consensus {
  0%, 35%   { opacity: 0; transform: scale(0.9); }
  40%       { opacity: 0.7; transform: scale(1); }
  55%       { opacity: 0; transform: scale(1.15); }
  100%      { opacity: 0; transform: scale(1.15); }
}

/* Left card, private data, unverified */
.hv-card-private .card-bg {
  fill: var(--bg-elevated);
  stroke: rgba(229, 99, 118, 0.35);
  stroke-width: 1;
}

.hv-card-private .card-label {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--unverified);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.hv-card-private .card-row-1 { fill: rgba(229, 99, 118, 0.35); }
.hv-card-private .card-row-2 { fill: rgba(229, 99, 118, 0.25); }
.hv-card-private .card-row-3 { fill: rgba(229, 99, 118, 0.2); }
.hv-card-private .card-lock  { fill: none; stroke: var(--unverified); stroke-width: 1.2; }

/* Right card, verified record */
.hv-card-verified .card-bg {
  fill: var(--bg-elevated);
  stroke: var(--border);
  stroke-width: 1;
  animation: hv-verified-border 6s ease-in-out infinite;
}

@keyframes hv-verified-border {
  0%, 55%   { stroke: var(--border); }
  60%, 100% { stroke: var(--border-accent); }
}

.hv-card-verified .card-label {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--text-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  animation: hv-verified-label 6s ease-in-out infinite;
}

@keyframes hv-verified-label {
  0%, 55%   { fill: var(--text-dim); }
  60%, 100% { fill: var(--accent); }
}

.hv-card-verified .card-hash {
  font-family: var(--font-mono);
  font-size: 9.5px;
  fill: var(--text-muted);
  letter-spacing: 0.5px;
  animation: hv-verified-hash 6s ease-in-out infinite;
}

@keyframes hv-verified-hash {
  0%, 55%    { opacity: 0.3; fill: var(--text-dim); }
  60%, 100%  { opacity: 1; fill: var(--accent); }
}

.hv-check {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  animation: hv-check-draw 6s ease-out infinite;
}

@keyframes hv-check-draw {
  0%, 55%   { stroke-dashoffset: 16; opacity: 0; }
  60%       { stroke-dashoffset: 16; opacity: 1; }
  72%, 100% { stroke-dashoffset: 0;  opacity: 1; }
}

.hv-check-circle {
  fill: rgba(116, 219, 139, 0.1);
  stroke: var(--accent);
  stroke-width: 1.5;
  opacity: 0;
  animation: hv-check-circle 6s ease-out infinite;
}

@keyframes hv-check-circle {
  0%, 55%   { opacity: 0; transform: scale(0.5); }
  60%       { opacity: 1; transform: scale(1); }
  100%      { opacity: 1; transform: scale(1); }
}

.hv-check-circle {
  transform-origin: 470px 200px;
  transform-box: fill-box;
}

/* Particles, the data moving through the system */
.hv-particle {
  fill: var(--accent);
  filter: drop-shadow(0 0 6px rgba(116, 219, 139, 0.8));
}

.hv-particle--in-1 {
  animation: hv-travel-in 6s ease-in-out infinite;
}
.hv-particle--in-2 {
  animation: hv-travel-in 6s ease-in-out infinite;
  animation-delay: 0.15s;
}

@keyframes hv-travel-in {
  0%        { transform: translate(0, 0); opacity: 0; }
  3%        { opacity: 1; }
  22%       { transform: translate(160px, 40px); opacity: 1; }
  25%, 100% { transform: translate(160px, 40px); opacity: 0; }
}

.hv-particle--out-1 {
  animation: hv-travel-out 6s ease-in-out infinite;
}
.hv-particle--out-2 {
  animation: hv-travel-out 6s ease-in-out infinite;
  animation-delay: 0.15s;
}

@keyframes hv-travel-out {
  0%, 50%   { transform: translate(0, 0); opacity: 0; }
  53%       { opacity: 1; }
  72%       { transform: translate(160px, -40px); opacity: 1; }
  75%, 100% { transform: translate(160px, -40px); opacity: 0; }
}

/* Connection lines, fade in when relevant */
.hv-line-in {
  stroke: var(--unverified);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  fill: none;
  opacity: 0.25;
}

.hv-line-out {
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  fill: none;
  opacity: 0;
  animation: hv-line-out 6s ease-in-out infinite;
}

@keyframes hv-line-out {
  0%, 50%   { opacity: 0; }
  55%, 75%  { opacity: 0.4; }
  78%, 100% { opacity: 0; }
}

/* Floating labels */
.hv-label {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--text-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Reduced motion, show the completed verified state, no animation */
@media (prefers-reduced-motion: reduce) {
  .hv-orbit,
  .hv-ambient,
  .hv-helix-path,
  .hv-node circle,
  .hv-node text,
  .hv-consensus-ring,
  .hv-card-verified .card-bg,
  .hv-card-verified .card-label,
  .hv-card-verified .card-hash,
  .hv-check,
  .hv-check-circle,
  .hv-particle--in-1,
  .hv-particle--in-2,
  .hv-particle--out-1,
  .hv-particle--out-2,
  .hv-line-out {
    animation: none !important;
  }
  .hv-node circle { stroke: var(--accent); fill: rgba(116, 219, 139, 0.12); }
  .hv-node text { fill: var(--accent); }
  .hv-check { stroke-dashoffset: 0; opacity: 1; }
  .hv-check-circle { opacity: 1; }
  .hv-particle--in-1, .hv-particle--in-2, .hv-particle--out-1, .hv-particle--out-2 { opacity: 0; }
}