/* v8.5: designed dots, edge pips and hint (owner: helper V85-DZ). Loaded after hot.css; overrides only .mfhh-dot*, .mfhh-edge*, .mfhh-hint*.
   Her world: blush pink + cream + gold. Each dot = cream pearl core with a thin gold hairline, inside a soft blush
   petal halo (two pre-drawn rings), breathing slowly (opacity + scale only, compositor; ~3.2 s). Nothing is painted per
   frame; every loop pauses while the dots are hidden (zoomed / gliding in) and stops for reduced motion.
   Tap target unchanged: the button stays 44 x 44 px. No new words: labels are her highlight names (hot.js). */
.mfhh-dots, #mfh-hot {
  --dz-blush: 244, 198, 207;  /* #f4c6cf */
  --dz-rose: 214, 140, 158;   /* #d68c9e */
  --dz-cream: #fdf7ef;
  --dz-gold: 214, 178, 118;   /* #d6b276 */
  --dz-ink: 46, 30, 32;       /* warm deep rose-brown */
}

/* ---------- the dot ---------- */
/* petal halo: a static soft blush ring + a fainter outer ring (drawn once, never repainted) */
.mfhh-dot::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--dz-blush), 0) 0 34%, rgba(var(--dz-rose), .55) 38%, rgba(var(--dz-blush), .6) 46%, rgba(var(--dz-blush), .30) 58%, rgba(var(--dz-blush), .08) 68%, rgba(var(--dz-blush), 0) 71%);
  box-shadow: 0 0 0 1px rgba(var(--dz-gold), .7), 0 0 0 1.5px rgba(var(--dz-ink), .12), 0 0 24px 6px rgba(var(--dz-blush), .5);
  transition: transform .55s cubic-bezier(.22, .8, .2, 1), opacity .45s cubic-bezier(.22, .8, .2, 1);
}
/* the pearl: cream core, thin gold hairline, a hint of blush underneath */
.mfhh-dot__core {
  width: 16px; height: 16px;
  background: radial-gradient(circle at 38% 34%, #ffffff 0, var(--dz-cream) 38%, #f6e3d4 72%, #efcfc0 100%);
  box-shadow: 0 0 0 1px rgba(var(--dz-gold), .95), 0 0 0 2.5px rgba(255, 255, 255, .55), 0 1px 3px rgba(var(--dz-ink), .35), 0 0 12px 3px rgba(255, 244, 236, .55);
}
/* breathing: pre-drawn blush bloom; opacity + scale only */
.mfhh-dot__core::after {
  inset: -14px;
  box-shadow: none;
  background: radial-gradient(circle, rgba(var(--dz-blush), .0) 30%, rgba(var(--dz-blush), .55) 46%, rgba(var(--dz-rose), .18) 62%, rgba(var(--dz-blush), 0) 72%);
  animation: dzBreath 3.2s cubic-bezier(.45, .05, .55, .95) infinite;
}
@keyframes dzBreath { 0%, 100% { opacity: .15; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.08); } }
.mfhh-dots .mfhh-dot:nth-child(2) .mfhh-dot__core::after { animation-delay: -.8s; }
.mfhh-dots .mfhh-dot:nth-child(3) .mfhh-dot__core::after { animation-delay: -1.6s; }
.mfhh-dots .mfhh-dot:nth-child(4) .mfhh-dot__core::after { animation-delay: -2.4s; }
/* the "look here" ripple (hint phase): a thin gold-blush ring opening out */
.mfhh-dot__ring { width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 1px solid rgba(var(--dz-gold), .9); box-shadow: 0 0 0 1px rgba(var(--dz-blush), .5); }
@keyframes mfhhPulse { 0% { transform: scale(1); opacity: .9; } 75%, 100% { transform: scale(3.4); opacity: 0; } }
/* hover / focus: the halo opens a little, the pearl lifts */
.mfhh-dot:hover::before, .mfhh-dot:focus-visible::before { transform: scale(1.18); }
.mfhh-dot:hover .mfhh-dot__core, .mfhh-dot:focus-visible .mfhh-dot__core { transform: scale(1.18); }
.mfhh-dot:focus-visible::after { inset: 2px; outline: 1.5px solid rgba(var(--dz-gold), 1); outline-offset: 1px; }
/* hidden dots: every loop rests */
body.mfh-zoomed .mfhh-dot__core::after, body.mfh-gliding-in .mfhh-dot__core::after { animation-play-state: paused; }

/* label: a refined cream pill with a gold hairline, her name in the italic serif (laptop: hover / focus) */
.mfhh-dot__lab {
  bottom: calc(100% + 6px); padding: 7px 15px 8px;
  background: rgba(253, 247, 239, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(var(--dz-gold), .7), 0 10px 26px -12px rgba(var(--dz-ink), .55);
  font: italic 500 19px/1 var(--mfhh-acc); letter-spacing: .01em; color: rgb(var(--dz-ink));
}
/* phones / touch: a small, always-visible caption just below each dot (does not cover what the dot marks) */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .mfhh-dots .mfhh-dot__lab {
    bottom: auto; top: calc(100% - 4px); padding: 4px 10px 5px;
    background: rgba(253, 247, 239, .88); -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: inset 0 0 0 1px rgba(var(--dz-gold), .6), 0 4px 12px -6px rgba(var(--dz-ink), .55);
    font: 600 11.5px/1.1 var(--mfhh-body); letter-spacing: .03em; color: rgb(var(--dz-ink));
  }
}

