/**
 * IC Wireframe Styles v2.0 - Enterprise White-Label Edition
 * 
 * Premium styling for parametric 3D wireframe backgrounds.
 * Optimized for white backgrounds with gold accents.
 * 
 * @version 2.0.0
 * @author Agentur Incognito
 */

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

:root {
  color-scheme: light;

  /* ----------------------------------------
     Background
     ---------------------------------------- */
  --ic-wireframe-bg: #FFFFFF;

  /* ----------------------------------------
     Gold Palette (for Canvas rendering in JS)
     ---------------------------------------- */
  --ic-wireframe-gold-core: var(--ic-color-gold-500, #a79a63);
  --ic-wireframe-gold-bright: var(--ic-color-gold-300, #c3ba94);
  --ic-wireframe-gold-highlight: var(--ic-color-gold-400, #b6ac7f);
  
  /* Soft-Glow variants (for white backgrounds) */
  --ic-wireframe-gold-soft: rgba(167, 154, 99, 0.15);
  --ic-wireframe-gold-faint: rgba(167, 154, 99, 0.08);

  /* ----------------------------------------
     WCAG-Compliant Text Colors
     ---------------------------------------- */
  /* Gold-Heading: 4.58:1 contrast ✅ */
  --ic-wireframe-text-gold: #7A6F45;
  
  /* Body-Text: 4.63:1 contrast ✅ */
  --ic-wireframe-text-body: #6B6B70;
  
  /* Code/Muted: 5.05:1 contrast ✅ */
  --ic-wireframe-text-muted: #6e6e73;
  
  /* Ink (maximum contrast): 12.6:1 ✅ */
  --ic-wireframe-text-ink: #1d1d1f;

  /* ----------------------------------------
     Content Protection
     ---------------------------------------- */
  --ic-wireframe-content-shield: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.5) 70%,
    transparent 100%
  );

  /* ----------------------------------------
     Detective HUD System - CSS API
     Override these per page for different presets.
     ---------------------------------------- */
  --ic-hud-grid-opacity: 0.06;
  --ic-hud-focus-opacity: 0.25;
  --ic-hud-morph-duration: 1500;
  --ic-hud-parallax-intensity: 20;
}

/* ==========================================================================
   Section Container
   ========================================================================== */

.ic-wireframe-section {
  position: relative;
  width: 100%;
  min-height: 60vh;
  overflow: hidden;
  isolation: isolate;
  
  /* Pure white background */
  background: var(--ic-wireframe-bg);
  
  /* Performance optimizations */
  content-visibility: auto;
  contain-intrinsic-size: 0 60vh;
}

.ic-wireframe-section--full {
  min-height: 100vh;
  contain-intrinsic-size: 0 100vh;
}

.ic-wireframe-section--hero {
  min-height: 80vh;
  padding-block: clamp(4rem, 10vh, 8rem);
  contain-intrinsic-size: 0 80vh;
}

/* ==========================================================================
   Canvas (3D Wireframe Rendering)
   ========================================================================== */

.ic-wireframe-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  
  /* GPU acceleration */
  will-change: contents;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ==========================================================================
   Glow (Subtle Shadow Logic for White Backgrounds)
   ========================================================================== */

.ic-wireframe-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  
  /* Shadow logic instead of glow on white */
  background:
    /* Central accent - very subtle */
    radial-gradient(
      ellipse 60% 50% at 50% 45%,
      var(--ic-wireframe-gold-soft),
      transparent 70%
    ),
    /* Secondary accent - bottom right */
    radial-gradient(
      ellipse 40% 40% at 70% 65%,
      var(--ic-wireframe-gold-faint),
      transparent 60%
    ),
    /* Tertiary accent - top left */
    radial-gradient(
      ellipse 35% 35% at 25% 30%,
      rgba(195, 186, 148, 0.05),
      transparent 50%
    );
  
  /* No mix-blend-mode: multiply - it darkens on white */
  opacity: 0.8;
}

/* ==========================================================================
   Grain (Subtle Texture)
   ========================================================================== */

.ic-wireframe-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  
  /* Optimized SVG grain - less performance impact */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.15'/></svg>");
  
  /* Very subtle on white */
  opacity: 0.04;
  mix-blend-mode: multiply;
}

/* ==========================================================================
   Content (Readable Content Over Wireframe)
   ========================================================================== */

