/* ============================================================
   PRIMENESS — Contact (THE POWER STATION)
   Stage 1: the page loads dark; HOLD the gauge to charge it.
   Stage 2: at 100% the contact deck boots like a building
   coming online — flicker cascade, conduit pulses, live lines.
   Reuses styles.css primitives (.container, .btn, .eyebrow,
   .h2, .wire form, [data-reveal], cursor, blip keyframe).
   ============================================================ */

/* Headings & instrument text unselectable (site pattern) */
.pwr h1, .pwr h2, .pwr .eyebrow, .pwr-brand, .gauge, .pst-status, .pst-sub,
.ammeter, .line__tag, .line--here { -webkit-user-select: none; user-select: none; }

/* ---------- Top bar ---------- */
.pwr-top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 14px clamp(20px, 4vw, 44px);
  background: rgba(10, 10, 11, .82);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.pwr-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--white); }
.pwr-brand__mark { color: var(--volt); display: grid; place-items: center; }
.pwr-brand__text { display: grid; line-height: 1.05; }
.pwr-brand__name { font: 700 15px/1 var(--font-display); letter-spacing: .06em; color: var(--white); }
.pwr-brand__sub { font: 500 8.5px/1 var(--font-mono); letter-spacing: .3em; color: var(--muted); margin-top: 3px; }
.pwr-top__links { display: inline-flex; align-items: center; gap: clamp(16px, 3vw, 30px); }
.pwr-top__tel { font: 700 14px/1 var(--font-mono); letter-spacing: .06em; color: var(--volt); transition: text-shadow .25s; }
.pwr-top__tel:hover { text-shadow: 0 0 14px var(--volt-glow); }
.pwr-top__back { font: 500 13px/1 var(--font-mono); letter-spacing: .04em; color: var(--muted); transition: color .25s; }
.pwr-top__back:hover { color: var(--white); }

/* ---------- Stage 1: the power station ---------- */
.pstation { position: relative; overflow: hidden; min-height: calc(100vh - 60px); display: grid; align-items: center; padding-block: clamp(70px, 10vh, 120px); }
.pstation #bgCanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* The veil keeps the station "dark" — JS thins it as charge rises, waking the current field */
.pstation__veil { position: absolute; inset: 0; z-index: 1; background: #060607; opacity: .82; pointer-events: none; transition: opacity .2s linear; }
.pstation__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pst-title { font: 700 clamp(42px, 7.4vw, 96px) var(--font-display); line-height: .98; letter-spacing: -.03em; color: var(--white); margin-top: 18px; }
.pst-title span { display: block; white-space: nowrap; }
.pst-sub { max-width: 46ch; margin-top: 20px; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.6; color: var(--muted); }

/* The gauge — a breaker dial you HOLD */
.gauge {
  position: relative; width: clamp(180px, 26vw, 230px); aspect-ratio: 1;
  margin-top: clamp(30px, 4.5vw, 48px); border-radius: 50%;
  background: rgba(19, 19, 22, .55); border: 1px solid var(--line);
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: border-color .3s, box-shadow .3s, transform .15s var(--ease);
}
.gauge:hover { border-color: rgba(191, 255, 0, .5); }
.gauge.is-holding { transform: scale(.985); }
.gauge.is-straining { animation: gaugeJitter .09s linear infinite; }
.gauge.is-done { border-color: var(--volt); box-shadow: 0 0 60px -10px var(--volt-glow); cursor: default; animation: none; }
@keyframes gaugeJitter {
  0% { transform: scale(.985) translate(0, 0); }
  25% { transform: scale(.985) translate(1.4px, -1px); }
  50% { transform: scale(.985) translate(-1.2px, 1.2px); }
  75% { transform: scale(.985) translate(1px, 1px); }
  100% { transform: scale(.985) translate(-1.3px, -1.1px); }
}
.gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge__track { fill: none; stroke: var(--line); stroke-width: 3; }
.gauge__fill { fill: none; stroke: var(--volt); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0 100; filter: drop-shadow(0 0 8px var(--volt-glow)); }
.gauge__core { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; pointer-events: none; }
.gauge__pct { font: 700 clamp(34px, 4.6vw, 44px)/1 var(--font-display); letter-spacing: -.02em; color: var(--white); font-variant-numeric: tabular-nums; }
.gauge.is-done .gauge__pct { color: var(--volt); text-shadow: 0 0 18px var(--volt-glow); }
.gauge__hint { font: 700 10.5px/1 var(--font-mono); letter-spacing: .3em; color: var(--muted); }
.gauge.is-holding .gauge__hint { color: var(--volt); }

/* Sparks — fire once when the station comes online */
.gauge .spark { position: absolute; top: 12%; left: 50%; width: 3px; height: 12px; border-radius: 2px; background: var(--volt); opacity: 0; pointer-events: none; }
.gauge.is-done .spark { animation: sparkFly2 .6s var(--ease-out) forwards; }
.gauge.is-done .spark:nth-child(4) { --sx: -64px; --sy: -40px; --sr: -62deg; animation-delay: .02s; }
.gauge.is-done .spark:nth-child(5) { --sx: -36px; --sy: -66px; --sr: -28deg; animation-delay: .07s; }
.gauge.is-done .spark:nth-child(6) { --sx: -8px;  --sy: -76px; --sr: -6deg;  animation-delay: .01s; }
.gauge.is-done .spark:nth-child(7) { --sx: 12px;  --sy: -72px; --sr: 9deg;   animation-delay: .09s; }
.gauge.is-done .spark:nth-child(8) { --sx: 40px;  --sy: -62px; --sr: 30deg;  animation-delay: .03s; }
.gauge.is-done .spark:nth-child(9) { --sx: 66px;  --sy: -36px; --sr: 64deg;  animation-delay: .05s; }
@keyframes sparkFly2 {
  0%   { opacity: 0; transform: translate(-50%, 0) rotate(var(--sr, 0deg)) scaleY(.4); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--sx, 0px)), var(--sy, -60px)) rotate(var(--sr, 0deg)) scaleY(1); }
}

