/* General plan page.

   The plan is laid out in the 1918×1150 coordinates of the Figma frame. The
   stage is a size container, so --u is one design pixel at the current render
   width and every element is placed with plain design numbers (--x, --y, --w,
   --h) multiplied by it. That keeps markers, zones and controls glued to the
   render at any viewport size without per-breakpoint coordinates. */

#general_plan {
    position: relative;
    background: #001323;
}

#general_plan .gp-stage {
    --u: calc(100cqw / 1918);
    container-type: inline-size;
    position: relative;
    width: 100%;
    aspect-ratio: 1918 / 1150;
    overflow: hidden;
    user-select: none;
}

#general_plan .gp-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
}

#general_plan .gp-at {
    position: absolute;
    left: calc(var(--x) * var(--u));
    top: calc(var(--y) * var(--u));
    width: calc(var(--w) * var(--u));
    height: calc(var(--h) * var(--u));
    max-width: none;
    pointer-events: none;
    z-index: 4;
}

/* Phase outlines: invisible until their phase is pointed at. */

#general_plan .gp-zones {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

#general_plan .gp-zone {
    fill-opacity: 0;
    stroke: #fff;
    stroke-width: 2;
    stroke-opacity: 0;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    cursor: pointer;
    transition: fill-opacity .3s ease, stroke-opacity .3s ease;
}

#general_plan .gp-zone.is-active {
    fill-opacity: var(--zone-opacity);
    stroke-opacity: 1;
}

/* Toggleable overlays: phase pins, house numbers, infrastructure pins. */

#general_plan .gp-layer {
    z-index: 3;
    opacity: 0;
    transform: translateY(calc(-8 * var(--u)));
    transition: opacity .35s ease, transform .35s ease;
}

#general_plan .gp-layer.is-visible {
    opacity: 1;
    transform: none;
}

/* Hover targets for the infrastructure pins. They sit under the layer image,
   which ignores the pointer, so the caption slides out from behind the pin. */

#general_plan .gp-places {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    visibility: hidden;
}

#general_plan .gp-places.is-visible {
    visibility: visible;
}

#general_plan .gp-place {
    pointer-events: auto;
    z-index: auto;
}

#general_plan .gp-place__label {
    position: absolute;
    left: calc(100% - 14 * var(--u));
    top: calc(9 * var(--u));
    padding: 0 calc(12 * var(--u)) 0 calc(21 * var(--u));
    border-radius: calc(8 * var(--u));
    background: rgba(37, 120, 179, .72);
    font-family: ProximaNovaSemibold, sans-serif;
    font-size: max(11px, calc(14 * var(--u)));
    line-height: max(20px, calc(24 * var(--u)));
    color: #fff;
    white-space: nowrap;
    opacity: 0;
    clip-path: inset(0 100% 0 0 round calc(8 * var(--u)));
    transition: opacity .2s ease, clip-path .3s ease;
}

#general_plan .gp-place:hover .gp-place__label {
    opacity: 1;
    clip-path: inset(0 0 0 0 round calc(8 * var(--u)));
}

/* Phase popup: the darkened plan with the phase card in the middle. The phase
   and layer buttons stay above it so another phase can be opened directly. */

#general_plan .gp-popup {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: rgba(0, 19, 35, .7);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility 0s linear .3s;
}

#general_plan .gp-popup.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s ease;
}

#general_plan .gp-popup__image {
    position: absolute;
    left: calc(509 * var(--u));
    top: calc(312 * var(--u));
    width: calc(900 * var(--u));
    max-width: none;
    opacity: 0;
    transform: scale(.94);
    transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .3, 1);
}

#general_plan .gp-popup__image.is-active {
    opacity: 1;
    transform: none;
}

/* Phase buttons, right column. The design puts them at x 1783, flush with the
   Kyiv map; that lands the last two under the site's floating callback button,
   so the column sits 50px further in and starts just below the map. */

#general_plan .gp-phase-buttons {
    position: absolute;
    left: calc(1733 * var(--u));
    top: calc(262 * var(--u));
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: calc(11 * var(--u));
}

