/* cardcenter hero animation, Look C "Holo": holographic foil card + cyan calipers.
   Requires css/tokens.css (--cc-* tokens). Markup is built by js/hero.js.
   Per-instance vars set by JS from CONFIG: --cch-cal, --cch-glow, --cch-lock, --cch-foil, --cch-gi, --cch-si, --cch-s. */

.cch {
  --cch-s: 1;                                  /* px per viewBox unit, set by JS */
  --cch-cal: var(--cc-cyan, #22D3EE);
  --cch-glow: var(--cc-violet, #7B5CFF);
  --cch-lock: var(--cc-lime, #B6F24A);
  --cch-foil: var(--cc-holo-gradient, linear-gradient(135deg, #7B5CFF, #22D3EE, #B6F24A, #FF4DA6, #7B5CFF));
  --cch-gi: 1;                                 /* glow intensity 0-2 */
  --cch-si: 1;                                 /* sheen intensity 0-2 */
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 4 / 5;
  margin-inline: auto;
  perspective: 900px;
  perspective-origin: 50% 45%;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.cch-tilt {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.cch-tilt > * { position: absolute; }

/* faint grid, furthest back */
.cch-grid {
  inset: -14%;
  transform: translateZ(-50px);
  background-image:
    linear-gradient(var(--cc-line, #23235A) 1px, transparent 1px),
    linear-gradient(90deg, var(--cc-line, #23235A) 1px, transparent 1px);
  background-size: calc(var(--cch-s) * 30px) calc(var(--cch-s) * 30px);
  background-position: center;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 25%, transparent 100%);
  pointer-events: none;
}

/* soft holo light blooms + ripples (canvas) */
.cch-field {
  inset: -14%;
  width: 128%;
  height: 128%;
  transform: translateZ(-90px);
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  pointer-events: none;
}

/* holographic foil card (box geometry mirrors the SVG viewBox 360x450: x70 y78 w220 h308) */
.cch-card {
  left: 19.444%;
  top: 17.333%;
  width: 61.111%;
  height: 68.444%;
  border-radius: calc(var(--cch-s) * 16px);
  overflow: hidden;
  background: linear-gradient(160deg, var(--cc-surface, #14143A) 0%, var(--cc-bg, #0A0A1F) 100%);
  border: 1px solid var(--cc-line-2, #3A3A85);
  box-shadow:
    var(--cc-shadow-lg, 0 28px 72px rgba(0, 0, 10, 0.65)),
    0 0 calc(30px * var(--cch-gi)) rgba(34, 211, 238, calc(0.12 * var(--cch-gi)));
  transition: border-color var(--cc-dur-slow, 420ms) var(--cc-ease-out, ease),
              box-shadow var(--cc-dur-slow, 420ms) var(--cc-ease-out, ease),
              opacity 800ms var(--cc-ease-out, ease);
  opacity: 0;
}
.cch.is-ready .cch-card { opacity: 1; }
.cch.is-locked .cch-card {
  border-color: var(--cch-lock);
  box-shadow:
    var(--cc-shadow-lg, 0 28px 72px rgba(0, 0, 10, 0.65)),
    0 0 calc(44px * var(--cch-gi)) rgba(182, 242, 74, calc(0.22 * var(--cch-gi))),
    0 0 calc(70px * var(--cch-gi)) rgba(123, 92, 255, calc(0.3 * var(--cch-gi)));
}

/* iridescent foil layer */
.cch-card > * { position: absolute; }
/* (foil) : 2x the card, moved by transform only (tilt + phase) */
.cch-foil {
  inset: -50%;
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 9px),
    var(--cch-foil);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  pointer-events: none;
}
/* white sheen streak that slides with the tilt and flashes on lock */
.cch-sheen {
  top: -10%;
  left: -40%;
  width: 55%;
  height: 120%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.34) 48%, rgba(255, 255, 255, 0.06) 58%, transparent 100%);
  transform: translate3d(0, 0, 0) skewX(-18deg);
  will-change: transform, opacity;
  pointer-events: none;
}

/* SVG layers */
.cch-frame, .cch-hud {
  left: 0; top: 0; width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.cch-frame { transform: translateZ(8px); }
.cch-hud {
  transform: translateZ(26px);
  filter: drop-shadow(0 0 calc(4px * var(--cch-gi)) var(--cch-glow));
}

.cch-stop-a { stop-color: var(--cc-surface, #14143A); }
.cch-stop-b { stop-color: var(--cc-bg, #0A0A1F); }
.cch-stop-m0 { stop-color: var(--cch-glow); stop-opacity: 0.38; }
.cch-stop-m1 { stop-color: var(--cch-glow); stop-opacity: 0; }

.cch-art  { fill: url(#cch-art-fill); }
.cch-halo { fill: url(#cch-halo-fill); }
.cch-ring { fill: none; stroke: var(--cc-line-2, #3A3A85); stroke-width: 1; }
.cch-ring.r2 { stroke-dasharray: 2 5; opacity: 0.8; }
.cch-edge { fill: none; stroke: var(--cc-violet-text, #A894FF); stroke-width: 1.25; opacity: 0.6; }
.cch-edge-lock {
  fill: none; stroke: var(--cch-lock); stroke-width: 1.75;
  opacity: 0; transition: opacity var(--cc-dur-base, 220ms) var(--cc-ease-out, ease);
}
.cch.is-locked .cch-edge-lock { opacity: 1; }

.cch-cross {
  stroke: var(--cch-lock); stroke-width: 2; fill: none;
  opacity: 0; transition: opacity var(--cc-dur-slow, 420ms) var(--cc-ease-out, ease);
}
.cch-cross-dot { fill: var(--cch-lock); }
.cch.is-locked .cch-cross { opacity: 1; }

.cch-pulse { fill: none; stroke: var(--cch-lock); stroke-width: 1.75; opacity: 0; }

/* calipers: cyan with violet glow (drop-shadow on .cch-hud) */
.cch-cal   { fill: none; stroke: var(--cch-cal); stroke-width: 1.25; stroke-linecap: butt; transition: stroke var(--cc-dur-base, 220ms) var(--cc-ease-out, ease), stroke-width var(--cc-dur-base, 220ms) var(--cc-ease-out, ease); }
.cch-span  { fill: none; stroke: var(--cch-cal); stroke-width: 1; stroke-dasharray: 1 4; opacity: 0.4; }
.cch-wit   { fill: none; stroke: var(--cch-cal); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.45; }
.cch.is-locked .cch-cal { stroke-width: 1.75; stroke: var(--cch-lock); }

/* readouts (mono face; --cc-text 18.4:1, --cc-muted 9.4:1 on --cc-bg) */
.cch-hud text {
  font-family: var(--cc-font-mono, 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace);
  text-anchor: middle;
  fill: var(--cc-text, #FAF7FF);
  font-variant-numeric: tabular-nums;
}
.cch-lab  { font-size: 10px; letter-spacing: 0.14em; fill: var(--cc-muted, #B4B0D6) !important; transition: opacity var(--cc-dur-base, 220ms) var(--cc-ease-out, ease); }
.cch-val  { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; transition: fill var(--cc-dur-base, 220ms) var(--cc-ease-out, ease); }
.cch-val.sm { font-size: 17px; }
.cch.is-locked .cch-lab-top { opacity: 0; }
.cch.is-locked .cch-val { fill: var(--cch-lock); }

/* sticker-style PERFECT badge (ink on lime 14.7:1) */
.cch-badge {
  left: 72%;
  top: 18%;
  margin: calc(var(--cch-s) * -12px) 0 0 calc(var(--cch-s) * -46px);
  transform: translate3d(0, 0, 40px);
  pointer-events: none;
}
.cch-badge span {
  display: inline-block;
  font-family: var(--cc-font-mono, 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace);
  font-weight: 700;
  font-size: calc(var(--cch-s) * 12px);
  letter-spacing: 0.16em;
  line-height: 1;
  padding: calc(var(--cch-s) * 6px) calc(var(--cch-s) * 13px);
  border-radius: var(--cc-radius-pill, 999px);
  background: var(--cch-lock);
  color: var(--cc-ink, #0A0A1F);
  border: 2px solid var(--cc-ink, #0A0A1F);
  box-shadow: 0 0 0 2px var(--cch-lock), 0 6px calc(18px * var(--cch-gi)) rgba(182, 242, 74, calc(0.45 * var(--cch-gi)));
  opacity: 0;
  transform: rotate(-9deg) scale(0.4);
  transition: transform var(--cc-dur-slow, 420ms) var(--cc-ease-snap, cubic-bezier(0.34, 1.56, 0.64, 1)),
              opacity var(--cc-dur-base, 220ms) var(--cc-ease-out, ease);
}
.cch.is-locked .cch-badge span { opacity: 1; transform: rotate(-4deg) scale(1); }

@media (max-width: 420px) {
  .cch-val { font-size: 24px; }
  .cch-val.sm { font-size: 19px; }
}

/* visually hidden helper (kept for host pages) */
.cch-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cch-card, .cch-edge-lock, .cch-cross, .cch-val, .cch-lab, .cch-cal, .cch-badge span { transition: none; }
  .cch-card { opacity: 1; }
  .cch-badge span { opacity: 1; transform: rotate(-4deg) scale(1); }
}