.pst-status { margin-top: clamp(22px, 3.4vw, 34px); min-height: 15px; font: 700 11.5px/1.6 var(--font-mono); letter-spacing: .24em; color: var(--muted); text-transform: uppercase; }
.pst-status.is-charging { color: var(--white); }
.pst-status.is-online { color: var(--volt); text-shadow: 0 0 14px var(--volt-glow); }

/* Full-screen flash at 100% */
.flash { position: absolute; inset: 0; z-index: 6; background: #fff; opacity: 0; pointer-events: none; }
.flash.is-flash { animation: flashBang .6s var(--ease-out) forwards; }
@keyframes flashBang {
  0% { opacity: 0; background: #fff; }
  12% { opacity: .95; }
  40% { opacity: .35; background: var(--volt); }
  100% { opacity: 0; }
}

/* ---------- Stage 2: the contact deck ---------- */
/* display:none (not visibility) — a hidden deck must take ZERO layout space,
   or the page scrolls into a mile of dead black before the gauge is charged.
   The canvas engine self-heals on reveal (ResizeObserver sizes it on first
   real layout; IntersectionObserver starts the loop when scrolled into view). */
.deck { position: relative; overflow: hidden; border-top: 1px solid var(--line); background: #060607; display: none; }
.deck.is-online { display: block; }
.deck #footerCanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .8; }
.deck__inner { position: relative; z-index: 2; padding-block: clamp(60px, 9vw, 110px); display: flex; flex-direction: column; align-items: center; text-align: center; }

/* Everything with [data-boot] powers on with a fluorescent flicker, cascaded by JS delays */
.deck [data-boot] { opacity: 0; }
.deck.is-online [data-boot] { animation: powerFlicker .9s steps(1) forwards; }
@keyframes powerFlicker {
  0% { opacity: 0; }
  8% { opacity: .85; }
  16% { opacity: .08; }
  28% { opacity: 1; }
  38% { opacity: .3; }
  52%, 100% { opacity: 1; }
}

.ammeter {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px; border: 1px solid var(--line); border-radius: 100px;
  font: 600 11px/1 var(--font-mono); letter-spacing: .16em; color: var(--muted); text-transform: uppercase;
  background: rgba(19, 19, 22, .6);
}
.ammeter i { width: 8px; height: 8px; border-radius: 50%; background: var(--volt); animation: blip 1.8s var(--ease) infinite; }
.ammeter b { color: var(--volt); font-variant-numeric: tabular-nums; min-width: 4.6ch; text-align: center; }

.deck__title { margin-top: clamp(26px, 4vw, 40px); }

/* Conduits: current runs from the source down into the three lines */
.conduits { width: min(720px, 92%); height: 90px; margin-top: clamp(24px, 3.6vw, 38px); overflow: visible; }
.conduit { fill: none; stroke: var(--line); stroke-width: 2; }
.conduit--pulse { stroke: var(--volt); stroke-width: 2; stroke-dasharray: 10 90; stroke-dashoffset: 100; filter: drop-shadow(0 0 6px var(--volt-glow)); opacity: 0; }
.deck.is-online .conduit--pulse { opacity: 1; animation: conduitRun 2.4s linear infinite; }
.deck.is-online .conduit--pulse:nth-of-type(5) { animation-delay: .5s; }
.deck.is-online .conduit--pulse:nth-of-type(6) { animation-delay: 1s; }
@keyframes conduitRun { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

.deck__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 22px); width: 100%; max-width: 980px; text-align: left; }
.line { display: grid; align-content: start; gap: 8px; padding: clamp(20px, 2.4vw, 28px); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); transition: transform .3s var(--ease), border-color .3s; }
a.line:hover { transform: translateY(-4px); border-color: var(--volt); }
a.line:hover .line__tag { text-shadow: 0 0 12px var(--volt-glow); }
.line__tag { font: 700 10.5px/1 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--volt); }
.line__val { font: 600 clamp(16px, 1.7vw, 19px)/1.3 var(--font-display); color: var(--white); overflow-wrap: anywhere; }
.line__note { font: 500 12px/1.5 var(--font-mono); color: var(--faint); }

.deck__form { width: 100%; max-width: 980px; margin-top: clamp(18px, 2.4vw, 26px); text-align: left; }

/* ---------- Bottom bar ---------- */
.pwr-bottom { border-top: 1px solid var(--line); background: #060607; }
.pwr-bottom__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 24px; font: 500 12.5px/1.5 var(--font-mono); color: var(--faint); }
.pwr-bottom a { color: var(--muted); transition: color .25s; }
.pwr-bottom a:hover { color: var(--volt); }

/* ---------- Responsive ---------- */
@media (max-width: 780px) {
  .conduits { display: none; }
  .deck__tiles { grid-template-columns: 1fr; margin-top: clamp(24px, 5vw, 36px); }
}
@media (max-width: 480px) {
  .pwr-top__back { display: none; }
  .pst-title span { white-space: normal; }
}