/* Indi, the Indicold website guide (markup is injected by assets/indi/indi.js) */
#indi-host { --indi-navy: #103890; --indi-amber: #FEB20F; --indi-amber-ui: #F5A623; --indi-bg: #ffffff; --indi-bg-alt: #F3F5FA; --indi-fg: #0f1a33; --indi-muted: #5b6480; --indi-line: #DDE2EC; --indi-shadow: 0 12px 32px rgba(16,56,144,.18); --indi-font: 'Hanken Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif; font-family: var(--indi-font); font-size: 16px; line-height: 1.5; }
#indi-host * { box-sizing: border-box; }
#indi-host .guide, #indi-host .peek, #indi-host .loading { z-index: 900; }
  /* ================= INDI v9: video character =================
     Three Veo clips keyed offline into stacked colour|alpha MP4s. A canvas composites the alpha each frame,
     draws a contact shadow under the tracked feet and the Indicold logo on the tracked chest badge. */
  #indi-host .guide { position: fixed; left: 0; right: 0; bottom: 0; height: 0; z-index: 50; pointer-events: none; }
  #indi-host .stage { position: absolute; left: 0; bottom: calc(0px + env(safe-area-inset-bottom, 0px)); width: 0; height: 0; pointer-events: none; }
  #indi-host .stage canvas { position: absolute; left: 0; bottom: 0; transform-origin: 0 100%; pointer-events: none; image-rendering: auto; }
  #indi-host .stage canvas.ghost { opacity: 0; transition: opacity .45s ease-in-out; }
  #indi-host .stage canvas.ghost.show { opacity: 1; transition: none; }
  #indi-host .stage canvas.ghost.show { opacity: 1; transition: none; }
  #indi-host .stage .hit { position: absolute; bottom: 0; width: 150px; height: 300px; transform: translateX(-50%); pointer-events: auto; cursor: default; }
  #indi-host .stage.react canvas.main { animation: react .35s ease-out; }
  @keyframes react { 0% { transform: scale(var(--s)) } 35% { transform: scale(calc(var(--s) * 1.06), calc(var(--s) * .94)) } 70% { transform: scale(calc(var(--s) * .97), calc(var(--s) * 1.03)) } 100% { transform: scale(var(--s)) } }
  #indi-host .bang { position: absolute; font: 800 26px var(--indi-font); color: var(--indi-amber-ui); opacity: 0; pointer-events: none; }
  #indi-host .bang.go { animation: bang .8s ease-out forwards; }
  @keyframes bang { 0% { opacity: 0; transform: translateY(6px) scale(.6); } 25% { opacity: 1; transform: translateY(-4px) scale(1.2); } 100% { opacity: 0; transform: translateY(-18px) scale(1); } }
  #indi-host .flake { position: absolute; color: #bfe3ff; font-size: 16px; opacity: 0; pointer-events: none; }
  #indi-host .flake.go { animation: flake 1.6s ease-out forwards; }
  @keyframes flake { 0% { opacity: 0; transform: translate(0,0) rotate(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), -46px) rotate(180deg); } }
  #indi-host .loading { position: fixed; right: 16px; bottom: 16px; font: 600 12px var(--indi-font); color: var(--indi-muted); background: var(--indi-bg-alt); border: 1px solid var(--indi-line); border-radius: 999px; padding: 6px 12px; z-index: 50; }
  @media (prefers-reduced-motion: reduce) { #indi-host .stage.react canvas.main, #indi-host .bang.go, #indi-host .flake.go { animation: none; } }
  /* speech bubble */
  #indi-host .bubble { position: absolute; bottom: 286px; left: 16px; width: min(320px, calc(100vw - 32px));
    background: var(--indi-bg); color: var(--indi-fg); border-radius: 16px; box-shadow: var(--indi-shadow); padding: 16px 16px 14px; pointer-events: auto;
    opacity: 0; transform: translateY(10px) scale(.96); transform-origin: var(--tail, 50%) 100%; transition: opacity .3s, transform .3s; border: 1px solid var(--indi-line); }
  #indi-host .bubble.show { opacity: 1; transform: none; }
  #indi-host .bubble.side::after { left: auto; right: -9px; bottom: 28px; margin: 0; transform: rotate(-45deg); border-right: 1px solid var(--indi-line); border-bottom: 1px solid var(--indi-line); border-top: 0; }
  #indi-host .bubble.side:not(.side-left)::after { right: auto; left: -9px; transform: rotate(135deg); }
  #indi-host .bubble.side { transform-origin: 100% 80%; }
  #indi-host .bubble.side:not(.side-left) { transform-origin: 0 80%; }
  #indi-host .bubble::after { display: none; content: ""; position: absolute; left: var(--tail, 50%); margin-left: -9px; bottom: -9px; width: 18px; height: 18px; background: var(--indi-bg); border-right: 1px solid var(--indi-line); border-bottom: 1px solid var(--indi-line); transform: rotate(45deg); }
  #indi-host .bubble .who { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--indi-amber-ui); display: flex; justify-content: space-between; align-items: center; }
  #indi-host .close { background: none; border: 0; color: var(--indi-muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; font-family: inherit; }
  #indi-host .snd { background: none; border: 0; font-size: 15px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; margin-right: 4px; }
  #indi-host .snd.nudge { animation: nudge 1.2s ease-in-out 3; }
  @keyframes nudge { 0%,100% { transform: scale(1); } 50% { transform: scale(1.35); } }
  #indi-host .snd:focus-visible { outline: 3px solid var(--indi-amber-ui); outline-offset: 2px; }
  #indi-host .bubble .say { margin-top: 6px; font-size: 15px; line-height: 1.45; min-height: 44px; }
  #indi-host .qr { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  #indi-host .qr button { font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 999px; border: 1.5px solid var(--indi-navy); background: transparent; color: var(--indi-navy); cursor: pointer; }
  #indi-host .qr button:hover { background: var(--indi-navy); color: #fff; }
  #indi-host .qr button.soft { border-color: var(--indi-line); color: var(--indi-muted); }
  #indi-host .qr button.soft:hover { background: var(--indi-bg-alt); color: var(--indi-fg); }

  #indi-host .peek { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 50; width: 52px; height: 52px; border-radius: 50%;
    background: var(--indi-navy); border: 2px solid var(--indi-amber); box-shadow: var(--indi-shadow); cursor: pointer; display: none; align-items: center; justify-content: center; padding: 0; }
  #indi-host .peek.show { display: flex; }
  #indi-host .peek svg { width: 34px; height: 34px; }

  #indi-host .say .cur { display: inline-block; width: 2px; height: 1em; background: var(--indi-amber-ui); vertical-align: -2px; margin-left: 1px; animation: cur .8s steps(2) infinite; }
  @keyframes cur { to { opacity: 0; } }