/* =========================================================================
   GEO SOLUTIONS — HOMEPAGE HERO EARTH v4.0
   Generated: May 2026

   Full-screen Earth background in hero with parallax scroll effect.
   Hero is exactly 100vh. No sticky pin. No empty space below.
   Earth image translates up at 0.4x scroll rate, fades slightly.
   ========================================================================= */

/* =========================================================================
   1. WRAPPER — passes through, doesn't constrain hero
   ========================================================================= */

.hero-pin-wrapper {
  position: relative;
  width: 100%;
  /* Wraps the hero — no own height, hero defines it */
}

/* =========================================================================
   2. ENSURE HERO IS TRANSPARENT — so Earth shows through
   ========================================================================= */

.hero-pin-wrapper .hero-altrum {
  background-color: transparent;
  position: relative;
}

/* Override original warm-red gradient on homepage */
.hero-pin-wrapper .hero-altrum__bg {
  display: none;
}

/* =========================================================================
   3. EARTH IMAGE BACKGROUND — full bleed
   ========================================================================= */

.hero-image-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  background-color: #000;
  pointer-events: none;
  /* Parallax — JS sets translateY inline */
  will-change: transform;
}

.hero-image-bg picture,
.hero-image-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Position 60% from top — shows Earth dome lower in frame, more sky above */
  object-position: center 60%;
}

/* Dark overlay layers for text readability */
.hero-image-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Top fade (under nav) */
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.15) 30%,
      rgba(0, 0, 0, 0.20) 65%,
      rgba(0, 0, 0, 0.85) 100%
    ),
    /* Left fade (text readability) */
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.45) 0%,
      transparent 35%,
      transparent 65%,
      rgba(0, 0, 0, 0.20) 100%
    );
  pointer-events: none;
}

/* =========================================================================
   4. ROTATING SUBHEAD (4 phrases on auto-timer)
   ========================================================================= */

.hero-rotator {
  display: block;
  position: relative;
  min-height: 1.5em;
  width: 100%;
}

.hero-rotator__phrase {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  white-space: normal;
  opacity: 0;
  transform: translateY(15px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

.hero-rotator__phrase--active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* =========================================================================
   5. KILL OLD STRIPES + SLOT — no longer rendered
   ========================================================================= */

.hero-image-slot,
.hero-stripes {
  display: none;
}

/* =========================================================================
   6. ACCESSIBILITY
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .hero-rotator__phrase {
    transition: none;
  }
  .hero-image-bg {
    transform: none !important;
  }
}

/* =========================================================================
   END OF home-hero-scroll.css v4.0
   ========================================================================= */

/* =========================================================================
   7. EARTH DOME BACKGROUND — Edition 03 "30–50%" block
   main2BIG (Earth from below, sun rising from underneath)
   ========================================================================= */

.section--earth-bottom {
  position: relative;
  overflow: hidden;
  /* Section already has padding from .section base */
}

.earth-bottom-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  will-change: transform;
}

.earth-bottom-bg picture,
.earth-bottom-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Position 80% — shows Earth dome lower in frame, content sits above */
  object-position: center 80%;
  opacity: 0.55;
  /* Image is initially semi-transparent; parallax + dark overlay finish the effect */
}

.earth-bottom-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Vertical fade — strong on top + bottom, transparent middle (where Earth dome shows) */
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(0, 0, 0, 0.40) 25%,
      rgba(0, 0, 0, 0.20) 55%,
      rgba(0, 0, 0, 0.55) 90%,
      rgba(0, 0, 0, 0.95) 100%
    );
  pointer-events: none;
}

/* Make sure content sits above bg */
.section--earth-bottom > .container {
  position: relative;
  z-index: 1;
}

/* =========================================================================
   8. THREE LAYERS DECORATIVE ELEMENTS
   Two 3D shapes positioned absolutely with parallax on scroll.
   - Flower (el_4) sits TOP-RIGHT, partially over content
   - Asterisk (el_3) sits BOTTOM-LEFT, partially over the cards
   Uses mix-blend-mode: screen to make pure-black PNG bg transparent
   while preserving 3D shading of the actual object.
   ========================================================================= */

