/* Pauhu Bloomberg — v1.0.0
 * Shared Bloomberg Terminal / CERN Control Room component styles
 * Requires: brand.css + design-tokens.css loaded first
 *
 * Components:
 *   - Ticker bar (scrolling marquee)
 *   - Glass panels (frosted backdrop)
 *   - Feed cards (data source cards)
 *   - Grid coordinate background
 *   - Glow effects (CTA, cards, magnetic hover)
 *   - Status LEDs
 *   - Scanline overlay
 *
 * (c) 2026 Pauhu Oy — EU jurisdiction
 */


/* ================================================================
   GRID COORDINATE BACKGROUND
   ================================================================ */

.pauhu-grid-bg {
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 40, 85, 0.35) 0%, transparent 60%),
    linear-gradient(var(--pauhu-grid-color-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--pauhu-grid-color-dark) 1px, transparent 1px),
    var(--pauhu-color-bg);
  background-size: 100% 100%, var(--pauhu-grid-size) var(--pauhu-grid-size), var(--pauhu-grid-size) var(--pauhu-grid-size);
  background-attachment: fixed;
}

/* Smaller grid for overlay sections (connectors, CTAs) */
.pauhu-grid-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(101, 142, 178, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(101, 142, 178, 0.04) 1px, transparent 1px);
  background-size: var(--pauhu-grid-size-sm) var(--pauhu-grid-size-sm);
  pointer-events: none;
}


/* ================================================================
   TICKER BAR
   ================================================================ */

.pauhu-ticker {
  overflow: hidden;
  font-family: var(--pauhu-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--pauhu-color-text-muted);
  position: relative;
  padding: 0;
  border-bottom: 1px solid var(--pauhu-color-border);
}

[data-theme="dark"] .pauhu-ticker {
  background: rgba(0, 10, 20, 0.5);
  border-bottom-color: rgba(101, 142, 178, 0.06);
}

/* Fade edges */
.pauhu-ticker::before,
.pauhu-ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.pauhu-ticker::before {
  left: 0;
  background: linear-gradient(to right, var(--pauhu-color-bg), transparent);
}

.pauhu-ticker::after {
  right: 0;
  background: linear-gradient(to left, var(--pauhu-color-bg), transparent);
}

[data-theme="dark"] .pauhu-ticker::before {
  background: linear-gradient(to right, var(--pauhu-color-bg), transparent);
}

[data-theme="dark"] .pauhu-ticker::after {
  background: linear-gradient(to left, var(--pauhu-color-bg), transparent);
}

.pauhu-ticker-track {
  display: flex;
  gap: var(--pauhu-ticker-gap);
  padding: var(--pauhu-ticker-padding-y) 0;
  animation: pauhu-ticker-scroll var(--pauhu-ticker-duration) linear infinite;
  width: max-content;
}

.pauhu-ticker-track span {
  white-space: nowrap;
}

.pauhu-ticker-track strong {
  color: var(--ana-4);
  font-weight: 700;
}

[data-theme="light"] .pauhu-ticker-track strong {
  color: var(--ana-3);
}

.pauhu-ticker-sep {
  color: var(--pauhu-color-border);
}

/* Reverse ticker */
.pauhu-ticker-track--reverse {
  animation: pauhu-ticker-scroll-reverse var(--pauhu-ticker-duration-reverse) linear infinite;
}


/* ================================================================
   LIVE INDICATOR
   ================================================================ */

.pauhu-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--pauhu-live-color);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
}

.pauhu-live-dot {
  display: inline-block;
  width: var(--pauhu-live-dot-size);
  height: var(--pauhu-live-dot-size);
  border-radius: 50%;
  background: var(--pauhu-live-color);
  animation: pauhu-live-pulse var(--pauhu-live-pulse-duration) ease-in-out infinite;
}

[data-theme="dark"] .pauhu-live-dot {
  box-shadow: 0 0 8px var(--pauhu-live-glow);
}


/* ================================================================
   GLASS PANEL
   ================================================================ */

.pauhu-glass {
  background: var(--pauhu-glass-bg);
  backdrop-filter: var(--pauhu-glass-blur);
  -webkit-backdrop-filter: var(--pauhu-glass-blur);
  border: 1px solid var(--pauhu-glass-border);
  border-radius: var(--radius, 8px);
}

.pauhu-glass:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

/* Glass header (sticky nav with blur) */
.pauhu-glass-header {
  background: color-mix(in srgb, var(--pauhu-color-bg) 70%, transparent);
  backdrop-filter: var(--pauhu-glass-blur-header);
  -webkit-backdrop-filter: var(--pauhu-glass-blur-header);
}


/* ================================================================
   FEED CARD (data source cards)
   ================================================================ */

.pauhu-feed-card {
  background: var(--pauhu-color-bg);
  border: 1px solid var(--pauhu-color-border);
  border-radius: 6px;
  padding: 1.25rem 1.4rem;
  transition: var(--pauhu-card-transition);
}

[data-theme="dark"] .pauhu-feed-card {
  background: var(--pauhu-card-glass-bg);
  border-color: var(--pauhu-card-glass-border);
}

