/* Lockon — animated LPEPE Host demo v2 (home hero). Scene built by hero-demo.js.
   Sizes are % of the stage width so SVG (viewBox 440×333) and HTML nodes stay in lockstep. */
.hero-demo {
  --hd-gold: hsl(45 92% 50%);
  --hd-gold-soft: hsl(46 100% 58% / 0.3);
  --hd-gold-hi: hsl(48 100% 80%);
  --hd-ink: hsl(var(--foreground));
  --hd-card: hsl(var(--card));
  --hd-ring: hsl(0 0% 6% / 0.96);
  position: relative;
  width: min(100%, 448px);
  aspect-ratio: 440 / 333;
  margin: 0 auto;
  overflow: visible;
  contain: layout style;
  font-family: var(--font-body);
  user-select: none;
  -webkit-user-select: none;
}

html.dark .hero-demo {
  --hd-ring: hsl(0 0% 8% / 0.98);
}

/* Layers: world (LPEPE scene, camera-transformed) + front (FIRE and its Riders, screen space) */
.hero-demo .hd-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-demo .hd-cam {
  z-index: 1;
  transform-origin: 0 0;
  will-change: transform, opacity;
}
.hero-demo .hd-front {
  z-index: 2;
}
.hero-demo .hd-node.hd-fire {
  z-index: 6;
}
.hero-demo .hd-front .hd-glow,
.hero-demo .hd-front .hd-orbits {
  opacity: 0;
}

.hero-demo .hd-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

/* Nodes: positioned purely by transform (set from JS) */
.hero-demo .hd-node {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  opacity: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
}

.hero-demo.is-ready .hd-node {
  opacity: 1;
}

/* Before JS runs: show LPEPE centred so first paint matches (no layout shift) */
.hero-demo .hd-node.hd-host {
  z-index: 3;
  left: 50%;
  top: 49.85%;
  transform: translate(-50%, -50%);
  opacity: 1;
}

.hero-demo.is-ready .hd-node.hd-host {
  left: 0;
  top: 0;
}

.hero-demo .hd-av {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}

.hero-demo .hd-av > img,
.hero-demo .hd-av > svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  image-rendering: -webkit-optimize-contrast;
}

.hero-demo .hd-av > img.hd-px {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.hero-demo .hd-host .hd-av > img {
  box-shadow:
    0 0 0 2px hsl(45 90% 50% / 0.35),
    0 0 22px var(--pepe-glow-soft),
    0 8px 14px hsl(0 0% 0% / 0.16);
}

.hero-demo .hd-rider .hd-av > img {
  box-shadow:
    0 0 0 2.5px var(--hd-ring),
    0 0 0 3.5px hsl(45 92% 50% / 0.28),
    0 4px 10px hsl(0 0% 0% / 0.28);
}

.hero-demo .hd-rider.hd-r2 {
  z-index: 1;
}

.hero-demo .hd-rider.hd-r2 .hd-av > img {
  box-shadow:
    0 0 0 2px var(--hd-ring),
    0 2px 6px hsl(0 0% 0% / 0.22);
}

html:not(.dark) .hero-demo .hd-rider .hd-av > img {
  box-shadow:
    0 0 0 2.5px hsl(110 16% 12% / 0.92),
    0 0 0 3.5px hsl(45 92% 50% / 0.3),
    0 4px 10px hsl(110 20% 10% / 0.16);
}

html:not(.dark) .hero-demo .hd-rider.hd-r2 .hd-av > img {
  box-shadow:
    0 0 0 2px hsl(110 16% 12% / 0.85),
    0 2px 6px hsl(110 20% 10% / 0.12);
}

/* LPEPE glow ring (opacity driven by JS) */
.hero-demo .hd-host-ring {
  position: absolute;
  inset: -5%;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px hsl(45 95% 55% / 0.55),
    0 0 26px 6px hsl(46 100% 58% / 0.45);
  pointer-events: none;
  will-change: opacity;
}

.hero-demo .hd-glow { opacity: 0.9; }
html:not(.dark) .hero-demo .hd-glow { opacity: 0.42; }

.hero-demo .hd-orbit {
  fill: none;
  stroke: hsl(45 92% 50% / 0.16);
  stroke-width: 1;
  stroke-dasharray: 2 5;
}
.hero-demo .hd-orbit--outer { stroke: hsl(var(--foreground) / 0.08); }
html:not(.dark) .hero-demo .hd-orbit { stroke: hsl(44 92% 40% / 0.22); }

.hero-demo .hd-line {
  fill: none;
  stroke: hsl(45 92% 55% / 0.5);
  stroke-width: 1.1;
  stroke-linecap: round;
}
html:not(.dark) .hero-demo .hd-line { stroke: hsl(40 80% 38% / 0.45); }

/* HUD counter — abstract demo count, not live data */
.hero-demo .hd-hud {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 4px;
  border-radius: 999px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card) / 0.86);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  color: hsl(var(--foreground) / 0.8);
  box-shadow: var(--shadow-soft);
  pointer-events: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.hero-demo .hd-hud.is-bump {
  border-color: hsl(45 92% 50% / 0.7);
  box-shadow: 0 0 12px hsl(46 100% 58% / 0.25);
}
.hero-demo .hd-hud-tag {
  padding: 2px 5px;
  border-radius: 999px;
  background: hsl(var(--foreground) / 0.1);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--foreground) / 0.65);
}
.hero-demo .hd-hud-num {
  position: relative;
  display: inline-block;
  min-width: 2.2ch;
  height: 1.15em;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: hsl(var(--foreground));
}
.hero-demo .hd-num {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform, opacity;
}