.section--three-layers-decor {
  position: relative;
  overflow: visible;
  /* Visible — decor elements are allowed to bleed slightly outside */
}

.decor-element {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  /* Above the cards (which are z-index 1-2) */
  will-change: transform;
}

.decor-element picture,
.decor-element img {
  display: block;
  width: 100%;
  height: auto;
}

/* Flower still has black background — use blend mode to make it transparent */
.decor-element--top-right img,
.decor-element--top-right picture {
  mix-blend-mode: screen;
}

/* Asterisk has true alpha transparency (flood-fill processed) — no blend mode needed */

/* Top-right: flower — like in reference image 2 (top right corner of section) */
.decor-element--top-right {
  top: 0;
  right: 0;
  width: 28%;
  max-width: 360px;
  min-width: 200px;
}

/* Bottom-left: asterisk — sits below cards, partially below section bottom */
.decor-element--bottom-left {
  bottom: -165px;
  left: -40px;
  width: 22%;
  max-width: 280px;
  min-width: 180px;
}

/* Mobile — smaller, partially hidden */
@media (max-width: 991px) {
  .decor-element--top-right {
    width: 32%;
    top: 10px;
    right: 0;
  }
  .decor-element--bottom-left {
    width: 28%;
    bottom: -110px;
    left: -30px;
  }
}

@media (max-width: 599px) {
  .decor-element {
    opacity: 0.7;
  }
  .decor-element--top-right {
    width: 38%;
    top: 20px;
    right: -20px;
  }
  .decor-element--bottom-left {
    width: 35%;
    bottom: -75px;
    left: -40px;
  }
}

/* Reduced motion: no parallax, just static positioning */
@media (prefers-reduced-motion: reduce) {
  .decor-element {
    transform: none !important;
  }
}

/* =========================================================================
   9. ENGINEERING PROCESS — RING DECORATIVE OBJECT (parallax, right side)
   ========================================================================= */

.section--engineering-process {
  position: relative;
  overflow: hidden;
  /* overflow:hidden prevents horizontal scroll from positioned decor on mobile */
}

.section--engineering-process .container {
  position: relative;
  z-index: 2;
  /* Content always above the ring */
}

/* Ring wrapper — positioned absolute on the right side of section */
.decor-ring-wrapper {
  position: absolute;
  top: 80px;
  right: -60px;
  width: 42%;
  max-width: 620px;
  min-width: 340px;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

.decor-ring-wrapper picture,
.decor-ring-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  /* No blend mode — page bg is already black, so PNG black bg disappears naturally.
     Drop-shadows give the ring depth and premium float feel. */
  filter:
    drop-shadow(0 40px 80px rgba(0, 0, 0, 0.5))
    drop-shadow(0 15px 30px rgba(0, 0, 0, 0.3));
}

/* Tablet: smaller, less intrusive */
@media (max-width: 991px) {
  .decor-ring-wrapper {
    width: 45%;
    max-width: 420px;
    top: 40px;
    right: -100px;
    opacity: 0.7;
  }
}

/* Mobile: hide entirely to keep content readable + avoid horizontal overflow */
@media (max-width: 599px) {
  .decor-ring-wrapper {
    display: none;
  }
}

/* Reduced motion: stop parallax (JS already respects this), and lower opacity
   so the static object isn't visually overwhelming */
@media (prefers-reduced-motion: reduce) {
  .decor-ring-wrapper {
    transform: none !important;
  }
}

/* =========================================================================
   10. FINAL CTA — FULL-BLEED EARTH BANNER WITH HUD OVERLAY
   Section uses GEO_foot_s as cinematic background, with mockup-style
   HUD decorations at 4 corners + centered content.
   ========================================================================= */

.section--final-cta-banner {
  position: relative;
  overflow: hidden;
  /* Full-bleed: ignore container constraints, fill the entire viewport width */
  width: 100%;
  min-height: 100vh;
  /* Override the standard section vertical padding — we want the image to bleed full edge-to-edge */
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Background image layer */
.final-cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.final-cta-bg picture,
.final-cta-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
}

