/* ============================================================
   Tweaks — three expressive variants that reshape the feel.
   ============================================================ */

/* ── Sfeer (atmosphere / palette) ───────────────────────────── */

/* Schemering — dusk: warmer dark base, amber pulse instead of cyan.
   The brug as a watchful guardian at twilight. */
[data-mood="schemering"] {
  --dsb-paper:   #F4ECE3;
  --dsb-bone:    #EBE2D6;
  --dsb-mist:    #DCD2C5;
  --dsb-slate-300: #B7AC9C;
  --dsb-slate-500: #847564;
  --dsb-slate-700: #4A3F32;
  --dsb-ink:       #1C140C;

  --dsb-navy-900: #1A1410;
  --dsb-navy-800: #2A1F16;
  --dsb-navy-700: #3A2C20;

  --dsb-cyan-500: #E0833A;
  --dsb-cyan-400: #F5A45C;
  --dsb-cyan-300: #FACA8E;
  --dsb-cyan-100: #F8E4CB;

  --bg-page:        var(--dsb-paper);
  --bg-subtle:      var(--dsb-bone);
  --bg-hero:        var(--dsb-navy-900);
  --bg-inverse:     var(--dsb-navy-800);

  --accent:         var(--dsb-cyan-500);
  --accent-hover:   var(--dsb-cyan-400);
  --accent-press:   #C46720;
  --accent-soft:    var(--dsb-cyan-100);

  --primary:        #2A1F16;
  --primary-hover:  #3A2C20;
  --primary-press:  #160E08;

  --border-subtle:  var(--dsb-mist);
  --border-default: var(--dsb-slate-300);

  --shadow-sm: 0 2px 6px rgba(40, 25, 10, 0.08), 0 1px 2px rgba(40, 25, 10, 0.04);
  --shadow-md: 0 6px 16px rgba(40, 25, 10, 0.10), 0 2px 4px rgba(40, 25, 10, 0.04);
  --shadow-glow: 0 0 0 4px rgba(224, 131, 58, 0.20);
}
[data-mood="schemering"] .hero-glow {
  background:
    radial-gradient(60% 50% at 70% 30%, rgba(224, 131, 58, 0.14), transparent 70%),
    radial-gradient(40% 30% at 20% 80%, rgba(224, 131, 58, 0.06), transparent 70%);
}
[data-mood="schemering"] .pulse-color { color: var(--accent); }
[data-mood="schemering"] .ai-section::before {
  background:
    radial-gradient(40% 30% at 20% 20%, rgba(224, 131, 58, 0.08), transparent 70%),
    radial-gradient(50% 40% at 90% 80%, rgba(224, 131, 58, 0.06), transparent 70%);
}

/* IJzig — icy electric. Lighter steel base, brighter cyan pulse. */
[data-mood="ijzig"] {
  --dsb-paper:   #ECF2F7;
  --dsb-bone:    #E0E8F0;
  --dsb-mist:    #C9D5E2;

  --dsb-navy-900: #0E2A45;
  --dsb-navy-800: #143A5B;
  --dsb-navy-700: #1E5380;

  --dsb-cyan-500: #36CFEA;
  --dsb-cyan-400: #7FE0F2;
  --dsb-cyan-300: #B8EEF7;

  --bg-page:        var(--dsb-paper);
  --bg-subtle:      var(--dsb-bone);
  --bg-hero:        var(--dsb-navy-900);
  --bg-inverse:     var(--dsb-navy-800);

  --accent:         var(--dsb-cyan-500);
  --accent-hover:   var(--dsb-cyan-400);
  --accent-press:   #00B8D9;
  --accent-soft:    #D6F2F8;

  --primary:        var(--dsb-navy-800);
  --border-subtle:  var(--dsb-mist);

  --shadow-glow: 0 0 0 4px rgba(54, 207, 234, 0.22);
}
[data-mood="ijzig"] .hero-glow {
  background:
    radial-gradient(60% 50% at 70% 30%, rgba(54, 207, 234, 0.16), transparent 70%),
    radial-gradient(40% 30% at 20% 80%, rgba(54, 207, 234, 0.08), transparent 70%);
}

