/*
  calibration.css — page-specific styles for /calibration.html.
  Created for the PCA-05 five-node entry glyph.

  This file exists so a one-page mark never forces a ?v= bump across
  every page on the site. Same reasoning as installation.css (CIB-04),
  overview.css (CDS-01) and cars-05.css (CARS-05).
*/

/* ---- PCA-05 entry glyph -----------------------------------------
   A miniature five-node phase-coupling network: circuit diagram first,
   never a pentagram or an astrology mark. It reads as an engineering
   schematic until someone finishes PCA-05 and recognises what the five
   nodes were the whole time. */

.phase-glyph{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align:middle;
  /* visible drawing stays 26px; padding buys a 44x44 touch target */
  width:26px;
  height:26px;
  padding:9px;
  margin:-9px 0 -9px -2px;
  position:relative;
  top:-1px;
  text-decoration:none;
  color:rgba(120,180,200,0.35);
  transition:color 0.25s ease;
  flex-shrink:0;
  box-sizing:content-box;
}
.phase-glyph svg{display:block;overflow:visible;width:26px;height:26px;}

.phase-glyph .pg-node{
  fill:currentColor;
  transition:fill 0.2s ease, r 0.2s ease;
}
.phase-glyph .pg-gen{
  stroke:currentColor;
  stroke-width:1;
  fill:none;
}
.phase-glyph .pg-ctrl{
  stroke:currentColor;
  stroke-width:0.7;
  fill:none;
  opacity:0;
  transition:opacity 0.35s ease;
}

/* hover / keyboard focus: nodes illuminate around the loop, the faint
   control traces flash in behind them, final node emits one pulse */
.phase-glyph:hover,
.phase-glyph:focus-visible{color:var(--cyan, #45D3E8);}
.phase-glyph:focus-visible{outline:1px solid var(--cyan, #45D3E8);outline-offset:2px;}

.phase-glyph:hover .pg-ctrl,
.phase-glyph:focus-visible .pg-ctrl{opacity:0.28;}

.phase-glyph:hover .pg-node,
.phase-glyph:focus-visible .pg-node{
  animation:pg-illuminate 0.7s ease forwards;
}
.phase-glyph:hover .pg-node-1,
.phase-glyph:focus-visible .pg-node-1{animation-delay:0.14s;}
.phase-glyph:hover .pg-node-2,
.phase-glyph:focus-visible .pg-node-2{animation-delay:0.28s;}
.phase-glyph:hover .pg-node-3,
.phase-glyph:focus-visible .pg-node-3{animation-delay:0.42s;}
.phase-glyph:hover .pg-node-4,
.phase-glyph:focus-visible .pg-node-4{
  animation:pg-illuminate 0.7s ease forwards, pg-pulse 1.6s ease-in-out 1.1s infinite;
  animation-delay:0.56s, 1.1s;
}

@keyframes pg-illuminate{
  0%{fill:currentColor;}
  40%{fill:var(--cyan-glow, #8EEAF5);}
  100%{fill:var(--cyan, #45D3E8);}
}
@keyframes pg-pulse{
  0%,100%{opacity:1;}
  50%{opacity:0.45;}
}

/* Touch devices never fire :hover, so the glyph needs a resting state
   it is actually visible in -- otherwise it is simply invisible on a
   phone. Same lesson as the CIB-04 installation glyph. */
@media (hover:none),(pointer:coarse){
  .phase-glyph{color:rgba(120,180,200,0.5);}
  .phase-glyph .pg-ctrl{opacity:0.18;}
}

@media (prefers-reduced-motion:reduce){
  .phase-glyph,
  .phase-glyph .pg-node,
  .phase-glyph .pg-ctrl{transition:none;}
  .phase-glyph:hover .pg-node,
  .phase-glyph:focus-visible .pg-node{animation:none;fill:var(--cyan, #45D3E8);}
  .phase-glyph:hover .pg-node-4,
  .phase-glyph:focus-visible .pg-node-4{animation:none;fill:var(--cyan, #45D3E8);}
}