/* Subtle dark vignette for text readability + STRONG top/bottom fade for seamless edge blending.
   Uses pure black (rgba(7,7,7)) matching --color-bg-base — same approach as .about-cta-banner. */
.final-cta-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Top fade — heavy fade to page bg for first 30% so banner edge dissolves */
    linear-gradient(to bottom,
      rgba(7, 7, 7, 1.0) 0%,
      rgba(7, 7, 7, 0.95) 8%,
      rgba(7, 7, 7, 0.7) 18%,
      rgba(7, 7, 7, 0.3) 28%,
      rgba(7, 7, 7, 0.0) 40%
    ),
    /* Bottom fade — image dissolves into footer */
    linear-gradient(to top,
      rgba(7, 7, 7, 1.0) 0%,
      rgba(7, 7, 7, 0.85) 5%,
      rgba(7, 7, 7, 0.4) 15%,
      rgba(7, 7, 7, 0.0) 30%
    ),
    /* Center vignette for text contrast */
    radial-gradient(ellipse 70% 60% at 50% 55%,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0.15) 50%,
      rgba(0, 0, 0, 0.0) 80%
    );
  pointer-events: none;
}

/* Content always above bg */
.section--final-cta-banner .container {
  position: relative;
  z-index: 2;
  padding: 180px var(--section-pad-x) 180px;
}

.section--final-cta-banner .final-cta {
  text-align: center;
}

/* ===== HUD CORNER OVERLAYS ===== */

.final-cta-hud {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* TOP LEFT: GEO Solutions brand block + stats list */
.final-cta-hud--top-left {
  top: var(--space-8);
  left: var(--space-8);
  max-width: 280px;
}

.hud-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.hud-brand__arrow {
  color: var(--color-accent);
  font-size: 12px;
}

.hud-brand__name {
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  font-size: 13px;
}

.hud-brand__tagline {
  margin: 0 0 var(--space-6);
  color: var(--color-text-tertiary);
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
}

.hud-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hud-stats li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.hud-stats__label {
  color: var(--color-text-tertiary);
  font-size: 10px;
}

.hud-stats li::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(130,255,140,0.35), transparent);
  max-width: 60px;
}

/* TOP RIGHT: Node network status widget */
.final-cta-hud--top-right {
  top: var(--space-8);
  right: var(--space-8);
  max-width: 240px;
}

.hud-status__head {
  margin-bottom: var(--space-2);
}

.hud-status__title {
  color: var(--color-text-tertiary);
  font-size: 10px;
}

.hud-status__title strong {
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
}

.hud-status__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hud-status__row {
  color: var(--color-text-tertiary);
  font-size: 10px;
}

.hud-status__row strong {
  color: var(--color-accent);
  font-weight: var(--weight-medium);
}

/* BOTTOM LEFT: Architecture layer label */
.final-cta-hud--bottom-left {
  bottom: var(--space-8);
  left: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hud-corner__label {
  color: var(--color-text-tertiary);
  font-size: 10px;
}

.hud-corner__sub {
  color: var(--color-accent);
  font-size: 10px;
  font-weight: var(--weight-medium);
}

/* BOTTOM RIGHT: "Engineered to compound." label */
.final-cta-hud--bottom-right {
  bottom: var(--space-8);
  right: var(--space-8);
  text-align: right;
}

.final-cta-hud--bottom-right .hud-corner__label {
  color: var(--color-text-tertiary);
  font-size: 10px;
}

/* Tablet */
@media (max-width: 991px) {
  .section--final-cta-banner .container {
    padding: 120px var(--section-pad-x) 120px;
  }
  .final-cta-hud {
    font-size: 9px;
  }
  .final-cta-hud--top-left { max-width: 200px; }
  .final-cta-hud--top-right { max-width: 180px; }
  .hud-brand__name { font-size: 11px; }
}

/* Mobile: hide HUD corners, show only the central content + bg */
@media (max-width: 599px) {
  .final-cta-hud { display: none; }
  .section--final-cta-banner .container {
    padding: 100px var(--section-pad-x) 100px;
  }
  .section--final-cta-banner {
    min-height: auto;
  }
}