/*
  cars-05.css — Celestial Attention Reconstruction System
  All selectors namespaced with .cars- to avoid collision with shared styles.

  SPARK SYSTEM:
  Both the four attention dots (phase 1) and the interactive star buttons
  (phase 2) use the same spark/halo pattern from overview.css. Eight <i>
  elements rotate outward from centre, visible around the fingertip on mobile.
  Incorrect star clicks get red sparks. The old circle/dash glow is gone.
*/

/* ============================================================
   SVG FIELD OVERLAY
   ============================================================ */

.intro-schematic{position:relative;}
.intro-schematic svg{display:block;width:100%;height:auto;}

/* ── THE SQUARE FIELD WRAPPER ──────────────────────────────
   Both the SVG and the button layer live inside this one square,
   so `cx="52"` in the SVG and `left:52%` on a button resolve to the
   same pixel. That equivalence is the whole reason the wrapper is
   square and preserveAspectRatio is "none".
   ────────────────────────────────────────────────────────── */
.cars-field-wrap{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(88%, 76vh);
  aspect-ratio:1 / 1;
  z-index:5;
  animation:carsFieldIn 1.2s ease-out 1;
  pointer-events:none;
}
@keyframes carsFieldIn{from{opacity:0;}to{opacity:1;}}

.cars-field-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
}

.cars-bg-stars circle{fill:#FFFFFF;}

/* Button layer fills the same square */
.cars-btn-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:6;
}

/* ============================================================
   SHARED SPARK / HALO MIXIN
   Used by BOTH .cars-dot (phase 1) and .cars-star-btn (phase 2)
   ============================================================ */

/* ─── Phase 1 — attention dots ─────────────────────────────── */

.cars-dot-row{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  pointer-events:none;
}
.cars-dot{
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  width:44px; height:44px;
  padding:0; border:none; background:none;
  cursor:pointer;
  pointer-events:all;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  touch-action:manipulation;
}
.cars-dot:focus{outline:none;}

