/* ═══════════════════════════════════════════════════════════════════════════════
   Hero Graphic — "Data In, Intelligence Out" flow visualization
   All styles for the Marketing::HeroGraphicComponent live here.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Layout ─────────────────────────────────────────────────────────────────── */

.hero-graphic {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  min-height: 280px;
}

.hero-graphic__inputs {
  width: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 2;
}

.hero-graphic__orb-zone {
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.hero-graphic__outputs {
  width: 40%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-left: 24px;
  position: relative;
  z-index: 2;
}

/* ─── SVG Connector Layer ────────────────────────────────────────────────────── */

.hero-graphic__connectors {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

/* ─── File Icons ─────────────────────────────────────────────────────────────── */

.hero-graphic__file {
  width: 90px;
  height: 110px;
  position: relative;
  opacity: 0;
  animation: heroFadeIn 0.5s ease-out both;
}

.hero-graphic__file:nth-child(1) {
  animation-delay: 0s;
  transform: translateX(-8px);
}

.hero-graphic__file:nth-child(2) {
  animation-delay: 0.1s;
  transform: translateX(8px);
}

.hero-graphic__file-body {
  width: 100%;
  height: 100%;
  background: #334155; /* slate-700 */
  border-radius: 6px;
  border: 1px solid #475569; /* slate-600 */
  overflow: hidden;
  position: relative;
}

/* Folded corner */
.hero-graphic__file-fold {
  position: absolute;
  top: 0;
  right: 0;
  width: 18px;
  height: 18px;
  background: linear-gradient(225deg, #1e293b 50%, #475569 50%);
  border-bottom-left-radius: 4px;
}

/* Header row */
.hero-graphic__file-header {
  display: flex;
  gap: 4px;
  padding: 22px 8px 0 8px;
}

.hero-graphic__file-header-cell {
  height: 5px;
  border-radius: 2px;
  background: #64748b; /* slate-500 */
}

/* Data rows */
.hero-graphic__file-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 5px 8px;
}

.hero-graphic__file-row {
  display: flex;
  gap: 4px;
}

.hero-graphic__file-cell {
  height: 4px;
  border-radius: 1.5px;
  background: #475569; /* slate-600 */
}

/* File extension label */
.hero-graphic__file-ext {
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #94a3b8; /* slate-400 */
}

/* ─── Glowing Orb ────────────────────────────────────────────────────────────── */

.hero-graphic__orb {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 45% 45%, #34d399, #059669 40%, #064e3b 75%, transparent 100%);
  box-shadow:
    0 0 40px rgba(52, 211, 153, 0.3),
    0 0 80px rgba(52, 211, 153, 0.15),
    0 0 120px rgba(52, 211, 153, 0.05);
  opacity: 0;
  animation: heroOrbEntrance 0.6s ease-out 0.6s both;
}

/* Astrolabe instrument lines */
.hero-graphic__astrolabe {
  width: 90px;
  height: 90px;
  animation: heroAstrolabeRotate 60s linear infinite;
  opacity: 0.35;
}

.hero-graphic__astrolabe circle,
.hero-graphic__astrolabe line {
  fill: none;
  stroke: #a7f3d0; /* emerald-200 */
  stroke-width: 1.2;
}

.hero-graphic__astrolabe .astrolabe-pointer {
  stroke-width: 1.5;
  stroke: #6ee7b7; /* emerald-300 */
}

/* ─── Output Cards ───────────────────────────────────────────────────────────── */

.hero-graphic__card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(30, 41, 59, 0.7); /* slate-800/70 */
  border: 1px solid rgba(71, 85, 105, 0.5); /* slate-600/50 */
  backdrop-filter: blur(8px);
  width: 100%;
  opacity: 0;
  animation: heroCardEntrance 0.5s ease-out both;
}

.hero-graphic__card:nth-child(1) { animation-delay: 0.9s; }
.hero-graphic__card:nth-child(2) { animation-delay: 1.1s; }
.hero-graphic__card:nth-child(3) { animation-delay: 1.3s; }

.hero-graphic__card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero-graphic__card-icon--emerald {
  background: rgba(16, 185, 129, 0.2); /* emerald-500/20 */
  color: #6ee7b7; /* emerald-300 */
}

.hero-graphic__card-icon--amber {
  background: rgba(245, 158, 11, 0.2); /* amber-500/20 */
  color: #fcd34d; /* amber-300 */
}

.hero-graphic__card-icon--violet {
  background: rgba(139, 92, 246, 0.2); /* violet-500/20 */
  color: #c4b5fd; /* violet-300 */
}

.hero-graphic__card-label {
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0; /* slate-200 */
  white-space: nowrap;
}

/* ─── Connector Path Dashes ──────────────────────────────────────────────────── */

.hero-graphic__path {
  fill: none;
  stroke-width: 2.5;
  stroke-dasharray: 6 20;
  stroke-linecap: round;
  opacity: 0;
}

/* Input paths (left → center) */
.hero-graphic__path--input-1,
.hero-graphic__path--input-2 {
  animation:
    heroFadeIn 0.3s ease-out 0.3s both,
    heroDashFlow 8s linear 0.3s infinite;
}

/* Output paths (center → right) */
.hero-graphic__path--output-1 {
  animation:
    heroFadeIn 0.3s ease-out 0.3s both,
    heroDashFlow 8s linear 0.3s infinite;
}

.hero-graphic__path--output-2 {
  animation:
    heroFadeIn 0.3s ease-out 0.3s both,
    heroDashFlow 8s linear 0.5s infinite;
}

.hero-graphic__path--output-3 {
  animation:
    heroFadeIn 0.3s ease-out 0.3s both,
    heroDashFlow 8s linear 0.7s infinite;
}

/* ─── Keyframe Animations ────────────────────────────────────────────────────── */

/* Generic fade in — used by files and paths (preserves existing transforms) */
@keyframes heroFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Orb fades in + scales up */
@keyframes heroOrbEntrance {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Output cards fade in + slide from left */
@keyframes heroCardEntrance {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Dash flow animation — moves dashes along the path */
@keyframes heroDashFlow {
  from { stroke-dashoffset: 52; }
  to { stroke-dashoffset: 0; }
}

/* Astrolabe instrument lines — slow rotation */
@keyframes heroAstrolabeRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}