/* haonchain.com — hex futurist-minimalist theme layer
   Additive ON TOP of polish.css. Namespace: .hc-hex-*
   - Hex frame corners (sci-fi HUD)
   - Scan-line overlay
   - HUD eyebrow labels (mono tracking)
   - Section transition divider
   - Static SVG hex pattern fallback (mobile / reduced-motion)
   - All keyframes neutralised under prefers-reduced-motion
*/

:root{
  --hc-hex-cyan: #00d4ff;
  --hc-hex-stroke: rgba(91,108,255,0.06);
  --hc-hex-stroke-strong: rgba(91,108,255,0.14);
  --hc-hex-accent: #00ff88;
  --hc-hex-bg-tint: rgba(91,108,255,0.02);
  --hc-hex-ease: cubic-bezier(.22,.61,.36,1);
  --hc-hex-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ─────────── Canvas host (created by hex-bg.js) ─────────── */
.hc-hex-canvas{
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: -1;
  pointer-events: none;
  opacity: 1;
  mix-blend-mode: multiply;
}

/* ─────────── Static SVG hex fallback (mobile/reduced) ──── */
.hc-hex-static{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: transparent;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'><g fill='none' stroke='%235b6cff' stroke-opacity='0.08' stroke-width='1'><path d='M28 2 L52 16 L52 48 L28 62 L4 48 L4 16 Z'/><path d='M28 18 L40 25 L40 39 L28 46 L16 39 L16 25 Z' stroke-opacity='0.04'/></g></svg>");
  background-size: 56px 64px;
  background-repeat: repeat;
  opacity: 0.85;
}

/* Body baseline so background isn't flat */
body.hc-hex-on{
  background-color: var(--bg, #faf9f6);
}

/* ─────────── Hex frame corners (HUD card) ─────────────── */
.hc-hex-frame{
  position: relative;
  isolation: isolate;
}
.hc-hex-frame::before,
.hc-hex-frame::after{
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  z-index: 1;
  transition: border-color .35s var(--hc-hex-ease),
              width .35s var(--hc-hex-ease),
              height .35s var(--hc-hex-ease);
  border-color: rgba(91,108,255,0.35);
}
/* top-left + bottom-right via ::before chained corners — use box-shadow trick */
.hc-hex-frame::before{
  top: -1px; left: -1px;
  border-top: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
  color: rgba(91,108,255,0.35);
}
.hc-hex-frame::after{
  bottom: -1px; right: -1px;
  border-bottom: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  color: rgba(91,108,255,0.35);
}
.hc-hex-frame:hover::before,
.hc-hex-frame:hover::after{
  width: 22px;
  height: 22px;
  color: var(--hc-hex-cyan);
}
/* dual corner accent (use outline of pseudo-children via gradient bg) */
.hc-hex-frame{
  --hc-hex-frame-pad: 0;
}

/* For cards that already have padding/border, soften default border */
.hc-hex-frame.compare-col,
.hc-hex-frame.pillar{
  transition: box-shadow .35s var(--hc-hex-ease),
              transform .25s var(--hc-hex-ease),
              border-color .35s var(--hc-hex-ease);
}
.hc-hex-frame.compare-col:hover,
.hc-hex-frame.pillar:hover{
  box-shadow:
    0 0 0 1px rgba(0,212,255,0.18) inset,
    0 18px 42px -12px rgba(0,212,255,0.22);
}

/* ─────────── Scan-line overlay ─────────────────────────── */
.hc-scanlines{
  position: relative;
  isolation: isolate;
}
.hc-scanlines::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0,212,255,0.02) 0,
    rgba(0,212,255,0.02) 1px,
    transparent 1px,
    transparent 4px
  );
  mix-blend-mode: overlay;
  border-radius: inherit;
}
.hc-scanlines > *{ position: relative; z-index: 1; }

