/* ==========================================================================
   UNIT 1 · HERO
   --------------------------------------------------------------------------
   Navy authority field with soft teal glows. Two columns from tablet up:
   copy + secondary CTA at inline-start; at inline-end the lead form card
   (components/lead-form.css) layered over:
     • a transmission-gradient panel peeking out behind its corner
     • the pixel-F data cluster dispersing from that corner
   The hero's connection idea lives on the card's top edge as a compact
   bridge: ERP → Fatorly → UAE e-invoicing.
   Mobile: centred copy, form card stacked beneath.
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-block-size: 100svh;
  padding-block-start: calc(var(--header-h) + clamp(2rem, 6vw, 4rem));
  padding-block-end: clamp(3.5rem, 8vw, 6rem);
  background-color: var(--c-navy);
  isolation: isolate;
}

/* ---------------------------------------------------------------------------
   Background decoration (own clip layer — never an ancestor of content)
   --------------------------------------------------------------------------- */
.hero__decor {
  background:
    radial-gradient(ellipse 60% 55% at 85% 20%, rgba(0, 169, 182, 0.20), transparent 70%),
    radial-gradient(ellipse 70% 60% at 0% 100%, rgba(1, 62, 106, 0.85), transparent 70%),
    linear-gradient(180deg, #02113A 0%, #031848 100%);
}

/* Mirror the glow composition in RTL so light still falls behind the visual */
[dir="rtl"] .hero__decor {
  scale: -1 1;
}

/* Large, faint orbit rings — a calm "connection" motif (no grids) */
.hero__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.hero__ring--lg {
  inline-size: 72rem;
  block-size: 72rem;
  inset-block-start: -18rem;
  inset-inline-end: -30rem;
}

.hero__ring--md {
  inline-size: 46rem;
  block-size: 46rem;
  inset-block-start: -5rem;
  inset-inline-end: -17rem;
  border-color: rgba(0, 169, 182, 0.10);
}

/* Soft fade into the light section that follows */
.hero__fade {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 6rem;
  background: linear-gradient(180deg, transparent, rgba(2, 17, 58, 0.6));
}

/* ---------------------------------------------------------------------------
   Layout
   --------------------------------------------------------------------------- */
.hero__grid {
  display: grid;
  gap: clamp(3rem, 7vw, 4.5rem);
  align-items: center;
}

@media (min-width: 48rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);   /* equal room for the form card */
    gap: clamp(2rem, 4vw, 4.5rem);
  }
}

/* ---------------------------------------------------------------------------
   Copy
   --------------------------------------------------------------------------- */
.hero__content {
  display: grid;
  gap: var(--space-lg);
  justify-items: center;
  text-align: center;
}

@media (min-width: 48rem) {
  .hero__content {
    justify-items: start;
    text-align: start;
  }
}

.hero__title {
  max-inline-size: 18ch;
  color: var(--c-on-dark);
}

/* Word-mask spans created by hero.js for the rising headline reveal */
.hero__word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* Room for descenders inside the mask, cancelled out by the negative margin */
  padding-block-end: 0.12em;
  margin-block-end: -0.12em;
}

.hero__word-inner {
  display: inline-block;
  will-change: transform;
}

.hero__sub {
  max-inline-size: 36rem;
  color: var(--c-on-dark-body);
}

.hero__actions {
  margin-block-start: var(--space-xs);
  inline-size: 100%;
}

@media (min-width: 30rem) {
  .hero__actions {
    inline-size: auto;
  }
}

@media (min-width: 48rem) {
  .hero__actions {
    justify-content: flex-start;
  }
}

/* ---------------------------------------------------------------------------
   Visual composition
   --------------------------------------------------------------------------- */
.hero__visual {
  position: relative;
  inline-size: min(100%, 34rem);
  margin-inline: auto;
  padding-block-start: 3rem;           /* room for the bridge on the card's edge */
  padding-inline-end: 1.5rem;          /* lets the gradient panel peek out */
  scroll-margin-block-start: calc(var(--header-h) + 1rem);
}

@media (min-width: 48rem) {
  .hero__visual {
    margin-inline: auto 0;
  }
}

/* The form card (components/lead-form.css) sits above the panel */
.hero__visual .lead {
  position: relative;
  z-index: 1;
}

/* The country popup may extend past the hero; keep the hero above the
   next section so the list is never covered */
.hero {
  z-index: 2;
}

/* Transmission gradient panel — a backdrop peeking out behind the form
   card's inline-end top corner (the card sits above it) */
.hero__panel {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: 0;
  inline-size: 72%;
  block-size: 62%;
  border-radius: var(--r-panel);
  background: var(--g-transmission);
  box-shadow: var(--shadow-lg);
}

/* Pixel-F cluster dispersing from the panel's outer corner */
.hero__pixels {
  position: absolute;
  inset-block-start: -0.5rem;
  inset-inline-end: -0.75rem;
  inline-size: clamp(6rem, 12vw, 8.5rem);
  block-size: auto;
  z-index: 2;
}

[dir="rtl"] .hero__pixels {
  scale: -1 1;
}

/* ---------------------------------------------------------------------------
   Pre-animation states (only while JS motion is active — see layout.css)
   --------------------------------------------------------------------------- */
.js-motion .hero__title {
  visibility: hidden; /* revealed by hero.js after the words are split */
}

.js-motion .hero [data-hero-anim] {
  opacity: 0;
}