/* ============================================================
   ChillCheck site — premium polish layer
   Loaded after each page's inline <style> so it can layer on top.
   All motion is gated behind prefers-reduced-motion.
   ============================================================ */

/* Sticky-nav offset so in-page anchors aren't hidden under the header */
[id] { scroll-margin-top: 84px; }

/* ── Legal links in footer bar ───────────────────────────── */
footer .legal-links { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

/* ── Hero atmosphere ─────────────────────────────────────── */
.hero-section, .page-hero { position: relative; }
.hero-section > .wrap, .page-hero > .wrap { position: relative; z-index: 1; }
.hero-section::before, .page-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 80% at 86% 6%, rgba(46,72,254,.12), transparent 62%),
    radial-gradient(46% 64% at 6% 104%, rgba(255,233,74,.12), transparent 60%);
}

/* ── Gradient accents ────────────────────────────────────── */
h1.hero-h1 em {
  background: linear-gradient(118deg, var(--brand), #6E84FF);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.page-hero-accent,
.feat-accent.brand,
.feat-accent-bar.brand { background: linear-gradient(90deg, var(--brand), #6E84FF); }

/* Brand mark gets a soft glow on hover */
.brand-logo { transition: filter .25s ease; }
.brand:hover .brand-logo { filter: drop-shadow(0 3px 9px rgba(46,72,254,.45)); }

/* Beta status badge in the nav lockup */
.beta-badge {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand);
  background: rgba(46,72,254,.10);
  border: 1px solid rgba(46,72,254,.28);
  padding: 3px 7px; border-radius: 999px; line-height: 1;
  align-self: center; position: relative; top: 1px;
}

/* ── Depth + hover lift on standalone cards ──────────────── */
.plan, .size-card, .retailer-card, .next-card, .usage-card,
.feat-panel, .dash-mockup {
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;
}
.plan:hover, .size-card:hover, .retailer-card:hover,
.next-card:hover, .usage-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px -22px rgba(46,72,254,.30), 0 4px 12px -6px rgba(14,26,51,.12);
}
.feat-panel:hover, .dash-mockup:hover {
  transform: translateY(-5px);
  box-shadow: 0 34px 64px -30px rgba(46,72,254,.32), 0 6px 16px -8px rgba(14,26,51,.12);
}

/* Seamless grid cells: subtle fill on hover, no transform (keeps the seams) */
.feat-card, .how-step, .flow-node, .setup-step, .hw-item {
  transition: background .2s ease;
}
.feat-card:hover, .how-step:hover, .flow-node:hover,
.setup-step:hover, .hw-item:hover { background: var(--bg-tint); }
.hw-item.optional:hover { background: #F3EDDD; }

/* ── Buttons: lift, glow, arrow nudge ────────────────────── */
.btn-ink, .btn-plan-dark, .nav-cta {
  transition: background .15s ease, transform .18s ease, box-shadow .18s ease, opacity .15s ease;
}
.btn-ink:hover, .btn-plan-dark:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -12px rgba(46,72,254,.55);
}
.nav-cta:hover {
  transform: translateY(-1px); opacity: 1;
  box-shadow: 0 8px 18px -8px rgba(46,72,254,.6);
}
.btn-outline { transition: border-color .15s ease, color .15s ease, transform .18s ease; }
.btn-outline:hover { transform: translateY(-2px); }
.btn-ink svg, .btn-outline svg, .btn-plan svg { transition: transform .2s ease; }
.btn-ink:hover svg, .btn-outline:hover svg, .btn-plan:hover svg { transform: translateX(3px); }

/* ── Animated nav underline (desktop) ────────────────────── */
@media (min-width: 901px) {
  header.top nav a:not(.nav-cta) { position: relative; }
  header.top nav a:not(.nav-cta)::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
    background: var(--brand); border-radius: 2px;
    transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
  }
  header.top nav a:not(.nav-cta):hover::after,
  header.top nav a.nav-active::after { transform: scaleX(1); }
}

/* ── Mobile hamburger alignment ──────────────────────────────
   The empty <nav> is still a flex item, so space-between strands
   the toggle in the middle of the header. Push it hard-right with
   margin-left:auto and optically line the icon up with the gutter. */
@media (max-width: 900px) {
  header.top .mobile-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0;
    margin-left: auto; margin-right: -11px;
  }
}

/* ============================================================
   Motion — only when the user hasn't asked to reduce it
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* Slow atmospheric drift behind the hero */
  .hero-section::before, .page-hero::before {
    animation: ccDrift 17s ease-in-out infinite alternate;
  }
  @keyframes ccDrift {
    from { transform: translate3d(-8px, -6px, 0) scale(1); }
    to   { transform: translate3d(8px, 6px, 0) scale(1.04); }
  }

  /* Scroll-reveal (classes added by site-enhance.js) */
  .js .reveal {
    opacity: 0; transform: translateY(18px);
    transition: opacity .6s ease-out, transform .6s cubic-bezier(.2,.7,.2,1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }
  .js .reveal.in { opacity: 1; transform: none; }

  /* Living status dots */
  .mcab.crit .mcab-dot, .tl-dot.crit, .offline-row.down .offline-row-dot {
    animation: ccPulseCrit 1.8s ease-out infinite;
  }
  .mcab.ok .mcab-dot, .tl-dot.ok, .site-dot.ok, .offline-row.up .offline-row-dot {
    animation: ccPulseOk 2.8s ease-out infinite;
  }
  .mcab.warn .mcab-dot, .tl-dot.warn, .site-dot.warn {
    animation: ccPulseWarn 2.8s ease-out infinite;
  }
  @keyframes ccPulseCrit {
    0%   { box-shadow: 0 0 0 0 rgba(255,61,99,.55); }
    70%  { box-shadow: 0 0 0 7px rgba(255,61,99,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,61,99,0); }
  }
  @keyframes ccPulseOk {
    0%   { box-shadow: 0 0 0 0 rgba(0,200,150,.5); }
    70%  { box-shadow: 0 0 0 5px rgba(0,200,150,0); }
    100% { box-shadow: 0 0 0 0 rgba(0,200,150,0); }
  }
  @keyframes ccPulseWarn {
    0%   { box-shadow: 0 0 0 0 rgba(255,180,41,.5); }
    70%  { box-shadow: 0 0 0 5px rgba(255,180,41,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,180,41,0); }
  }

  /* The live alert in the hero mockup breathes gently */
  .mockup-alert { animation: ccBreathe 3.2s ease-in-out infinite; }
  @keyframes ccBreathe {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,61,99,0); }
    50%      { box-shadow: 0 0 0 4px rgba(255,61,99,.10); }
  }
}