/* haonchain.com — non-destructive polish layer
   All classes prefixed hc-polish- to avoid collisions.
   Respects prefers-reduced-motion. Mobile degrades gracefully. */

:root{
  --hc-polish-accent: #00ff88;
  --hc-polish-accent-2: #00d4ff;
  --hc-polish-ease: cubic-bezier(.22,.61,.36,1);
}

/* ─── Scroll progress bar (top) ─────────────────────────── */
.hc-polish-progress{
  position:fixed; top:0; left:0; right:0;
  height:2px; z-index:48; pointer-events:none;
  background:transparent;
}
.hc-polish-progress::after{
  content:""; display:block; height:100%; width:var(--hc-polish-p,0%);
  background:linear-gradient(90deg,var(--hc-polish-accent),var(--hc-polish-accent-2));
  box-shadow:0 0 12px rgba(0,255,136,.45);
  transition:width .12s linear;
}

/* ─── Cursor follower (desktop only) ────────────────────── */
.hc-polish-cursor{
  position:fixed; top:0; left:0; width:8px; height:8px;
  border-radius:50%;
  background:var(--hc-polish-accent);
  box-shadow:0 0 18px var(--hc-polish-accent);
  pointer-events:none; z-index:9999;
  transform:translate3d(-100px,-100px,0);
  mix-blend-mode:screen; opacity:.85;
  transition:opacity .25s, background-color .4s, box-shadow .4s;
}
.hc-polish-cursor.hc-polish-cursor-hover{
  width:32px; height:32px;
  opacity:.45;
}
@media (hover:none),(max-width:1023px),(pointer:coarse){
  .hc-polish-cursor{display:none}
}

/* ─── Reveal animations ─────────────────────────────────── */
[data-reveal]{
  opacity:0;
  transition:opacity .9s var(--hc-polish-ease),
             transform .9s var(--hc-polish-ease),
             filter .9s var(--hc-polish-ease);
  will-change:opacity,transform;
}
[data-reveal="fade-up"]   {transform:translate3d(0,24px,0)}
[data-reveal="fade-down"] {transform:translate3d(0,-24px,0)}
[data-reveal="slide-left"]{transform:translate3d(-32px,0,0)}
[data-reveal="slide-right"]{transform:translate3d(32px,0,0)}
[data-reveal="scale"]     {transform:scale(.94)}
[data-reveal="blur-in"]   {filter:blur(8px); transform:translate3d(0,12px,0)}
[data-reveal="fade"]      {transform:none}
[data-reveal="pulse-glow"]{transform:scale(.96)}

[data-reveal].hc-polish-shown{
  opacity:1;
  transform:none;
  filter:none;
}

/* ─── Stagger children ──────────────────────────────────── */
[data-stagger]>*{transition-delay:calc(var(--hc-polish-i,0)*80ms)}

/* ─── Heading flash sweep (one-shot) ────────────────────── */
.hc-polish-flash{
  position:relative; overflow:hidden;
}
.hc-polish-flash::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg,
    transparent 30%,
    rgba(0,255,136,.18) 50%,
    rgba(0,212,255,.14) 60%,
    transparent 75%);
  transform:translateX(-100%);
  pointer-events:none;
  animation:hc-polish-sweep 1.4s var(--hc-polish-ease) forwards;
}
@keyframes hc-polish-sweep{to{transform:translateX(120%)}}

/* ─── Section attention pulse (one-shot) ────────────────── */
.hc-polish-pulse-once{
  animation:hc-polish-pulse 1.6s var(--hc-polish-ease) 1;
}
@keyframes hc-polish-pulse{
  0%  {box-shadow:0 0 0 0 rgba(0,255,136,.0)}
  30% {box-shadow:0 0 0 6px rgba(0,255,136,.18)}
  100%{box-shadow:0 0 0 0 rgba(0,255,136,0)}
}

/* ─── Magnet button (CTA) ───────────────────────────────── */
.hc-polish-magnet{
  position:relative;
  transition:transform .18s var(--hc-polish-ease),
             box-shadow .25s var(--hc-polish-ease);
  will-change:transform;
}
.hc-polish-magnet:hover{
  box-shadow:0 8px 32px -4px rgba(0,255,136,.45),
             0 0 0 1px rgba(0,255,136,.35) inset;
}

/* attention pulse for primary download CTA on first reveal */
[data-reveal="pulse-glow"].hc-polish-shown.hc-polish-magnet{
  animation:hc-polish-glow 2.4s var(--hc-polish-ease) 1 .4s;
}
@keyframes hc-polish-glow{
  0%,100%{box-shadow:0 0 0 0 rgba(0,255,136,0)}
  50%    {box-shadow:0 0 0 10px rgba(0,255,136,.18),
                     0 12px 36px -6px rgba(0,255,136,.55)}
}

