/* =========================
   HIGHLIGHTS SECTION
========================= */

.highlights {
  display: flex;
  max-width: 1200px;
  flex-wrap: wrap; /* allow wrapping on small screens */
  gap: 20px;       /* space between blocks */
  margin-bottom: 40px;
}


/* =========================
   ITEM
========================= */

.highlight-item {
  flex: 1 1 200px;
}

.highlight-item h2 {
  margin-top: 0;        /* IMPORTANT: consistent header start */
  margin-bottom: 8px;
  font-size: 1.2rem;
}

.highlight-item p {
  margin: 0;
  font-size: 0.95rem;
}


/* =========================
   ICON SLOT (ALIGNMENT FIX)
========================= */
/* Give all highlight icons the same vertical slot so headers align */

.highlight-icon,
[class^="highlight-icon--"],
[class*=" highlight-icon--"] {
  height: 56px;                 /* unified vertical space */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px auto;
}


/* =========================
   HIGHLIGHT ICON (GENERIC)
========================= */

.highlight-icon {
  font-size: 2rem;
}


/* =========================
   GEARS ICON
========================= */

.highlight-icon--gears {
  position: relative;
  width: 48px;
  height: 56px; /* unified slot height */
}

/* Position wrapper */
.highlight-icon--gears .gear {
  position: absolute;
}

/* Make SVG fill its wrapper */
.highlight-icon--gears .gear svg {
  width: 100%;
  height: 100%;
  display: block;

  /* Critical for proper rotation center */
  transform-box: fill-box;
  transform-origin: center;
}

/* Big gear */
.highlight-icon--gears .gear--big {
  width: 90%;
  height: 90%;
  top: 0;
  left: -3%;

  transform: rotate(5deg);
  transform-origin: center;
}

/* Small gear */
.highlight-icon--gears .gear--small {
  width: 60%;
  height: 60%;
  bottom: -8px;
  right: -12px;

  transform: rotate(-16deg);
  transform-origin: center;
}

/* Spin animation applied to SVG (not wrapper) */
.na-box:hover .highlight-icon--gears .gear--big svg {
  animation: na-gear-spin 1.2s linear infinite;
}

.na-box:hover .highlight-icon--gears .gear--small svg {
  animation: na-gear-spin-rev 0.9s linear infinite;
}

@keyframes na-gear-spin {
  to { transform: rotate(360deg); }
}

@keyframes na-gear-spin-rev {
  to { transform: rotate(-360deg); }
}


/* =========================
   INSIGHTS ICON (STREAMING CHART)
========================= */

.highlight-icon--insights {
  width: 72px;
  height: 56px; /* unified slot height */
}

.highlight-icon--insights svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Stroke + dots use currentColor */
.highlight-icon--insights .insights-line,
.highlight-icon--insights .insights-lens {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.highlight-icon--insights .insights-dot {
  fill: currentColor;
}

/* Slight emphasis inside lens */
.highlight-icon--insights .insights-line--zoom {
  stroke-width: 3.6;
}

/* Lens outline slightly stronger */
.highlight-icon--insights .insights-lens {
  stroke-width: 3.6;
}

/* Base stream (outside lens) slightly muted */
.highlight-icon--insights .insights-base .insights-line,
.highlight-icon--insights .insights-base .insights-dot {
  opacity: 0.5; /* try 0.3–0.5 */
}

/* Shift the whole moving stream so the seam starts elsewhere */
.highlight-icon--insights .insights-scroll {
  transform: translateX(-5px); /* tweak: e.g. -6px, -12px, -18px */
}

/* Seamless loop (viewBox width is 64) */
@keyframes na-insights-scroll {
  to { transform: translateX(-69px); }
}

/* Trigger on whole box hover */
.na-box:hover .highlight-icon--insights .insights-scroll {
  animation: na-insights-scroll 1.8s linear infinite;
}


/* =========================
   TEACHING ICON (BULB + RAYS)
========================= */

.highlight-icon--teaching {
  width: 56px;
  height: 56px;
}

.highlight-icon--teaching svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Rays ON by default */
.highlight-icon--teaching .teach-rays {
  opacity: 1;
}

/* Fade out → stay OFF → instant snap ON */
@keyframes na-teach-rays-flicker {
  0%   { opacity: 1; }   /* start ON */
  40%  { opacity: 0; }   /* slow fade out */
  70%  { opacity: 0; }   /* stay OFF for a bit */
  71%  { opacity: 1; }   /* instant snap back ON */
  100% { opacity: 1; }   /* remain ON shortly */
}

.na-box:hover .highlight-icon--teaching .teach-rays {
  animation: na-teach-rays-flicker 2.6s ease-out infinite;
}


/* =========================
   HUMAN ICON (HANDSHAKE)
========================= */

.highlight-icon--human {
  width: 56px;
  height: 56px;
}

.highlight-icon--human svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
  transform: rotate(45deg);
}

/* Professional handshake shake */
@keyframes na-handshake-shake {
  0%   { transform: rotate(0deg) scale(1); }
  20%  { transform: rotate(-3deg) scale(1.04); }
  40%  { transform: rotate(3deg)  scale(1.02); }
  60%  { transform: rotate(-2deg) scale(1.03); }
  80%  { transform: rotate(2deg)  scale(1.01); }
  100% { transform: rotate(0deg) scale(1); }
}

.na-box:hover .highlight-icon--human .handshake {
  animation: na-handshake-shake 1.2s ease-in-out infinite;
  transform-origin: 50% 50%;
  transform-box: fill-box;
}


/* =========================
   REDUCED MOTION
========================= */

@media (prefers-reduced-motion: reduce) {

  .na-box:hover .highlight-icon--gears .gear--big svg,
  .na-box:hover .highlight-icon--gears .gear--small svg,
  .na-box:hover .highlight-icon--insights .insights-scroll,
  .na-box:hover .highlight-icon--teaching .teach-rays,
  .na-box:hover .highlight-icon--human .handshake {
    animation: none;
  }

}