/* ===================================================================
   MAP SCREEN — intro sequence + beach search   (v6-18)

   Loaded after style.css (and the theme bridge) so it can reposition
   .home-logo and layer the intro veil / search over #screen-home.

   Pieces:
     1. Logo — top-centre, splash-sized (matches .bz-splash-logo exactly)
     2. Intro veil — black on first paint, fades to reveal the world map
     3. Search box — WHITE, RECTANGULAR, at the splash "Explora" CTA spot.
        Build choreography (now ~2x faster than v6-17):
          a) a vertical line fades in
          b) it STRETCHES to the right into the full box
          c) the magnifier + placeholder fade in, AND a faded WHITE wiggly
             square glow sweeps left → right behind them, then fades out
          d) the typing caret flickers

   v6-18: glow recoloured white; whole build choreography ~2x faster; glow
   moved inside the box and sits BEHIND the icon/text (z-index), which now
   fade in together with the glow rather than after it. Box lost
   overflow:hidden so the white glow's halo can still bleed out (a white
   glow on a white box only reads via its halo).
   =================================================================== */

/* ── 1. Logo: top-centre, exactly like the splash logo ───────────── */
#screen-home .home-logo {
    position: absolute;
    top: max(20px, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
    margin: 0;
    font-size: clamp(18px, 2.4vw, 36px);
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}
@media (max-width: 768px) {
    #screen-home .home-logo {
        font-size: clamp(20px, 5.4vw, 32px);
    }
}

/* ── 2. Intro veil ───────────────────────────────────────────────── */
.map-intro-veil {
    position: absolute;
    inset: 0;
    z-index: 60;
    background: #000;
    opacity: 1;
    pointer-events: none;
    transition: opacity 340ms ease-out;
}
.map-intro-veil.faded   { opacity: 0; }
.map-intro-veil.instant { opacity: 0; transition: none; }