/* ---------- edge pips (zone off screen) ---------- */
.mfhh-edge__core {
  width: 32px; height: 32px; margin: -16px 0 0 -16px;
  background: rgba(253, 247, 239, .86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(var(--dz-gold), .75), 0 0 0 4px rgba(var(--dz-blush), .35), 0 6px 18px -8px rgba(var(--dz-ink), .6);
}
.mfhh-edge svg { color: rgb(var(--dz-rose)); }
.mfhh-edge .mfhh-dot__ring { width: 32px; height: 32px; margin: -16px 0 0 -16px; border: 1px solid rgba(var(--dz-blush), .9); animation-duration: 3.2s; }
.mfhh-edge .mfhh-dot__lab { padding: 6px 12px 7px; font-size: 16px; }
body.mfh-zoomed .mfhh-edge .mfhh-dot__ring, body.mfh-gliding-in .mfhh-edge .mfhh-dot__ring { animation-play-state: paused; }
.mfhh-edge:focus-visible .mfhh-edge__core { outline: 1.5px solid rgba(var(--dz-gold), 1); }

/* ---------- "Tap a glowing dot" hint ---------- */
.mfhh-hint {
  padding: 8px 16px 9px 11px; gap: 10px;
  background: rgba(253, 247, 239, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(var(--dz-gold), .65), 0 10px 26px -12px rgba(var(--dz-ink), .6);
  color: rgb(var(--dz-ink)); letter-spacing: .07em;
}
.mfhh-hint__dot {
  width: 8px; height: 8px;
  background: radial-gradient(circle at 38% 34%, #ffffff 0, var(--dz-cream) 40%, #f2d6c8 100%);
  box-shadow: 0 0 0 1px rgba(var(--dz-gold), .9), 0 0 0 3.5px rgba(var(--dz-blush), .6);
}

@media (prefers-reduced-motion: reduce) {
  .mfhh-dot__core::after, .mfhh-edge .mfhh-dot__ring, .mfhh-dots.is-hint .mfhh-dot__ring { animation: none !important; }
  .mfhh-dot__core::after { opacity: .7; transform: none; }
  .mfhh-dot::before { transition: none; }
}

/* ===================== v8.5b (Diego/Michael 22:35: "the dots look the same") =====================
   Unmistakably new: a 5-petal blossom (her blush + gold) inside a frosted-glass ring with a gold edge,
   a slow breathing outer ring, a petal spin on hover/tap, the label (her section name) ALWAYS shown beside
   the dot in the italic serif, and a bigger 56 px tap target. Overrides the v8.5 dot rules above. */
.mfhh-dot { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
/* frosted-glass ring */
.mfhh-dot::before {
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .42), rgba(253, 247, 239, .2) 55%, rgba(var(--dz-blush), .22));
  -webkit-backdrop-filter: blur(9px) saturate(1.35); backdrop-filter: blur(9px) saturate(1.35);
  box-shadow: inset 0 0 0 1.5px rgba(var(--dz-gold), .95), inset 0 1px 0 rgba(255, 255, 255, .6),
              0 0 0 4px rgba(var(--dz-blush), .28), 0 8px 22px -8px rgba(var(--dz-ink), .7), 0 0 26px 4px rgba(var(--dz-blush), .45);
}
/* the blossom: five blush petals with a rose outline and a gold heart */
.mfhh-dot__core {
  width: 28px; height: 28px; border-radius: 0; box-shadow: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23f9dde1' stroke='%23c4798b' stroke-width='.85'%3E%3Cellipse cx='12' cy='6.3' rx='3.2' ry='4.9'/%3E%3Cellipse cx='12' cy='6.3' rx='3.2' ry='4.9' transform='rotate(72 12 12)'/%3E%3Cellipse cx='12' cy='6.3' rx='3.2' ry='4.9' transform='rotate(144 12 12)'/%3E%3Cellipse cx='12' cy='6.3' rx='3.2' ry='4.9' transform='rotate(216 12 12)'/%3E%3Cellipse cx='12' cy='6.3' rx='3.2' ry='4.9' transform='rotate(288 12 12)'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='2.7' fill='%23e6c27f' stroke='%23b38a4a' stroke-width='.7'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 1px 1.5px rgba(46, 30, 32, .45));
  transition: transform .9s cubic-bezier(.22, .8, .2, 1);
}
/* breathing outer ring (opacity + scale only) */
.mfhh-dot__core::after {
  inset: -19px; border-radius: 50%; background: none;
  box-shadow: 0 0 0 1.5px rgba(var(--dz-blush), .95), 0 0 14px 2px rgba(var(--dz-blush), .45);
  animation: dzRing 3.6s cubic-bezier(.45, .05, .55, .95) infinite;
}
@keyframes dzRing { 0%, 100% { opacity: .25; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.14); } }
/* petal spin on hover / focus / tap */
.mfhh-dot:hover .mfhh-dot__core, .mfhh-dot:focus-visible .mfhh-dot__core, .mfhh-dot:active .mfhh-dot__core { transform: rotate(72deg) scale(1.12); }
.mfhh-dot:hover::before, .mfhh-dot:focus-visible::before, .mfhh-dot:active::before { transform: scale(1.08); }
/* the label: always shown, beside the dot, her section name in the italic serif */
.mfhh-dots .mfhh-dot__lab, .mfhh-dots .mfhh-dot:hover .mfhh-dot__lab, .mfhh-dots .mfhh-dot:focus-visible .mfhh-dot__lab {
  opacity: 1; left: calc(100% - 2px); right: auto; top: 50%; bottom: auto; transform: translate3d(0, -50%, 0);
  padding: 6px 14px 7px; border-radius: 999px;
  background: rgba(253, 247, 239, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(var(--dz-gold), .75), 0 8px 22px -10px rgba(var(--dz-ink), .6);
  font: italic 500 19px/1 var(--mfhh-acc); letter-spacing: .01em; color: rgb(var(--dz-ink));
}
/* the consult table sits at the right end of the room: its label goes on the left */
.mfhh-dots .mfhh-dot:nth-child(4) .mfhh-dot__lab { left: auto; right: calc(100% - 2px); }
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .mfhh-dots .mfhh-dot__lab, .mfhh-dots .mfhh-dot:hover .mfhh-dot__lab { font-size: 16px; padding: 5px 11px 6px; -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(253, 247, 239, .92); }
  .mfhh-dot::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55), rgba(253, 247, 239, .34) 55%, rgba(var(--dz-blush), .36)); }
}
@media (prefers-reduced-motion: reduce) {
  .mfhh-dot__core::after { animation: none !important; opacity: .7; transform: none; }
  .mfhh-dot:hover .mfhh-dot__core, .mfhh-dot:focus-visible .mfhh-dot__core, .mfhh-dot:active .mfhh-dot__core { transform: none; }
}

