/* Service-area flyover (see where.js). The map sits tilted in 3D under a dark sky, with the town name and search over it. */
.fly { position: relative; height: 100vh; height: 100svh; min-height: 640px; max-height: 980px; overflow: hidden; background: #0b0c0a; isolation: isolate; }
.fly-view { position: absolute; inset: 0; perspective: 1600px; perspective-origin: 50% 0%; }
.wmap { position: absolute; left: -30%; right: -30%; top: -12%; bottom: -55%; background: #12140f;
  transform: rotateX(32deg); transform-origin: 50% 40%; pointer-events: none; }
.wmap .leaflet-tile-pane { filter: brightness(.98) saturate(1.08) contrast(1.06); }
.leaflet-container { font: 500 13px var(--body); background: #12140f; }
.wmap .leaflet-control-attribution { display: none; }
.fly-attr { position: absolute; right: 10px; bottom: 6px; z-index: 4; margin: 0; font-size: 10px; color: rgba(245,245,239,.55); }
/* the sky: dark at the top so the tilted map fades into a horizon, dark at the bottom for the type */
.fly-sky { position: absolute; inset: 0; z-index: 2; pointer-events: none; background:
  linear-gradient(180deg, #0b0c0a 0%, rgba(11,12,10,.7) 12%, rgba(11,12,10,.08) 30%, rgba(11,12,10,0) 60%, rgba(11,12,10,.55) 84%, rgba(11,12,10,.9) 100%); }
.fpin { width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(166,218,63,.25), 0 0 12px rgba(166,218,63,.8); }
.fhome { position: relative; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 4px solid var(--lime); }
.fhome::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 2px solid var(--lime); animation: fPulse 2s ease-out infinite; }
.fhome span { position: absolute; left: 26px; top: 50%; transform: translateY(-50%); padding: 3px 8px; background: var(--lime); color: var(--ink); font: 900 12px var(--disp); font-stretch: 115%; text-transform: uppercase; white-space: nowrap; }
@keyframes fPulse { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
.froute { stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(166,218,63,.9)); }
.fdot { width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(166,218,63,.55), 0 0 22px 6px rgba(166,218,63,.8); }

/* type over the map */
.fly-hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; padding-top: clamp(24px, 5vh, 56px); padding-bottom: 96px; }
.fly-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.fly-head .h2 { max-width: 9em; }
.fly-q { pointer-events: auto; width: min(380px, 100%); margin: 0; padding: 16px; background: rgba(11,12,10,.72); border: 1px solid rgba(245,245,239,.16); border-radius: 14px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.fly-q label { font-size: 14px; }
.fly-q .town-row input { border-radius: 10px; background: rgba(245,245,239,.06); border-color: rgba(245,245,239,.2); }
.fly-q .town-row .btn { border-radius: 10px; }
.fly-q .town-ans { min-height: 0; font-size: 14px; margin-top: 8px; }
.fly-q .town-ans:empty { display: none; }
.fly-town { pointer-events: auto; }
.fly-name { font: 900 clamp(56px, 10vw, 180px)/.84 var(--disp); font-stretch: 112%; text-transform: uppercase; color: #fff; text-shadow: 0 6px 40px rgba(0,0,0,.6); transform-origin: 0 100%; }
.fly-name.in { animation: flyIn 1s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes flyIn { from { opacity: 0; transform: translateY(.2em) scaleX(.5); } to { opacity: 1; transform: none; } }
.fly-meta { margin-top: 12px; font-weight: 600; font-size: clamp(15px, 1.3vw, 19px); color: #e8e9e1; }
.fly-town .btn { margin-top: 18px; }
/* the strip of towns */
.fly-strip { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; gap: 6px; padding: 14px var(--gut) 18px; overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.fly-strip::-webkit-scrollbar { display: none; }
.fly-strip button { flex: none; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(245,245,239,.22); background: rgba(11,12,10,.55); color: #e8e9e1;
  font: 600 14px var(--body); cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .25s, color .25s, border-color .25s; }
.fly-strip button:hover { border-color: var(--lime); }
.fly-strip button.on { background: var(--lime); color: var(--ink); border-color: var(--lime); }

@media (max-width: 760px) {
  .fly { min-height: 600px; height: 92svh; }
  .wmap { left: -60%; right: -60%; transform: rotateX(28deg); }
  .fly-head { flex-direction: column; }
  .fly-q { width: 100%; padding: 12px; }
  .fly-name { font-size: clamp(42px, 13vw, 64px); }
  .fly-hud { padding-bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) { .wmap { transform: none; left: 0; right: 0; top: 0; bottom: 0; } .fly-name.in { animation: none; } }
.fly-head .h2 { font-size: clamp(30px, 3.6vw, 60px); }
.fly-name { font-size: clamp(52px, 8.6vw, 150px); }
@media (max-width: 760px) { .fly-head .h2 { font-size: clamp(28px, 8.4vw, 40px); } .fly-name { font-size: clamp(40px, 12.4vw, 60px); } }
@media (max-width: 640px) {
  .fly-town .btn { display: none; }
  .fly-strip { bottom: calc(76px + var(--rv, 0px)); }
  .fly-hud { padding-bottom: calc(140px + var(--rv, 0px)); }
}
.froute-cv { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 450; pointer-events: none; }

/* the town photo that pops up once the camera lands */
.fly-pic { position: absolute; right: var(--gut); bottom: 110px; z-index: 4; width: min(30vw, 420px); margin: 0; border-radius: 12px; overflow: hidden; background: #111; box-shadow: 0 30px 70px -20px rgba(0,0,0,.85);
  opacity: 0; transform: translateY(20px) scale(.92); clip-path: inset(30% 30% round 12px); transition: opacity .5s, transform 1s cubic-bezier(.16, 1, .3, 1), clip-path 1s cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.fly-pic.on { opacity: 1; transform: none; clip-path: inset(0 round 12px); }
.fly-pic img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.fly-pic figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 12px 8px; font: 500 9px/1.3 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .03em; color: rgba(255,255,255,.8); background: linear-gradient(transparent, rgba(0,0,0,.7)); }
@media (max-width: 760px) { .fly-pic { right: 12px; top: 150px; bottom: auto; width: 46vw; } }