/* ── 3. Search — white, rectangular, at the "Explora" CTA position ─ */
.map-search {
    --map-search-w: min(380px, 86vw);
    --glow-travel: 300px;      /* JS overrides this with the real px distance */
    position: absolute;
    bottom: max(56px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    width: var(--map-search-w);
    z-index: 14;
    opacity: 0;
    visibility: hidden;
}
.map-search.intro,
.map-search.ready {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* The box — white rectangle. Full width in layout; the build scales it
   on the X axis from a left origin (vertical line → full box).
   isolation: isolate gives a clean stacking context for the glow (z1)
   vs the icon/text (z2). No overflow:hidden — the white glow's halo
   needs to bleed past the box to be visible at all. */
.map-search-box {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    width: var(--map-search-w);
    height: 51px;
    margin: 0 auto;
    border-radius: 0;
    background: #ffffff;
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.28),
        0 1px 0 rgba(255, 255, 255, 0.85) inset;
    transform-origin: left center;
    transform: scaleX(0);
    opacity: 0;
}
.map-search.intro .map-search-box {
    animation: mapSearchBuild 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.map-search.ready .map-search-box {
    transform: scaleX(1);
    opacity: 1;
}
@keyframes mapSearchBuild {
    0%   { opacity: 0; transform: scaleX(0.006); }   /* ~2px vertical line */
    18%  { opacity: 1; transform: scaleX(0.006); }   /* line faded in */
    100% { opacity: 1; transform: scaleX(1); }       /* stretched to the right */
}

/* ── The wiggly glow sweep — WHITE, behind the icon/text ─────────── */
/* Two nested elements so their transforms compose: the OUTER travels
   left → right and fades in/out; the INNER core does the fast wiggle.
   z-index 1 → sits above the box background but below the icon/text. */
.map-search-glow {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
    width: 42px;
    height: 42px;
    margin-top: -21px;
    opacity: 0;
    pointer-events: none;
}
.map-search.intro .map-search-glow {
    animation: glowTravel 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
}
.map-search-glow-core {
    width: 100%;
    height: 100%;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow:
        0 0 18px 7px rgba(255, 255, 255, 0.75),
        0 0 42px 16px rgba(255, 255, 255, 0.45);
    filter: blur(2.5px);
}
.map-search.intro .map-search-glow-core {
    animation: glowWiggle 0.07s ease-in-out infinite;
}
/* Outer: fade in at the left, sweep all the way right, fade out. */
@keyframes glowTravel {
    0%   { opacity: 0;    transform: translateX(0); }
    11%  { opacity: 0.85; transform: translateX(0); }
    85%  { opacity: 0.85; transform: translateX(var(--glow-travel)); }
    100% { opacity: 0;    transform: translateX(var(--glow-travel)); }
}
/* Inner: fast, small jitter — translate + rotate — for the wiggle/shake. */
@keyframes glowWiggle {
    0%   { transform: translate(-2px, 1.5px)  rotate(-4deg); }
    20%  { transform: translate(2.5px, -2px)  rotate(3deg); }
    40%  { transform: translate(-1.5px, -2px) rotate(-2deg); }
    60%  { transform: translate(2px, 2px)     rotate(4deg); }
    80%  { transform: translate(-2.5px, 1px)  rotate(-3deg); }
    100% { transform: translate(-2px, 1.5px)  rotate(-4deg); }
}

/* Magnifier + input — z-index 2 so they sit ABOVE the glow. They fade in
   together with the glow (same 0.4s delay), not after it. */
.map-search-icon {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    margin-left: 14px;
    color: #5b6b75;
    opacity: 0;
}
.map-search-input {
    position: relative;
    z-index: 2;
    flex: 1;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0 14px 0 10px;
    border: 0;
    background: transparent;
    color: #1a2733;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
    outline: none;
    opacity: 0;
}
.map-search.intro .map-search-icon,
.map-search.intro .map-search-input {
    animation: mapContentIn 0.16s ease-out 0.4s both;   /* same delay as the glow */
}
.map-search.ready .map-search-icon,
.map-search.ready .map-search-input {
    opacity: 1;
}
.map-search-input::placeholder {
    color: rgba(26, 39, 51, 0.42);
    font-weight: 400;
}
@keyframes mapContentIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Fake typing caret — appears once ready (after the sweep), flickers at
   the text start until the field is focused or has a value. */
.map-search-caret {
    position: absolute;
    z-index: 2;
    left: 44px;
    top: 50%;
    width: 2px;
    height: 20px;
    margin-top: -10px;
    background: #1a2733;
    border-radius: 1px;
    opacity: 0;
    pointer-events: none;
}
.map-search.ready .map-search-caret {
    animation: mapCaretFlicker 1.05s steps(1, end) infinite;
}
.map-search.typing .map-search-caret,
.map-search-input:focus ~ .map-search-caret {
    animation: none;
    opacity: 0;
}
@keyframes mapCaretFlicker {
    0%, 48%   { opacity: 1; }
    49%, 100% { opacity: 0; }
}

/* ── Autocomplete results — white, opens UPWARD ──────────────────── */
.map-search-results {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: 320px;
    overflow-y: auto;
    background: #ffffff;
    box-shadow: 0 -12px 34px rgba(0, 0, 0, 0.30);
    overscroll-behavior: contain;
    z-index: 3;
}
.map-search-results:empty { display: none; }

.map-search-result {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 9px 14px;
    cursor: pointer;
    border-bottom: 1px solid rgba(26, 39, 51, 0.07);
    transition: background 110ms ease;
}
.map-search-result:last-child { border-bottom: 0; }
.map-search-result:hover,
.map-search-result.is-active {
    background: rgba(26, 39, 51, 0.06);
}
.map-search-result-name {
    color: #1a2733;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.map-search-result-name b {
    font-weight: 800;
    color: #0a2e38;
}
.map-search-result-muni {
    color: rgba(26, 39, 51, 0.5);
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 400;
}
.map-search-empty {
    padding: 11px 14px;
    color: rgba(26, 39, 51, 0.5);
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 13px;
}

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .map-search { --map-search-w: 86vw; }
    .map-search-box { height: 47px; }
    .map-search-input { font-size: 14px; }
}