/* r4 — Liquid Popover (details.so menu-01) styles, adapted for inline company chips.
   The SVG blob is the visible surface: at rest it draws the chip, open it draws the tooltip. */

.menu-demo {
  --menu-gap: 12px;
  --menu-bg: var(--chip);
  --tip-bg: #fff;
  --brand: var(--ink);
  --blob-padding: 44px;
  --viewport-padding: 16px;
  --menu-ease: cubic-bezier(0.19, 1, 0.22, 1);
  --pop-y: 10px;
  --corner-shape: superellipse(1.2);
  /* Gentle spring (≈ bounce 0.15) for the satellites. */
  --spring: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%,
                   0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1);

  position: relative;
  display: inline-grid;
  place-items: center;
  isolation: isolate;
  /* Smaller text sits lower in its line box; lift by the difference so the pill doesn't drift. */
  vertical-align: calc((1 - var(--tune-chip-scale, .9)) * .39em);
}
.menu-demo[data-placement="bottom"] { --pop-y: -10px; }
/* The opening tooltip always sits above one that's still closing. */
.menu-demo.is-closing { z-index: 20; }
.menu-demo.is-open { z-index: 21; }
.menu-demo *, .menu-demo *::before, .menu-demo *::after { box-sizing: border-box; }
.menu-demo svg { display: block; }

.menu-blob { position: absolute; z-index: 1; max-width: none; overflow: visible; pointer-events: none;
             transition: filter 240ms var(--ease-out); }
/* Lift the open tooltip: a wide, soft glow tinted with the company's brand colour, plus a tight
   neutral contact shadow so the edge stays crisp on white. */
.menu-demo.is-open .menu-blob {
  filter: drop-shadow(0 24px 64px color-mix(in srgb, var(--brand) 20%, transparent))
          drop-shadow(0 6px 18px color-mix(in srgb, var(--brand) 12%, transparent))
          drop-shadow(0 1px 2px rgb(0 0 0 / 8%));
}
[data-theme="dark"] .menu-demo.is-open .menu-blob {
  filter: drop-shadow(0 18px 48px color-mix(in srgb, var(--brand) 30%, transparent))
          drop-shadow(0 6px 16px rgb(0 0 0 / 50%));
}
.blob-shape { fill: var(--menu-bg); stroke: none; transition: fill 240ms var(--ease-out); }
/* Open: the chip's fill brightens to the tooltip surface as it morphs. */
.menu-demo.is-open .blob-shape { fill: var(--tip-bg); }
/* Tooltips stay white in dark mode, but the company pill stays a dark chip (no white on hover or
   while open). Only the tooltip and its stickers switch to the light palette so brand colours,
   muted text and the black stickers read correctly on white. */
