/* Isometric Hero Cube — theme tokens aligned with VibePM --wa-* */

.ihc-root {
  /* 立方体：白面略透，透出网格与淡底 */
  --ihc-stroke: color-mix(in srgb, var(--wa-color-text, #18181b) 18%, var(--wa-color-border, #e5e5e5));
  --ihc-fill: rgba(255, 255, 255, 0.78);
  --ihc-fill-2: rgba(255, 255, 255, 0.62);
  /* 底座：淡主色 + 略透 */
  --ihc-stage: color-mix(in srgb, var(--wa-color-primary, #6c5ce7) 10%, rgba(255, 255, 255, 0.7));
  --ihc-grid: #a1a1aa;
  --ihc-accent: var(--wa-color-primary, #6c5ce7);
  --ihc-face-bg: #fff;
  --ihc-face-text: var(--wa-color-text, #18181b);
  --ihc-muted: var(--wa-color-muted, #8b8b8b);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 280px;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.ihc-root[data-theme="dark"] {
  --ihc-stroke: color-mix(in srgb, #fff 28%, var(--wa-color-border, #333));
  --ihc-fill: color-mix(in srgb, var(--wa-color-bg, #0d0d0d) 58%, transparent);
  --ihc-fill-2: color-mix(in srgb, var(--wa-color-bg, #0d0d0d) 48%, transparent);
  --ihc-stage: color-mix(in srgb, var(--wa-color-bg, #0d0d0d) 70%, var(--wa-color-primary, #6c5ce7) 12%);
  --ihc-grid: rgba(255, 255, 255, 0.35);
  --ihc-accent: var(--wa-color-primary, #6c5ce7);
  --ihc-face-bg: color-mix(in srgb, var(--wa-color-bg, #0d0d0d) 55%, #222);
  --ihc-face-text: var(--wa-color-text, #f4f4f5);
  --ihc-muted: var(--wa-color-muted, #a1a1aa);
}

.ihc-stage {
  position: relative;
  z-index: 2;
  width: min(100%, 400px);
  max-width: 100%;
  container-type: inline-size;
  animation: ihc-stage-float 4s ease-in-out infinite;
}

.ihc-stage > svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* HTML 立面叠层：对齐 viewBox 360×488，避免 foreignObject 在 iOS 错位 */
.ihc-overlays {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.ihc-face-overlay {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: 0 0;
}

.ihc-face-overlay--left {
  left: calc(36 / 360 * 100%);
  top: calc(104 / 488 * 100%);
  width: calc(160 / 360 * 100%);
  height: auto;
  aspect-ratio: 1 / 1;
  transform: matrix(0.866025, 0.5, 0, 1, 0, 0);
}

.ihc-face-overlay--right {
  left: calc(186 / 360 * 100%);
  top: calc(184 / 488 * 100%);
  width: calc(160 / 360 * 100%);
  height: auto;
  aspect-ratio: 1 / 1;
  transform: matrix(0.866025, -0.5, 0, 1, 0, 0);
}

.ihc-face-overlay--logo {
  left: calc(180 / 360 * 100%);
  top: calc(68 / 488 * 100%);
  /* 高度百分比相对的是舞台高度，不能写 56/360；用 aspect-ratio 保证局部正方形 */
  width: calc(56 / 360 * 100%);
  height: auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  transform: matrix(0.866025, 0.5, -0.866025, 0.5, 0, 0);
}

.ihc-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0.45;
  pointer-events: none;
}

.ihc-root[data-theme="dark"] .ihc-grid {
  opacity: 0.38;
}

.ihc-grid svg {
  position: absolute;
  left: 50%;
  top: 54%;
  display: block;
  /* 平铺后按框体 100% 会显得格子偏小，继续放大格子尺度 */
  width: 450%;
  height: 450%;
  max-width: none;
  transform: translate(-50%, -50%);
  overflow: visible;
  shape-rendering: geometricPrecision;
}

.ihc-grid-path {
  stroke: var(--ihc-grid);
  stroke-width: 0.28;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 8000;
  stroke-dashoffset: 8000;
  animation: ihc-draw 2s ease-in-out 0.35s forwards;
}

/* 保留 class 供脚本挂载；不再对 <g> 做 CSS transform（会破坏手机端 foreignObject） */
.ihc-float {
  transform: none;
}

/* 与导航同形：mask 挂在容器上，扫光不溢出立面 */
.ihc-logo-mark {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  color: var(--wa-color-on-primary, #fff);
  line-height: 0;
  box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--ihc-accent) 45%, transparent);
  -webkit-mask-image: url("data:image/png;base64,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");
  mask-image: url("data:image/png;base64,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");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.ihc-logo-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--ihc-accent);
}

.ihc-logo-mark::after {
  content: "";
  position: absolute;
  /* 比标大一圈便于扫过；外溢由父级 overflow+mask 裁掉 */
  inset: -35% -70%;
  z-index: 2;
  background: linear-gradient(
    105deg,
    transparent 34%,
    color-mix(in srgb, #fff 72%, transparent) 50%,
    transparent 66%
  );
  transform: translateX(-120%) skewX(-18deg);
  animation: ihc-chip-shine 3.2s ease-in-out infinite;
  pointer-events: none;
}

.ihc-logo-mark__img {
  position: relative;
  z-index: 1;
  display: block;
  width: 78%;
  height: 78%;
  object-fit: contain;
  pointer-events: none;
}

.ihc-face {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--ihc-face-text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.ihc-chip,
.ihc-chip--accent {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: clamp(9px, 3.2cqw, 12px);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.15;
  color: var(--ihc-accent);
  text-align: center;
}

.ihc-chip__icon {
  font-size: 1.45em;
  line-height: 1;
  color: var(--ihc-accent);
}

.ihc-chip__text {
  display: block;
  max-width: 7.5em;
  color: var(--ihc-accent);
}

.ihc-morph {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--ihc-accent) 55%, var(--ihc-face-text));
  text-shadow: 0 0 14px color-mix(in srgb, var(--ihc-accent) 28%, transparent);
}

.ihc-face-slot {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: ihc-face-in 0.55s ease forwards;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@keyframes ihc-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes ihc-stage-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes ihc-face-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ihc-chip-shine {
  0%,
  55% {
    transform: translateX(-120%) skewX(-18deg);
  }
  75%,
  100% {
    transform: translateX(120%) skewX(-18deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ihc-grid-path,
  .ihc-stage,
  .ihc-face-slot,
  .ihc-logo-mark::after {
    animation: none !important;
  }

  .ihc-grid-path {
    stroke-dashoffset: 0;
  }

  .ihc-stage {
    transform: none;
  }

  .ihc-face-slot {
    opacity: 1;
  }

  .ihc-logo-mark::after {
    opacity: 0;
  }
}

/* 窄屏：舞台加大、关掉浮动；高度由 SVG 自然撑开 */
@media (max-width: 960px) {
  .ihc-root {
    min-height: 0;
    height: auto;
  }

  .ihc-stage {
    width: min(92%, 360px);
    animation: none;
  }
}

@media (max-width: 720px) {
  .ihc-stage {
    width: min(94%, 340px);
  }

  .ihc-chip {
    font-size: 11px;
  }

  .ihc-chip__icon {
    font-size: 1.3em;
  }
}