/* Shared cinematic Project Frontier hero lockup.
 *
 * This is the single visual source used by the Home hero and any surface
 * that explicitly asks for the same full-scale mark. Containers may scale
 * the complete lockup uniformly, but must not restyle its internal pieces.
 */

/* --- The wordmark --------------------------------------------------------- */
/*
 * Built as a logo rather than a heading: a fixed-width centred block, two lines
 * set tight enough to read as one mark, an instrument glyph behind, and a lit
 * J. The pieces share one grid cell rather than being stacked, so the glow can
 * pass behind the letters instead of washing over them.
 */

.hero-logo {
  position: relative;
  z-index: 1;
  display: block;
  width: min(540px, 100%);
  /* Centred inside the hero column rather than flush left: the mark is a
     composition, and its two lines are set to the same optical width. */
  margin: 0 auto;
  padding: 0;
  font-family: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  font-size: clamp(68px, 5.7vw, 108px);
  font-weight: 500;
  line-height: .82;
  letter-spacing: .045em;
  text-transform: uppercase;
}

/* The pool the mark sits in. Wider than tall and faded well before its edge --
   anything more defined here reads as a badge behind the logo. */
.hero-logo::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  height: 210%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle at center,
    rgba(0, 100, 180, .09) 0%,
    rgba(0, 40, 80, .04) 32%,
    transparent 68%
  );
  pointer-events: none;
}

/* --- Instrument glyph ----------------------------------------------------- */
/* Concentric hairlines behind PROJECT, masked so the lower half dissolves into
   the artwork and only the upper arcs really register. */

.hero-logo-glyph {
  position: absolute;
  left: 50%;
  top: 29%;
  width: clamp(240px, 23vw, 330px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .82) 38%, rgba(0, 0, 0, .22) 62%, transparent 82%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .82) 38%, rgba(0, 0, 0, .22) 62%, transparent 82%);
}

.glyph-ring {
  position: absolute;
  border-radius: 50%;
}

/* Outer hairline plus the tick band just inside it. */
.glyph-ring-1 {
  inset: 0;
  border: 1px solid rgba(0, 177, 255, .18);
}

.glyph-ring-1::after {
  content: "";
  position: absolute;
  inset: 3%;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(0, 207, 255, .28) 0deg .45deg,
    transparent .45deg 7.5deg
  );
  -webkit-mask-image: radial-gradient(closest-side, transparent 88%, #000 90% 97%, transparent 99%);
  mask-image: radial-gradient(closest-side, transparent 88%, #000 90% 97%, transparent 99%);
}

/* Middle ring, carrying two triangular markers. */
.glyph-ring-2 {
  inset: 13%;
  border: 1px solid rgba(0, 207, 255, .16);
}

.glyph-ring-2::before,
.glyph-ring-2::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-bottom-color: rgba(0, 207, 255, .3);
  transform-origin: 50% calc(50% + 5px);
}

.glyph-ring-2::before { transform: translateX(-50%) rotate(-38deg); }
.glyph-ring-2::after { transform: translateX(-50%) rotate(38deg); }

/* Inner ring, plus the scatter of small dots. */
.glyph-ring-3 {
  inset: 27%;
  border: 1px solid rgba(55, 170, 255, .12);
}

.glyph-ring-3::before {
  content: "";
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 207, 255, .5) 0 1.6px, transparent 2px),
    radial-gradient(circle at 8% 26%, rgba(0, 177, 255, .34) 0 1.3px, transparent 1.8px),
    radial-gradient(circle at 92% 26%, rgba(0, 177, 255, .34) 0 1.3px, transparent 1.8px),
    radial-gradient(circle at 22% 70%, rgba(55, 170, 255, .2) 0 1.2px, transparent 1.7px);
}

/* The point of light where the beam meets the glyph. */
.glyph-node {
  position: absolute;
  top: 7%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #eaf9ff;
  box-shadow: 0 0 5px #ffffff, 0 0 12px #38c9ff, 0 0 22px rgba(0, 145, 255, .75);
  transform: translate(-50%, -50%);
}

/* --- The lettering -------------------------------------------------------- */

.hero-logo-title {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
  text-align: center;
}

/* PROJECT is seven characters against FRONTIER's eight, so at equal size and
   equal tracking it runs about seventy pixels short and the mark reads
   lopsided. Tracking PROJECT out closes most of the gap without stretching the
   letterforms, which is how Trajan-style lockups are normally set. */
.hero-logo-project { letter-spacing: .112em; padding-left: .112em; }
.hero-logo-frontier { font-size: 1.03em; }

.hero-logo-project,
.hero-logo-frontier {
  display: block;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f2f8fc 14%,
    #9dafbc 37%,
    #ffffff 52%,
    #b4c2cd 71%,
    #ffffff 87%,
    #93a1ad 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* Clipped text takes no text-shadow, so the depth is entirely filter work.
     drop-shadow traces the glyph outline where box-shadow cannot. The last two
     layers are a cold halo -- without them the mark sits flat on the artwork
     however bright the fill is. */
  filter:
    drop-shadow(0 2px 1px rgba(255, 255, 255, .2))
    drop-shadow(0 4px 4px rgba(0, 0, 0, .9))
    drop-shadow(0 0 10px rgba(150, 205, 255, .3))
    drop-shadow(0 0 28px rgba(95, 190, 255, .16));
}

/* The J, lit. Its own gradient and its own glow, so the effect stays on one
   letter instead of blooming across the word. */
.hero-logo-j {
  position: relative;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #89e7ff 25%,
    #16baff 55%,
    #ffffff 78%,
    #52cfff 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 4px #ffffff)
    drop-shadow(0 0 9px #31c7ff)
    drop-shadow(0 0 18px rgba(0, 157, 255, .8));
}

/* The beam falling through it from the node above. */
.hero-logo-j::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -.6em;
  z-index: -1;
  width: 2px;
  height: .96em;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    transparent,
    rgba(80, 210, 255, .3),
    rgba(126, 231, 255, .8) 55%,
    rgba(0, 153, 255, .3) 78%,
    transparent
  );
  box-shadow: 0 0 7px rgba(56, 201, 255, .8), 0 0 16px rgba(0, 145, 255, .5);
  pointer-events: none;
}

/* --- Divider -------------------------------------------------------------- */

.hero-rule {
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  width: min(520px, 100%);
  margin: 30px auto 48px;
}

.hero-rule-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 183, 255, .75));
}

.hero-rule-line:last-of-type { transform: scaleX(-1); }

/* Angular segments flanking the diamond, so the ornament reads as HUD rather
   than a horizontal rule with a dot in the middle. */
.hero-rule-tick {
  width: 26px;
  height: 8px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, transparent, rgba(0, 207, 255, .6));
  clip-path: polygon(0 44%, 66% 44%, 100% 0, 100% 26%, 72% 64%, 0 64%);
}

.hero-rule-tick:last-of-type { transform: scaleX(-1); }

/* Three nested diamonds: dark outer, cyan middle, bright core. */
.hero-rule-diamond {
  position: relative;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background: rgba(3, 32, 58, .95);
  box-shadow:
    0 0 6px #4fd7ff,
    0 0 14px #009dff,
    0 0 28px rgba(0, 102, 255, .55);
  transform: rotate(45deg);
}

.hero-rule-diamond::before {
  content: "";
  position: absolute;
  inset: 2px;
  background: rgba(0, 183, 255, .55);
}

.hero-rule-diamond::after {
  content: "";
  position: absolute;
  inset: 5px;
  background: #cdf3ff;
  box-shadow: 0 0 6px #7ee7ff;
}