/*
 * MarketSpy hero — holographic emblem (front page). Pairs with js/mspy-hero-holo.js,
 * which adds html.mspy-holo-on. Without that class nothing here applies.
 * Approved by CR 2026-11-02; history in docs/HERO_HOLO_PREVIEW.md (website repo).
 */

/* Hide the Korean letter artwork and its floor copy only once the script is running.
   visibility (not display) keeps the original layout box untouched. */
html.mspy-holo-on #hero .home-header-korean-letters {
  visibility: hidden;
}

/* CR review 2026-11-02: keep only "TRADE WITH CONFIDENCE"; drop the TM mark and three dots. */
html.mspy-holo-on #hero .dotswrapper {
  display: none;
}

/* Headline block sits lower so the emblem's diamonds and ring stay visible.
   The offset is computed by hero-holo.js from the emblem size. */
html.mspy-holo-on #hero ._3deffect {
  translate: 0 var(--holo-text-shift, 0px);
}

.mspy-holo-stage {
  position: absolute;
  inset: 0;
  z-index: 1; /* below .home-header_component-kr (z-index 5): copy and CTAs stay on top */
  overflow: hidden;
  pointer-events: none;
}

html:not(.mspy-holo-on) .mspy-holo-stage {
  display: none;
}

.mspy-holo-canvas {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
}

/* Light from the emblem caught by the existing grid lines.
   The mask is the site's own grid SVG at the same position, so only real lines light up. */
.mspy-holo-gridlight {
  position: absolute;
  z-index: 2; /* above the reflection: the lines read as part of the floor surface */
  opacity: var(--holo-grid-opacity, 0.5);
  background:
    radial-gradient(
      ellipse var(--holo-grid-rx, 360px) var(--holo-grid-ry, 200px) at var(--holo-grid-x, 50%) var(--holo-grid-y, 60%),
      rgb(var(--holo-grid-core, 255 214 206) / 95%) 0%,
      rgb(var(--holo-grid-mid, 236 74 62) / 60%) 32%,
      rgb(var(--holo-grid-mid, 236 74 62) / 0%) 72%
    );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mix-blend-mode: screen;
}

/* No-WebGL fallback: the same emblem as a flat image with a CSS sheen and reflection. */
.mspy-holo-fallback {
  position: absolute;
  display: none;
}

.mspy-holo-stage.is-fallback .mspy-holo-canvas {
  display: none;
}

.mspy-holo-stage.is-fallback .mspy-holo-fallback {
  display: block;
}

.mspy-holo-fallback__emblem,
.mspy-holo-fallback__sheen,
.mspy-holo-fallback__reflection {
  position: absolute;
  left: 0;
  width: 100%;
  border-radius: 50%;
}

.mspy-holo-fallback__emblem {
  top: 0;
  height: auto;
  opacity: var(--holo-fallback-opacity, 0.82);
}

.mspy-holo-fallback__sheen {
  top: 0;
  aspect-ratio: 1;
  background:
    linear-gradient(125deg, rgb(255 255 255 / 0%) 30%, rgb(255 255 255 / 26%) 46%, rgb(190 220 255 / 14%) 52%, rgb(255 255 255 / 0%) 66%);
  mix-blend-mode: screen;
}

.mspy-holo-fallback__reflection {
  top: 0;
  height: auto;
  /* Same as the original .home-header-korean-letters._2, applied to the emblem. */
  opacity: var(--holo-fallback-refl, 0.3);
  filter: blur(30px);
  transform: translate(0, 76%) rotateX(117deg);
}

/* CR review 2026-11-02: no added shadows. The theme's own backdrop blur on MARKETSPY
   (.heading-glow.heading-xxlarge._3-5 { backdrop-filter: blur(5px) }) was invisible over the
   already-blurred Korean artwork, but smears the sharp emblem, so it is off while the emblem is shown. */
html.mspy-holo-on #hero .heading-glow {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media print, (forced-colors: active) {
  .mspy-holo-stage {
    display: none !important;
  }
}