/* css/style.css
   Unified futuristic high-tech layout for AIM
   Colors: black / red / silver
*/

/* Variables */
:root{
  --bg: #0b0b0b;
  --panel: rgba(20,20,20,0.95);
  --accent: #ff1a1a;
  --silver: #c9c9c9;
  --muted: #bfbfbf;
  --glass: rgba(255,255,255,0.03);
  --max-width: 1280px;
  --ease: cubic-bezier(.2,.9,.2,1);
  --shadow-strong: 0 14px 40px rgba(0,0,0,0.7);
}

/* Reset */
* { box-sizing: border-box; }
html,body { height: 100%; margin: 0; font-family: "Roboto", "Segoe UI", Arial, sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; background:var(--bg); color:var(--muted); }

/* Page container narrow center used by content blocks; sections are full width */
.container { width: min(94%, var(--max-width)); margin: 0 auto; position: relative; z-index: 4; }

/* HUD background grid + soft moving overlays kept subtle */
.hud-grid {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(0deg, rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px;
  opacity: 0.45;
  mix-blend-mode: overlay;
}
.hud-scan {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 10% 15%, rgba(255,26,26,0.015), transparent 8%),
              radial-gradient(circle at 85% 70%, rgba(255,26,26,0.01), transparent 12%);
  animation: scan 18s linear infinite;
}
@keyframes scan { 0%{transform:translateY(0)} 50%{transform:translateY(-6px)} 100%{transform:translateY(0)} }

/* Header (fixed, minimal) */
.header {
  position: sticky; top: 0; z-index: 20; background: rgba(6,6,6,0.6);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
/* .logo-plate { background: linear-gradient(180deg,#e9e9e9,#bfbfbf); padding:6px; border-radius:3px; display:inline-block; border:1px solid rgba(0,0,0,0.25); }
.logo-plate img { height:44px; display:block; } */
.nav { display:flex; gap:12px; align-items:center; }
.nav a { color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:4px; font-weight:700; transition: all .14s var(--ease); }
.nav a:hover, .nav a.active { color:#fff; outline: 1px solid var(--silver); box-shadow: 0 6px 20px rgba(255,26,26,0.06); }

/* HERO - full viewport-ish */
.hero {
  min-height: 84vh; width: 100%; position: relative; display:flex; align-items:center; z-index:5;
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.65));
  overflow: hidden;
}
.hero .bg {
  position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(.45);
  z-index:1;
}
.hero .inner { position: relative; z-index: 6; width: min(96%, var(--max-width)); margin: 0 auto; display:grid; grid-template-columns: 1fr 420px; gap:24px; align-items:center; padding: 36px 0; }
.hero h1 { font-family: 'Orbitron', sans-serif; color: var(--accent); font-size: 54px; margin: 0 0 8px; letter-spacing: 1px; }
.hero p.lead { color: #e6e6e6; font-size: 16px; margin: 0 0 12px; }
.hero .cta { display:flex; gap:12px; }
.btn { padding:10px 14px; background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--silver); font-weight:700; border-radius:4px; cursor:pointer; transition: all .14s var(--ease); }
.btn.primary { background: linear-gradient(90deg,var(--accent), #ff6767); color:#fff; border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 8px 28px rgba(255,26,26,0.06); }
.btn:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.55); }

/* right column hero cards */
.hero-cards { display:flex; flex-direction:column; gap:14px; }
.card-compact { background: var(--panel); border: 1px solid rgba(255,255,255,0.03); padding:14px; box-shadow: 0 10px 0 rgba(0,0,0,0.55); }
.card-compact h4 { color: var(--silver); margin: 0 0 6px; }

/* SECTION patterns:
   - full-width .section elements with internal .container/panel blocks
   - each section variant: .silver, .accent (red), .dark, .image
*/
.section { width:100%; padding: 56px 0; position:relative; z-index:4; }
.section .panel { width: min(96%, var(--max-width)); margin: 0 auto; }
.section.silver { background: linear-gradient(180deg,#f3f3f3,#e7e7e7); color: #0b0b0b; }
.section.silver .panel { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.01)); padding:28px; border:1px solid rgba(0,0,0,0.06); }
.section.accent { background: linear-gradient(180deg, rgba(26,0,0,0.04), rgba(0,0,0,0.02)); }
.section.accent .panel { padding:28px; border-left:6px solid var(--accent); background:var(--panel); }
.section.dark { background: var(--bg); }
.section.image { min-height: 420px; background-size:cover; background-position:center; }
.section.image::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.6)); pointer-events:none; }
/* Strong red section background */
.section.red {
  background: linear-gradient(180deg, #b30000, #800000); /* deep metallic reds */
  color: #fff;
}

.section.red .panel {
  background: rgba(0,0,0,0.35); /* transparent dark overlay to make text/images pop */
  padding: 28px;
  border: 1px solid rgba(255,255,255,0.08);
}

.section.red h3,
.section.red p {
  color: #f5f5f5;
}

/* flexible grids */
.grid-2 { display:grid; grid-template-columns: 1fr 420px; gap:20px; align-items:start; }
.grid-3 { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }

/* features / small cards */
.feature { background: rgba(10,10,10,0.9); border: 1px solid rgba(255,255,255,0.03); padding:16px; border-radius:6px; box-shadow: 0 10px 0 rgba(0,0,0,0.55); transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-strong); }
.feature h5 { color: var(--accent); margin: 0 0 8px; }

