/* ============================================================================
   Purpose: The live car diagram. Panel lighting, impact ripples, water beads,
   sheen and scan. Geometry lives in template-parts/car-diagram.php; this file
   only decides how light behaves on it.
   ========================================================================= */

.czf-car {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
}

.czf-car__svg {
  width: 100%;
  max-width: 300px;
  height: auto;
  overflow: visible;
  /* A car sitting in a bay throws light onto the floor around it. */
  filter: drop-shadow(0 var(--space-24) var(--space-48) rgba(0, 0, 0, 0.72));
}

@media (min-width: 1024px) {
  .czf-car__svg { max-width: 340px; }
}

/* --- Zones --------------------------------------------------------------
   A lit panel is not a coloured shape sitting on the paint - it is light
   coming off the paint. `screen` is what makes it read that way: the panel's
   own gradient survives underneath and the highlight rides on top.
   ---------------------------------------------------------------------- */

.czf-car__zone {
  fill: currentColor;
  color: var(--c-shield);
  opacity: 0;
  mix-blend-mode: screen;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    filter  var(--dur-slow) var(--ease-out);
}

.czf-car__zone[data-channel="weather"] { color: var(--c-weather); }
.czf-car__zone[data-channel="both"]    { color: var(--c-clear);   }

/* Three intensities so the diagram can say "a bit exposed" vs "very exposed"
   rather than just on/off. */
.czf-car__zone.is-lit                 { opacity: 0.22; filter: drop-shadow(0 0 4px currentColor); }
.czf-car__zone.is-lit[data-level="2"] { opacity: 0.38; filter: drop-shadow(0 0 8px currentColor); }
.czf-car__zone.is-lit[data-level="3"] { opacity: 0.56; filter: drop-shadow(0 0 14px currentColor); }

/* The moment a panel first lights, it flashes hotter then settles - the way a
   diagnostic lamp strikes. */
@keyframes czf-zone-strike {
  0%   { opacity: 0; }
  22%  { opacity: 0.85; }
  100% { opacity: var(--czf-zone-rest, 0.38); }
}

.czf-car__zone.is-striking {
  animation: czf-zone-strike var(--dur-slow) var(--ease-out) both;
}

/* --- Sheen + scan -------------------------------------------------------- */

.czf-car__sheen {
  mix-blend-mode: screen;
  pointer-events: none;
}

.czf-car__scan {
  mix-blend-mode: screen;
  pointer-events: none;
}

/* --- Impact ripples ------------------------------------------------------ */

.czf-car__impact { opacity: 0; }

.czf-car__impact-ring {
  fill: none;
  stroke: var(--c-shield-hi);
  stroke-width: 2;
  opacity: 0.9;
}

.czf-car__impact-core {
  fill: var(--c-shield-hi);
  opacity: 0.95;
}

/* --- Water beads --------------------------------------------------------- */

.czf-car__bead {
  fill: rgba(210, 244, 250, 0.30);
  stroke: rgba(223, 249, 253, 0.75);
  stroke-width: 1;
  opacity: 0;
  /* A bead is a lens: bright rim, bright hotspot, dark middle. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7))
          drop-shadow(0 0 6px rgba(79, 209, 224, 0.55));
}

/* --- Callouts ------------------------------------------------------------ */

.czf-car__callout {
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.czf-car__callout.is-on { opacity: 1; }

.czf-car__callout path {
  stroke: var(--c-line-3);
  stroke-width: 1;
}

.czf-car__callout text {
  font-family: var(--font-mono);
  font-size: 11px; /* SVG user units, not CSS px - sits on the 4-pt grid at render size */
  letter-spacing: 0.14em;
  fill: var(--c-ink-3);
}

.czf-car__callout[data-callout="shield"] path  { stroke: var(--c-shield); }
.czf-car__callout[data-callout="shield"] text  { fill: var(--c-shield);   }
.czf-car__callout[data-callout="weather"] path { stroke: var(--c-weather);}
.czf-car__callout[data-callout="weather"] text { fill: var(--c-weather);  }

/* --- Live caption -------------------------------------------------------- */

.czf-car__caption {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--space-40);
  max-width: 32ch;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: var(--lh-normal);
  letter-spacing: 0.04em;
  color: var(--c-ink-3);
  text-align: center;
  text-wrap: balance;
}

.czf-car__caption-key {
  flex: 0 0 auto;
  width: var(--space-8);
  height: var(--space-8);
  background: var(--c-line-3);
  transform: rotate(45deg);
  transition: background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.czf-car__caption[data-channel="shield"]  .czf-car__caption-key {
  background: var(--c-shield);
  box-shadow: var(--glow-shield);
}

.czf-car__caption[data-channel="weather"] .czf-car__caption-key {
  background: var(--c-weather);
  box-shadow: var(--glow-weather);
}

.czf-car__caption[data-channel="shield"]  { color: var(--c-shield);  }
.czf-car__caption[data-channel="weather"] { color: var(--c-weather); }

/* --- Reduced motion ------------------------------------------------------
   The diagram is information, not decoration, so it still lights up - it just
   does so instantly, with no strike, sheen, ripple or roll.
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .czf-car__zone { transition: none; }
  .czf-car__zone.is-striking { animation: none; }
  .czf-car__sheen,
  .czf-car__scan,
  .czf-car__impacts,
  .czf-car__beads { display: none; }
}

/* --- Print ---------------------------------------------------------------
   The lit diagram is the single most useful thing to carry into a studio, so
   it must survive "Save as PDF". Blend modes and glows do not print, so the
   zones fall back to flat tints.
   ---------------------------------------------------------------------- */

@media print {
  .czf-car__svg { filter: none; max-width: 220px; }
  .czf-car__zone { mix-blend-mode: normal; filter: none; }
  .czf-car__zone.is-lit { opacity: 0.55; }
  .czf-car__sheen, .czf-car__scan, .czf-car__impacts, .czf-car__beads { display: none; }
}