/* ─────────── HUD eyebrow label ─────────────────────────── */
.hc-hud-label,
.hc-hud-label.label{
  font-family: var(--hc-hex-mono) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted, #555);
}
.hc-hud-label::before{
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background:
    linear-gradient(135deg,
      var(--hc-hex-cyan) 0%,
      var(--hc-hex-cyan) 50%,
      transparent 50%,
      transparent 100%);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  box-shadow: 0 0 6px rgba(0,212,255,0.6);
  flex: none;
  animation: hc-hex-pulse 2.4s var(--hc-hex-ease) infinite;
}
@keyframes hc-hex-pulse{
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* ─────────── Section transition divider ────────────────── */
.hc-section-divider{
  position: relative;
  display: block;
  height: 64px;
  margin: 0;
  pointer-events: none;
  overflow: hidden;
}
.hc-section-divider::before{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scaleX(0);
  transform-origin: left center;
  width: min(560px, 70%);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--hc-hex-stroke-strong) 30%,
    var(--hc-hex-cyan) 50%,
    var(--hc-hex-stroke-strong) 70%,
    transparent 100%);
  transition: transform 1.1s var(--hc-hex-ease);
}
.hc-section-divider::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  margin-top: -4px; margin-left: -4px;
  background: var(--hc-hex-cyan);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  opacity: 0;
  transition: opacity .8s var(--hc-hex-ease) .4s;
  box-shadow: 0 0 12px rgba(0,212,255,0.65);
}
.hc-section-divider.hc-hex-shown::before{
  transform: translate(-50%, -50%) scaleX(1);
}
.hc-section-divider.hc-hex-shown::after{
  opacity: 1;
}

/* compress on mobile */
@media (max-width: 720px){
  .hc-section-divider{ height: 40px; }
  .hc-section-divider::before{ width: 80%; }
}

/* ─────────── Digit-cycling counter (mechanical feel) ──── */
[data-count].hc-hex-cycling{
  font-family: var(--hc-hex-mono);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(0,212,255,0.25);
}

/* ─────────── Active-section hex highlight (driven by JS) ─ */
.hc-hex-canvas.hc-hex-active{
  /* JS sets --hc-hex-active-x/y CSS vars; canvas reads them */
}

/* ─────────── Card subtle inner glow on hover ──────────── */
@media (hover: hover) and (pointer: fine){
  .hc-hex-frame.pillar:hover h3,
  .hc-hex-frame.compare-col:hover h3{
    color: var(--text, #0a0a0a);
    text-shadow: 0 0 18px rgba(0,212,255,0.18);
  }
}

/* ─────────── Tighten section padding on mobile ────────── */
@media (max-width: 720px){
  /* Already softened by polish.css to 56px — divider eats some space, so trim */
  .section + .hc-section-divider,
  .hc-section-divider + .section{
    margin-top: -8px;
  }
}

/* ─────────── Reduced motion: kill everything kinetic ──── */
@media (prefers-reduced-motion: reduce){
  .hc-hud-label::before{ animation: none; }
  .hc-section-divider::before,
  .hc-section-divider::after{
    transition: none;
    transform: translate(-50%, -50%) scaleX(1);
    opacity: 1;
  }
  .hc-hex-frame::before,
  .hc-hex-frame::after{ transition: none; }
  .hc-hex-canvas{ display: none; }
  /* fall back to static pattern injected by hex-bg.js */
}

/* ─────────── Mobile / coarse pointer: hide canvas ─────── */
@media (max-width: 1023px), (pointer: coarse){
  .hc-hex-canvas{ display: none; }
  /* hex-bg.js ensures .hc-hex-static is present in this case */
  .hc-hex-frame::before,
  .hc-hex-frame::after{
    width: 10px; height: 10px;
  }
  .hc-hex-frame:hover::before,
  .hc-hex-frame:hover::after{
    width: 14px; height: 14px;
  }
}

/* ─────────── Print: drop all decoration ──────────────── */
@media print{
  .hc-hex-canvas, .hc-hex-static, .hc-section-divider{ display: none; }
  .hc-hex-frame::before, .hc-hex-frame::after{ display: none; }
  .hc-hud-label::before{ display: none; }
}