/* Thermii guide — "Alive" mascot motion
   ------------------------------------------------------------------
   Presentation only. Load AFTER thermii-spark.css:

     <link rel="stylesheet" href="css/thermii-spark.css">
     <link rel="stylesheet" href="css/thermii-guide-alive.css">

   Requires one markup change in the sidebar avatar (index.html):
     · the remote <img> becomes the inline mark, as .wIntroAvatar already is
     · <span class="thermii-guide-blink"><i></i><i></i></span>
       becomes <span class="thermii-guide-pop" aria-hidden="true">✦</span>

   Nothing else changes. thermii-spark.js keeps sole ownership of when the
   states fire; this file only decides what they look like. The seven classes
   it toggles — is-listening, is-explaining, is-responding, is-recommending,
   is-celebrating, is-triumphing — are the only hooks used here.

   The body transform moves off .thermii-side-avatar and onto the mark, so the
   sparkles no longer inherit the squash and can act on their own. */

@media screen {

  /* ── Rig ───────────────────────────────────────────────────────── */
  body .thermii-side-avatar {
    /* thermii-spark.css idles the whole container; the mark idles instead. */
    animation: none;
  }

  .thermii-guide-mark {
    position: relative;
    display: block;
    width: 80px;
    height: 80px;
    overflow: visible;
    /* Pivot at the base so squash and stretch reads as weight, not scaling. */
    transform-origin: 50% 88%;
    filter: drop-shadow(0 10px 18px rgba(64, 62, 180, .18));
    will-change: transform;
  }

  .thermii-guide-eye {
    transform-box: fill-box;
    transform-origin: center;
  }

  /* The arcs reach ~74px from centre at the widest, past the avatar's own 104px
     box but well inside the sidebar, so nothing needs releasing from clipping —
     components.css keeps its overflow:hidden on .thermii-sidebar untouched. */
  body .thermii-side-avatar,
  body .thermii-side-intro {
    overflow: visible;
  }

  /* The pill overlay is obsolete — the real eyes blink now. */
  .thermii-guide-blink { display: none !important; }

  .thermii-guide-pop {
    position: absolute;
    top: -2px;
    right: 4px;
    z-index: 2;
    color: var(--thermii-purple, #7138ed);
    font-size: 18px;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
  }

  /* ── Rest ──────────────────────────────────────────────────────── */
  body .thermii-side-avatar .thermii-guide-mark {
    animation: tga-breathe 5.2s ease-in-out infinite;
  }

  body .thermii-side-avatar .thermii-guide-eye {
    animation: tga-eye-blink 6.4s ease-in-out infinite;
  }

  /* Six sparks in two lanes, one either side of the mark. Each lane runs a
     single keyframe set at one duration with evenly divided negative delays,
     which is what makes it read as a continuous stream rather than a loop.
     The two lanes run at different durations so the sides never mirror. */
  body .thermii-side-avatar .thermii-side-spark:nth-of-type(n) {
    position: absolute;
    top: auto;
    right: auto;
    left: 50%;
    bottom: 50%;
    opacity: 0;
    line-height: 1;
    pointer-events: none;
  }

  /* Three on the faster left arc, two on the slower right. The uneven split is
     deliberate: with equal counts the two sides read as a mirrored pair. */
  body .thermii-side-avatar .thermii-side-spark:nth-of-type(1),
  body .thermii-side-avatar .thermii-side-spark:nth-of-type(2),
  body .thermii-side-avatar .thermii-side-spark:nth-of-type(3) {
    animation: tga-drift-left 10.5s ease-in-out infinite;
  }

  body .thermii-side-avatar .thermii-side-spark:nth-of-type(4),
  body .thermii-side-avatar .thermii-side-spark:nth-of-type(5) {
    animation: tga-drift-right 12s ease-in-out infinite;
  }

  body .thermii-side-avatar .thermii-side-spark:nth-of-type(1) { font-size: 22px; color: #1fdbca; animation-delay: 0s; }
  body .thermii-side-avatar .thermii-side-spark:nth-of-type(2) { font-size: 16px; color: #149de8; animation-delay: -3.5s; }
  body .thermii-side-avatar .thermii-side-spark:nth-of-type(3) { font-size: 19px; color: #7138ed; animation-delay: -7s; }
  body .thermii-side-avatar .thermii-side-spark:nth-of-type(4) { font-size: 24px; color: #149de8; animation-delay: 0s; }
  body .thermii-side-avatar .thermii-side-spark:nth-of-type(5) { font-size: 20px; color: #d414c4; animation-delay: -6s; }

  /* ── Listening · the original lift and tilt, kept from the current build ── */
  body .thermii-side-avatar.is-listening .thermii-guide-mark {
    animation: tga-listen 520ms cubic-bezier(.22, 1, .36, 1) both;
  }

  /* ── Explaining · held open while Thermii Insight is expanded ──── */
  body .thermii-side-avatar.is-explaining {
    /* thermii-spark.css holds a transform on the container; the mark owns it. */
    transform: none;
  }

  body .thermii-side-avatar.is-explaining .thermii-guide-mark {
    animation: tga-lean 340ms cubic-bezier(.22, 1, .36, 1) both;
  }

  body .thermii-side-avatar.is-explaining .thermii-guide-eye {
    animation: tga-eye-blink 4.4s ease-in-out infinite;
  }

  /* ── Got it · a nod, nothing more ──────────────────────────────── */
  body .thermii-side-avatar.is-responding .thermii-guide-mark {
    animation: tga-nod 520ms cubic-bezier(.22, 1, .36, 1) both;
  }

  body .thermii-side-avatar.is-responding .thermii-guide-eye {
    animation: tga-eye-blink 520ms cubic-bezier(.22, 1, .36, 1) both;
  }

  /* ── Recommended · one hop, eyes widen, sparks throw off ───────── */
  body .thermii-side-avatar.is-recommending .thermii-guide-mark {
    animation: tga-hop 760ms cubic-bezier(.22, 1, .36, 1) both;
  }

  body .thermii-side-avatar.is-recommending .thermii-guide-eye {
    animation: tga-eye-happy 700ms cubic-bezier(.22, 1, .36, 1) both;
  }

  body .thermii-side-avatar.is-recommending .thermii-side-spark {
    animation: tga-burst 720ms cubic-bezier(.22, 1, .36, 1) both;
  }

  body .thermii-side-avatar.is-recommending .thermii-side-spark:nth-of-type(2),
  body .thermii-side-avatar.is-celebrating .thermii-side-spark:nth-of-type(2),
  body .thermii-side-avatar.is-triumphing .thermii-side-spark:nth-of-type(2) {
    animation-delay: 90ms;
  }

  body .thermii-side-avatar.is-recommending .thermii-side-spark:nth-of-type(3),
  body .thermii-side-avatar.is-celebrating .thermii-side-spark:nth-of-type(3),
  body .thermii-side-avatar.is-triumphing .thermii-side-spark:nth-of-type(3) {
    animation-delay: 45ms;
  }

  body .thermii-side-avatar.is-recommending .thermii-side-spark:nth-of-type(4),
  body .thermii-side-avatar.is-celebrating .thermii-side-spark:nth-of-type(4),
  body .thermii-side-avatar.is-triumphing .thermii-side-spark:nth-of-type(4) {
    animation-delay: 135ms;
  }

  body .thermii-side-avatar.is-recommending .thermii-side-spark:nth-of-type(5),
  body .thermii-side-avatar.is-celebrating .thermii-side-spark:nth-of-type(5),
  body .thermii-side-avatar.is-triumphing .thermii-side-spark:nth-of-type(5) {
    animation-delay: 180ms;
  }

  body .thermii-side-avatar.is-recommending .thermii-guide-pop {
    animation: tga-pop 780ms cubic-bezier(.22, 1, .36, 1) 40ms both;
  }

  /* ── Stage complete · a proper cheer, still no spin ─────────────── */
  body .thermii-side-avatar.is-celebrating .thermii-guide-mark {
    animation: tga-cheer 980ms cubic-bezier(.22, 1, .36, 1) both;
  }

  body .thermii-side-avatar.is-celebrating .thermii-guide-eye {
    animation: tga-eye-happy 900ms cubic-bezier(.22, 1, .36, 1) both;
  }

  body .thermii-side-avatar.is-celebrating .thermii-side-spark {
    animation: tga-burst 860ms cubic-bezier(.22, 1, .36, 1) both;
  }

  body .thermii-side-avatar.is-celebrating .thermii-guide-pop {
    animation: tga-pop 900ms cubic-bezier(.22, 1, .36, 1) 60ms both;
  }

  /* ── Kit ready · the only place the eyes spin, and only once ────── */
  body .thermii-side-avatar.is-triumphing .thermii-guide-mark {
    animation: tga-victory 1320ms cubic-bezier(.22, 1, .36, 1) both;
  }

  body .thermii-side-avatar.is-triumphing .thermii-guide-eye {
    animation: tga-eye-spin 1100ms cubic-bezier(.22, 1, .36, 1) both;
  }

  body .thermii-side-avatar.is-triumphing .thermii-side-spark {
    animation: tga-burst 1000ms cubic-bezier(.22, 1, .36, 1) both;
  }

  body .thermii-side-avatar.is-triumphing .thermii-guide-pop {
    animation: tga-pop 1060ms cubic-bezier(.22, 1, .36, 1) 70ms both;
  }

  @keyframes tga-pop {
    0%   { opacity: 0; transform: scale(.4) rotate(0deg); }
    28%  { opacity: 1; transform: translate(6px, -12px) scale(1.5) rotate(40deg); }
    100% { opacity: 0; transform: translate(11px, -22px) scale(.7) rotate(90deg); }
  }

  /* ── Keyframes ─────────────────────────────────────────────────── */
  @keyframes tga-breathe {
    0%, 100% { transform: translateY(0) scale(1, 1); }
    50% { transform: translateY(-2px) scale(.992, 1.012); }
  }

  @keyframes tga-listen {
    0% { transform: translateY(0) scale(1, 1); }
    55% { transform: translateY(-4px) rotate(-3deg) scale(1.055); }
    100% { transform: translateY(0) scale(1, 1); }
  }

  @keyframes tga-lean {
    0% { transform: translateY(0) rotate(0deg) scale(1, 1); }
    100% { transform: translateY(-3px) rotate(-4deg) scale(1.02, 1.03); }
  }

  @keyframes tga-nod {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1, 1); }
    22% { transform: translateY(2px) scale(1.06, .94); }
    52% { transform: translateY(-6px) rotate(-2deg) scale(.96, 1.06); }
    76% { transform: translateY(1px) scale(1.03, .97); }
  }

  @keyframes tga-hop {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1, 1); }
    14% { transform: translateY(4px) scale(1.12, .88); }
    38% { transform: translateY(-16px) rotate(-5deg) scale(.92, 1.1); }
    58% { transform: translateY(2px) scale(1.09, .91); }
    76% { transform: translateY(-6px) rotate(3deg) scale(.97, 1.04); }
    90% { transform: translateY(1px) scale(1.02, .98); }
  }

  @keyframes tga-cheer {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1, 1); }
    10% { transform: translateY(6px) scale(1.16, .84); }
    32% { transform: translateY(-26px) rotate(-7deg) scale(.9, 1.13); }
    46% { transform: translateY(-18px) rotate(6deg) scale(.95, 1.06); }
    62% { transform: translateY(4px) scale(1.14, .86); }
    80% { transform: translateY(-7px) rotate(-2deg) scale(.98, 1.03); }
  }

  @keyframes tga-victory {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1, 1); }
    8% { transform: translateY(7px) scale(1.18, .82); }
    28% { transform: translateY(-32px) rotate(-9deg) scale(.88, 1.15); }
    42% { transform: translateY(-24px) rotate(8deg) scale(.94, 1.07); }
    56% { transform: translateY(5px) scale(1.15, .85); }
    70% { transform: translateY(-12px) rotate(-5deg) scale(.96, 1.05); }
    84% { transform: translateY(2px) rotate(3deg) scale(1.04, .96); }
    93% { transform: translateY(-3px) rotate(-1.5deg) scale(.99, 1.01); }
  }

  @keyframes tga-eye-blink {
    0%, 92%, 100% { transform: scaleY(1); }
    95%, 97% { transform: scaleY(.1); }
  }

  @keyframes tga-eye-happy {
    0%, 100% { transform: scale(1); }
    30% { transform: scale(1.26) rotate(-8deg); }
    62% { transform: scale(1.1) rotate(6deg); }
  }

  @keyframes tga-eye-spin {
    0% { transform: rotate(0deg) scale(1); }
    40% { transform: rotate(200deg) scale(1.22); }
    100% { transform: rotate(360deg) scale(1); }
  }

  /* Drift: arcs at 52–62px from centre, sweeping from below the mark, out around
     its flank and away over the top. Each spark fades in as it enters the path
     and out as it leaves, so no return journey is ever visible. Three sparks
     share each arc at evenly divided negative delays — that is what keeps it
     continuous rather than a loop — and the two arcs run at different durations
     so the sides never mirror.

     The mark is 80px, so it occupies ±40px. Where a waypoint comes inside that
     horizontally it is already 14px clear above or below, which keeps the whole
     path outside the artwork. */
  @keyframes tga-drift-left {
    0%   { opacity: 0;   transform: translate(-50%, 0) translate(-26px, 54px) scale(.35) rotate(0deg); }
    10%  { opacity: .8;  transform: translate(-50%, 0) translate(-44px, 40px) scale(.72) rotate(18deg); }
    22%  { opacity: 1;   transform: translate(-50%, 0) translate(-57px, 18px) scale(.94) rotate(42deg); }
    40%  { opacity: 1;   transform: translate(-50%, 0) translate(-62px, -8px) scale(1) rotate(74deg); }
    60%  { opacity: .92; transform: translate(-50%, 0) translate(-50px, -36px) scale(.92) rotate(108deg); }
    80%  { opacity: .58; transform: translate(-50%, 0) translate(-28px, -55px) scale(.72) rotate(142deg); }
    100% { opacity: 0;   transform: translate(-50%, 0) translate(-6px, -62px) scale(.35) rotate(178deg); }
  }

  @keyframes tga-drift-right {
    0%   { opacity: 0;   transform: translate(-50%, 0) translate(28px, 54px) scale(.32) rotate(0deg); }
    11%  { opacity: .78; transform: translate(-50%, 0) translate(46px, 40px) scale(.7) rotate(-20deg); }
    24%  { opacity: 1;   transform: translate(-50%, 0) translate(58px, 16px) scale(.93) rotate(-46deg); }
    42%  { opacity: 1;   transform: translate(-50%, 0) translate(62px, -10px) scale(1) rotate(-78deg); }
    62%  { opacity: .9;  transform: translate(-50%, 0) translate(49px, -38px) scale(.9) rotate(-112deg); }
    82%  { opacity: .54; transform: translate(-50%, 0) translate(26px, -57px) scale(.7) rotate(-146deg); }
    100% { opacity: 0;   transform: translate(-50%, 0) translate(4px, -62px) scale(.34) rotate(-180deg); }
  }

  @keyframes tga-burst {
    0%   { opacity: 0; transform: translate(-50%, 0) scale(.5) rotate(0deg); }
    26%  { opacity: 1; transform: translate(-50%, 0) translate(0, -16px) scale(1.55) rotate(40deg); }
    100% { opacity: 0; transform: translate(-50%, 0) translate(0, -34px) scale(.7) rotate(96deg); }
  }
}

