/* =============================================================================
 * ghost-recreation.css
 *
 * Animated SVG-recreation ghost extracted verbatim from ghostv2.html (the
 * "SVG Recreation of Original" panel). Uses container queries so every
 * dimension renders at native resolution at any host size.
 * 1 unit (--u) = 1/160 of inline width.
 * ============================================================================= */

.svg-recreation-stage {
  container-type: inline-size;
  position: relative;
  width: min(200px, 92%);
  aspect-ratio: 160 / 238;
  isolation: isolate;
  --u: calc(100cqi / 160);
}
.svg-recreation-stage .rec-bob {
  position: absolute;
  top: 0; left: 0;
  width: 100cqi;
  height: calc(196 * var(--u));
  animation: ghostBob 2.35s ease-in-out infinite;
  will-change: transform;
}
.svg-recreation-stage .rec-body {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(108 * var(--u)) calc(108 * var(--u)) 0 0;
  /* Off-axis radial gradient — the highlight pools at the upper-left of the
     dome, deepening into accent-tint at the lower-right. That gradient alone
     does most of the 3D work; no hard border needed. */
  background:
    radial-gradient(115% 95% at 38% 22%,
      #ffffff 0%,
      #f5f9ff 38%,
      #e3edff 70%,
      #c9d8f7 100%);
  /* Soft accent hairline — gives the dome edge definition without reading
     as a hard outline. Thinner + lower-alpha than a real border. */
  border: calc(0.8 * var(--u)) solid var(--gc-accent-24, rgba(28,99,255,0.24));
  box-shadow:
    /* (1) Top rim highlight — bright catch-light at the very top of the dome. */
    inset 0 calc(1.5 * var(--u)) calc(2 * var(--u)) rgba(255,255,255,0.95),
    /* (2) Inner edge tint — strengthens the silhouette from inside. */
    inset 0 0 0 calc(0.5 * var(--u)) var(--gc-accent-24, rgba(28,99,255,0.24)),
    /* (3) Under-curve shadow — pools at lower-right, gives the dome volume. */
    inset calc(-10 * var(--u)) calc(-12 * var(--u)) calc(28 * var(--u)) var(--gc-accent-24, rgba(28,99,255,0.24)),
    /* (4) Subtle counter-shadow on the lit side — preserves rounding. */
    inset calc(6 * var(--u)) calc(-4 * var(--u)) calc(14 * var(--u)) rgba(28,99,255,0.06),
    /* (5) Soft drop — close, grounds the body. */
    0 calc(2 * var(--u)) calc(6 * var(--u)) var(--gc-accent-12, rgba(28,99,255,0.12)),
    /* (6) Atmospheric ion halo — diffuse, no ring. */
    0 calc(6 * var(--u)) calc(24 * var(--u)) var(--gc-accent-24, rgba(28,99,255,0.24)),
    0 0 calc(56 * var(--u)) var(--gc-accent-12, rgba(28,99,255,0.12));
  -webkit-mask-image: linear-gradient(180deg,#000 0%,#000 44%,rgba(0,0,0,.96) 56%,rgba(0,0,0,.68) 70%,rgba(0,0,0,.22) 84%,transparent 100%);
          mask-image: linear-gradient(180deg,#000 0%,#000 44%,rgba(0,0,0,.96) 56%,rgba(0,0,0,.68) 70%,rgba(0,0,0,.22) 84%,transparent 100%);
}
html.dark .svg-recreation-stage .rec-body {
  /* Same volumetric model, deeper saturation. Highlight stays cool-white so
     the dome still reads as a ghost; mid+lower-right deepen into ion-blue. */
  background:
    radial-gradient(115% 95% at 38% 22%,
      #ffffff 0%,
      #d8e6ff 40%,
      #9bbcff 72%,
      #5d8cf2 100%);
  border-color: var(--gc-accent-40, rgba(122,164,255,0.40));
  box-shadow:
    inset 0 calc(1.5 * var(--u)) calc(2 * var(--u)) rgba(255,255,255,0.55),
    inset 0 0 0 calc(0.5 * var(--u)) var(--gc-accent-40, rgba(122,164,255,0.40)),
    inset calc(-10 * var(--u)) calc(-12 * var(--u)) calc(32 * var(--u)) rgba(20,40,90,0.55),
    inset calc(6 * var(--u)) calc(-4 * var(--u)) calc(16 * var(--u)) rgba(122,164,255,0.18),
    0 calc(2 * var(--u)) calc(8 * var(--u)) var(--gc-accent-40, rgba(122,164,255,0.40)),
    0 calc(8 * var(--u)) calc(32 * var(--u)) var(--gc-accent-56, rgba(122,164,255,0.56)),
    0 0 calc(72 * var(--u)) var(--gc-accent-24, rgba(122,164,255,0.24));
}
.svg-recreation-stage .rec-eyes {
  display: flex;
  justify-content: space-between;
  width: calc(74 * var(--u));
  margin: 0 auto;
  padding-top: calc(72 * var(--u));
  min-height: calc(97 * var(--u));
  box-sizing: content-box;
}
.svg-recreation-stage .rec-eyes::before,
.svg-recreation-stage .rec-eyes::after {
  content: "";
  width: calc(15 * var(--u));
  height: calc(25 * var(--u));
  border-radius: 50%;
  /* Near-black with a faint accent tint — reads as black, hints at the
     ion-blue body. ~6% accent over pure black. */
  background: color-mix(in srgb, var(--gc-accent, #1c63ff) 6%, #000);
}
html.dark .svg-recreation-stage .rec-eyes::before,
html.dark .svg-recreation-stage .rec-eyes::after {
  /* Dark mode: lift the tint slightly so eyes don't disappear into the
     dark page edges, but still read black. */
  background: color-mix(in srgb, var(--gc-accent, #7aa4ff) 9%, #000);
}
.svg-recreation-stage .ghost-recreation-veil {
  position: absolute;
  top: calc(102 * var(--u));
  left: 0;
  width: 100cqi;
  height: calc(136 * var(--u));
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(180deg,#000 0%,#000 18%,rgba(0,0,0,.92) 42%,rgba(0,0,0,.62) 64%,rgba(0,0,0,.28) 82%,rgba(0,0,0,.08) 94%,transparent 100%);
          mask-image: linear-gradient(180deg,#000 0%,#000 18%,rgba(0,0,0,.92) 42%,rgba(0,0,0,.62) 64%,rgba(0,0,0,.28) 82%,rgba(0,0,0,.08) 94%,transparent 100%);
}
html.dark .svg-recreation-stage .ghost-recreation-veil { mix-blend-mode: screen; }
.svg-recreation-stage .ghost-recreation-shadow {
  position: absolute;
  left: 50%;
  bottom: calc(5 * var(--u));
  width: calc(124 * var(--u));
  height: calc(24 * var(--u));
  transform: translateX(-50%);
  border-radius: 50%;
  /* Accent-tinted ion-shadow — shadow + faint blue halo on the floor. */
  background: radial-gradient(ellipse at center,
    var(--gc-accent-56, rgba(28,99,255,0.56)) 0%,
    var(--gc-accent-40, rgba(28,99,255,0.40)) 38%,
    var(--gc-accent-12, rgba(28,99,255,0.12)) 72%,
    rgba(28,99,255,0) 100%);
  filter: blur(calc(3.4 * var(--u)));
  animation: ghostShadow 2.35s ease-in-out infinite;
  z-index: 0;
}
html.dark .svg-recreation-stage .ghost-recreation-shadow {
  background: radial-gradient(ellipse at center,
    var(--gc-accent-90, rgba(122,164,255,0.90)) 0%,
    var(--gc-accent-56, rgba(122,164,255,0.56)) 42%,
    var(--gc-accent-24, rgba(122,164,255,0.24)) 76%,
    rgba(122,164,255,0) 100%);
  filter: blur(calc(4 * var(--u)));
}
@keyframes ghostBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9.4%); }
}
@keyframes ghostShadow {
  0%, 100% {
    width: calc(124 * var(--u));
    height: calc(24 * var(--u));
    opacity: .82;
  }
  50% {
    width: calc(111.6 * var(--u));
    height: calc(21.6 * var(--u));
    opacity: .56;
  }
}

/* Logo-sized variant for use as a brand mark. Sized so 16 binary columns
   render at integer cell widths inside a 64px header row. */
.svg-recreation-stage--logo {
  width: 40px;
  flex: 0 0 40px;
}

/* Hero-sized variant — replaces the old <ghost-render-v2> centerpiece.
   Same 160:238 ratio, scaled large with viewport-responsive width so 16
   columns always render at integer cell widths. */
.svg-recreation-stage--hero {
  width: min(240px, 60vw);
}