/* GDI-Map: the hex map of Australia with city pins. Ported from site.css sections 20 (hex map),
   22 (map interaction), 23 (layered compositing), the city page focus rule, and the homepage phone
   refinements (as the opt-in .mapwrap--compact). Three layers composite independently:
     1. svg.aumap          hex field
     2. .mapwrap__spot     masked spotlight, its disc moved by transform only
     3. svg.aumap-pins     pins
   Everything renders without JavaScript; gdi-map.js adds the ripple, spotlight, tilt, tooltip and tour. */
.gdi-map {
  position: relative; overflow: hidden; border-radius: 16px; border: 1px solid rgba(24,43,61,.09);
  background:
    radial-gradient(55% 55% at 50% 45%, rgba(0,171,238,.12), transparent 70%),
    radial-gradient(rgba(24,43,61,.08) 1px, transparent 1px) 0 0 / 18px 18px,
    var(--gdi-white);
  padding: clamp(1rem, 0.5rem + 2vw, 2.25rem);
  box-shadow: 0 1px 2px rgba(24,43,61,.04), 0 24px 60px -24px rgba(24,43,61,.25);
  perspective: 1400px;
  display: flex; flex-direction: column; justify-content: center; min-height: 100%;
}
.gdi-map .mapwrap__inner {
  position: relative; z-index: 1; transform-style: preserve-3d; will-change: transform; backface-visibility: hidden;
  transition: transform .6s cubic-bezier(.215,.61,.355,1);
}

/* Sweep: a soft band of light crossing the card; it pauses and fades while the reader is interacting */
.gdi-map .mapwrap__sweep {
  position: absolute; inset: -40% -60%; z-index: 2; pointer-events: none; opacity: .55; will-change: transform;
  background: linear-gradient(115deg, transparent 42%, rgba(0,171,238,.10) 50%, transparent 58%);
  animation: gdi-mapsweep 7s linear infinite;
}
.gdi-map.is-hover .mapwrap__sweep { animation-play-state: paused; opacity: 0; transition: opacity .3s; }
@keyframes gdi-mapsweep { from { transform: translateX(-35%); } to { transform: translateX(35%); } }

/* Floor shadow under the land; slides against the tilt for depth */
.gdi-map .mapwrap__floor {
  position: absolute; left: 12%; right: 12%; bottom: 5%; height: 14%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(24,43,61,.32), transparent 70%);
  filter: blur(16px); opacity: .9;
  transform: translate(var(--fx, 0px), var(--fy, 0px)); transition: transform .25s var(--gdi-ease), opacity .3s var(--gdi-ease);
}
.gdi-map.is-hover .mapwrap__floor { opacity: 1; }

/* ---- Layer 1: hex field ---- */
.gdi-map .aumap { position: relative; z-index: 1; width: 100%; height: auto; display: block; overflow: visible; }
.gdi-map .aumap__land use { stroke: #fff; stroke-width: 1.2; transform-box: fill-box; transform-origin: center; transition: none; }
.gdi-map .aumap__land use:hover { fill: var(--gdi-blue); transform: scale(1.18); transition: transform .12s var(--gdi-ease), fill .12s linear; }
/* Ripple: hexes grow out from the centre once the map scrolls into view. Hidden only once gdi-map.js
   has armed the map, so with JavaScript off the map is simply there. */
.gdi-map.is-armed .aumap:not(.is-in) .aumap__land use { opacity: 0; }
.gdi-map .aumap.is-in .aumap__land use { animation: gdi-hexin .55s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--d, 0) * .85s); }
.gdi-map .aumap.is-done .aumap__land use { animation: none; }
@keyframes gdi-hexin { from { opacity: 0; transform: scale(.15); } to { opacity: 1; transform: scale(1); } }
/* Cursor spotlight: --g (0..1) set per hex by gdi-map.js */
.gdi-map .aumap__land use.is-lit { fill: var(--gdi-blue); transform: scale(calc(1 + var(--g, 0) * .4)); transition: transform .12s var(--gdi-ease), fill .12s linear; }
@supports (fill: color-mix(in srgb, red 50%, blue)) {
  .gdi-map .aumap__land use.is-lit { fill: color-mix(in srgb, var(--gdi-blue) calc(var(--g, 0) * 100%), #cdd6dd); }
}

/* ---- Layer 2: spotlight ---- */
.gdi-map .mapwrap__spot {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; opacity: 0;
  transition: opacity .25s var(--gdi-ease);
  -webkit-mask: url(../map/au-hex-mask.svg) center / contain no-repeat; mask: url(../map/au-hex-mask.svg) center / contain no-repeat;
}
.gdi-map .mapwrap__spot i {
  position: absolute; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,171,238,.85) 0%, rgba(0,171,238,.35) 38%, rgba(0,171,238,0) 68%);
  will-change: transform; transition: transform .35s cubic-bezier(.215,.61,.355,1);
}
.gdi-map.is-hover .mapwrap__spot { opacity: 1; }

