/* ═══════════════════════════════════════════════════════════════════════
   V2 REDESIGN — Islamic Geometric Patterns + Shared Variables
   Prefix: --v2-  (no conflicts with existing --z-*, --cm-*, --ft-*)
   Class prefix: .v2-  (no conflicts with existing classes)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── V2 Design Tokens ── */
:root {
  /* HUD Typography */
  --v2-hud-font: var(--z-font-mono, 'JetBrains Mono', monospace);
  --v2-hud-size: 0.5625rem;
  --v2-hud-weight: 600;
  --v2-hud-spacing: 0.14em;
  --v2-hud-opacity: 0.5;

  /* Islamic Pattern */
  --v2-pattern-opacity: 0.07;
  --v2-pattern-color: var(--z-accent, #f59e0b);
  --v2-pattern-color-alt: var(--z-cyan, #0ea5e9);

  /* Timing */
  --v2-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --v2-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --v2-duration: 0.3s;
  --v2-duration-fast: 0.15s;
  --v2-duration-slow: 0.5s;
  --v2-stagger: 0.08s;

  /* Scan / Glow */
  --v2-scan-speed: 8s;
  --v2-glow-spread: 20px;
  --v2-glow-color: var(--z-accent-glow, rgba(245, 158, 11, 0.15));

  /* Sector colors */
  --v2-sector-green: var(--z-success, #10b981);
  --v2-sector-cyan: var(--z-cyan, #0ea5e9);
  --v2-sector-amber: var(--z-accent, #f59e0b);
  --v2-sector-purple: var(--z-purple, #7c3aed);
  --v2-sector-red: var(--z-danger, #ef4444);
}

/* ═══════════════════════════════════════
   ISLAMIC GEOMETRIC PATTERNS (SVG inline)
   ═══════════════════════════════════════ */

/* 8-pointed star pattern — used as section background overlay */
.v2-islamic-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--v2-pattern-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 0L48.28 16.18L65.88 8.24L60 26.18L78.04 31.72L62.36 43.6L71.76 60L53.82 56.18L48.28 73.82L40 58.64L31.72 73.82L26.18 56.18L8.24 60L17.64 43.6L1.96 31.72L20 26.18L14.12 8.24L31.72 16.18Z' fill='none' stroke='%23f59e0b' stroke-width='0.5' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 80px 80px;
  z-index: 0;
}

/* Simpler interlocking squares pattern — lighter visual weight */
.v2-islamic-squares {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: calc(var(--v2-pattern-opacity) * 0.7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Crect x='10' y='10' width='40' height='40' fill='none' stroke='%23f59e0b' stroke-width='0.4' transform='rotate(45 30 30)' opacity='0.4'/%3E%3Crect x='15' y='15' width='30' height='30' fill='none' stroke='%23f59e0b' stroke-width='0.3' opacity='0.3'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  z-index: 0;
}

/* ── Islamic Border Pattern (horizontal strip) ── */
.v2-islamic-border {
  position: relative;
  width: 100%;
  height: 6px;
  overflow: hidden;
  opacity: 0.12;
}

.v2-islamic-border::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6' viewBox='0 0 24 6'%3E%3Cpath d='M0 3L3 0L6 3L3 6ZM6 3L9 0L12 3L9 6ZM12 3L15 0L18 3L15 6ZM18 3L21 0L24 3L21 6Z' fill='%23f59e0b' opacity='0.6'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 24px 6px;
}

/* ── Islamic Corner Bracket (decorative L-corner) ── */
.v2-corner-tl,
.v2-corner-tr,
.v2-corner-bl,
.v2-corner-br {
  position: absolute;
  width: 32px;
  height: 32px;
  pointer-events: none;
  opacity: 0.15;
  z-index: 1;
}

.v2-corner-tl { top: 12px; left: 12px; border-top: 1px solid var(--v2-sector-amber); border-left: 1px solid var(--v2-sector-amber); }
.v2-corner-tr { top: 12px; right: 12px; border-top: 1px solid var(--v2-sector-amber); border-right: 1px solid var(--v2-sector-amber); }
.v2-corner-bl { bottom: 12px; left: 12px; border-bottom: 1px solid var(--v2-sector-amber); border-left: 1px solid var(--v2-sector-amber); }
.v2-corner-br { bottom: 12px; right: 12px; border-bottom: 1px solid var(--v2-sector-amber); border-right: 1px solid var(--v2-sector-amber); }

/* Small diamond at corner intersection */
.v2-corner-tl::after, .v2-corner-tr::after,
.v2-corner-bl::after, .v2-corner-br::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--v2-sector-amber);
  transform: rotate(45deg);
  opacity: 0.5;
}
.v2-corner-tl::after { top: -3px; left: -3px; }
.v2-corner-tr::after { top: -3px; right: -3px; }
.v2-corner-bl::after { bottom: -3px; left: -3px; }
.v2-corner-br::after { bottom: -3px; right: -3px; }

/* ═══════════════════════════════════════
   HUD SHARED ELEMENTS
   ═══════════════════════════════════════ */

/* Sector label (top-left of each section) */
.v2-sector-label {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--v2-hud-font);
  font-size: var(--v2-hud-size);
  font-weight: var(--v2-hud-weight);
  letter-spacing: var(--v2-hud-spacing);
  text-transform: uppercase;
  color: var(--z-text-muted, #64748b);
  opacity: var(--v2-hud-opacity);
  pointer-events: none;
  z-index: 2;
}

/* Status dot (pulsing green circle) */
.v2-status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--v2-sector-green);
  margin-right: 6px;
  animation: v2-pulse 2s ease-in-out infinite;
  vertical-align: middle;
}

@keyframes v2-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  50% { opacity: 0.6; box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}

/* Status bar (horizontal info strip) */
.v2-status-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--v2-hud-font);
  font-size: var(--v2-hud-size);
  font-weight: var(--v2-hud-weight);
  letter-spacing: var(--v2-hud-spacing);
  text-transform: uppercase;
  color: var(--z-text-muted, #64748b);
  opacity: 0.5;
  margin-bottom: 1.5rem;
}

.v2-status-bar .v2-sep {
  opacity: 0.2;
}

.v2-status-bar .v2-blink {
  color: var(--v2-sector-green);
  animation: v2-blink 2s step-end infinite;
}

@keyframes v2-blink {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 0.2; }
}