#general_plan .gp-phase-button,
#general_plan .gp-toggle {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

#general_plan .gp-phase-button {
    display: block;
    width: calc(57 * var(--u));
    height: calc(57 * var(--u));
    animation: gp-nudge 6s ease-in-out calc(2s + var(--i) * .08s) infinite;
}

#general_plan .gp-phase-button img {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform .25s ease, filter .25s ease;
}

#general_plan .gp-phase-button:hover img,
#general_plan .gp-phase-button.is-active img,
#general_plan .gp-phase-button:focus-visible img {
    transform: scale(1.12);
    filter: drop-shadow(0 0 calc(8 * var(--u)) rgba(255, 255, 255, .55));
}

#general_plan .gp-phase-buttons:hover .gp-phase-button {
    animation: none;
}

/* A short wave down the column every few seconds, as the old shaking phase
   buttons did, so the visitor notices they can be clicked. */
@keyframes gp-nudge {
    0%, 6%, 100% { transform: none; }
    3% { transform: scale(1.12); }
}

/* Layer toggles, bottom left. */

#general_plan .gp-toggles {
    position: absolute;
    left: calc(42.5 * var(--u));
    top: calc(748 * var(--u));
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: calc(20 * var(--u));
    width: calc(140 * var(--u));
}

#general_plan .gp-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(8 * var(--u));
    font-family: ProximaNovaSemibold, sans-serif;
    font-size: max(11px, calc(14 * var(--u)));
    line-height: max(11px, calc(12 * var(--u)));
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 19, 35, .8);
}

#general_plan .gp-toggle img {
    width: calc(57 * var(--u));
    height: calc(57 * var(--u));
    opacity: .55;
    transition: opacity .25s ease, transform .25s ease;
}

#general_plan .gp-toggle span {
    opacity: .7;
    transition: opacity .25s ease;
}

#general_plan .gp-toggle.is-active img,
#general_plan .gp-toggle.is-active span {
    opacity: 1;
}

#general_plan .gp-toggle:hover img,
#general_plan .gp-toggle:focus-visible img {
    transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
    #general_plan .gp-phase-button {
        animation: none;
    }
}

/* Phones, portrait: the plan keeps the full viewport height and scrolls
   sideways, as before. The controls leave the render and stay on screen. */

@media (orientation: portrait) and (max-width: 768px) {
    #general_plan {
        height: 100vh;
        height: 100svh;
        overflow-x: auto;
        overflow-y: hidden;
    }

    /* No size container here: containment would make the stage the containing
       block of the fixed controls below and clip them. The stage is exactly
       one viewport tall, so the design pixel comes from the height instead. */
    #general_plan .gp-stage {
        --u: calc(100vh / 1150);
        --u: calc(100svh / 1150);
        container-type: normal;
        width: calc(1918 * var(--u));
        height: 100%;
    }

    #general_plan .gp-popup {
        position: fixed;
    }

    /* Left of the phase column, which stays clickable above the card. */
    #general_plan .gp-popup__image {
        left: 8px;
        top: 50%;
        width: calc(100vw - 64px);
        transform: translateY(-50%) scale(.94);
    }

    #general_plan .gp-popup__image.is-active {
        transform: translateY(-50%);
    }

    #general_plan .gp-phase-buttons {
        position: fixed;
        left: auto;
        right: 8px;
        top: 50%;
        gap: 4px;
        transform: translateY(-50%);
    }

    #general_plan .gp-phase-button {
        width: min(40px, 6.5vh);
        height: min(40px, 6.5vh);
    }

    #general_plan .gp-toggles {
        position: fixed;
        left: 8px;
        top: auto;
        bottom: 16px;
        width: auto;
        flex-direction: row;
        gap: 6px;
    }

    #general_plan .gp-toggle {
        width: 76px;
        gap: 4px;
    }

    #general_plan .gp-toggle img {
        width: 40px;
        height: 40px;
    }
}