.hero-demo .hd-node.hd-fire {
  z-index: 3;
}

.hero-demo .hd-node.hd-fire .hd-av > img {
  transition: box-shadow 0.35s ease;
}

.hero-demo .hd-node.hd-fire.is-host .hd-av > img {
  box-shadow:
    0 0 0 2px hsl(42 88% 52% / 0.95),
    0 0 0 4px var(--hd-ring),
    0 0 20px 2px var(--pepe-glow-soft);
}

.hero-demo .hd-crown {
  position: absolute;
  left: 50%;
  top: -24%;
  width: 46%;
  height: auto;
  transform: translate(-50%, 0);
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 1px 1.5px hsl(32 50% 18% / 0.3));
}

/* Upgrading Rider: plain while small, Host-styled once grown */
.hero-demo .hd-node.hd-fire:not(.is-host) .hd-av > img {
  box-shadow:
    0 0 0 3px var(--hd-ring),
    0 3px 8px hsl(0 0% 0% / 0.25);
}
html:not(.dark) .hero-demo .hd-node.hd-fire:not(.is-host) .hd-av > img {
  box-shadow:
    0 0 0 3px hsl(110 16% 12% / 0.9),
    0 3px 8px hsl(110 20% 10% / 0.14);
}
.hero-demo .hd-upg-ring {
  opacity: 0;
  inset: -4%;
}
.hero-demo .hd-orbit--upg {
  stroke: hsl(45 92% 52% / 0.32);
  opacity: 0;
}

/* Key message caption ("Every Rider can become the next Host") */
.hero-demo .hd-cap--hero {
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid hsl(45 92% 50% / 0.75);
  background: hsl(var(--card) / 0.94);
  color: hsl(var(--foreground));
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: 0 0 18px hsl(46 100% 58% / 0.22);
}

/* Fee targets: deployer (glyph) + $LOCK token */
.hero-demo .hd-fee .hd-av {
  border-radius: 50%;
  box-shadow:
    0 0 0 1.5px hsl(45 92% 50% / 0.75),
    0 0 14px hsl(46 100% 58% / 0.25);
}

.hero-demo .hd-dep .hd-av {
  background: var(--hd-card);
}

.hero-demo .hd-dep .hd-av > svg {
  padding: 22%;
  box-sizing: border-box;
  fill: none;
  stroke: var(--hd-ink);
  stroke-width: 1.9;
  stroke-linecap: round;
}

html.dark .hero-demo .hd-locktok .hd-av > img {
  box-shadow: 0 0 0 1.5px hsl(42 22% 92% / 0.28);
}

/* Ropes (match the site's gold cords) */
.hero-demo .hd-rope path {
  fill: none;
  stroke-linecap: round;
}

.hero-demo .hd-rope-shadow {
  stroke: hsl(34 52% 18% / 0.7);
  stroke-width: 5;
}

.hero-demo .hd-rope-body {
  stroke: var(--hd-gold);
  stroke-width: 3.2;
}

