/* ============================================================
   HERO BRAND MARK
   The home hero no longer carries a founder photograph — it
   carries the VALUE symbol, traced from the official artwork
   into eight independent blades so each can be choreographed
   against scroll. Motion lives in js/hero-mark.js; this file
   only owns layout, colour and the rest state.
   ============================================================ */

.hero-premium--mark {
  background:
    radial-gradient(120% 90% at 78% 34%, rgba(0, 50, 255, 0.30), transparent 62%),
    radial-gradient(90% 70% at 12% 8%, rgba(10, 27, 61, 0.55), transparent 70%),
    var(--bg-deep);
}

/* The mark sits in the same layer the photograph used to occupy. */
.hero-mark {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: paint;
}

/* Soft brand-blue bloom that anchors the symbol to the background. */
.hero-mark-aura {
  position: absolute;
  top: 50%;
  right: 4vw;
  width: min(64vw, 900px);
  aspect-ratio: 1;
  transform: translate3d(0, -50%, 0);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(90, 157, 189, 0.30), transparent 58%),
    radial-gradient(circle at 44% 42%, rgba(0, 50, 255, 0.34), transparent 66%);
  filter: blur(28px);
  opacity: 0.9;
  will-change: transform, opacity;
}

.hero-mark-stage {
  position: absolute;
  top: 50%;
  right: 7vw;
  width: min(44vw, 560px);
  aspect-ratio: 1;
  transform: translate3d(0, -50%, 0);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.vmark {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 26px 60px rgba(3, 10, 28, 0.55));
}

.vmark-blade {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

/* Before the script arms the mark, hold the rest state so a JS
   failure still leaves a correct, fully visible symbol. */
.hero-mark[data-hero-mark] .vmark-blade {
  opacity: 1;
}

/* Reading protection: the copy column keeps priority over the art. */
.hero-premium--mark .hero-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 16, 36, 0.94) 0%, rgba(6, 16, 36, 0.72) 34%, rgba(6, 16, 36, 0.10) 62%, transparent 82%),
    linear-gradient(180deg, transparent 52%, rgba(5, 14, 32, 0.72) 100%);
}

.hero-premium--mark .hero-content,
.hero-premium--mark .hero-layout {
  position: relative;
  z-index: 2;
}

/* The small V signature above the eyebrow (final-polish.css) was standing in
   for a brand presence the hero did not have. It does now — two marks in one
   viewport read as a mistake. */
.hero-premium--mark .hero-content::before {
  display: none;
}

/* ============================================================
   TABLET
   ============================================================ */
@media (max-width: 1024px) {
  .hero-mark-stage {
    right: 3vw;
    width: min(52vw, 460px);
  }

  .hero-mark-aura {
    right: 0;
    width: min(78vw, 620px);
  }
}

/* ============================================================
   MOBILE — the copy is bottom-aligned, so the symbol owns the
   upper half at full strength instead of becoming a watermark.
   ============================================================ */
@media (max-width: 768px) {
  .hero-premium--mark {
    background:
      radial-gradient(110% 52% at 50% 22%, rgba(0, 50, 255, 0.34), transparent 68%),
      var(--bg-deep);
  }

  .hero-mark-stage {
    top: 27%;
    right: auto;
    left: 50%;
    width: min(66vw, 330px);
    transform: translate3d(-50%, -50%, 0);
  }

  .hero-mark-aura {
    top: 27%;
    right: auto;
    left: 50%;
    width: min(104vw, 520px);
    transform: translate3d(-50%, -50%, 0);
    filter: blur(34px);
    opacity: 0.78;
  }

  .vmark {
    filter: drop-shadow(0 16px 38px rgba(3, 10, 28, 0.5));
  }

  /* Vertical scrim on phones: text sits under the mark, not beside it. */
  .hero-premium--mark .hero-mark::after {
    background:
      linear-gradient(180deg, rgba(5, 14, 32, 0.18) 0%, transparent 26%, rgba(5, 14, 32, 0.66) 58%, rgba(5, 14, 32, 0.96) 78%);
  }
}

@media (max-width: 380px) {
  .hero-mark-stage {
    top: 25%;
    width: 62vw;
  }
}

/* ============================================================
   REDUCED MOTION — a still, correctly composed mark.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-mark-stage,
  .hero-mark-aura,
  .vmark-blade {
    transform: none !important;
    will-change: auto;
  }

  .hero-mark-stage {
    transform: translate3d(0, -50%, 0) !important;
  }

  .vmark-blade {
    opacity: 1 !important;
  }

  @media (max-width: 768px) {
    .hero-mark-stage {
      transform: translate3d(-50%, -50%, 0) !important;
    }
  }
}