/* ==========================================================================
   Cyber City · the light that follows the mouse (assets/js/spot.js), shared by the pages that use it
   (Why Cyber City, Contact, the policy pages, the page that is not here). Ideas from 21st.dev, drawn in the identity:
   a lime edge lit around the cursor, a faint voxel grid under it, a soft tilt ([data-ecc-tilt]); a photo that leans
   away from the cursor ([data-ecc-parallax]); a main button that leans toward it ([data-ecc-magnet]); the trace of a front-page answer that powers on (end).
   Only with a mouse and with motion on (the script decides); without it every card is simply still.
   Same rules as every sheet of the theme: tokens only, classes start with ecc- (or is-).
   ========================================================================== */

@property --spot-glow { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

.ecc-spot { position: relative; isolation: isolate; }
/* A card that answers the mouse keeps the pixel kit's square on all of it (Rayan, 4 Oct 2026: the cursor turned into the
   text cursor over the pillars). The kit gives a list item and its text the text cursor, so a card that is a list item
   alternated between the two; here the card, its words and its list item follow the square of the page. A link or a
   button inside still shows the square with its corner pixels. */
:root [data-ecc-spot]:not(a, button),
:root [data-ecc-spot]:not(a, button) :where(p, h2, h3, h4, li, span, strong, small) { cursor: inherit; }
.ecc-spot::before {
  content: ""; position: absolute; inset: 0; border: 1px solid transparent; border-radius: inherit; pointer-events: none;
  background: radial-gradient(24em circle at var(--spot-mx, 50%) var(--spot-my, 50%), var(--ecc-lime), transparent 42%) border-box;
  -webkit-mask: linear-gradient(black 0 0) padding-box, linear-gradient(black 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--ecc-d-base) var(--ecc-ease-out);
}
.ecc-spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--ecc-spark) 30%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ecc-spark) 30%, transparent) 1px, transparent 1px);
  background-size: var(--ecc-s-4) var(--ecc-s-4);
  -webkit-mask: radial-gradient(12em circle at var(--spot-mx, 50%) var(--spot-my, 50%), black, transparent 72%);
  mask: radial-gradient(12em circle at var(--spot-mx, 50%) var(--spot-my, 50%), black, transparent 72%);
  opacity: 0; transition: opacity var(--ecc-d-base) var(--ecc-ease-out);
}
.ecc-spot.is-spot::before, .ecc-spot.is-spot::after { opacity: 1; }
.ecc-spot > * { position: relative; z-index: var(--ecc-z-raised); }
/* the lit edge alone, drawn over a photo tile (the What we carry tiles of the front page, theme 0.11.0): no grid, and
   the tile's own picture keeps its place */
.ecc-spot-edge { isolation: isolate; }
.ecc-spot-edge::before {
  content: ""; position: absolute; inset: 0; z-index: var(--ecc-z-raised); border: 1px solid transparent; border-radius: inherit; pointer-events: none;
  background: radial-gradient(24em circle at var(--spot-mx, 50%) var(--spot-my, 50%), var(--ecc-lime), transparent 42%) border-box;
  -webkit-mask: linear-gradient(black 0 0) padding-box, linear-gradient(black 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--ecc-d-base) var(--ecc-ease-out);
}
.ecc-spot-edge.is-spot::before { opacity: 1; }
/* a soft lime wash under the cursor, for cards that ask for it */
.ecc-spot--wash {
  background-image: radial-gradient(22em circle at var(--spot-mx, 50%) var(--spot-my, 50%), color-mix(in srgb, var(--ecc-lime) var(--spot-glow), transparent), transparent 62%);
  transition: --spot-glow var(--ecc-d-base) var(--ecc-ease-out);
}
.ecc-spot--wash.is-spot { --spot-glow: 9%; }

[data-ecc-tilt] { transform: perspective(60em) rotateX(var(--spot-rx, 0deg)) rotateY(var(--spot-ry, 0deg)); transition: transform var(--ecc-d-base) var(--ecc-ease-out); }
[data-ecc-parallax] img { transform: translate3d(var(--spot-px, 0), var(--spot-py, 0), 0) scale(1.05); transition: transform var(--ecc-d-slow) var(--ecc-ease-out); }
[data-ecc-magnet] { transform: translate3d(var(--spot-tx, 0), var(--spot-ty, 0), 0); transition: transform var(--ecc-d-fast) var(--ecc-ease-out); }

/* reduced motion and "Pause motion": nothing tilts, follows or leans */
@media (prefers-reduced-motion: reduce) {
  [data-ecc-tilt], [data-ecc-parallax] img, [data-ecc-magnet] { transform: none; transition: none; }
}
html[data-ecc-motion="paused"] [data-ecc-tilt], html[data-ecc-motion="paused"] [data-ecc-parallax] img, html[data-ecc-motion="paused"] [data-ecc-magnet] { transform: none; transition: none; }

/* The trace by each of the six straight answers on the front page powers on under the mouse (Rayan, 4 Oct 2026): its
   pad lights in four pixel steps, then the line draws itself from the pad to the words, once per visit of the row, and the answer's small label takes the same lime; the
   mouse leaves and the trace goes quiet again. Only with a mouse and with motion on; touch, reduced motion and
   "Pause motion" keep the still trace. The line is 43 units long (M8.25 12H20L28 4H48), so a dash of 44 covers it. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html:not([data-ecc-motion="paused"]) .ecc-qa__trace .ecc-trace__pad,
  html:not([data-ecc-motion="paused"]) .ecc-qa__trace .ecc-trace__path { transition: fill var(--ecc-d-fast) var(--ecc-ease-pixel), stroke var(--ecc-d-base) var(--ecc-ease-out); }
  html:not([data-ecc-motion="paused"]) .ecc-qa__row:hover .ecc-qa__trace .ecc-trace__pad { fill: var(--ecc-spark); stroke: var(--ecc-spark); }
  html:not([data-ecc-motion="paused"]) .ecc-qa__name { transition: color var(--ecc-d-base) var(--ecc-ease-out); }
  html:not([data-ecc-motion="paused"]) .ecc-qa__row:hover .ecc-qa__name { color: var(--ecc-spark); }
  html:not([data-ecc-motion="paused"]) .ecc-qa__row:hover .ecc-qa__trace .ecc-trace__path {
    stroke: var(--ecc-spark); stroke-dasharray: 44; animation: ecc-trace-draw var(--ecc-d-slow) var(--ecc-ease-current) var(--ecc-d-fast) both;
  }
}
@keyframes ecc-trace-draw { from { stroke-dashoffset: 44; } to { stroke-dashoffset: 0; } }