/* Light mode chips: a pale wash of the company's colour over white instead of grey. */
[data-theme="light"] .menu-demo:not(.name-tip) { --menu-bg: color-mix(in srgb, var(--brand) 10%, #fff); }
/* Dark mode: the whole morph (pill + tooltip) is one surface, the chip's own tint, easing slightly
   darker as it opens (the blob's fill transition animates it). Text stays in the dark palette:
   brand-coloured title, light-grey body, and the black stickers invert to white via --ink/--bg. */
/* Dark mode chips: a deep version of the company's own colour (26% brand at 60% strength over #121212),
   tuned to the Starbucks #133c2b and Dosh references. The name keeps no chip. */
[data-theme="dark"] .menu-demo:not(.name-tip) { --menu-bg: color-mix(in srgb, var(--brand) calc(26% * .6), #121212); }
[data-theme="dark"] .menu-demo { --tip-bg: color-mix(in srgb, var(--menu-bg) 72%, #000); }
[data-theme="dark"] .name-tip { --tip-bg: #1b1b1b; }
@media (hover: hover) and (pointer: fine) {
  [data-theme="dark"] .menu-demo:not(.is-open):hover .blob-shape { fill: var(--menu-bg); }
}
[data-theme="dark"] .menu-demo .tip-did { color: #a9a9a9; }
[data-theme="dark"] .name-tip .tip-did { color: #ececec; }

/* Hover goes straight to the tooltip surface (#fff / dark surface), so the chip reads as the
   start of the tooltip it's about to become rather than a darker grey state. */
@media (hover: hover) and (pointer: fine) {
  .menu-demo:not(.is-open):hover .blob-shape { fill: var(--tip-bg); }
}

/* Chip: transparent, the blob behind it is the fill. */
.menu-trigger {
  position: relative; z-index: 3;
  /* Text can shrink inside the pill (--tune-chip-scale) while the pill keeps the paragraph-sized
     height, padding and corner: those are divided by the scale so they stay in paragraph ems. */
  --s: var(--tune-chip-scale, .9);
  padding: 0 calc(.2em / var(--s)); border: 0; border-radius: calc(.32em / var(--s)); corner-shape: var(--corner-shape);
  background: transparent; color: inherit; font: inherit; font-size: calc(1em * var(--s)); font-weight: var(--tune-chip-weight, 500); letter-spacing: inherit; line-height: calc(1.12 / var(--s));
  white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), background-color 240ms var(--ease-out);
}
.menu-trigger:active { transform: scale(.97); }
/* While open the blob leaves the chip; the trigger keeps its own fill so the word stays seated. */
.menu-demo.is-open .menu-trigger { background: var(--tip-bg); }
.menu-trigger:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Tooltip panel: transparent, clipped to the blob outline at runtime. */
.menu-panel {
  position: absolute; top: 0; left: 0; z-index: 2;
  display: grid; gap: 6px; width: max-content; max-width: min(330px, calc(100vw - 32px));
  padding: 16px 18px 17px; border-radius: 18px; corner-shape: var(--corner-shape);
  background: transparent; pointer-events: none; isolation: isolate;
  font-size: var(--tip-body-size, 15px); line-height: 1.45; letter-spacing: -.008em; text-align: left; white-space: normal;
}
.menu-panel[hidden] { display: none; }
.menu-panel.is-measuring { visibility: hidden; pointer-events: none; clip-path: none !important; }
.menu-panel.is-measuring > * { animation: none !important; }
.menu-demo.is-open .menu-panel { pointer-events: auto; }
.menu-panel > * { position: relative; z-index: 1; }
.tip-name { font-size: var(--tip-title-size, 18px); line-height: 1.25; font-weight: var(--tip-title-weight, 600); letter-spacing: -.01em; color: var(--brand); }
.tip-did { color: var(--muted); font-weight: var(--tip-body-weight, 500); text-wrap: pretty; }


/* Panel content pops in behind the morph, in reading order; out in reverse. */
.menu-demo.is-open .menu-panel > * {
  animation: menu-pop-motion .38s cubic-bezier(.34, 1.56, .64, 1) both, menu-pop-visual .22s var(--menu-ease) both;
}
.menu-demo.is-open .menu-panel > :nth-child(1) { animation-delay: 30ms; }
.menu-demo.is-open .menu-panel > :nth-child(2) { animation-delay: 60ms; }
.menu-demo.is-closing .menu-panel > * { animation: menu-pop-out .18s ease-in both; }
.menu-demo.is-closing .menu-panel > :nth-child(1) { animation-delay: 20ms; }

@keyframes menu-pop-motion { from { translate: 0 var(--pop-y); } to { translate: 0 0; } }
@keyframes menu-pop-visual { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }
@keyframes menu-pop-opacity { from { opacity: 0; } to { opacity: 1; } }
@keyframes menu-pop-out {
  from { opacity: 1; filter: blur(0); translate: 0 0; }
  to { opacity: 0; filter: blur(6px); translate: 0 var(--pop-y); }
}
@keyframes menu-pop-out-mobile { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 var(--pop-y); } }

/* Satellites: fan out of the chip's centre to the panel's far corners, settle with a slight tilt. */
.sat {
  position: absolute; top: 0; left: 0; z-index: 4; pointer-events: none;
  opacity: 0;
  transform: translate(calc(var(--x, 0px) + var(--fx, 0px)), calc(var(--y, 0px) + var(--fy, 0px))) rotate(0deg) scale(.5);
  transition: transform 200ms cubic-bezier(.4, 0, 1, 1), opacity 140ms ease-in;
  will-change: transform, opacity;
}
.menu-demo.is-open .sat:not([data-sticker]) {
  opacity: 1;
  transform: translate(var(--x), var(--y)) rotate(var(--r, 0deg)) scale(1);
  transition: transform 620ms var(--spring) var(--delay, 0ms), opacity 220ms var(--ease-out) var(--delay, 0ms);
}
/* Moving between chips: skip the stagger so it feels immediate. */
.menu-demo.is-instant .sat { --delay: 0ms; }
/* The details sticker's motion lives in sticker.js (WAAPI); CSS only sets its resting look. */
.sat[data-sticker] { transition: none; transform: translate(var(--x, 0px), var(--y, 0px)); z-index: 0; }

.tile {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; corner-shape: var(--corner-shape);
  background: var(--tile);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 6%), 0 1px 2px rgb(0 0 0 / 6%), 0 8px 20px -6px rgb(0 0 0 / 22%);
}
.tile .logo { width: 24px; height: 24px; background: var(--c);
              -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }

.meta {
  padding: 6px 11px; border: 0; border-radius: 999px; background: var(--ink); color: var(--bg);
  /* Figma sticker spec: Haffer SQ XH, 12px, 700, line-height normal. */
  font-family: "Haffer SQ", "Haffer", system-ui, sans-serif; font-size: 12px; line-height: normal; font-weight: 700; letter-spacing: 0; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 8px 20px -8px rgb(0 0 0 / 35%);
}

@media (hover: none), (pointer: coarse) {
  .menu-demo.is-open .menu-panel > * { animation-name: menu-pop-motion, menu-pop-opacity; }
  .menu-demo.is-closing .menu-panel > * { animation-name: menu-pop-out-mobile; }
}

@media (prefers-reduced-motion: reduce) {
  .sat, .menu-demo.is-open .sat:not([data-sticker]) { transform: translate(var(--x), var(--y)) rotate(var(--r, 0deg)); transition: opacity 160ms ease; }
  .menu-demo.is-open .menu-panel > * { animation: menu-pop-opacity .16s ease both; }
  .menu-demo.is-closing .menu-panel > * { animation: none; }
}

/* Progressive blur halo around the open tooltip. Same idea as the details.so Progressive Blur:
   eight stacked backdrop-filter layers, blur doubling each step (0.125px → 16px). The weakest reaches
   88px out, the strongest ~35px, so heavy blur gets real room to build instead of bunching at the edge. Near the edge every layer applies; at --halo-reach none do.
   Opacity is animated on the layers themselves (an ancestor's opacity would cut off the backdrop). */
.menu-demo { --halo-reach: var(--tune-halo-reach, 220px); }
.halo { position: absolute; z-index: 0; pointer-events: none; }
/* Only the opening/closing tooltip's halo exists. Hidden halos still cost GPU memory if they keep
   their backdrop-filter, and 12 × 8 large layers is enough to make the compositor drop tiles. */
.menu-demo:not(.is-open):not(.is-closing) .halo { display: none; }
.hl {
  position: absolute; inset: 0; pointer-events: none; border-radius: 40px;
  --m-x: linear-gradient(to right, transparent var(--a), #000 var(--b), #000 calc(100% - var(--b)), transparent calc(100% - var(--a)));
  --m-y: linear-gradient(to bottom, transparent var(--a), #000 var(--b), #000 calc(100% - var(--b)), transparent calc(100% - var(--a)));
  -webkit-mask-image: var(--m-x), var(--m-y); -webkit-mask-composite: source-in;
  mask-image: var(--m-x), var(--m-y); mask-composite: intersect;
  --a: calc(var(--halo-reach) * var(--f));
  --b: min(var(--halo-reach), calc(var(--a) + var(--halo-reach) * .45));
  -webkit-backdrop-filter: blur(calc(var(--tune-halo-max, 10px) * var(--w)));
  backdrop-filter: blur(calc(var(--tune-halo-max, 10px) * var(--w)));
  opacity: 0; transition: opacity 160ms ease-in;
}
.hl-1 { z-index: 1; --f: 0.0; --w: 0.0078125; }
.hl-2 { z-index: 2; --f: 0.0857; --w: 0.015625; }
.hl-3 { z-index: 3; --f: 0.1714; --w: 0.03125; }
.hl-4 { z-index: 4; --f: 0.2571; --w: 0.0625; }
.hl-5 { z-index: 5; --f: 0.3429; --w: 0.125; }
.hl-6 { z-index: 6; --f: 0.4286; --w: 0.25; }
.hl-7 { z-index: 7; --f: 0.5143; --w: 0.5; }
.hl-8 { z-index: 8; --f: 0.6; --w: 1; }
.menu-demo.is-open .hl { opacity: 1; transition: opacity 320ms var(--ease-out) 40ms; }
@media (prefers-reduced-motion: reduce) { .hl, .menu-demo.is-open .hl { transition: opacity 120ms ease; } }

/* Blur mode (set on <html data-blur>): halo (progressive, around the tooltip), page (one blur over
   everything, tooltip lifted above it), or off. */
[data-blur="page"] .halo, [data-blur="off"] .halo { display: none; }
.page-blur {
  position: fixed; inset: 0; z-index: 15; pointer-events: none; visibility: hidden;
  -webkit-backdrop-filter: blur(var(--tune-page-blur, 10px)); backdrop-filter: blur(var(--tune-page-blur, 10px));
  background: color-mix(in srgb, var(--bg) var(--tune-page-wash, 30%), transparent);
  opacity: 0; transition: opacity 160ms ease-in, visibility 0s 160ms;
}
/* Visible (and composited) only while a tooltip is open. */
[data-blur="page"].tip-open .page-blur { visibility: visible; opacity: 1; transition: opacity 280ms var(--ease-out), visibility 0s; }
[data-blur="halo"] .page-blur, [data-blur="off"] .page-blur { display: none; }

/* Die-cut logo stickers (white outline baked into the SVG). Animated by sticker.js like the details
   pill; the shadow lives on the <img> so the animation's filter doesn't wipe it. */
.sticker-logo { display: block; line-height: 0; }
.sticker-logo img { display: block; width: auto; max-width: none;
  filter: drop-shadow(0 6px 14px rgb(0 0 0 / 16%)) drop-shadow(0 1px 1.5px rgb(0 0 0 / 14%)); }
[data-theme="dark"] .sticker-logo img { filter: drop-shadow(0 8px 18px rgb(0 0 0 / 50%)) drop-shadow(0 1px 1.5px rgb(0 0 0 / 40%)); }

/* "AI Products" sticker (Figma Frame 3): the details pill with the sparkle mark. The SVG is used as
   supplied; stroke follows the text colour so it inverts with the pill in dark mode. */
.meta.ai { display: inline-flex; align-items: center; gap: 5px; padding-left: 9px; }
.meta .spark { width: 13px; height: 13px; flex: none; }