/* ── Tempo (motion cadence) ─────────────────────────────────── */

/* Rustig — calmer, slower pulses. Asset at rest. */
[data-tempo="rustig"] .pulse-anim,
[data-tempo="rustig"] .section-eyebrow::before,
[data-tempo="rustig"] .nav-status .dot,
[data-tempo="rustig"] .hero-eyebrow .live-dot,
[data-tempo="rustig"] .footer-bottom .ft-status .dot,
[data-tempo="rustig"] .dash-chrome .live::before {
  animation-duration: 2600ms !important;
}
[data-tempo="rustig"] .ticker-track { animation-duration: 110s !important; }
[data-tempo="rustig"] .sensor-label { animation-duration: 12s !important; }

/* Urgent — heightened cadence. Critical infrastructure under watch. */
[data-tempo="urgent"] .section-eyebrow::before,
[data-tempo="urgent"] .nav-status .dot,
[data-tempo="urgent"] .hero-eyebrow .live-dot,
[data-tempo="urgent"] .footer-bottom .ft-status .dot,
[data-tempo="urgent"] .dash-chrome .live::before {
  animation-duration: 1100ms !important;
}
[data-tempo="urgent"] .ticker-track { animation-duration: 28s !important; }
[data-tempo="urgent"] .sensor-label { animation-duration: 5s !important; }

/* Override the SVG pulses inside the hero scene for tempo */
[data-tempo="rustig"] .hero svg animate { animation-duration: inherit; }
/* (SVG <animate> uses its own dur attr — we rely on visual layers above for tempo cue) */

/* ── Dichtheid (visual density) ─────────────────────────────── */

/* Operationeel — denser, data-forward, smaller display. */
[data-density="operationeel"] section { padding-top: var(--space-12) !important; padding-bottom: var(--space-12) !important; }
[data-density="operationeel"] .hero { padding-top: 72px !important; min-height: 88vh !important; }
[data-density="operationeel"] .hero-inner { min-height: calc(88vh - 72px); padding-top: var(--space-10) !important; padding-bottom: var(--space-10) !important; }
[data-density="operationeel"] .section-title { font-size: clamp(1.625rem, 2.4vw + 0.8rem, 2.5rem); max-width: 28ch; }
[data-density="operationeel"] .hero h1 { font-size: clamp(2rem, 4.4vw + 0.4rem, 4rem); }
[data-density="operationeel"] .section-lede { font-size: var(--fs-16); }
[data-density="operationeel"] .services-grid { gap: var(--space-3); }
[data-density="operationeel"] .svc-card { min-height: 200px; padding: var(--space-5); gap: var(--space-3); }
[data-density="operationeel"] .svc-card h3 { font-size: var(--fs-18); }
[data-density="operationeel"] .pillar { padding: var(--space-4) 0; }
[data-density="operationeel"] .cap-cell { padding: var(--space-5) var(--space-5); }
[data-density="operationeel"] .sensors-grid { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px) {
  [data-density="operationeel"] .sensors-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px) {
  [data-density="operationeel"] .sensors-grid { grid-template-columns: repeat(2, 1fr); }
}
[data-density="operationeel"] .sensor-card { padding: var(--space-4); gap: var(--space-2); }
[data-density="operationeel"] .sensor-card .s-val { font-size: var(--fs-20); }
[data-density="operationeel"] .sensor-card .s-spark { height: 24px; }
[data-density="operationeel"] .dash-body { min-height: 460px; }
[data-density="operationeel"] .cta-card { padding: var(--space-10); }
[data-density="operationeel"] .cta-card h2 { font-size: clamp(1.75rem, 2.4vw + 0.8rem, 2.75rem); }
[data-density="operationeel"] .footer-top { margin-bottom: var(--space-10); padding-bottom: var(--space-8); }
[data-density="operationeel"] footer.site-footer { padding: var(--space-12) 0 var(--space-6); }
[data-density="operationeel"] .timeline { padding-left: var(--space-5); }
[data-density="operationeel"] .tl-item { padding: var(--space-4) 0; }

/* Hide the panel's own scaffolding when tweaks off */
.twk-panel.twk-hidden { display: none !important; }