/* Compact sidebar — the avatar drops to 58px and the sparks are hidden. */
/* Under 900px the avatar drops to 52px and sits beside the heading, so there is
   no headroom above it. The lanes collapse to a twinkle in place. */
@media screen and (max-width: 900px) {
  .thermii-guide-mark { width: 52px; height: 52px; }
  .thermii-guide-pop { display: none; }

  body .thermii-side-avatar .thermii-side-spark:nth-of-type(n) {
    animation: tga-twinkle-place 6s ease-in-out infinite;
  }

  body .thermii-side-avatar .thermii-side-spark:nth-of-type(1) { bottom: auto; top: 0; left: -10px; font-size: 17px; }
  body .thermii-side-avatar .thermii-side-spark:nth-of-type(2) { bottom: 0; left: auto; right: -10px; font-size: 14px; animation-delay: -3s; }
  body .thermii-side-avatar .thermii-side-spark:nth-of-type(3),
  body .thermii-side-avatar .thermii-side-spark:nth-of-type(4),
  body .thermii-side-avatar .thermii-side-spark:nth-of-type(5) { display: none; }

  @keyframes tga-twinkle-place {
    0%, 100% { opacity: .5; transform: translate(0, 0) scale(.8) rotate(0deg); }
    45% { opacity: 1; transform: translate(0, 0) scale(1.15) rotate(16deg); }
  }
}

