/* HYDRA UNIT — "Getting Started" splash. Tactical HUD: dark olive, brushed-metal, LED accents. */

@font-face{
  font-family:"Montserrat";font-style:normal;font-weight:800;font-display:swap;
  src:url("montserrat-800.woff2") format("woff2");
}

:root{
  --bg-0:#0c0d08;        /* deep olive-black */
  --bg-1:#1c2014;        /* dark olive */
  --steel:#ecebe0;       /* brushed-metal light */
  --steel-dim:#9fa18f;   /* muted label */
  --led-green:#a4d65e;   /* primary LED */
  --led-green-deep:#5f8a2f;
  --led-orange:#ff9f1c;  /* status LED */
  --hairline:rgba(164,214,94,.22);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}

body{
  min-height:100svh;display:flex;align-items:center;justify-content:center;
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;color:var(--steel);
  background:radial-gradient(130% 100% at 50% 14%,var(--bg-1) 0%,var(--bg-0) 72%);
  overflow:hidden;position:relative;-webkit-font-smoothing:antialiased;
}

/* faint tactical grid, faded toward the edges */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    repeating-linear-gradient(0deg,transparent 0 39px,rgba(164,214,94,.05) 39px 40px),
    repeating-linear-gradient(90deg,transparent 0 39px,rgba(164,214,94,.05) 39px 40px);
  -webkit-mask:radial-gradient(circle at 50% 42%,#000 0%,transparent 78%);
  mask:radial-gradient(circle at 50% 42%,#000 0%,transparent 78%);
}
/* vignette */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.55) 100%);
}

/* HUD corner brackets */
.hud{position:fixed;inset:18px;pointer-events:none;z-index:2}
.hud i{position:absolute;width:40px;height:40px;border:2px solid var(--hairline)}
.hud i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.hud i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.hud i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.hud i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}

.stage{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:7vmin 6vw;
}

/* emblem: white vector mark on transparent + LED glow tracing the silhouette */
.logo{
  height:clamp(150px,30vmin,260px);width:auto;
  filter:drop-shadow(0 0 22px rgba(164,214,94,.32));
  animation:rise .9s ease-out both;
}

.title{
  margin-top:clamp(20px,4vmin,38px);
  font-family:"Montserrat","Arial Narrow",Arial,sans-serif;
  font-weight:800;letter-spacing:.06em;line-height:1;
  font-size:clamp(34px,7.6vmin,74px);text-transform:uppercase;color:var(--steel);
  text-shadow:0 2px 0 rgba(0,0,0,.4);
  animation:rise .9s .08s ease-out both;
}

/* LED divider */
.rule{
  width:clamp(120px,26vmin,260px);height:2px;margin:clamp(16px,3vmin,26px) 0;
  background:linear-gradient(90deg,transparent,var(--led-green-deep),var(--led-green),var(--led-green-deep),transparent);
  box-shadow:0 0 12px rgba(164,214,94,.45);
  animation:rise .9s .14s ease-out both;
}

.subtitle{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:"Arial Narrow",Arial,sans-serif;text-transform:uppercase;
  letter-spacing:.42em;padding-left:.42em;          /* offset trailing letter-spacing */
  font-size:clamp(13px,2.4vmin,18px);color:var(--steel-dim);
  animation:rise .9s .2s ease-out both;
}
/* blinking status LED before "coming soon" */
.subtitle::before{
  content:"";width:.62em;height:.62em;border-radius:50%;
  background:var(--led-orange);box-shadow:0 0 10px var(--led-orange);
  animation:blink 1.6s steps(1,end) infinite;
}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes blink{0%,60%{opacity:1}61%,100%{opacity:.18}}

@media (prefers-reduced-motion:reduce){
  .logo,.title,.rule,.subtitle{animation:none}
  .subtitle::before{animation:none}
}