.ic-wireframe-content {
  position: relative;
  z-index: 2;
  
  /* "Ruhepol" for readability over animated wireframes */
  background: var(--ic-wireframe-content-shield);
  padding: 2rem 3rem;
  
  /* Text defaults */
  color: var(--ic-wireframe-text-ink);
}

/* No protection (when wireframes are static or very subtle) */
.ic-wireframe-content--unprotected {
  background: none;
  padding: 0;
}

/* Visible card container */
.ic-wireframe-content--card {
  background: rgba(255, 255, 255, 0.88);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}

/* Seamless full-bleed without visible container */
.ic-wireframe-content--seamless {
  background: radial-gradient(
    ellipse 80% 60% at center,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.3) 60%,
    transparent 100%
  );
  padding: 0;
}

/* ==========================================================================
   Typography (WCAG-Compliant)
   ========================================================================== */

/* Headings - darker gold for readability */
.ic-wireframe-heading {
  color: var(--ic-wireframe-text-gold);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* High contrast heading variant */
.ic-wireframe-heading--high-contrast {
  color: var(--ic-wireframe-text-ink);
}

/* Body text */
.ic-wireframe-text {
  color: var(--ic-wireframe-text-body);
  line-height: 1.6;
}

/* Muted/Code text */
.ic-wireframe-muted {
  color: var(--ic-wireframe-text-muted);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
  .ic-wireframe-content {
    padding: 1.5rem 2rem;
  }
  
  .ic-wireframe-grain {
    opacity: 0.06;
  }
  
  .ic-wireframe-section {
    min-height: 50vh;
    contain-intrinsic-size: 0 50vh;
  }
}

/* ==========================================================================
   Accessibility - Adaptive Contrasts
   ========================================================================== */

/* User prefers higher contrast */
@media (prefers-contrast: more) {
  :root {
    --ic-wireframe-text-gold: #4A4535;    /* 8.2:1 */
    --ic-wireframe-text-body: #3D3D42;    /* 10.5:1 */
    --ic-wireframe-gold-soft: rgba(167, 154, 99, 0.08);
  }
  
  .ic-wireframe-glow {
    opacity: 0.3;
  }
  
  .ic-wireframe-grain {
    display: none;
  }
}

/* User prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ic-wireframe-canvas {
    will-change: auto;
  }
  
  /* Stronger protection when no animation */
  .ic-wireframe-content {
    background: radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.7) 80%,
      transparent 100%
    );
  }
}

/* ==========================================================================
   Canvas Layout System (Presets + Custom)
   Uses CSS Custom Properties for flexible positioning.
   ========================================================================== */

/* Internal CSS Variables (not user-facing API) */
.ic-wireframe-section {
  --_canvas-width: 100%;
  --_canvas-height: 100%;
  --_canvas-top: 0;
  --_canvas-left: 0;
  --_canvas-right: auto;
}

/* Apply variables to canvas and effects */
.ic-wireframe-canvas {
  width: var(--_canvas-width);
  height: var(--_canvas-height);
  top: var(--_canvas-top);
  left: var(--_canvas-left);
  right: var(--_canvas-right);
}

.ic-wireframe-glow,
.ic-wireframe-grain {
  width: var(--_canvas-width);
  height: var(--_canvas-height);
  top: var(--_canvas-top);
  left: var(--_canvas-left);
  right: var(--_canvas-right);
}

/* Z-Index Layer System */
.ic-wireframe-canvas  { z-index: 1; }
.ic-wireframe-glow    { z-index: 2; }
.ic-wireframe-grain   { z-index: 3; }
.ic-wireframe-content { 
  z-index: 10; 
  position: relative; /* Stacking context */
}

/* ==========================================================================
   Layout Presets
   ========================================================================== */

/* Left Half (50%) */
.ic-wireframe-section--left-half {
  --_canvas-width: 50%;
  --_canvas-left: 0;
  --_canvas-right: auto;
}

/* Right Half (50%) */
.ic-wireframe-section--right-half {
  --_canvas-width: 50%;
  --_canvas-left: auto;
  --_canvas-right: 0;
}

/* Left Third (33%) */
.ic-wireframe-section--left-third {
  --_canvas-width: 33.333%;
  --_canvas-left: 0;
  --_canvas-right: auto;
}

/* Right Third (33%) */
.ic-wireframe-section--right-third {
  --_canvas-width: 33.333%;
  --_canvas-left: auto;
  --_canvas-right: 0;
}

