/* ════════════════════════════════════════════════════════════════════
   MOOPS — Simple hero: "Dot-grid pulse"
   Scoped entirely under .moops-anim.hero-dot-pulse. CSS-only ambient
   background: the brand dot-paper texture (48px grid, same as the old
   SVG scene's backdrop) with coral dot patches breathing in and out and
   a warm glow drifting across. All animations are compositor-only
   (opacity / transform) — no per-frame repaint, no jank. Chrome uses
   brand tokens from public/css/moops.css. Respects reduced-motion.
   ════════════════════════════════════════════════════════════════════ */

/* Hero band (~80% viewport on desktop), cleared under the floating nav */
.moops-anim.hero-dot-pulse {
  position: relative;
  min-height: 80svh;
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-h) + 24px) 0 clamp(40px, 5vh, 64px);
  overflow: hidden;
  background: radial-gradient(130% 120% at 50% 12%,
              #FCFAF4 0%, var(--bg) 48%, var(--bg-alt) 100%);
}

/* The hero deliberately adds NO padding/width overrides on .container:
   it must share the exact --container + 32px rhythm the nav and every
   section use, so all left edges align at any viewport width. */

/* ── Ambient background ─────────────────────────────────────────────── */
.hero-dot-pulse .hdp-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* base dot grid (subtle, taupe) — painted once, never animated */
.hero-dot-pulse .hdp-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, #c9b697 1.2px, transparent 1.4px);
  background-size: 48px 48px;
  opacity: 0.36;
}

/* ghost watermark word (matches the site-wide hero motif) */
.hero-dot-pulse .hdp-ghost {
  font-size: clamp(220px, 30vw, 460px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  opacity: 0.9;
}

/* ── Content ────────────────────────────────────────────────────────── */
.hero-dot-pulse .hdp-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  /* vertical centering only — must NOT touch inline margins, or it
     overrides .container's `margin: 0 auto` and pins the hero content
     to the viewport's left edge on wide screens */
  margin-block: auto;
}
.hero-dot-pulse .hdp-text {
  flex: 0 1 860px;
}
.hero-dot-pulse .hdp-title {
  font-size: clamp(48px, 6.4vw, 104px);
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin-top: 24px;
  color: var(--ink);
  max-width: 820px;
}
.hero-dot-pulse .hdp-sub {
  margin-top: 24px;
  max-width: 540px;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--ink-soft);
}
.hero-dot-pulse .hdp-actions {
  margin-top: 32px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
/* Two-path CTA (SME vs. partner) — equal-width, wraps to full-width stacked
   buttons once the labels no longer fit side by side. Bolder + taller than
   the standard .btn so the two paths read as the hero's main event. */
.hero-dot-pulse .hdp-actions-2col .btn {
  flex: 1 1 300px;
  justify-content: center;
  text-align: left;
  white-space: normal;
  line-height: 1.3;
  padding: 20px 26px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.hero-dot-pulse .hdp-actions-2col .btn .arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Scroll indicator (desktop only) */
.hero-dot-pulse .hdp-scroll-indicator {
  position: absolute;
  /* sit on the container's right content edge at every width */
  right: max(32px, calc((100% - var(--container)) / 2 + 32px));
  bottom: clamp(28px, 4vh, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  z-index: 2;
  opacity: 0.85;
  animation: hdpScrollBounce 2.5s infinite ease-in-out;
}
.hero-dot-pulse .hdp-scroll-indicator svg {
  width: 16px;
  height: 16px;
}
@keyframes hdpScrollBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-dot-pulse .hdp-scroll-indicator { animation: none; }
}

/* ── Tablet / Mobile ────────────────────────────────────────────────── */
/* shorter hero on portrait tablets too (769–1024px, e.g. iPad upright) —
   the ≤768px rule below covers phones with its own min-height */
@media (orientation: portrait) and (min-width: 769px) and (max-width: 1024px) {
  .moops-anim.hero-dot-pulse { min-height: 55vh; min-height: 55svh; }
}
@media (max-width: 768px) {
  /* +50px top and bottom vs. the base padding; min-height raised to
     55vh (from 50vh) to make room for it */
  .moops-anim.hero-dot-pulse {
    min-height: 55vh;
    min-height: 55svh;
    padding-top: calc(var(--nav-h) + 62px);
    padding-bottom: clamp(90px, 5vh, 114px);
  }
  /* Reduce heading size on mobile so CTAs remain visible */
  .hero-dot-pulse .hdp-title { font-size: 42px; margin-top: 12px; }
  /* eyebrow reads quieter at this size — smaller text, smaller dot,
     tighter to the heading instead of the desktop 24px gap */
  .hero-dot-pulse .eyebrow {
    font-size: 10px;
    letter-spacing: 0.09em;
    gap: 6px;
  }
  .hero-dot-pulse .eyebrow::before {
    width: 5px; height: 5px;
    opacity: 0.6;
  }
  .hero-dot-pulse .hdp-sub { font-size: 15px; }
  .hero-dot-pulse .hdp-actions .btn {
    font-size: 11px;
    padding: 12px 19px;
    gap: 10px;
  }
  /* two-path CTA stays bold and tall on mobile too, just scaled down
     from the desktop size rather than reverting to the base .btn */
  .hero-dot-pulse .hdp-actions-2col .btn {
    font-size: 13px;
    font-weight: 700;
    padding: 16px 18px;
    gap: 8px;
  }
  .hero-dot-pulse .hdp-actions-2col .btn .arrow {
    width: 16px;
    height: 16px;
  }
  .hero-dot-pulse .hdp-actions .btn .arrow {
    width: 14px;
    height: 14px;
  }
  .hero-dot-pulse .hdp-scroll-indicator { display: none; }
}