/* ─── Card 3D tilt ──────────────────────────────────────── */
.hc-polish-tilt{
  transition:transform .25s var(--hc-polish-ease),
             box-shadow .25s var(--hc-polish-ease);
  transform-style:preserve-3d;
  will-change:transform;
}
.hc-polish-tilt:hover{
  box-shadow:0 18px 42px -12px rgba(0,255,136,.25);
}

/* ─── Glow trail behind active CTAs ─────────────────────── */
.hc-polish-glow{
  position:relative; isolation:isolate;
}
.hc-polish-glow::after{
  content:""; position:absolute; inset:-4px; z-index:-1;
  border-radius:inherit;
  background:linear-gradient(120deg,var(--hc-polish-accent),var(--hc-polish-accent-2));
  opacity:0; filter:blur(12px);
  transition:opacity .35s var(--hc-polish-ease);
}
.hc-polish-glow:hover::after{opacity:.55}

/* ─── Number count-up ───────────────────────────────────── */
[data-count]{
  font-variant-numeric:tabular-nums;
  display:inline-block;
}
[data-count].hc-polish-counting{
  animation:hc-polish-breath 1.4s var(--hc-polish-ease) 1;
}
@keyframes hc-polish-breath{
  0%  {transform:scale(.92); filter:brightness(1.2) drop-shadow(0 0 12px rgba(0,255,136,.55))}
  60% {transform:scale(1.04)}
  100%{transform:scale(1); filter:brightness(1) drop-shadow(0 0 0 rgba(0,255,136,0))}
}

/* ─── Achievement toast ─────────────────────────────────── */
.hc-polish-toast{
  position:fixed; left:20px; bottom:20px;
  z-index:60; max-width:280px;
  padding:10px 14px;
  background:rgba(10,10,10,.92);
  border:1px solid rgba(0,255,136,.35);
  border-left:3px solid var(--hc-polish-accent);
  border-radius:8px;
  color:#e6e6e6; font-size:13px; line-height:1.4;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  backdrop-filter:blur(8px);
  box-shadow:0 12px 32px -8px rgba(0,0,0,.6),
             0 0 24px -4px rgba(0,255,136,.2);
  transform:translate3d(0,12px,0); opacity:0;
  transition:opacity .35s var(--hc-polish-ease),
             transform .35s var(--hc-polish-ease);
  pointer-events:none;
}
.hc-polish-toast.hc-polish-toast-on{
  opacity:1; transform:translate3d(0,0,0);
}
.hc-polish-toast .hc-polish-toast-tick{
  color:var(--hc-polish-accent); margin-right:6px; font-weight:700;
}
@media (max-width:640px){
  .hc-polish-toast{left:12px; right:12px; max-width:none; bottom:12px}
}

/* ─── Reduced motion: kill everything kinetic ───────────── */
@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal].hc-polish-shown{
    opacity:1; transform:none; filter:none; transition:none;
  }
  .hc-polish-flash::before,
  .hc-polish-pulse-once,
  [data-count].hc-polish-counting,
  [data-reveal="pulse-glow"].hc-polish-shown.hc-polish-magnet{
    animation:none;
  }
  .hc-polish-cursor{display:none}
  .hc-polish-progress::after{transition:none}
  .hc-polish-magnet,.hc-polish-tilt{transition:none}
}

/* ─── Mobile: kill cursor + tilt; keep reveals + flash ──── */
@media (max-width:1023px),(pointer:coarse){
  .hc-polish-tilt:hover{transform:none}
  .hc-polish-magnet{transform:none !important}
}