/* Center Narrow (60%) */
.ic-wireframe-section--center-narrow {
  --_canvas-width: 60%;
  --_canvas-left: 20%;
  --_canvas-right: auto;
}

/* Legacy support: --left and --right map to new system */
.ic-wireframe-section--left {
  --_canvas-width: 50%;
  --_canvas-left: 0;
  --_canvas-right: auto;
}

.ic-wireframe-section--right {
  --_canvas-width: 50%;
  --_canvas-left: auto;
  --_canvas-right: 0;
}

/* ==========================================================================
   Mobile Fallback: Full width with reduced opacity
   ========================================================================== */

@media (max-width: 767px) {
  .ic-wireframe-section[class*="--left-"],
  .ic-wireframe-section[class*="--right-"],
  .ic-wireframe-section--center-narrow,
  .ic-wireframe-section--left,
  .ic-wireframe-section--right {
    --_canvas-width: 100%;
    --_canvas-left: 0;
    --_canvas-right: auto;
  }
  
  .ic-wireframe-section[class*="--left-"] .ic-wireframe-canvas,
  .ic-wireframe-section[class*="--right-"] .ic-wireframe-canvas,
  .ic-wireframe-section--center-narrow .ic-wireframe-canvas,
  .ic-wireframe-section--left .ic-wireframe-canvas,
  .ic-wireframe-section--right .ic-wireframe-canvas {
    opacity: 0.5;
  }
}

/* ==========================================================================
   Manual Mode (.has-wireframe-bg)
   Add this class to ANY element to get a wireframe background.
   JavaScript will auto-inject canvas, glow, and grain elements.
   ========================================================================== */

.has-wireframe-bg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ic-wireframe-bg, #FFFFFF);
}

/* Injected elements get absolute positioning */
.has-wireframe-bg > .ic-wireframe-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  will-change: contents;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.has-wireframe-bg > .ic-wireframe-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 60% 50% at 50% 45%,
      var(--ic-wireframe-gold-soft, rgba(167, 154, 99, 0.15)),
      transparent 70%
    ),
    radial-gradient(
      ellipse 40% 40% at 70% 65%,
      var(--ic-wireframe-gold-faint, rgba(167, 154, 99, 0.08)),
      transparent 60%
    );
  opacity: 0.8;
}

.has-wireframe-bg > .ic-wireframe-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.15'/></svg>");
  opacity: 0.04;
  mix-blend-mode: multiply;
}

/* All other children sit above the wireframe */
.has-wireframe-bg > *:not(.ic-wireframe-canvas):not(.ic-wireframe-glow):not(.ic-wireframe-grain) {
  position: relative;
  z-index: 10;
}

/* ==========================================================================
   Detective HUD System - Layer Styles
   ========================================================================== */

/* HUD Grid Layer (topographic background) */
.ic-hud-grid {
  position: absolute !important;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  filter: blur(2px);
  opacity: var(--ic-hud-grid-opacity, 0.06);
}

/* HUD Grid in manual mode (.has-wireframe-bg) */
.has-wireframe-bg > .ic-hud-grid {
  position: absolute !important;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* HUD Focus Ring */
.ic-hud-focus {
  position: absolute !important;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

/* HUD Focus Ring in manual mode */
.has-wireframe-bg > .ic-hud-focus {
  position: absolute !important;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

/* ==========================================================================
   HUD Page Presets
   Add these classes to body or section for different visual treatments.
   ========================================================================== */

/* Wirtschaftsdetektei: Maximum seriousness */
.page-wirtschaft,
.ic-wireframe-section[data-hud="enterprise"] {
  --ic-hud-grid-opacity: 0.04;
  --ic-hud-morph-duration: 2000;
}

/* BLE-Tracker: More technical */
.page-ble-tracker,
.ic-wireframe-section[data-hud="full"] {
  --ic-hud-grid-opacity: 0.08;
  --ic-hud-focus-opacity: 0.3;
}

/* Einsatzgebiete: Regional, subtle */
.page-einsatzgebiet,
.ic-wireframe-section[data-hud="none"] {
  --ic-hud-grid-opacity: 0;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  .ic-wireframe-canvas,
  .ic-wireframe-glow,
  .ic-wireframe-grain,
  .ic-hud-grid,
  .ic-hud-focus {
    display: none !important;
  }
  
  .ic-wireframe-section,
  .has-wireframe-bg {
    background: white !important;
    min-height: auto !important;
    page-break-inside: avoid;
  }
  
  .ic-wireframe-content {
    background: none !important;
  }
}