/* More Pro features: the phone with feature icons floating around it. Hover or focus an icon to zoom it and read
   its name. Used on the Hero Project sales page and the Hero Hub page. */
.pro-stage-title { margin: clamp(48px, 6vw, 72px) 0 0; color: var(--v2-ink); font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 900; line-height: 1.15; letter-spacing: -.02em; text-align: center; }
/* The top margin leaves room for the names that open above the top icons. */
.pro-stage { position: relative; width: min(900px, 100%); aspect-ratio: 1500 / 838; margin: 46px auto 0; }
.pro-stage__phone { position: absolute; top: 6%; left: 50%; width: 36%; height: auto; transform: translateX(-50%); filter: drop-shadow(0 22px 26px rgba(20, 42, 70, .18)); animation: proPhoneFloat 6s ease-in-out infinite; }
.pro-stage__icons { margin: 0; padding: 0; list-style: none; }
.pro-float { position: absolute; left: var(--x); top: var(--y); z-index: 1; width: 13%; transform: translate(-50%, -50%); outline: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pro-float:hover, .pro-float:focus-visible, .pro-float.is-open { z-index: 3; }
.pro-float__icon { position: relative; z-index: 1; display: block; animation: proFloat var(--d) ease-in-out var(--o) infinite; }
.pro-float__icon img { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 14px rgba(20, 42, 70, .2)); transition: transform .25s ease; }
.pro-float:hover .pro-float__icon, .pro-float:focus-visible .pro-float__icon, .pro-float.is-open .pro-float__icon { animation-play-state: paused; }
.pro-float:hover .pro-float__icon img, .pro-float:focus-visible .pro-float__icon img, .pro-float.is-open .pro-float__icon img { transform: scale(1.12); }
.pro-float__label {
  position: absolute; left: 50%; bottom: calc(100% + 10px); padding: 8px 14px; border: 2px solid var(--v2-ink); border-radius: 12px;
  color: var(--v2-ink); background: var(--v2-paper); box-shadow: 3px 3px 0 var(--v2-ink); font-size: .85rem; font-weight: 800; white-space: nowrap;
  opacity: 0; transform: translate(var(--lx, -50%), var(--ly, 6px)); pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.pro-float:hover .pro-float__label, .pro-float:focus-visible .pro-float__label, .pro-float.is-open .pro-float__label { z-index: 2; opacity: 1; transform: translate(var(--lx, -50%), 0); }
/* Hint: a white dot pulses on the first icon until the visitor finds an icon. */
.pro-float__pulse { position: absolute; left: 50%; top: 50%; z-index: 2; width: 26%; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(20, 42, 70, .35); transform: translate(-50%, -50%); pointer-events: none; animation: proPulseDot 1.8s ease-in-out infinite; }
.pro-float__pulse::after { content: ""; position: absolute; inset: -55%; border: 3px solid rgba(31, 58, 95, .38); border-radius: 50%; background: rgba(255, 255, 255, .35); animation: proPulseRing 1.8s ease-out infinite; }
.pro-stage.is-discovered .pro-float__pulse { display: none; }
@keyframes proPulseDot { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(.86); } }
@keyframes proPulseRing { 0% { opacity: .9; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.25); } }
.pro-stage-note { margin: 22px 0 0; color: var(--v2-ink); font-size: clamp(1.15rem, 2.2vw, 1.55rem); font-weight: 900; line-height: 1.2; letter-spacing: -.02em; text-align: center; }
@keyframes proFloat { 0%, 100% { transform: translateY(0) rotate(var(--r)); } 50% { transform: translateY(-12px) rotate(calc(var(--r) * -1)); } }
@keyframes proPhoneFloat { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -8px); } }
@media (max-width: 640px) {
  .pro-stage { aspect-ratio: 1 / 1; }
  .pro-stage__phone { top: 16%; width: 54%; }
  .pro-float { width: 21%; }
  .pro-float:nth-child(1) { --x: 16% !important; --y: 15% !important; }
  .pro-float:nth-child(2) { --x: 85% !important; --y: 13% !important; }
  .pro-float:nth-child(3) { --x: 86% !important; --y: 48% !important; }
  .pro-float:nth-child(4) { --x: 14% !important; --y: 62% !important; }
  .pro-float:nth-child(5) { --x: 80% !important; --y: 84% !important; }
  .pro-float__label { font-size: .75rem; }
  /* Labels open toward the middle so they stay on screen. */
  .pro-float__label { --lx: 0; }
  .pro-float:nth-child(1) .pro-float__label, .pro-float:nth-child(4) .pro-float__label { left: 0; }
  .pro-float:nth-child(2) .pro-float__label, .pro-float:nth-child(3) .pro-float__label, .pro-float:nth-child(5) .pro-float__label { left: auto; right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pro-float__icon, .pro-stage__phone { animation: none; }
  .pro-float__pulse, .pro-float__pulse::after { animation: none; }
}