/* capability bars */
.stat { display:flex; align-items:center; gap:14px; }
.stat .label { width:34%; color:#d6d6d6; }
.stat .bar { flex:1; height:12px; background:#111; border-radius:8px; overflow:hidden; border:1px solid rgba(255,255,255,0.03); }
.stat .fill { height:100%; background: linear-gradient(90deg,var(--accent), #ff6b6b); transition: width .8s var(--ease); }

/* Map block */
.map-full { width:100%; height:540px; background:#070707; border:1px solid rgba(255,255,255,0.03); position:relative; overflow:hidden; }
.world-map { width:100%; height:100%; display:block; }
.asset-dot { fill:var(--accent); filter: drop-shadow(0 0 8px rgba(255,26,26,0.45)); cursor:pointer; transition: transform .12s var(--ease); }
.ring { fill:none; stroke: rgba(255,26,26,0.12); stroke-width: 1.6; animation: spin 6s linear infinite; transform-origin:center; }
@keyframes spin { from { transform: rotate(0deg)} to { transform: rotate(360deg)} }

/* map tooltip */
.map-tooltip { position: fixed; pointer-events:none; background:#070707; color:var(--silver); padding:10px 12px; border:1px solid var(--silver); border-left:6px solid var(--accent); border-radius:4px; z-index:9999; display:none; box-shadow:0 20px 36px rgba(0,0,0,0.7); }

/* Footer */
.footer { padding:28px 0; text-align:center; color:#9e9e9e; font-size:13px; }

/* small screens */
@media (max-width: 1024px) {
  .hero .inner { grid-template-columns: 1fr; text-align:center; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 540px) {
  .nav { display:none; }
  .logo-plate img { height:36px; }
  .hero h1 { font-size:36px; }
  .feature { padding:12px; }
}

/* additive https://codepen.io/ElJefe/pen/aprLdG*/

/* Original logo-plate styles */
.logo-plate {
  background: linear-gradient(180deg,#e9e9e9,#bfbfbf);
  padding: 6px;
  border-radius: 3px;
  display: inline-block;
  border: 1px solid rgba(0,0,0,0.25);
  position: relative;  /* Needed for the shine animation */
  overflow: hidden;    /* Clip the shine */
}

/* Logo inside the plate */
.logo-plate img {
  height: 44px;
  display: block;
  position: relative; /* Keep above the shine */
  z-index: 2;
}

/* Shine animation keyframes */
@keyframes shine { 
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(30deg);
  }
  80% {
    transform: translateX(-100%) translateY(-100%) rotate(30deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(30deg);
  }
}

/* Silver gradient and shine effect */
.logo-plate.silver {
  background: linear-gradient(to bottom, #bcc6cc, #eee, #bcc6cc);
}

.logo-plate.silver::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 300%;
  height: 300%;
  z-index: 1; /* below the logo image */
  transform: translateX(100%) rotate(30deg);
  animation: shine 3s infinite ease-in;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(128, 186, 232, 0) 99%,
    rgba(128, 186, 232, 0) 100%
  );
}

/* ===================== */
/* REDTECH SECTION STYLE */
/* ===================== */
.section.redtech {
  position: relative;
  background: linear-gradient(180deg, #b30000, #660000);
  color: #fff;
  overflow: hidden;
}

.section.redtech .panel {
  background: rgba(0,0,0,0.45);
  padding: 28px;
  border: 1px solid rgba(255,255,255,0.08);
  position: relative;
  z-index: 2;
}

/* Ensure text pops */
.section.redtech h3,
.section.redtech p {
  color: #f5f5f5;
}

/* Stronger animated scanlines */
.section.redtech::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.08) 0px,
    rgba(255, 255, 255, 0.08) 2px,
    transparent 4px,
    transparent 6px
  );
  animation: redtech-scan 4s linear infinite;
  z-index: 1;
  mix-blend-mode: overlay;
  opacity: 0.35;
}

@keyframes redtech-scan {
  0% { transform: translateY(0); }
  100% { transform: translateY(-40px); }
}

/* Stronger pulsing glow */
.section.redtech::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 70, 70, 0.25), transparent 70%);
  animation: redtech-glow 3s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes redtech-glow {
  0% { opacity: 0.2; transform: scale(1); }
  100% { opacity: 0.6; transform: scale(1.2); }
}

/* Map control css */

.map-container {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.world-map {
  display: block;
  width: 100%;
  height: auto;
  z-index: 1; /* base map behind overlay */
  position: relative; /* z-index only works on positioned elements */
}

.map-points {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;      /* overlay on top of map */
  pointer-events: auto; /* allow interactivity */
}