:root {
  color-scheme: dark;
  --eyce-navy: #020d1e;
  --eyce-blue: #1aa9ff;
  --eyce-blue-soft: #7cd9ff;
  --eyce-orange: #ff7a00;
  --eyce-white: #f8fbff;
  --eyce-glass: rgba(2, 13, 30, 0.7);
  --eyce-border: rgba(124, 217, 255, 0.35);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 75% 20%, rgba(26, 169, 255, 0.12), transparent 32%),
    radial-gradient(circle at 10% 90%, rgba(255, 122, 0, 0.10), transparent 26%),
    #010815;
  color: var(--eyce-white);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

a { color: inherit; }

.infographic-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2vw, 28px);
}

.infographic-shell {
  width: min(100%, 1672px);
}

.infographic-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  border-radius: clamp(12px, 1.2vw, 22px);
  isolation: isolate;
  background: #020d1e;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(124, 217, 255, 0.14),
    inset 0 0 50px rgba(26, 169, 255, 0.08);
}

.base-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
  transform-origin: center;
  animation: image-breathe 18s ease-in-out infinite alternate;
  filter: saturate(1.02) contrast(1.01);
}

.infographic-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 0 35%, rgba(255,255,255,.04) 43%, transparent 52%),
    radial-gradient(circle at 50% 50%, transparent 55%, rgba(0, 0, 0, .16));
  background-size: 220% 100%, 100% 100%;
  animation: sheen 10s linear infinite;
  mix-blend-mode: screen;
}

.motion-layer,
.particle-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.motion-layer .flow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 10 18;
  animation: dash-flow 2.6s linear infinite;
}

.motion-layer .flow.blue {
  stroke: var(--eyce-blue);
  filter: drop-shadow(0 0 6px rgba(26,169,255,.95));
}

.motion-layer .flow.orange {
  stroke: var(--eyce-orange);
  filter: drop-shadow(0 0 6px rgba(255,122,0,.95));
}

.motion-layer .glow-line {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 26 16;
  animation: dash-flow 3.3s linear infinite;
}

.motion-layer .pulse-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: pulse-dot 1.8s ease-out infinite;
}

.motion-layer .heat-wave {
  fill: none;
  stroke: var(--eyce-orange);
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(255,122,0,.9));
  animation: heat-rise 2.7s ease-in-out infinite;
}

.motion-layer .cool-beam {
  fill: url(#coolBeam);
  opacity: 0;
  animation: beam-pulse 3s ease-in-out infinite;
}

.motion-layer .warm-beam {
  fill: url(#warmBeam);
  opacity: 0;
  animation: beam-pulse 3.2s ease-in-out infinite .4s;
}

.motion-layer .solar-sheen {
  fill: url(#panelSheen);
  transform: translateX(-420px) skewX(-12deg);
  animation: panel-sweep 5.5s ease-in-out infinite;
  opacity: .8;
}

.particle-layer .particle {
  position: absolute;
  width: var(--s, 4px);
  height: var(--s, 4px);
  border-radius: 50%;
  background: var(--c, var(--eyce-blue));
  box-shadow: 0 0 10px currentColor;
  left: var(--x);
  top: var(--y);
  opacity: 0;
  animation: particle-float var(--d, 7s) linear infinite var(--delay, 0s);
}

.hotspot {
  --spot-color: var(--eyce-blue);
  position: absolute;
  z-index: 6;
  left: var(--x);
  top: var(--y);
  width: clamp(22px, 2.2vw, 34px);
  height: clamp(22px, 2.2vw, 34px);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 999px;
  background: color-mix(in srgb, var(--spot-color) 40%, transparent);
  box-shadow:
    0 0 0 0 color-mix(in srgb, var(--spot-color) 60%, transparent),
    0 0 18px var(--spot-color);
  cursor: pointer;
  padding: 0;
  animation: hotspot-pulse 2.1s ease-out infinite;
}

.hotspot.orange { --spot-color: var(--eyce-orange); }

.hotspot::before {
  content: "";
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 10px white;
}

.hotspot-card {
  position: absolute;
  z-index: 8;
  left: var(--card-x, calc(var(--x) + 2%));
  top: var(--card-y, calc(var(--y) + 3%));
  width: min(280px, 38vw);
  padding: 12px 14px;
  border: 1px solid var(--eyce-border);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(2, 13, 30, .94), rgba(8, 37, 70, .88));
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0,0,0,.36), 0 0 24px rgba(26,169,255,.16);
  transform: translateY(8px) scale(.98);
  opacity: 0;
  pointer-events: none;
  transition: .22s ease;
  font-size: clamp(11px, 1vw, 15px);
  line-height: 1.35;
}

.hotspot-card strong {
  display: block;
  margin-bottom: 4px;
  color: var(--eyce-orange);
  font-size: 1.08em;
}

.hotspot:hover + .hotspot-card,
.hotspot:focus-visible + .hotspot-card,
.hotspot[aria-expanded="true"] + .hotspot-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.control-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  color: rgba(248,251,255,.78);
  font-size: 13px;
}

