/* =============================================================
   svg.css — All SVG presentation attributes and animations
   Daryl Hurwitz Portfolio
   ============================================================= */

/* ── ENGINEERING VIZ CONTAINER ───────────────────────────────── */
.engineering-viz {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

/* ── GRADIENT STOPS ──────────────────────────────────────────── */
.glow-stop-inner { stop-color: #c8a96e; stop-opacity: 0.15; }
.glow-stop-outer { stop-color: #0a0a08; stop-opacity: 0; }

/* ── BACKGROUND GLOW ELLIPSE ─────────────────────────────────── */
.viz-glow { fill: url(#glow); }

/* ── GRID ────────────────────────────────────────────────────── */
.viz-grid line {
  stroke: #1e1e1b;
  stroke-width: 0.5;
}

/* ── STATIC RINGS ────────────────────────────────────────────── */
.ring-static { fill: none; }
.ring-200    { stroke: #222220; stroke-width: 1; }
.ring-140    { stroke: #1a1a18; stroke-width: 1.5; }
.ring-80     { stroke: #252522; stroke-width: 1.5; }

/* ── ANIMATED ACCENT RINGS (gold) ────────────────────────────── */
.ring-accent {
  fill: none;
  stroke: #c8a96e;
  stroke-width: 0.5;
  opacity: 0.4;
  stroke-dasharray: 8 4;
}

/* ── ANIMATED TEAL RING ──────────────────────────────────────── */
.ring-teal {
  fill: none;
  stroke: #7eb8b0;
  stroke-width: 0.5;
  opacity: 0.35;
  stroke-dasharray: 4 8;
}

/* ── INNER FAST RING OVERRIDES ───────────────────────────────── */
.ring-fast {
  stroke-dasharray: 12 3;
  opacity: 0.5;
}

/* ── CORE ────────────────────────────────────────────────────── */
.core-bg {
  fill: #111110;
  stroke: #333330;
  stroke-width: 1.5;
}

.core-pulse {
  fill: none;
  stroke: #c8a96e;
  stroke-width: 1;
  opacity: 0.6;
}

.core-center {
  fill: #c8a96e;
  opacity: 0.7;
}

/* ── CROSSHAIRS ──────────────────────────────────────────────── */
.crosshairs line {
  stroke: #c8a96e;
  stroke-width: 0.5;
  opacity: 0.4;
}

/* ── DIAGONAL STRUCTURAL LINES ───────────────────────────────── */
.diagonals line {
  stroke: #7eb8b0;
  stroke-width: 0.5;
  opacity: 0.3;
}

/* ── DIMENSION TICKS ─────────────────────────────────────────── */
.dim-ticks line {
  stroke: #6b6960;
  stroke-width: 0.8;
}

/* ── DIMENSION LABELS ────────────────────────────────────────── */
.dim-labels {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  fill: #6b6960;
  user-select: none;
}

/* ── CORNER BRACKETS ─────────────────────────────────────────── */
.corner-brackets path {
  stroke: #333330;
  stroke-width: 1;
  fill: none;
}

/* ── TITLE BLOCK ─────────────────────────────────────────────── */
.title-block rect {
  fill: none;
  stroke: #1e1e1b;
  stroke-width: 0.8;
}

.title-block line {
  stroke: #1e1e1b;
  stroke-width: 0.5;
}

.title-block-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 7px;
  fill: #444440;
  user-select: none;
}

.title-block-value {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 7px;
  fill: #6b6960;
  user-select: none;
}

/* ── EXPERTISE CARD ICONS ────────────────────────────────────── */
.expertise-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 1.5rem;
  opacity: 0.7;
}

.icon-stroke {
  fill: none;
  stroke: #c8a96e;
  stroke-width: 1;
}

.icon-stroke-dim {
  fill: none;
  stroke: #c8a96e;
  stroke-width: 0.8;
  opacity: 0.5;
}

.icon-stroke-bold {
  fill: none;
  stroke: #c8a96e;
  stroke-width: 2;
  stroke-linecap: round;
}

/* ── RING ROTATION ANIMATIONS ────────────────────────────────── */
@keyframes spin-cw  { to { transform: rotate(360deg);  } }
@keyframes spin-ccw { to { transform: rotate(-360deg); } }

@keyframes pulse-ring {
  0%, 100% { opacity: 0.3; }
  50%       { opacity: 0.8; }
}

.ring-cw  {
  animation: spin-cw 20s linear infinite;
  transform-origin: 300px 350px;
}

.ring-ccw {
  animation: spin-ccw 14s linear infinite;
  transform-origin: 300px 350px;
}

.ring-fast { animation-duration: 8s; }

.core-pulse { animation: pulse-ring 3s ease-in-out infinite; }