@media (prefers-reduced-motion: reduce) {
  body .thermii-side-avatar .thermii-guide-mark,
  body .thermii-side-avatar .thermii-guide-eye,
  body .thermii-side-spark,
  body .thermii-side-avatar.is-listening .thermii-guide-mark,
  body .thermii-side-avatar.is-explaining .thermii-guide-mark,
  body .thermii-side-avatar.is-explaining .thermii-guide-eye,
  body .thermii-side-avatar.is-responding .thermii-guide-mark,
  body .thermii-side-avatar.is-responding .thermii-guide-eye,
  body .thermii-side-avatar.is-recommending .thermii-guide-mark,
  body .thermii-side-avatar.is-recommending .thermii-guide-eye,
  body .thermii-side-avatar.is-recommending .thermii-side-spark,
  body .thermii-side-avatar.is-recommending .thermii-guide-pop,
  body .thermii-side-avatar.is-celebrating .thermii-guide-mark,
  body .thermii-side-avatar.is-celebrating .thermii-guide-eye,
  body .thermii-side-avatar.is-celebrating .thermii-side-spark,
  body .thermii-side-avatar.is-celebrating .thermii-guide-pop,
  body .thermii-side-avatar.is-triumphing .thermii-guide-mark,
  body .thermii-side-avatar.is-triumphing .thermii-guide-eye,
  body .thermii-side-avatar.is-triumphing .thermii-side-spark,
  body .thermii-side-avatar.is-triumphing .thermii-guide-pop {
    animation: none !important;
  }

  .thermii-guide-mark { transform: none !important; }
  .thermii-guide-pop { opacity: 0 !important; }
  body .thermii-side-spark { opacity: .58 !important; transform: scale(.9) !important; }
}

@media print {
  .thermii-guide-pop { display: none !important; }
}