/* The dot itself — a small circle that grows with --hold */
.cars-dot::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:calc(6px + var(--hold,0) * 10px);
  height:calc(6px + var(--hold,0) * 10px);
  border-radius:50%;
  background:var(--line, rgba(120,205,225,0.6));
  transition:background 0.2s ease;
}
.cars-dot:last-child::before{
  animation:carsDotPulse 3s ease-in-out infinite;
  background:var(--gold, #E8A94A);
}
.cars-dot[data-state="holding"]::before,
.cars-dot[data-state="acknowledged"]::before{animation:none;}
.cars-dot[data-state="holding"]::before{
  background:var(--teal,#46E0A6);
}
.cars-dot[data-state="acknowledged"]::before{
  width:12px; height:12px;
  background:var(--teal,#46E0A6);
  box-shadow:0 0 14px 4px rgba(70,224,166,0.7);
}
.cars-dot[data-state="acknowledged"]::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:12px; height:12px;
  border-radius:50%;
  border:1px solid rgba(70,224,166,0.5);
  animation:carsBloom 1s ease-out 1;
}
@keyframes carsDotPulse{0%,100%{opacity:0.4;}50%{opacity:1;}}
@keyframes carsBloom{0%{opacity:0.8;width:12px;height:12px;}100%{opacity:0;width:44px;height:44px;}}

/* ─── Phase 2 — star buttons ────────────────────────────────── */

.cars-star-btn{
  position:absolute;
  transform:translate(-50%,-50%);
  width:44px; height:44px;
  padding:0; border:none; background:none;
  pointer-events:all;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  touch-action:manipulation;
  z-index:7;
}
.cars-star-btn:focus{outline:none;}
.cars-star-btn.correct{pointer-events:none;}

/* ─── SHARED: halo + sparks ─────────────────────────────────── */

/* Applied to both .cars-dot and .cars-star-btn children */
.cars-s-halo,
.cars-s-sparks{
  position:absolute;
  left:50%; top:50%;
  width:0; height:0;
  pointer-events:none;
}

/* HALO — expanding glow around the element on hold */
.cars-s-halo{border-radius:50;box-shadow:0 0 0 0 rgba(69,211,232,0);transition:box-shadow 0.12s linear;}

.cars-dot[data-state="holding"] .cars-s-halo{
  box-shadow:
    0 0 calc(20px + var(--hold,0)*46px) calc(5px + var(--hold,0)*17px)
      rgba(69,211,232, calc(0.28 + var(--hold,0)*0.5)),
    0 0 calc(7px + var(--hold,0)*20px) calc(1px + var(--hold,0)*6px)
      rgba(226,248,255, calc(var(--hold,0)*0.55));
}
.cars-dot[data-state="acknowledged"] .cars-s-halo{box-shadow:0 0 26px 8px rgba(70,224,166,0.35);}

.cars-star-btn.probed .cars-s-halo{
  box-shadow:0 0 18px 4px rgba(69,211,232,0.55);
}
.cars-star-btn.correct .cars-s-halo{box-shadow:0 0 22px 6px rgba(70,224,166,0.7);}
.cars-star-btn.incorrect .cars-s-halo{box-shadow:0 0 20px 5px rgba(232,100,74,0.65);}

/* SPARKS — eight radial lines throwing outward */
.cars-s-sparks{opacity:0;transition:opacity 0.14s ease;}
.cars-s-sparks i{
  position:absolute;
  left:0; top:0;
  width:2px;
  height:calc(9px + var(--hold,0) * 20px);
  margin-left:-1px;
  border-radius:1px;
  transform-origin:50% 0;
  background:linear-gradient(to bottom, rgba(226,248,255,0.95), rgba(69,211,232,0));
}
/* Fixed height for star sparks (no --hold variable) */
.cars-star-btn .cars-s-sparks i{height:14px;}
.cars-star-btn.incorrect .cars-s-sparks i{
  background:linear-gradient(to bottom, rgba(255,180,140,0.95), rgba(232,100,74,0));
}

.cars-s-sparks i:nth-child(1){transform:rotate(0deg)   translateY(calc(9px + var(--hold,0)*15px));}
.cars-s-sparks i:nth-child(2){transform:rotate(45deg)  translateY(calc(9px + var(--hold,0)*15px));}
.cars-s-sparks i:nth-child(3){transform:rotate(90deg)  translateY(calc(9px + var(--hold,0)*15px));}
.cars-s-sparks i:nth-child(4){transform:rotate(135deg) translateY(calc(9px + var(--hold,0)*15px));}
.cars-s-sparks i:nth-child(5){transform:rotate(180deg) translateY(calc(9px + var(--hold,0)*15px));}
.cars-s-sparks i:nth-child(6){transform:rotate(225deg) translateY(calc(9px + var(--hold,0)*15px));}
.cars-s-sparks i:nth-child(7){transform:rotate(270deg) translateY(calc(9px + var(--hold,0)*15px));}
.cars-s-sparks i:nth-child(8){transform:rotate(315deg) translateY(calc(9px + var(--hold,0)*15px));}

/* Star button sparks use fixed translation (no --hold) */
.cars-star-btn .cars-s-sparks i:nth-child(1){transform:rotate(0deg)   translateY(14px);}
.cars-star-btn .cars-s-sparks i:nth-child(2){transform:rotate(45deg)  translateY(14px);}
.cars-star-btn .cars-s-sparks i:nth-child(3){transform:rotate(90deg)  translateY(14px);}
.cars-star-btn .cars-s-sparks i:nth-child(4){transform:rotate(135deg) translateY(14px);}
.cars-star-btn .cars-s-sparks i:nth-child(5){transform:rotate(180deg) translateY(14px);}
.cars-star-btn .cars-s-sparks i:nth-child(6){transform:rotate(225deg) translateY(14px);}
.cars-star-btn .cars-s-sparks i:nth-child(7){transform:rotate(270deg) translateY(14px);}
.cars-star-btn .cars-s-sparks i:nth-child(8){transform:rotate(315deg) translateY(14px);}

@keyframes carsSparkFlicker{0%{opacity:1;}100%{opacity:0.62;}}

/* ACTIVE STATES */
.cars-dot[data-state="holding"] .cars-s-sparks{
  opacity:1;
  animation:carsSparkFlicker 0.22s steps(2) infinite;
}
.cars-star-btn.probed .cars-s-sparks{
  opacity:1;
  animation:carsSparkFlicker 0.22s steps(2) infinite;
}
.cars-star-btn.incorrect .cars-s-sparks{
  opacity:1;
  animation:carsSparkFlicker 0.18s steps(2) 3;
}
.cars-star-btn.correct .cars-s-sparks{
  opacity:0.6;
  animation:carsSparkFlicker 0.5s steps(2) 1;
}

/* ============================================================
   SVG STAR VISUALS (no interaction — just rendering)
   ============================================================ */

.cars-node .cars-star-vis{
  fill:#CCDDEE;
  transition:fill 0.2s ease;
}
.cars-anchor-vis{
  fill:#E8E4D0 !important;
  filter:drop-shadow(0 0 1px rgba(255,240,200,0.8));
}
.cars-node .cars-star-glow{fill:none;stroke:none;opacity:0;transition:opacity 0.2s ease;}

/* Probed — driven by g.probed class set from JS */
.cars-node.probed .cars-star-vis{fill:#B0EEFF;filter:drop-shadow(0 0 1px rgba(69,211,232,0.9));}
.cars-node.probed .cars-star-glow{stroke:rgba(69,211,232,0.55);stroke-width:0.5;opacity:1;}

/* Correct */
.cars-node.correct .cars-star-vis{fill:#70F0B0;filter:drop-shadow(0 0 1.5px rgba(70,224,166,0.9));}
.cars-node.correct .cars-star-glow{stroke:rgba(70,224,166,0.6);stroke-width:0.8;opacity:1;}

/* Resolved (after all correct) */
.cars-node.resolved .cars-star-vis{fill:#A0FFD0;filter:drop-shadow(0 0 2px rgba(70,224,166,1));}
.cars-node.resolved .cars-star-glow{stroke:rgba(70,224,166,0.9);stroke-width:1;opacity:1;}

/* Incorrect — brief red tint */
.cars-node.incorrect .cars-star-vis{fill:#FF9988;animation:carsStarIncorrect 1.2s ease-out 1;}
@keyframes carsStarIncorrect{0%{fill:#FF8877;}30%{fill:#FFAA88;}100%{fill:#CCDDEE;}}

/* Dimmed decoys after resolution */
.cars-node.dimmed .cars-star-vis{fill:#223344;opacity:0.25;transition:fill 0.8s ease,opacity 0.8s ease;}
.cars-node.dimmed .cars-star-glow{opacity:0;}

/* Assist pulse */
.cars-node.assist-pulse .cars-star-glow{stroke:rgba(232,169,74,0.9);stroke-width:1;opacity:1;animation:carsAssist 2.2s ease-out 1;}
@keyframes carsAssist{0%{opacity:0;}20%{opacity:1;}100%{opacity:0;}}

/* ============================================================
   CONSTELLATION LINES
   ============================================================ */

.cars-const-line{stroke:rgba(70,224,166,0);stroke-width:0.35;stroke-linecap:round;}
.cars-const-line.partial{stroke:rgba(70,224,166,0.28);stroke-dasharray:1.5 1;}
.cars-const-line.resolved{
  stroke:rgba(70,224,166,0.6);stroke-dasharray:none;
  animation:carsLineDraw 0.6s ease-out 1;
  filter:drop-shadow(0 0 0.8px rgba(70,224,166,0.5));
}
@keyframes carsLineDraw{from{stroke-opacity:0;stroke-width:0;}to{stroke-opacity:0.6;stroke-width:0.35;}}

/* ============================================================
   SYSTEM MESSAGE
   ============================================================ */

.cars-sys-msg{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.62rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--teal,#46E0A6);
  text-align:center;
  margin:8px 0 0;
  white-space:pre-line;
  opacity:0;
  transition:opacity 0.6s ease;
}
.cars-sys-msg.visible{opacity:0.85;}
.cars-sys-msg[hidden]{display:none;}

/* ============================================================
   FIELD BACKGROUND TRANSITION
   ============================================================ */

.intro-reveal.cars-field-active{
  background:radial-gradient(ellipse at 50% 40%, rgba(4,10,26,0.98) 0%, rgba(2,6,16,0.99) 100%);
}
/* Once the field is active the hero content is no longer needed —
   it only exists to host the four dots. Fade it out completely so the
   constellation reads against clean space. */
.intro-reveal.cars-field-active .intro-content{
  opacity:0;
  pointer-events:none;
  transition:opacity 1s ease;
}
.intro-reveal.cars-field-active{
  min-height:88vh;   /* keep the section tall enough for the square field */
}

/* ============================================================
   FIELD HINT
   ============================================================ */

.cars-field-hint{
  position:absolute;
  bottom:8%; left:50%;
  transform:translateX(-50%);
  font-family:'IBM Plex Mono',monospace;
  font-size:0.6rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:rgba(70,224,166,0.7);
  text-align:center;
  z-index:10;
  pointer-events:none;
  white-space:nowrap;
  transition:color 0.3s ease;
}
.cars-field-hint.flash{color:rgba(255,255,255,0.9);}
.cars-field-hint.assist-hint{pointer-events:all;display:flex;align-items:center;gap:12px;}
.cars-assist-btn{
  font-family:'IBM Plex Mono',monospace;font-size:0.54rem;letter-spacing:0.16em;
  color:var(--bg,#05070D);background:rgba(70,224,166,0.8);border:none;padding:3px 8px;cursor:pointer;pointer-events:all;
}
.cars-assist-btn:hover{background:rgba(70,224,166,1);}

/* ============================================================
   ARTIFACT PANEL
   ============================================================ */

.cars-artifact-panel{
  position:absolute;
  bottom:6%; left:50%;
  transform:translateX(-50%) translateY(20px);
  width:min(480px,90%);
  background:rgba(4,10,24,0.92);
  border:1px solid rgba(70,224,166,0.45);
  padding:22px 28px;
  text-align:center;
  z-index:12;
  opacity:0;
  transition:opacity 0.6s ease,transform 0.6s ease;
  backdrop-filter:blur(4px);
}
.cars-artifact-panel.visible{opacity:1;transform:translateX(-50%) translateY(0);}
.cars-panel-status{font-family:'IBM Plex Mono',monospace;font-size:0.58rem;letter-spacing:0.22em;color:var(--teal,#46E0A6);margin:0 0 14px;text-transform:uppercase;}
.cars-panel-name{font-family:'Big Shoulders',sans-serif;font-weight:900;font-size:clamp(1.4rem,5vw,2.2rem);color:#fff;margin:0 0 2px;letter-spacing:0.04em;}
.cars-panel-code{font-family:'IBM Plex Mono',monospace;font-size:0.68rem;letter-spacing:0.14em;color:var(--violet,#8F72E8);margin:0 0 4px;}
.cars-panel-count{font-family:'IBM Plex Mono',monospace;font-size:0.65rem;letter-spacing:0.12em;color:var(--gold,#E8A94A);margin:0 0 10px;}
.cars-panel-title{font-family:'IBM Plex Mono',monospace;font-size:0.75rem;letter-spacing:0.06em;color:rgba(255,255,255,0.85);margin:0 0 4px;}
.cars-panel-sub{font-family:'IBM Plex Mono',monospace;font-size:0.6rem;letter-spacing:0.08em;color:var(--ink-soft,#93AAB9);margin:0 0 18px;}
.cars-panel-btns{display:flex;flex-direction:column;gap:8px;align-items:center;}
.cars-panel-access{font-family:'IBM Plex Mono',monospace;font-size:0.7rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--bg,#05070D);background:var(--teal,#46E0A6);padding:10px 20px;text-decoration:none;transition:filter 0.2s ease;}
.cars-panel-access:hover{filter:brightness(1.1);}
.cars-panel-release{font-family:'IBM Plex Mono',monospace;font-size:0.6rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-soft,#93AAB9);background:none;border:1px solid rgba(120,180,200,0.25);padding:6px 14px;cursor:pointer;transition:border-color 0.2s ease,color 0.2s ease;}
.cars-panel-release:hover{border-color:rgba(120,180,200,0.5);color:rgba(200,220,235,0.9);}

/* ============================================================
   ARTIFACT PAGE — COUNT (upper right, orange, large)
   ============================================================ */

/* The shared main is `grid-template-columns:1fr 230px` — it reserves a
   230px marginalia track plus a 36px gap even on pages that have no
   sidebar, which is the dead strip on the right of these pages.
   Release BOTH the grid track and the article's 66ch cap; releasing
   only the cap leaves the empty column still holding its space. */
main.artifact-main{
  grid-template-columns:1fr;
}
main.artifact-main > article{max-width:none;}

.cars-artifact-count{
  position:absolute;
  top:0; right:0;
  font-family:'IBM Plex Mono',monospace;
  font-size:clamp(0.85rem,2.5vw,1.1rem);
  font-weight:700;
  letter-spacing:0.1em;
  color:var(--gold,#E8A94A);
  text-align:right;
  padding:4px 0;
  white-space:nowrap;
}
.cars-artifact-count-done{color:var(--teal,#46E0A6);}

/* Make the h1 container relative so the count positions against it */
main.artifact-main article h1{position:relative;padding-right:120px;}

/* ============================================================
   CLAIM TRIGGER + OVERLAY (on artifact pages)
   ============================================================ */

.cars-claim-trigger-wrap{text-align:center;margin:0 0 1.4em;}
.cars-claim-trigger{
  font-family:'IBM Plex Mono',monospace;font-size:0.72rem;font-weight:700;
  letter-spacing:0.16em;text-transform:uppercase;
  color:var(--bg,#05070D);
  background:linear-gradient(90deg,var(--gold,#E8A94A),var(--gold-dim,#C9852F));
  border:none;padding:11px 24px;cursor:pointer;transition:filter 0.2s ease;
}
.cars-claim-trigger:hover{filter:brightness(1.08);}

.cars-claim-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(4,8,14,0.9);
  display:flex;align-items:center;justify-content:center;
  padding:20px;opacity:0;transition:opacity 0.4s ease;backdrop-filter:blur(4px);
}
.cars-claim-overlay.visible{opacity:1;}
.cars-claim-inner{
  position:relative;background:#0B1422;
  border:1px solid rgba(70,224,166,0.4);
  padding:28px 24px 20px;max-width:640px;width:100%;text-align:center;
}
.cars-claim-close{
  position:absolute;top:10px;right:12px;
  background:none;border:1px solid rgba(120,180,200,0.3);border-radius:50%;
  width:28px;height:28px;font-size:0.72rem;color:var(--ink-soft,#93AAB9);
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s;
}
.cars-claim-close:hover{background:rgba(255,255,255,0.06);}
.cars-claim-status{font-family:'IBM Plex Mono',monospace;font-size:0.68rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--teal,#46E0A6);margin:0 0 4px;}
.cars-claim-sub{font-family:'IBM Plex Mono',monospace;font-size:0.58rem;letter-spacing:0.1em;color:var(--ink-soft,#93AAB9);margin:0 0 16px;}
.cars-claim-canvas{display:block;width:100%;height:auto;max-width:580px;margin:0 auto 16px;border:1px solid rgba(70,224,166,0.2);}
.cars-claim-btns{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}
.cars-claim-dl,.cars-claim-share,.cars-claim-close-btn{
  font-family:'IBM Plex Mono',monospace;font-size:0.68rem;font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;padding:9px 18px;border:none;cursor:pointer;transition:filter 0.2s ease;
}
.cars-claim-dl{background:var(--teal,#46E0A6);color:var(--bg,#05070D);}
.cars-claim-dl:hover{filter:brightness(1.1);}
.cars-claim-share{background:rgba(70,224,166,0.15);color:var(--teal,#46E0A6);border:1px solid rgba(70,224,166,0.4);}
.cars-claim-share:hover{background:rgba(70,224,166,0.25);}
.cars-claim-close-btn{background:none;color:var(--ink-soft,#93AAB9);border:1px solid rgba(120,180,200,0.25);}
.cars-claim-close-btn:hover{border-color:rgba(120,180,200,0.5);}

/* "View Claimed Artifact" link (shown when already claimed) */
.cars-claimed-link{
  display:inline-block;
  font-family:'IBM Plex Mono',monospace;font-size:0.72rem;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--gold,#E8A94A);
  border:1px solid rgba(232,169,74,0.4);
  padding:11px 24px;text-decoration:none;
  transition:border-color 0.2s ease,filter 0.2s ease;
}
.cars-claimed-link:hover{border-color:rgba(232,169,74,0.7);filter:brightness(1.1);}

/* ============================================================
   ACCESSIBILITY + REDUCED MOTION
   ============================================================ */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

@media (prefers-reduced-motion:reduce){
  .cars-dot::before,.cars-dot::after,.cars-s-halo,.cars-s-sparks,
  .cars-node .cars-star-glow,.cars-node .cars-star-vis,
  .cars-const-line,.cars-field-overlay,.cars-artifact-panel{
    animation:none !important;transition:opacity 0.3s ease !important;
  }
  .cars-const-line.resolved{stroke:rgba(70,224,166,0.6);}
  .cars-dot[data-state="holding"] .cars-s-sparks,
  .cars-star-btn.probed .cars-s-sparks{opacity:0.7;}
}