/* ============================================================
   Drixft FPV — "futuristic" layer: HUD frame, boot sequence,
   glass/neon cards, telemetry ticker, micro-details.
   GPU-friendly (transform/opacity only) + reduced-motion aware.
   ============================================================ */

/* ---- site-wide HUD corner frame ---- */
.fx-hud { position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .55; }
.fx-hud b { position: absolute; width: 20px; height: 20px; border: 2px solid var(--cyan); box-shadow: 0 0 8px rgba(45,226,230,.5); }
.fx-hud .tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.fx-hud .tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.fx-hud .bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.fx-hud .br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

/* ---- glass + neon cards ---- */
.card, .work-card, .blog-card, .flex-col, .contact-side, .lead-card, .founder-card {
  box-shadow: 0 0 0 1px rgba(45,226,230,.10), 0 10px 30px rgba(0,0,0,.35);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card:hover, .work-card:hover, .blog-card:hover, .flex-col:hover {
  box-shadow: 0 0 0 1px rgba(45,226,230,.6), 0 0 28px rgba(45,226,230,.22), 0 20px 46px rgba(0,0,0,.5);
}
.spec-card, .faq-wrap {
  box-shadow: 0 0 0 1px rgba(45,226,230,.12), inset 0 1px 0 rgba(255,255,255,.05), 0 20px 50px rgba(0,0,0,.45);
}
/* thin holographic top edge on key panels */
.spec-card::before, .lead-card::before {
  content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 1px; z-index: 3;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--violet), transparent); opacity: .7;
}

/* ---- telemetry ticker (transform marquee) ---- */
.fx-ticker {
  overflow: hidden; white-space: nowrap; position: relative;
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(90deg, rgba(7,11,22,.7), rgba(12,18,34,.4));
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; color: var(--muted);
  padding: 9px 0;
}
.fx-ticker::before, .fx-ticker::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none;
}
.fx-ticker::before { left: 0; background: linear-gradient(90deg, var(--navy), transparent); }
.fx-ticker::after { right: 0; background: linear-gradient(270deg, var(--navy), transparent); }
.fx-ticker span { display: inline-block; padding-left: 100%; animation: fxTick 30s linear infinite; will-change: transform; }
.fx-ticker b { color: var(--cyan); }
.fx-ticker i { font-style: normal; color: var(--white); }
@keyframes fxTick { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* ---- magnetic primary buttons ---- */
.btn-primary { transition: transform .15s ease, box-shadow .3s ease; }

/* ---- boot sequence ---- */
.fx-boot {
  position: fixed; inset: 0; z-index: 99990;
  background: radial-gradient(circle at 50% 42%, #0a1224, #04060c 75%);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .55s ease;
}
.fx-boot.done { opacity: 0; pointer-events: none; }
.fx-boot-inner { width: min(420px, 82vw); font-family: var(--font-mono); font-size: .8rem; line-height: 2; color: #9fb3d6; }
.fx-boot-inner .ok { color: #7CFFB2; }
.fx-boot-inner .hd { color: var(--cyan); font-size: .95rem; margin-bottom: 6px; letter-spacing: .1em; }
.fx-boot-inner .on { color: var(--white); font-weight: 700; letter-spacing: .18em; margin-top: 12px; }
.fx-boot-bar { height: 3px; background: rgba(45,226,230,.15); border-radius: 3px; margin-top: 14px; overflow: hidden; }
.fx-boot-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--orange)); animation: fxBoot 1.2s ease forwards; }
@keyframes fxBoot { to { width: 100%; } }

/* keep the editor bars clear of the HUD frame + hide boot for admins-in-edit */
body.ed-on .fx-hud { top: 100px; }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .fx-ticker span { animation: none; padding-left: 0; }
  .fx-boot { display: none; }
  .btn-primary { transition: none; }
}