/* ===================== v8.5c (Michael 22:52: "the 5-petal icon reads as clip-art") =====================
   Each dot holds a tiny REAL bloom, a round crop from her own photo (local crop + light sharpen only, never AI):
   1 Mix flowers = pink garden rose (mix-1), 2 Weddings = coral dahlia (wed-3), 3 Baskets & Boxes = red dahlia
   (detail-2; she has no basket/box photo of her own), 4 Plan your flowers = blush garden rose (detail-3).
   Same frosted gold-edged ring, soft glow, slow breathing ring, labels always on. Hover/tap: a gentle lift. */
.mfhh-dot__core {
  width: 36px; height: 36px; border-radius: 50%;
  background: center / cover no-repeat;
  box-shadow: 0 0 0 1.5px rgba(var(--dz-gold), .95), 0 0 0 3px rgba(255, 255, 255, .5), 0 2px 6px rgba(var(--dz-ink), .45), 0 0 16px 4px rgba(255, 238, 230, .55);
  filter: saturate(1.06) brightness(1.04);
  transition: transform .7s cubic-bezier(.22, .8, .2, 1), box-shadow .7s cubic-bezier(.22, .8, .2, 1);
}
.mfhh-dots .mfhh-dot:nth-child(1) .mfhh-dot__core { background-image: url("blooms/b1.webp"); }
.mfhh-dots .mfhh-dot:nth-child(2) .mfhh-dot__core { background-image: url("blooms/b2.webp"); }
.mfhh-dots .mfhh-dot:nth-child(3) .mfhh-dot__core { background-image: url("blooms/b3.webp"); }
.mfhh-dots .mfhh-dot:nth-child(4) .mfhh-dot__core { background-image: url("blooms/b4.webp"); }
.mfhh-dot::before { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
.mfhh-dot__core::after { inset: -16px; }
/* hover / focus / tap: a gentle lift and a warmer glow (no spin on a real photo) */
.mfhh-dot:hover .mfhh-dot__core, .mfhh-dot:focus-visible .mfhh-dot__core, .mfhh-dot:active .mfhh-dot__core {
  transform: scale(1.12);
  box-shadow: 0 0 0 1.5px rgba(var(--dz-gold), 1), 0 0 0 3px rgba(255, 255, 255, .6), 0 4px 10px rgba(var(--dz-ink), .45), 0 0 24px 7px rgba(var(--dz-blush), .7);
}
.mfhh-dots .mfhh-dot__lab { left: calc(100% + 2px); }
.mfhh-dots .mfhh-dot:nth-child(4) .mfhh-dot__lab { left: auto; right: calc(100% + 2px); }
@media (prefers-reduced-motion: reduce) {
  .mfhh-dot:hover .mfhh-dot__core, .mfhh-dot:focus-visible .mfhh-dot__core, .mfhh-dot:active .mfhh-dot__core { transform: none; }
}