/* Scan line (horizontal sweep across section) */
.v2-scanline {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--v2-glow-color), transparent);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
}

.v2-scanline.v2-scanline--active {
  animation: v2-scanMove var(--v2-scan-speed) linear infinite;
}

@keyframes v2-scanMove {
  0%   { top: 0; opacity: 0; }
  5%   { opacity: 0.5; }
  95%  { opacity: 0.5; }
  100% { top: 100%; opacity: 0; }
}

/* Topographic contour background */
.v2-topo-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cellipse cx='100' cy='100' rx='90' ry='60' fill='none' stroke='%2300e5ff' stroke-width='0.5'/%3E%3Cellipse cx='100' cy='100' rx='70' ry='45' fill='none' stroke='%2300e5ff' stroke-width='0.5'/%3E%3Cellipse cx='100' cy='100' rx='50' ry='30' fill='none' stroke='%2300e5ff' stroke-width='0.5'/%3E%3Cellipse cx='100' cy='100' rx='30' ry='18' fill='none' stroke='%2300e5ff' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */

@media (max-width: 768px) {
  .v2-sector-label { display: none; }
  .v2-corner-tl, .v2-corner-tr,
  .v2-corner-bl, .v2-corner-br { display: none; }
  .v2-islamic-grid { opacity: calc(var(--v2-pattern-opacity) * 0.5); }
}

@media (prefers-reduced-motion: reduce) {
  .v2-status-dot,
  .v2-scanline,
  .v2-blink {
    animation: none !important;
  }
  .v2-status-dot { opacity: 1; }
}