/* =============================================================================
   Hablo marketing — motion layer.
   Loaded last on every page. Everything here is progressive enhancement: the
   site reads identically with this file removed. All movement sits inside
   `prefers-reduced-motion: no-preference`; scroll reveals and the route canvas
   are added by /assets/motion.js, which bails out for reduced-motion users.
   ============================================================================= */

:root {
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-glide: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Static polish (no movement, safe for everyone) ---- */
.hb-section > .hb-container { position: relative; z-index: 1; }
/* `clip` rather than `hidden`: it must not become a scroll container, or sticky
   children (the for-agents chat card) stop travelling. */
@supports (overflow: clip) {
  .hb-section--dark,
  .hb-section--soft { overflow: clip; isolation: isolate; }
}

.hb-routes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hb-section > .hb-routes { position: absolute; z-index: 0; }
.hb-routes.is-live { opacity: 1; }
/* Cursor spotlight: a soft cyan pool that follows the pointer across cards. */
.hb-pillar,
.hb-price,
.hb-dmo,
.hb-attr__tile,
.hb-whatis__tile,
.hb-curve,
.hb-fcta__form,
.hb-vca__tile,
.fa-feat,
.fa-tier,
.ag-case,
.ch-tier,
.pr-tier,
.pr-contrast__tile {
  --mx: 50%;
  --my: 50%;
  --spot: rgba(0, 147, 199, 0);
  background-image: radial-gradient(420px circle at var(--mx) var(--my), var(--spot), transparent 62%);
  background-repeat: no-repeat;
}

@media print {
  .rv,
  .rv * { opacity: 1 !important; transform: none !important; scale: 1 !important; }
  .hb-curve__chart.is-armed circle,
  .hb-curve__chart.is-armed .hb-curve__label { opacity: 1 !important; }
  .hb-curve__chart.is-armed path { clip-path: none !important; }
  .hb-routes { display: none; }
  *,
  *::before,
  *::after { animation: none !important; }
}

/* =============================================================================
   MOVEMENT
   ============================================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* Off-screen sections and a mid-session switch to reduced motion pause everything. */
  .mo-off,
  .mo-off *,
  .mo-off::before,
  .mo-off *::before,
  .mo-off *::after,
  html.mo-paused *,
  html.mo-paused *::before,
  html.mo-paused *::after { animation-play-state: paused !important; }

  .hb-field__input { transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out); }

  /* ---- Page-to-page cross-fade (browsers with cross-document view transitions) ---- */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: hb-vt-out 160ms ease both; }
  ::view-transition-new(root) { animation: hb-vt-in 320ms var(--ease-glide) both; }
  .hb-nav { view-transition-name: hb-nav; }

  /* ---- Living mesh: the ambient background drifts instead of sitting still ---- */
  /* One composited layer drifting over the existing static mesh — transform only. */
  body::after {
    content: "";
    position: fixed;
    inset: -12%;
    z-index: -1;
    pointer-events: none;
    will-change: transform;
    background:
      radial-gradient(36% 34% at 76% 22%, rgba(0, 147, 199, 0.15), transparent 70%),
      radial-gradient(30% 30% at 20% 74%, rgba(11, 212, 113, 0.11), transparent 72%);
    animation: hb-aurora-a 32s ease-in-out infinite alternate;
  }

  @media (max-width: 700px) {
    body::after {
      background:
        radial-gradient(60% 30% at 80% 20%, rgba(0, 147, 199, 0.09), transparent 70%),
        radial-gradient(55% 28% at 16% 76%, rgba(11, 212, 113, 0.06), transparent 72%);
    }
  }

  /* Dark and soft sections carry their own slow glow. */
  @supports (overflow: clip) {
  .hb-section--dark::before,
  .hb-section--soft::before {
    content: "";
    position: absolute;
    inset: -30% -15%;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
    animation: hb-aurora-b 30s ease-in-out infinite alternate;
  }
  .hb-section--dark::before {
    background:
      radial-gradient(34% 44% at 84% 22%, rgba(0, 147, 199, 0.26), transparent 70%),
      radial-gradient(28% 36% at 8% 88%, rgba(11, 212, 113, 0.1), transparent 72%);
  }
  .hb-section--soft::before {
    background:
      radial-gradient(30% 44% at 88% 14%, rgba(255, 255, 255, 0.85), transparent 70%),
      radial-gradient(26% 40% at 6% 92%, rgba(11, 212, 113, 0.12), transparent 72%);
  }
  }
  .hb-thinking::before { inset: -40%; animation: hb-aurora-a 24s ease-in-out infinite alternate; }

  /* ---- Scroll progress hairline under the nav ---- */
  @supports (animation-timeline: scroll()) {
    .hb-nav::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--cyan), var(--green));
      transform-origin: 0 50%;
      transform: scaleX(0);
      animation: hb-progress linear both;
      animation-timeline: scroll(root);
    }
    body:has(.wp-progress) .hb-nav::after { display: none; }
  }

  /* ---- Hero entrance (pure CSS so it never depends on script timing) ---- */
  main > section:first-child .hb-eyebrow,
  main > section:first-child h1,
  main > section:first-child h1 ~ *,
  .hb-hero-2 > *,
  .legal-hero .hb-container > * {
    animation: hb-rise 0.9s var(--ease-glide) both;
  }
  main > section:first-child h1 { animation-name: hb-rise-blur; animation-duration: 1s; }
  main > section:first-child h1 ~ *:nth-of-type(1),
  main > section:first-child h1 + * { animation-delay: 0.26s; }
  main > section:first-child h1 + * + * { animation-delay: 0.36s; }
  main > section:first-child h1 + * + * + * { animation-delay: 0.46s; }
  main > section:first-child h1 + * + * + * + * { animation-delay: 0.56s; }

  /* Hero product cards: dealt in, then left gently afloat. */
  .hb-hero-viz__card,
  .fa-viz__card {
    --d: 10;
    translate: calc(var(--px, 0) * var(--d) * 1px) calc(var(--py, 0) * var(--d) * 1px);
    transition: translate 0.5s var(--ease-glide);
  }
  .hb-hero-viz__a, .fa-viz__b { --d: 16; }
  .hb-hero-viz__b, .fa-viz__a { --d: -8; }
  .hb-hero-viz__c, .fa-viz__c { --d: 24; }
  .hb-hero-viz__d, .fa-viz__d { --d: -14; }

  .hb-hero-viz__card > .mk-card {
    animation:
      hb-deal 1s var(--ease-glide) both,
      hb-float 7s ease-in-out 1.6s infinite alternate;
  }
  .hb-hero-viz__b > .mk-card { animation-delay: 0.3s, 1.4s; animation-duration: 1s, 8s; }
  .hb-hero-viz__a > .mk-card { animation-delay: 0.45s, 1.9s; animation-duration: 1s, 6.5s; }
  .hb-hero-viz__d > .mk-card { animation-delay: 0.6s, 1.2s; animation-duration: 1s, 9s; }
  .hb-hero-viz__c > .mk-card {
    animation-name: hb-pop, hb-float;
    animation-timing-function: var(--ease-spring), ease-in-out;
    animation-delay: 1.5s, 2.6s;
    animation-duration: 0.7s, 7.5s;
  }
  .ch-scene { animation: hb-deal 1s var(--ease-glide) 0.35s both; }
  .ch-scene__fill { transform-origin: 0 50%; animation: hb-grow-x 1.4s var(--ease-glide) 0.9s both; }

  /* Hablo AI card: thinking dots, then the answer types out. */
  .mk-aichat__dot { animation: hb-ping-soft 2.4s ease-out infinite; }
  .mk-aichat__a.is-thinking { color: transparent; position: relative; }
  .mk-aichat__a.is-thinking::after {
    content: "";
    position: absolute;
    left: 12px;
    top: 14px;
    width: 28px;
    height: 6px;
    background: radial-gradient(circle 3px at 3px 3px, var(--cyan) 98%, transparent) 0 0 / 11px 6px repeat-x;
    animation: hb-think 0.9s ease-in-out infinite;
  }
  .mk-caret {
    display: inline-block;
    width: 0;
    height: 1em;
    margin-right: -1.5px;
    vertical-align: -0.12em;
    border-left: 1.5px solid var(--cyan);
    animation: hb-blink 0.8s steps(2) infinite;
  }
  .mk-rest { visibility: hidden; }
  .mk-aichat__verified { transition: opacity 0.5s ease, transform 0.5s var(--ease-spring); }
  .mk-aichat__verified.is-waiting { opacity: 0; transform: translateY(4px); }
  .mk-leader__row.is-top { animation: hb-row-glow 3.6s ease-in-out 2.4s infinite; }

  /* ---- Scroll reveal (classes added by motion.js) ---- */
  .rv.rv {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition:
      opacity 0.8s var(--ease-glide),
      transform 0.9s var(--ease-glide);
    transition-delay: calc(var(--i, 0) * 80ms);
    will-change: opacity, transform;
  }
  .rv.rv.rv--scale { transform: translate3d(0, 28px, 0) scale(0.97); }
  .rv.rv.rv-in { opacity: 1; transform: none; }

  /* Marks and ticks land with a small spring once their row is in. */
  .rv .hb-shift__mark,
  .rv .hb-vca__tick,
  .rv .hb-attr__check,
  .rv .fa-feat__icon,
  .rv .hb-pillar__icon,
  .rv .hb-why__icon,
  .rv .ag-case__icon {
    scale: 0.4;
    opacity: 0;
    transition: scale 0.6s var(--ease-spring), opacity 0.3s ease;
    transition-delay: calc(var(--i, 0) * 80ms + 220ms);
  }
  .rv.rv-in .hb-shift__mark,
  .rv.rv-in .hb-vca__tick,
  .rv.rv-in .hb-attr__check,
  .rv.rv-in .fa-feat__icon,
  .rv.rv-in .hb-pillar__icon,
  .rv.rv-in .hb-why__icon,
  .rv.rv-in .ag-case__icon { scale: 1; opacity: 1; }

  /* ---- Browser mockups tip forward as they scroll into view ---- */
  @supports (animation-timeline: view()) {
    .hb-aishow { perspective: 1400px; }
    .hb-aishow__frame {
      transform-origin: 50% 100%;
      animation: hb-tilt-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 38%;
    }
    .hb-quiz__shot img {
      animation: hb-drift-up linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }

  /* ---- Cards: lift, hairline warms to cyan, spotlight follows the cursor ---- */
  .hb-pillar,
  .hb-price,
  .hb-dmo,
  .hb-attr__tile,
  .hb-whatis__tile,
  .hb-vca__tile,
  .fa-feat,
  .fa-tier,
  .ag-case,
  .ch-tier,
  .pr-tier,
  .pr-contrast__tile {
    transition:
      translate 0.45s var(--ease-glide),
      box-shadow 0.45s var(--ease-glide),
      border-color 0.3s ease,
      --spot 0.3s ease;
  }
  @media (hover: hover) {
    .hb-pillar:hover,
    .hb-price:hover,
    .hb-dmo:hover,
    .hb-attr__tile:hover,
    .hb-whatis__tile:hover,
    .fa-feat:hover,
    .fa-tier:hover,
    .ag-case:hover,
    .ch-tier:hover,
    .pr-tier:hover,
    .pr-contrast__tile:hover {
      --spot: rgba(0, 147, 199, 0.09);
      translate: 0 -4px;
      border-color: rgba(0, 147, 199, 0.38);
      box-shadow: 0 18px 40px -24px rgba(15, 28, 42, 0.28), 0 2px 6px rgba(15, 28, 42, 0.04);
    }
    .hb-attr__tile--highlight:hover,
    .hb-price--featured:hover,
    .pr-tier--featured:hover {
      box-shadow: inset 0 0 0 1px var(--cyan), 0 18px 40px -22px rgba(0, 147, 199, 0.5);
    }
    .hb-vca__tile:hover {
      --spot: rgba(0, 147, 199, 0.22);
      translate: 0 -3px;
      border-color: rgba(0, 147, 199, 0.55);
    }
    .hb-curve:hover,
    .hb-fcta__form:hover { --spot: rgba(0, 147, 199, 0.06); }

    .mk-plat { transition: translate 0.5s var(--ease-glide), box-shadow 0.5s var(--ease-glide); }
    .hb-whatis__tile:hover .mk-plat,
    .hb-aishow:hover .mk-plat { translate: 0 -4px; box-shadow: 0 28px 60px -30px rgba(15, 28, 42, 0.35); }

    .hb-logos__img { transition: filter var(--dur-base) var(--ease-out), scale 0.4s var(--ease-spring); }
    .hb-logos__img:hover { scale: 1.07; }

    /* Buttons: the arrow leans the way it points; primary gains a soft glow. */
    .hb-btn__icon,
    .hb-pricing__foot a .hb-icon { transition: translate 0.35s var(--ease-spring); }
    .hb-btn:hover .hb-btn__icon,
    .hb-pricing__foot a:hover .hb-icon { translate: 4px 0; }
    .hb-btn:hover .hb-btn__icon:has([data-icon="arrow-down"]) { translate: 0 3px; }
    .hb-btn--primary {
      transition:
        background var(--dur-base) var(--ease-out),
        box-shadow 0.35s var(--ease-glide),
        translate 0.35s var(--ease-glide),
        transform var(--dur-fast) var(--ease-out);
    }
    .hb-btn--primary:hover { translate: 0 -1px; box-shadow: 0 10px 24px -10px rgba(0, 147, 199, 0.7); }
  }

  /* ---- "Lives inside" connector breathes ---- */
  .hb-whatis__conn-arrow-wrap { position: relative; }
  .hb-whatis__conn-arrow-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--cyan);
    animation: hb-ring 2.6s ease-out infinite;
  }
  .hb-whatis__conn-arrow-wrap .hb-icon { animation: hb-nudge 2.6s var(--ease-glide) infinite; }

  /* ---- Daily Quiz loop: the four beats light up in turn, every day ---- */
  .hb-qflow.rv-live .hb-qflow__icon { animation: hb-beat 6.4s ease-in-out infinite; }
  .hb-qflow.rv-live .hb-qflow__step:nth-child(3) .hb-qflow__icon { animation-delay: 1.6s; }
  .hb-qflow.rv-live .hb-qflow__step:nth-child(5) .hb-qflow__icon { animation-delay: 3.2s; }
  .hb-qflow.rv-live .hb-qflow__step:nth-child(7) .hb-qflow__icon { animation-delay: 4.8s; }
  .hb-qflow.rv-live .hb-qflow__conn .hb-icon { animation: hb-nudge 6.4s var(--ease-glide) infinite; }
  .hb-qflow.rv-live .hb-qflow__conn:nth-child(2) .hb-icon { animation-delay: 0.9s; }
  .hb-qflow.rv-live .hb-qflow__conn:nth-child(4) .hb-icon { animation-delay: 2.5s; }
  .hb-qflow.rv-live .hb-qflow__conn:nth-child(6) .hb-icon { animation-delay: 4.1s; }

  /* ---- Forgetting curve: drawn by motion.js, then the Hablo line stays alive ---- */
  .hb-curve__chart.is-armed circle,
  .hb-curve__chart.is-armed .hb-curve__label { opacity: 0; }
  .hb-curve__chart.is-drawn circle,
  .hb-curve__chart.is-drawn .hb-curve__label { opacity: 1; transition: opacity 0.6s ease; }
  .hb-curve__pulse {
    transform-box: fill-box;
    transform-origin: center;
    animation: hb-pulse-dot 2.4s ease-out infinite;
  }

  /* ---- "Trade — now measurable" tile: live signal ---- */
  .hb-attr__tile--highlight .hb-attr__check { position: relative; }
  .hb-attr__tile--highlight .hb-attr__check::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--cyan);
    animation: hb-ring 2s ease-out infinite;
  }
  .hb-price__pop,
  .pr-tier__pop { animation: hb-bob 3.2s ease-in-out infinite alternate; }

  /* ---- Rails (tier progress) fill once revealed ---- */
  .hb-rail__node.is-on { animation: hb-ping-soft 2.4s ease-out infinite; }

  /* ---- Sub-nav glides rather than snaps ---- */
  .hb-subnav { transition: transform 0.45s var(--ease-glide), opacity 0.3s ease; }

  /* ---- Keyframes ---- */
  @keyframes hb-vt-out { to { opacity: 0; } }
  @keyframes hb-vt-in { from { opacity: 0; transform: translateY(8px); } }
  @keyframes hb-progress { to { transform: scaleX(1); } }
  @keyframes hb-aurora-a {
    0% { transform: translate3d(-5%, -4%, 0) rotate(-6deg) scale(1); }
    50% { transform: translate3d(5%, 4%, 0) rotate(5deg) scale(1.1); }
    100% { transform: translate3d(-7%, 8%, 0) rotate(12deg) scale(1.03); }
  }
  @keyframes hb-aurora-b {
    0% { transform: translate3d(4%, 3%, 0) rotate(4deg) scale(1.08); }
    50% { transform: translate3d(-5%, -3%, 0) rotate(-2deg) scale(1); }
    100% { transform: translate3d(3%, -6%, 0) rotate(-6deg) scale(1.14); }
  }
  @keyframes hb-rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } }
  @keyframes hb-rise-blur { from { opacity: 0.35; transform: translate3d(0, 22px, 0); filter: blur(8px); } }
  @keyframes hb-deal { from { opacity: 0; transform: translate3d(0, 36px, 0) scale(0.94); } }
  @keyframes hb-pop { from { opacity: 0; transform: translate3d(0, -14px, 0) scale(0.8); } }
  @keyframes hb-float { from { translate: 0 0; } to { translate: 0 -9px; } }
  @keyframes hb-bob { from { translate: 0 0; } to { translate: 0 -2px; } }
  @keyframes hb-grow-x { from { transform: scaleX(0); } }
  @keyframes hb-blink { 50% { opacity: 0; } }
  @keyframes hb-think { 0%, 100% { opacity: 0.35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
  @keyframes hb-ping-soft {
    0% { box-shadow: 0 0 0 0 rgba(0, 147, 199, 0.4); }
    70%, 100% { box-shadow: 0 0 0 7px rgba(0, 147, 199, 0); }
  }
  @keyframes hb-ring {
    0% { transform: scale(1); opacity: 0.7; }
    80%, 100% { transform: scale(1.75); opacity: 0; }
  }
  @keyframes hb-nudge { 0%, 60%, 100% { translate: 0 0; } 25% { translate: 4px 0; } }
  @keyframes hb-beat {
    0%, 30%, 100% { background: #fff; color: var(--cyan); border-color: var(--border-strong); box-shadow: 0 0 0 0 rgba(0, 147, 199, 0); scale: 1; }
    8%, 20% { background: var(--cyan); color: #fff; border-color: var(--cyan); box-shadow: 0 0 0 8px rgba(0, 147, 199, 0.12); scale: 1.08; }
  }
  @keyframes hb-row-glow { 0%, 100% { background: rgba(0, 147, 199, 0.04); } 50% { background: rgba(0, 147, 199, 0.11); } }
  @keyframes hb-pulse-dot {
    0% { transform: scale(1); opacity: 0.55; }
    80%, 100% { transform: scale(4.5); opacity: 0; }
  }
  @keyframes hb-tilt-in {
    from { transform: rotateX(14deg) scale(0.94); opacity: 0.55; }
    to { transform: none; opacity: 1; }
  }
  @keyframes hb-drift-up { from { translate: 0 28px; } to { translate: 0 -28px; } }

  @media (max-width: 980px) {
    .hb-whatis__conn-arrow-wrap .hb-icon,
    .hb-qflow.rv-live .hb-qflow__conn .hb-icon { animation: none; }
    .hb-hero-viz__card > .mk-card { animation-name: hb-deal; animation-iteration-count: 1; animation-duration: 1s; }
    .hb-hero-viz__c > .mk-card { animation-name: hb-pop; animation-duration: 0.7s; }
  }
}

@property --spot {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(0, 147, 199, 0);
}