/* ---- Layer 3: pins ---- */
.gdi-map .aumap-pins {
  position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; will-change: transform;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0); transition: transform .25s var(--gdi-ease);
}
.gdi-map .aumap__pins { isolation: isolate; }
.gdi-map .pin { cursor: pointer; outline: none; }
.gdi-map .pin__glow { opacity: .55; transition: opacity .2s var(--gdi-ease); }
.gdi-map .pin__ring { fill: none; stroke: var(--gdi-blue); stroke-width: 2; opacity: .8; transform-box: fill-box; transform-origin: center; animation: gdi-pinpulse 2.6s ease-out infinite; }
.gdi-map .pin--region .pin__ring { animation-delay: 1.3s; opacity: .55; stroke-width: 1.5; }
@keyframes gdi-pinpulse { 0% { transform: scale(.6); opacity: .9; } 70% { transform: scale(1.9); opacity: 0; } 100% { transform: scale(1.9); opacity: 0; } }
.gdi-map .pin__dot { fill: var(--gdi-blue); stroke: #fff; stroke-width: 2.5; transition: fill .2s var(--gdi-ease), transform .2s var(--gdi-ease); transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 4px 6px rgba(0,171,238,.45)); }
.gdi-map .pin--partner .pin__dot { filter: drop-shadow(0 5px 8px rgba(0,171,238,.55)); }
.gdi-map .pin__label text { font: 600 17px/1 "DM Sans", "Segoe UI", system-ui, sans-serif; fill: var(--gdi-navy); paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; letter-spacing: .01em; pointer-events: none; }
.gdi-map .pin--right .pin__label text { text-anchor: start; transform: translate(17px, 5px); }
.gdi-map .pin--left .pin__label text { text-anchor: end; transform: translate(-17px, 5px); }
.gdi-map .pin--below .pin__label text { text-anchor: middle; transform: translate(0, 26px); }
.gdi-map .pin--region .pin__label text { font-size: 15px; text-anchor: start; transform: translate(12px, 4px); opacity: 0; transition: opacity .2s var(--gdi-ease); }
.gdi-map .pin:hover .pin__glow, .gdi-map .pin:focus-visible .pin__glow, .gdi-map .pin.is-active .pin__glow { opacity: 1; }
.gdi-map .pin:hover .pin__dot, .gdi-map .pin:focus-visible .pin__dot, .gdi-map .pin.is-active .pin__dot { fill: var(--gdi-navy); transform: scale(1.25); }
.gdi-map .pin:hover .pin__label text, .gdi-map .pin:focus-visible .pin__label text, .gdi-map .pin.is-active .pin__label text { opacity: 1; }
.gdi-map .pin:focus-visible .pin__ring { stroke: var(--gdi-navy); animation: none; transform: scale(1.3); opacity: 1; }

/* City pages: every other pin steps back. Rendered on the server, so it holds with JavaScript off. */
.gdi-map.mapwrap--focus .pin { transition: opacity .3s var(--gdi-ease); }
.gdi-map.mapwrap--focus .pin:not(.is-focus) { opacity: .28; }

/* ---- Tooltip over the active pin (built by gdi-map.js) ---- */
.gdi-map .maptip {
  position: absolute; z-index: 5; pointer-events: none; opacity: 0;
  transform: translate(-50%, calc(-100% - 16px)) scale(.96);
  background: var(--gdi-navy); color: #fff; padding: .6rem .8rem; border-radius: 8px;
  box-shadow: 0 14px 30px -10px rgba(24,43,61,.6); white-space: nowrap; line-height: 1.6;
  transition: opacity .18s var(--gdi-ease), transform .18s var(--gdi-ease);
}
.gdi-map .maptip b { display: block; font-family: var(--gdi-font-display); font-stretch: 95%; text-transform: uppercase; letter-spacing: .04em; font-size: .92rem; line-height: 1.1; }
.gdi-map .maptip span { display: block; font-size: .78rem; color: rgba(255,255,255,.75); margin-top: .2rem; }
.gdi-map .maptip::after { content: ""; position: absolute; left: var(--ax, 50%); bottom: -6px; width: 12px; height: 12px; background: var(--gdi-navy); transform: translateX(-50%) rotate(45deg); }
.gdi-map .maptip.is-on { opacity: 1; transform: translate(-50%, calc(-100% - 16px)) scale(1); }
.gdi-map .maptip.is-below { transform: translate(-50%, 16px) scale(.96); }
.gdi-map .maptip.is-below.is-on { transform: translate(-50%, 16px) scale(1); }
.gdi-map .maptip.is-below::after { bottom: auto; top: -6px; }

/* ---- Phones ---- */
@media (max-width: 640px) {
  .gdi-map { padding: .75rem; }
  .gdi-map .pin__label text { font-size: 28px; stroke-width: 7px; }
  .gdi-map .pin--region .pin__label text { font-size: 24px; }
  .gdi-map .pin--right .pin__label text { transform: translate(24px, 9px); }
  .gdi-map .pin--left .pin__label text { transform: translate(-24px, 9px); }
  .gdi-map .pin--below .pin__label text { transform: translate(0, 40px); }
  .gdi-map .pin__dot { transform: scale(1.7); }
  .gdi-map .pin:hover .pin__dot, .gdi-map .pin.is-active .pin__dot { transform: scale(2); }
  .gdi-map .maptip { white-space: normal; max-width: 200px; text-align: center; }
}
/* The homepage's tighter phone treatment, opt-in with the widget's "Compact on phones" switch */
@media (max-width: 700px) {
  .gdi-map.mapwrap--compact { padding: .6rem; border-radius: 10px; }
  .gdi-map.mapwrap--compact .mapwrap__inner { width: 100%; overflow: clip; transform: none !important; }
  .gdi-map.mapwrap--compact .aumap, .gdi-map.mapwrap--compact .aumap-pins { max-width: 100%; overflow: hidden; }
  .gdi-map.mapwrap--compact .aumap-pins { transform: none !important; }
  .gdi-map.mapwrap--compact .mapwrap__spot, .gdi-map.mapwrap--compact .mapwrap__sweep, .gdi-map.mapwrap--compact .mapwrap__floor { display: none; }
  .gdi-map.mapwrap--compact .pin__label text { font-size: 20px; stroke-width: 6px; }
  .gdi-map.mapwrap--compact .pin--region .pin__label text { font-size: 17px; }
  .gdi-map.mapwrap--compact .pin--right .pin__label text { transform: translate(14px, 7px); }
  .gdi-map.mapwrap--compact .pin--left .pin__label text { transform: translate(-14px, 7px); }
  .gdi-map.mapwrap--compact .pin--below .pin__label text { transform: translate(0, 32px); }
  .gdi-map.mapwrap--compact .pin__dot { transform: scale(1.35); }
}

/* ---- Still: the widget's "Animate" switch off, or the reader asked for reduced motion ---- */
.gdi-map.mapwrap--still .mapwrap__sweep { display: none; }
.gdi-map.mapwrap--still .pin__ring { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .gdi-map .mapwrap__sweep { display: none; }
  .gdi-map .pin__ring { animation: none; }
  .gdi-map .aumap.is-in .aumap__land use { animation: none; }
  .gdi-map .mapwrap__inner, .gdi-map .aumap-pins, .gdi-map .mapwrap__floor, .gdi-map .mapwrap__spot i, .gdi-map .maptip { transition: none; }
}