/* ═══════════════════════════════════════════════════════════
   MOBILE QUALITY UPLIFT for haonchain.com
   Fixes: cards touching edges, narrow text columns wrapping
   to 1 word per line, sparse layout, sticky-nav covering stripes.
   Added 2026-04-26 — keep additive only.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 720px) {

  /* 1. WRAP / CONTAINER — never let content touch the screen edge */
  .wrap, .container {
    padding-left: 18px !important;
    padding-right: 18px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 2. NAV — sit BELOW the injected stripes (dev-banner+promo+breaking ≈ 110px) */
  .nav {
    position: relative !important; /* drop sticky on mobile */
    top: auto !important;
    background: rgba(250,250,250,0.95) !important;
  }
  .nav-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
    height: 56px !important;
  }
  .nav-links { display: none !important; } /* declutter — section anchors hard to use on mobile anyway */

  /* 3. HERO — proper breathing room + crisp metric grid */
  .hero { padding-top: 28px !important; padding-bottom: 24px !important; }
  .hero h1 { font-size: clamp(32px, 8.5vw, 48px) !important; line-height: 1.05 !important; }
  .hero p, .hero .lead, .hero-sub { font-size: 16px !important; line-height: 1.55 !important; }

  .hero-meta {
    margin-top: 36px !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    padding-top: 20px !important;
  }
  .hero-meta > div {
    background: #ffffff !important;
    border: 1px solid var(--border, #e5e5e5) !important;
    border-radius: 10px !important;
    padding: 14px 14px !important;
    gap: 6px !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 4px 12px rgba(10,10,10,0.04);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .hero-meta > div:hover { transform: translateY(-1px); box-shadow: 0 2px 0 rgba(0,0,0,0.02), 0 6px 16px rgba(10,10,10,0.07); }
  .hero-meta strong { font-size: 22px !important; line-height: 1.1 !important; }
  .hero-meta span { font-size: 10.5px !important; letter-spacing: 0.06em !important; }

  /* 4. COMPARE — force 1 column & kill the narrow-grid wrapping */
  .compare {
    grid-template-columns: 1fr !important;
    border-top: 1px solid var(--border, #e5e5e5) !important;
  }
  .compare-col {
    padding: 24px 0 28px 0 !important;
    padding-left: 0 !important; padding-right: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--border, #e5e5e5) !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .compare-col:last-child { border-bottom: 0 !important; }
  .compare h3 {
    font-size: 19px !important;
    margin-bottom: 18px !important;
    max-width: 100% !important; /* override 22ch limit on mobile */
    line-height: 1.25 !important;
  }
  .compare li {
    grid-template-columns: 20px 1fr !important;
    gap: 10px !important;
    padding: 12px 0 !important;
    font-size: 14.5px !important;
    line-height: 1.45 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    min-width: 0 !important;
  }
  .compare li > * { min-width: 0 !important; }

  /* 5. PILLARS — already 1col at 600px, just polish the visual */
  .pillars { gap: 0 !important; }
  .pillar {
    padding: 24px 0 28px 0 !important;
    border-bottom: 1px solid var(--border, #e5e5e5) !important;
  }
  .pillar:last-child { border-bottom: 0 !important; }
  .pillar h3 { font-size: 18px !important; margin-bottom: 10px !important; }
  .pillar p { font-size: 14.5px !important; line-height: 1.55 !important; }
  .pillar-num { font-size: 11px !important; letter-spacing: 0.08em !important; margin-bottom: 8px !important; }

  /* 6. SECTION padding — TIGHT on mobile to avoid huge whitespace
     (was: 56px each side. Combined w/ hc-section-divider 40px between
     sections, that produced ~150px of empty space per gap. Reduced.) */
  .section { padding: 36px 0 !important; }
  .section.tight { padding: 24px 0 !important; }
  .section + .section { padding-top: 12px !important; }   /* tighter on consecutive sections */

  /* Section dividers (hc-section-divider injected by hex-bg.js) — hide on mobile,
     they don't add value on small screens and only create ~40px of empty space
     between every section. */
  .hc-section-divider {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .section h2 { font-size: clamp(24px, 6vw, 32px) !important; line-height: 1.15 !important; margin-bottom: 16px !important; }
  .section p, .section li { font-size: 15.5px !important; line-height: 1.6 !important; }
  /* Eyebrow / section labels */
  [class*="eyebrow"], [class*="-label"], .section-label, .label {
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
  }

  /* 7. CTA buttons — full-width on mobile so they're obviously tappable */
  .cta-block .btn,
  .btn-primary.btn-lg,
  .btn-primary.hc-polish-magnet { min-height: 48px !important; font-size: 15px !important; padding-left: 20px !important; padding-right: 20px !important; }
  .cta-row .btn, .actions .btn { width: 100% !important; justify-content: center !important; }

  /* 8. Body — no horizontal overflow ever */
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  body { padding-bottom: 24px !important; } /* haonchain has no bottom-nav, so light pad */

  /* 9. Display num — keep proportional on small screens */
  .display-num { font-size: clamp(40px, 12vw, 72px) !important; line-height: 1 !important; }

  /* 10. Calc / row-grid (already 1col at 700px, but enforce) */
  .row-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* 11. Subtle gradient backdrop for sections to add visual rhythm */
  .section:nth-of-type(even) {
    background: linear-gradient(180deg, rgba(0,178,94,0.025) 0%, transparent 100%);
  }
}

/* Tablet polish (721-1023px) */
@media (min-width: 721px) and (max-width: 1023px) {
  .nav { top: 110px; } /* sit below the 3 stripes on tablet */
  .compare h3 { max-width: 100% !important; }
}

/* ═══ FIX compare-col text wrapping word-by-word ═══════════════════
   Bug: .compare li uses grid-template-columns: 24px 1fr (expects SVG icon
   in slot 1 + text in slot 2). When li has only text (no <svg>), all
   text falls into the 24px column → wraps every word vertically.
   Fix: collapse to block layout. */
.compare li {
  display: block !important;
  grid-template-columns: 1fr !important;
  padding: 14px 0 !important;
  word-wrap: normal !important;
  word-break: normal !important;
}
@media (min-width: 721px) {
  .compare {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  .compare-col {
    min-width: 0 !important;
    word-wrap: normal !important;
  }
}