.hero-demo .hd-rope-shine {
  stroke: hsl(48 100% 80% / 0.8);
  stroke-width: 1.1;
  stroke-dasharray: 4 8;
}

.hero-demo .hd-rope--l2 .hd-rope-shadow { stroke-width: 4; }
.hero-demo .hd-rope--l2 .hd-rope-body { stroke-width: 2.4; }

html:not(.dark) .hero-demo .hd-rope-shadow { stroke: hsl(34 48% 28% / 0.5); }
html:not(.dark) .hero-demo .hd-rope-body { stroke: hsl(44 92% 46%); }
html:not(.dark) .hero-demo .hd-rope-shine { stroke: hsl(48 100% 72% / 0.7); }

/* Locks clicking onto ropes */
.hero-demo .hd-lock { opacity: 0; }
.hero-demo .hd-lock-ring {
  fill: var(--hd-card);
  stroke: var(--hd-gold);
  stroke-width: 1.4;
}
.hero-demo .hd-lock-body { fill: var(--hd-ink); }
.hero-demo .hd-lock-shackle {
  fill: none;
  stroke: var(--hd-ink);
  stroke-width: 1.7;
  stroke-linecap: round;
}
.hero-demo .hd-lock-pulse {
  fill: none;
  stroke: var(--hd-gold);
  stroke-width: 1.4;
  opacity: 0;
}

/* Fee streams */
.hero-demo .hd-stream-path {
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.hero-demo .hd-stream--burn .hd-stream-path { stroke: hsl(28 96% 56% / 0.85); }
.hero-demo .hd-stream--dep .hd-stream-path,
.hero-demo .hd-stream--lock .hd-stream-path { stroke: hsl(var(--foreground) / 0.55); }
.hero-demo .hd-stream { opacity: 0; }

/* Particles (HTML, transform-only) */
.hero-demo .hd-dots {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-demo .hd-dot {
  position: absolute;
  left: -2.5px;
  top: -2.5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity;
}
.hero-demo .hd-dot--buy {
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  background: hsl(48 100% 82%);
  box-shadow: 0 0 5px 1px hsl(46 100% 58% / 0.9);
}
.hero-demo .hd-dot--burn {
  background: hsl(32 100% 62%);
  box-shadow: 0 0 5px hsl(24 100% 55% / 0.9);
}
.hero-demo .hd-dot--fee {
  background: hsl(45 92% 50%);
  box-shadow: 0 0 4px hsl(46 100% 55% / 0.8);
}
html:not(.dark) .hero-demo .hd-dot--buy {
  background: hsl(44 100% 52%);
  box-shadow: 0 0 4px hsl(44 95% 45% / 0.8);
}

/* Captions */
.hero-demo .hd-cap {
  position: absolute;
  z-index: 4;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: hsl(var(--foreground) / 0.82);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

.hero-demo .hd-cap--pill {
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid hsl(45 92% 50% / 0.55);
  background: hsl(var(--card) / 0.92);
  color: hsl(var(--foreground));
}

.hero-demo .hd-cap--gold {
  color: hsl(30 92% 48%);
}
html.dark .hero-demo .hd-cap--gold {
  color: hsl(36 100% 62%);
}

.hero-demo .hd-cap--tag {
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid hsl(45 92% 50% / 0.8);
  background: hsl(45 92% 50%);
  color: hsl(110 18% 8%);
  font-weight: 700;
  font-size: 9px;
  box-shadow: 0 2px 8px hsl(45 92% 40% / 0.3);
}

/* Stacked hero (tablet/mobile): headline first, graphic after (overrides order:-1 in styles.css) */
@media (max-width: 1100px) {
  .hero-layout > .hero-host {
    order: 0;
  }
}

@media (max-width: 900px) {
  .hero-demo {
    width: min(94vw, 420px);
  }
}

@media (max-width: 480px) {
  /* clip off-stage fly-ins + camera push so phones never get horizontal scroll */
  .hero-demo { overflow: hidden; border-radius: 12px; }
  .hero-demo .hd-hud { font-size: 9.5px; }
  .hero-demo .hd-cap { font-size: 9px; }
  .hero-demo .hd-cap--hero { font-size: 10.5px; padding: 3px 9px; }
  .hero-demo .hd-cap--tag { font-size: 8.5px; }
}

/* small label under the receded LPEPE */
.hero-demo .hd-cap--away {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: hsl(var(--foreground) / 0.7);
}