.pauhu-feed-card:hover {
  translate: 0 var(--pauhu-card-hover-lift);
  border-color: rgba(101, 142, 178, 0.3);
}

[data-theme="dark"] .pauhu-feed-card:hover {
  background: rgba(101, 142, 178, 0.04);
  box-shadow: 0 0 0 1px rgba(101, 142, 178, 0.1),
              0 8px 32px rgba(0, 0, 0, 0.3);
}

.pauhu-feed-card h3 {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0;
  color: var(--ana-3);
}

[data-theme="dark"] .pauhu-feed-card h3 {
  color: var(--ana-4);
}


/* ================================================================
   SCANLINE OVERLAY
   ================================================================ */

.pauhu-scanline::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    var(--pauhu-scanline-color) 2px,
    var(--pauhu-scanline-color) var(--pauhu-scanline-gap)
  );
  pointer-events: none;
  z-index: 1;
}

[data-theme="light"] .pauhu-scanline::before {
  display: none;
}


/* ================================================================
   CROSSHAIR MARKS (hero corners)
   ================================================================ */

.pauhu-crosshair::before {
  content: '';
  position: absolute;
  top: 2rem;
  left: 2rem;
  width: 20px;
  height: 20px;
  border-top: 1px solid var(--pauhu-crosshair-color);
  border-left: 1px solid var(--pauhu-crosshair-color);
  pointer-events: none;
}

.pauhu-crosshair::after {
  content: '';
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  width: 20px;
  height: 20px;
  border-bottom: 1px solid var(--pauhu-crosshair-color);
  border-right: 1px solid var(--pauhu-crosshair-color);
  pointer-events: none;
}


/* ================================================================
   GLOW EFFECTS
   ================================================================ */

/* CTA button glow */
.pauhu-glow-btn {
  animation: pauhu-cta-glow 3s ease-in-out infinite;
}

[data-theme="dark"] .pauhu-glow-btn {
  animation-name: pauhu-cta-glow-dark;
}

/* Magnetic hover glow (cards) — requires JS to set --mouse-x, --mouse-y */
.pauhu-magnetic-hover:hover {
  background: radial-gradient(
    250px circle at var(--mouse-x) var(--mouse-y),
    rgba(0, 40, 85, 0.06),
    transparent
  );
}

[data-theme="dark"] .pauhu-magnetic-hover:hover {
  background: radial-gradient(
    250px circle at var(--mouse-x) var(--mouse-y),
    var(--pauhu-glow-card),
    transparent
  );
  box-shadow: 0 0 0 1px rgba(101, 142, 178, 0.1);
}


/* ================================================================
   STATUS LEDs
   ================================================================ */

.pauhu-led {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 0.3rem;
  vertical-align: middle;
}

.pauhu-led--live       { background: var(--pauhu-led-live); }
.pauhu-led--annotating { background: var(--pauhu-led-annotating); }
.pauhu-led--syncing    { background: var(--pauhu-led-syncing); }
.pauhu-led--degraded   { background: var(--pauhu-led-degraded); }
.pauhu-led--down       { background: var(--pauhu-led-down); }


/* ================================================================
   GLOWING DIVIDER
   ================================================================ */

.pauhu-glow-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--ana-4) 50%,
    transparent 100%
  );
  opacity: 0.3;
  margin: 0;
}

[data-theme="light"] .pauhu-glow-divider {
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--ana-2) 50%,
    transparent 100%
  );
  opacity: 0.25;
}


/* ================================================================
   MONOSPACE BADGE (jurisdiction, protocol labels)
   ================================================================ */

.pauhu-mono-badge {
  display: inline-block;
  font-family: var(--pauhu-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.85rem;
  border-radius: 4px;
  background: rgba(101, 142, 178, 0.08);
  color: var(--pauhu-color-text-muted);
  border: 1px solid rgba(101, 142, 178, 0.15);
}

[data-theme="dark"] .pauhu-mono-badge {
  background: rgba(101, 142, 178, 0.1);
  border-color: rgba(101, 142, 178, 0.2);
  color: #c0d0e0;
}


/* ================================================================
   MONOSPACE STAT (dashboard numbers)
   ================================================================ */

.pauhu-stat-number {
  display: block;
  font-size: 1.8rem;
  font-weight: 800;
  font-family: var(--pauhu-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-on-surface);
  letter-spacing: -0.03em;
  line-height: 1;
}

[data-theme="dark"] .pauhu-stat-number {
  color: var(--ana-5);
}

.pauhu-stat-label {
  display: block;
  font-size: 0.6rem;
  color: var(--pauhu-color-text-muted);
  margin-top: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--pauhu-mono);
}


/* ================================================================
   SCROLL REVEAL — progressive enhancement
   ================================================================ */

@supports (animation-timeline: view()) {
  .pauhu-scroll-reveal {
    animation: pauhu-scroll-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 20%;
  }
}


/* ================================================================
   REDUCED MOTION — a11y override
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  .pauhu-ticker-track,
  .pauhu-ticker-track--reverse {
    animation: none !important;
  }

  .pauhu-live-dot {
    animation: none !important;
    opacity: 1;
  }

  .pauhu-glow-btn {
    animation: none !important;
  }
}