/* =========================================================================
 * Hero Canvas — companion to assets/js/hero-canvas.js.
 *
 * The dot grid sits behind everything and bleeds to the edges so the
 * section reads as a proper FigJam-style canvas. Cursor pills sit on top
 * with a clickable hit-area for the hover-scale-and-pause interaction.
 * ====================================================================== */

.hero-canvas {
  position: relative;
  isolation: isolate;
  padding: clamp(96px, 14vw, 156px) clamp(20px, 6vw, 64px);
  overflow: hidden;
  font-family: var(--font-family-ui, system-ui, sans-serif);
}

/* Dot grid backdrop — full-bleed, no mask, slightly stronger than the
 * default so the surface reads as a canvas at a glance. */
.hero-canvas > [data-dot-grid] {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.9;
}

/* Cursor layer: tags need pointer-events for the hover state; the layer
 * itself stays inert so the page underneath remains scrollable. */
.hero-canvas__cursors {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease;
}

.hero-canvas.is-ready .hero-canvas__cursors {
  opacity: 1;
}

.hero-cursor {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  color: var(--cursor-color);
  pointer-events: auto;
  cursor: pointer;
  will-change: transform;
  transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: top left;
}

.hero-cursor.is-hovered {
  z-index: 2;
}

.hero-cursor:hover {
  /* scale up about 15% on hover; motion JS pauses this tag in parallel */
  transform: translate3d(var(--tx, 0), var(--ty, 0), 0) scale(1.15);
}

/* We need to nudge the scale onto the inner pill instead of fighting the
 * JS-driven translate3d on the wrapper. */
.hero-cursor__arrow,
.hero-cursor__pill {
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-cursor.is-hovered .hero-cursor__arrow,
.hero-cursor.is-hovered .hero-cursor__pill {
  transform: scale(1.15);
}

.hero-cursor__arrow {
  display: inline-flex;
  align-items: flex-start;
  margin-top: 0;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.22));
}

/* Arrow matches the tag height (FigJam-style large cursor) */
.hero-cursor__arrow svg {
  width: 28px;
  height: 28px;
}

.hero-cursor--lg .hero-cursor__arrow svg {
  width: 36px;
  height: 36px;
}

.hero-cursor__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 3px;
  height: 28px;
  border-radius: 8px;            /* rounded rectangle, not pill */
  color: #fff;
  background: var(--cursor-color);
  font-size: 0.75rem;
  font-weight: 540;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transform: translateY(-2px);
  transform-origin: left center;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 1px 2px rgba(0, 0, 0, 0.15),
    0 6px 16px rgba(0, 0, 0, 0.08);
}

.hero-cursor__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;            /* rounded square, not circle */
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  flex-shrink: 0;
}

.hero-cursor__glyph svg {
  width: 13px;
  height: 13px;
}

.hero-cursor__label {
  display: inline-block;
  line-height: 22px;
}

/* --- larger variant (Jigsaw) --- */
.hero-cursor--lg .hero-cursor__pill {
  height: 36px;
  padding: 4px 14px 4px 4px;
  font-size: 0.8125rem;
  font-weight: 580;
  border-radius: 10px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 2px 4px rgba(0, 0, 0, 0.22),
    0 10px 24px rgba(0, 0, 0, 0.14);
}

.hero-cursor--lg .hero-cursor__glyph {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.hero-cursor--lg .hero-cursor__glyph svg {
  width: 16px;
  height: 16px;
}

.hero-cursor--lg .hero-cursor__label {
  line-height: 28px;
}

/* --- foreground content --- */
.hero-canvas__content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.hero-canvas__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(20px, 4vw, 32px);
  padding: 5px 12px 5px 10px;
  font-size: 0.75rem;
  font-weight: var(--font-weight-regular, 400);
  letter-spacing: 0;
  color: var(--text-primary, #190a26);
  background: color-mix(in srgb, var(--bg-primary, #fff) 80%, transparent);
  border: 1px solid var(--border-primary, #e9e8ea);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero-canvas__status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #131c4d; /* Jigsaw indigo */
  box-shadow: 0 0 0 3px rgba(19, 28, 77, 0.18);
  animation: hero-status-pulse 2.4s ease-in-out infinite;
}

@keyframes hero-status-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(19, 28, 77, 0.18); }
  50%      { box-shadow: 0 0 0 6px rgba(19, 28, 77, 0); }
}

.hero-canvas__headline {
  margin: 0 0 clamp(16px, 2.6vw, 22px);
  font-family: var(--font-family-display, var(--font-family-ui, system-ui, sans-serif));
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  font-weight: var(--font-weight-regular);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--text-primary, #190a26);
}

.hero-canvas__sub {
  margin: 0 auto;
  max-width: 60ch;
  font-size: clamp(1rem, 1.4vw, 1.0625rem);
  line-height: 1.6;
  color: var(--text-secondary, var(--text-tertiary, #4b4b4b));
}

@media (max-width: 720px) {
  .hero-canvas {
    padding-top: clamp(56px, 16vw, 96px);
  }
  /* On narrow viewports keep only the strongest tags so copy still leads;
   * the rest are tucked into the top corners + bottom strip by hero-canvas.js
   * so they sit near the edges rather than behind the text. */
  .hero-cursor[data-id="ark"],
  .hero-cursor[data-id="safaricom"],
  .hero-cursor[data-id="lookback"],
  .hero-cursor[data-id="kwara"] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-canvas__cursors,
  .hero-cursor,
  .hero-canvas__status-dot {
    transition: none !important;
    animation: none !important;
  }
}