/* ==================================================
   frankie.co — centered homepage navigation geometry
   Responsive SVG-relative coordinates with measured visual alignment.
   ================================================== */

:root {
  --fc-nav-top-y: 12%;
  --fc-nav-middle-y: 39.25%;
  --fc-nav-bottom-y: 81.25%;
  --fc-nav-hello-x: 91.5%;
  --fc-nav-inside-x: 106%;
  --fc-nav-work-x: 95%;
  --fc-nav-play-x: 5%;
  --fc-nav-contact-x: 6%;
}

#stage > .hotspot {
  --fc-dot-shift-x: 0px;
}

#stage > .hotspot .dot {
  translate: var(--fc-dot-shift-x) 0;
}

#stage > .hotspot[data-section="hi"] {
  --x: var(--fc-nav-hello-x) !important;
  --y: var(--fc-nav-top-y) !important;
}

#stage > #inside-hotspot.inside-hotspot,
#stage > #inside-hotspot.inside-door-trigger {
  --x: var(--fc-nav-inside-x) !important;
  --y: var(--fc-nav-top-y) !important;
}

#stage > .hotspot[data-section="work"] {
  --x: var(--fc-nav-work-x) !important;
  --y: var(--fc-nav-middle-y) !important;
}

#stage > .hotspot[data-section="play"] {
  --x: var(--fc-nav-play-x) !important;
  --y: var(--fc-nav-middle-y) !important;
}

#stage > .hotspot[data-section="contact"] {
  --x: var(--fc-nav-contact-x) !important;
  --y: var(--fc-nav-bottom-y) !important;
}

/* Keep the approved text placement. JavaScript measures each transformed
   label, aligns the desktop columns, and moves each dot to the rendered center. */
#stage > .hotspot[data-section="play"] .hotspot-label {
  transform: translateX(38%);
}

#stage > .hotspot[data-section="work"] .hotspot-label {
  transform: translateX(-38%);
}

#stage > .hotspot[data-section="contact"] .hotspot-label {
  transform: translateX(20%);
}

@media (pointer: coarse), (max-width: 640px) {
  #stage > .hotspot[data-section="hi"] {
    --x: var(--fc-nav-hello-x) !important;
    --y: var(--fc-nav-top-y) !important;
  }

  #stage > #inside-hotspot.inside-hotspot,
  #stage > #inside-hotspot.inside-door-trigger {
    --x: var(--fc-nav-inside-x) !important;
    --y: var(--fc-nav-top-y) !important;
  }

  #stage > .hotspot[data-section="work"] {
    --x: var(--fc-nav-work-x) !important;
    --y: var(--fc-nav-middle-y) !important;
  }

  #stage > .hotspot[data-section="play"] {
    --x: var(--fc-nav-play-x) !important;
    --y: var(--fc-nav-middle-y) !important;
  }

  #stage > .hotspot[data-section="contact"] {
    --x: var(--fc-nav-contact-x) !important;
    --y: var(--fc-nav-bottom-y) !important;
  }
}

/* Phone fallbacks approximate the final visual-edge relationship. JavaScript
   then matches Hello's right inset to Work and Contact's left inset to Play. */
@media (max-width: 640px) {
  :root {
    --fc-nav-hello-x: 87.25%;
    --fc-nav-contact-x: 10%;
  }

  #stage > .hotspot[data-section="hi"] {
    --y: 8% !important;
  }

  #stage > .hotspot[data-section="work"],
  #stage > .hotspot[data-section="play"] {
    --y: 37.75% !important;
  }

  #stage > .hotspot[data-section="contact"] {
    --y: 80.5% !important;
  }
}

/* Production marker: 2026-07-13 / homepage-native-rails-b */
/* Desktop column marker: 2026-07-17 / homepage-desktop-nav-columns-a */
/* Mobile edge marker: 2026-07-19 / homepage-mobile-nav-edge-insets-a */