.control-group { display: flex; gap: 8px; flex-wrap: wrap; }

.control-button,
.gallery-link {
  appearance: none;
  border: 1px solid rgba(124,217,255,.32);
  border-radius: 999px;
  background: rgba(2,13,30,.82);
  color: var(--eyce-white);
  padding: 8px 13px;
  text-decoration: none;
  cursor: pointer;
  transition: .2s ease;
}

.control-button:hover,
.control-button:focus-visible,
.gallery-link:hover,
.gallery-link:focus-visible {
  border-color: var(--eyce-orange);
  box-shadow: 0 0 18px rgba(255,122,0,.22);
  outline: none;
}

.embed-note { opacity: .72; }

body.embed .control-bar { display: none; }
body.embed .infographic-page { min-height: auto; padding: 0; }
body.embed .infographic-stage { border-radius: 0; box-shadow: none; }

body.is-paused *,
body.is-paused *::before,
body.is-paused *::after {
  animation-play-state: paused !important;
}

@keyframes image-breathe {
  0% { transform: scale(1); }
  100% { transform: scale(1.018); }
}

@keyframes sheen {
  from { background-position: 180% 0, 0 0; }
  to { background-position: -40% 0, 0 0; }
}

@keyframes dash-flow {
  to { stroke-dashoffset: -56; }
}

@keyframes pulse-dot {
  0% { transform: scale(.7); opacity: .85; }
  70%, 100% { transform: scale(2.25); opacity: 0; }
}

@keyframes heat-rise {
  0% { transform: translateY(18px); opacity: 0; }
  25% { opacity: .95; }
  80% { opacity: .55; }
  100% { transform: translateY(-38px); opacity: 0; }
}

@keyframes beam-pulse {
  0%, 100% { opacity: .13; transform: scaleY(.88); }
  50% { opacity: .78; transform: scaleY(1.05); }
}

@keyframes panel-sweep {
  0%, 12% { transform: translateX(-500px) skewX(-12deg); opacity: 0; }
  42% { opacity: .85; }
  76%, 100% { transform: translateX(1350px) skewX(-12deg); opacity: 0; }
}

@keyframes hotspot-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--spot-color) 55%, transparent), 0 0 16px var(--spot-color); }
  70% { box-shadow: 0 0 0 16px transparent, 0 0 24px var(--spot-color); }
  100% { box-shadow: 0 0 0 0 transparent, 0 0 16px var(--spot-color); }
}

@keyframes particle-float {
  0% { transform: translate3d(0, 20px, 0) scale(.7); opacity: 0; }
  15% { opacity: .72; }
  80% { opacity: .42; }
  100% { transform: translate3d(var(--dx, 20px), -110px, 0) scale(1.35); opacity: 0; }
}

@media (max-width: 760px) {
  .infographic-page { padding: 6px; }
  .infographic-stage { border-radius: 10px; }
  .hotspot-card { width: min(250px, 65vw); }
  .control-bar { padding: 0 6px; }
  .embed-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}