/* Axamo Globe Hero — Webflow embed build.
   Every rule is scoped to .axamo-gh so it can't affect the rest of your Webflow page.
   Keyframes are prefixed (axgh-) to avoid clashes. */

@font-face {
  font-family: 'AxamoSFPro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/SF-Pro-Display-Regular.otf') format('opentype');
}

.axamo-gh {
  /* Axamo design system — dark variant */
  --bg: #101216;
  --surface: #1a1a1a;
  --ink: #f0f0eb;
  --muted: #9a9a9a;
  --orange: #c84b30;
  --navy: #002855;
  --line: rgba(240, 240, 235, 0.07); /* grid-line brightness at the TOP; masked to fade out toward the bottom */
  --dot: rgba(240, 240, 235, 0.08);
  --hair: rgba(240, 240, 235, 0.12);
  --sans: 'AxamoSFPro', 'SF Pro Display', -apple-system, BlinkMacSystemFont, system-ui, Arial, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif; /* accent words — same face axamo.co uses */

  position: relative;
  width: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.axamo-gh, .axamo-gh *, .axamo-gh *::before, .axamo-gh *::after { box-sizing: border-box; }

/* ---------- hero shell ---------- */
.axamo-gh .hero {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--bg);
}
/* "bare" hero: transparent + no internal grid. Use when a single shared grid sits
   behind the whole footer_wrap (hero + footer); the dark bg then comes from
   footer_wrap, and the shared grid shows through the hero. */
.axamo-gh.axamo-bare,
.axamo-gh.axamo-bare .hero { background: transparent; }
.axamo-gh.axamo-bare .grid { display: none; }
.axamo-gh .hero-inner {
  position: relative;
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
}

/* ---------- blueprint grid + vignette ---------- */
.axamo-gh .grid {
  --cell: 64px; /* one number shared by the CSS grid and the beam canvas (hero.js) */
  position: absolute;
  inset: -10%;
  z-index: 0;
  will-change: transform;
}
/* grid LINES live on ::before so we can fade them top->bottom without touching the
   beams (a canvas child painted above). Effective opacity ramps low->high downward. */
.axamo-gh .grid::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  -webkit-mask-image: linear-gradient(to bottom, #000 8%, transparent 94%);
  mask-image: linear-gradient(to bottom, #000 8%, transparent 94%);
}

/* animated grid beams — glowing travelling lines (hero.js). z-index 1 keeps them
   above the masked line layer at full brightness. */
.axamo-gh .beams {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* spotlight — blurred rotated ellipse sweeping in from the top-left. */
.axamo-gh .spotlight {
  position: absolute;
  top: -80px;
  left: 240px;
  width: 138%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transform: translate(-72%, -62%) scale(0.5);
  animation: axgh-spotlight 2s ease 0.6s forwards;
  will-change: transform, opacity;
}
.axamo-gh .spotlight svg { display: block; width: 100%; height: auto; }
@keyframes axgh-spotlight {
  from { opacity: 0; transform: translate(-72%, -62%) scale(0.5); }
  to { opacity: 1; transform: translate(-50%, -40%) scale(1); }
}

.axamo-gh .vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(4, 6, 10, 0.75) 100%);
}

/* floating drift markers */
.axamo-gh .drift {
  position: absolute;
  z-index: 2;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
  opacity: 0.5;
  box-shadow: 0 0 10px rgba(200, 75, 48, 0.6);
}
.axamo-gh .d1 { top: 22%; left: 8%; animation: axgh-drift 9s ease-in-out infinite; }
.axamo-gh .d2 { top: 68%; left: 18%; animation: axgh-drift 11s ease-in-out infinite reverse; }
.axamo-gh .d3 { top: 40%; right: 6%; animation: axgh-drift 13s ease-in-out infinite; }
@keyframes axgh-drift {
  0%, 100% { transform: translate(0, 0); opacity: 0.25; }
  50% { transform: translate(6px, -14px); opacity: 0.6; }
}

/* ---------- globe (left) ---------- */
.axamo-gh .globe-col {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.axamo-gh .globe-glow {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 40, 85, 0.5) 0%, rgba(200, 75, 48, 0.08) 45%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}
.axamo-gh .globe-canvas { position: relative; width: 100%; height: 100%; display: block; }

/* ---------- beats (right) ---------- */
.axamo-gh .beats-col {
  position: relative;
  z-index: 3;
  height: 100%;
  padding-right: 8vw;
  padding-left: 2vw;
  display: flex;
  align-items: center;
  /* soft dissolve at the column's top/bottom edges — travelling copy melts away */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.axamo-gh .beats { display: grid; }
.axamo-gh .beat {
  grid-area: 1 / 1;
  max-width: 40rem;
  opacity: 0; /* opacity / translateY / blur driven from scroll progress (hero.js) */
  pointer-events: none;
  will-change: transform, opacity, filter;
}
.axamo-gh .axgh-mbr { display: none; } /* hidden on desktop; shown only on mobile (see media query) */
.axamo-gh .beat-title {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(34px, 3.9vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
/* accent words: Instrument Serif italic in white (matches axamo.co headlines) */
.axamo-gh .beat-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.axamo-gh .beat-sub {
  margin: 20px 0 0;
  max-width: 46ch;
  font-size: 18px;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: balance;
}
.axamo-gh .beat-sub em { font-style: normal; color: var(--ink); }

/* CTA */
.axamo-gh .cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
  padding: 15px 24px;
  border-radius: 20px;
  background: var(--orange);
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  will-change: transform;
  transition: box-shadow 0.3s ease, filter 0.3s ease;
}
.axamo-gh .cta:hover { filter: brightness(1.05); box-shadow: 0 10px 40px rgba(200, 75, 48, 0.35); }
.axamo-gh .cta-arrow { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.axamo-gh .cta:hover .cta-arrow { transform: translateX(4px); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .axamo-gh .hero-inner {
    grid-template-columns: 1fr;
    grid-template-rows: 48% 52%;
    align-items: stretch;
  }
  .axamo-gh .globe-col { height: 100%; }
  .axamo-gh .beats-col {
    padding: 2vh 8vw 6vh;
    align-items: flex-start;
    justify-content: center;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 5%, #000 94%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 5%, #000 94%, transparent 100%);
  }
  .axamo-gh .beats { text-align: center; }
  .axamo-gh .beat { margin-inline: auto; }
  .axamo-gh .beat-sub { margin-left: auto; margin-right: auto; }
  .axamo-gh .beat-title { font-size: clamp(30px, 8vw, 44px); }
  .axamo-gh .axgh-mbr { display: inline; } /* mobile-only line break -> every headline is 2 lines */
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .axamo-gh .drift { animation: none; }
  .axamo-gh .beat { transition: opacity 0.2s ease; transform: none; }
  .axamo-gh .spotlight { animation: none; opacity: 1; transform: translate(-50%, -40%); }
}