/* ==========================================================================
   Theia ébredése – a kolóniatérkép élő klímája
   Ég, tó, növényzet, felhők (CSS-átmenettel a mérők változásakor), időjárás-részecskék
   és az új terraformáló épületek animációi.
   ========================================================================== */

.colony-map {
    position: relative;
}

/* ---------- Átmenetek: a mérők változására a táj lassan, simán alakul át ---------- */

.colony-map #sky stop,
.colony-map #ground stop,
.colony-map #lake-water stop {
    transition: stop-color 4s ease;
}

.climate-fill {
    transition: fill 4s ease;
}

.climate-fade {
    transition: opacity 4s ease;
}

.lake-water {
    transition: transform 6s cubic-bezier(.3, .7, .3, 1), opacity 2s ease;
}

/* Kinövés: fű és fa a talppontjából nő fel (a szülő a talppontra van eltolva) */
.grow {
    transition: transform 2.4s cubic-bezier(.34, 1.56, .64, 1);
}

    .grow.tree {
        transition-duration: 3.2s;
    }

/* ---------- Klíma-jelvény a térkép bal felső sarkában ---------- */

.climate-chip {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 5px 9px 6px;
    border-radius: 10px;
    background: rgba(7, 11, 20, .55);
    border: 1px solid rgba(255, 255, 255, .1);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #e8eef7;
    font-size: 11.5px;
    line-height: 1.2;
    pointer-events: none;
    max-width: calc(100% - 16px);
}

.climate-chip-head {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    min-width: 0;
}

.climate-dot {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    box-shadow: 0 0 6px currentColor;
    transition: background-color 4s ease;
}

.climate-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

.climate-weather {
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(140, 180, 255, .18);
    animation: climate-pulse 2.4s ease-in-out infinite;
}

@keyframes climate-pulse {
    50% {
        background: rgba(140, 180, 255, .34);
    }
}

.climate-meters {
    display: flex;
    gap: 4px;
}

.climate-meter {
    position: relative;
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
}

    .climate-meter i {
        position: absolute;
        inset: 0 auto 0 0;
        border-radius: 2px;
        transition: width 4s ease;
    }

    .climate-meter.air i {
        background: linear-gradient(90deg, #c27a9e, #7fb4ff);
    }

    .climate-meter.water i {
        background: linear-gradient(90deg, #2f8fe0, #8fd0ff);
    }

    .climate-meter.life i {
        background: linear-gradient(90deg, #4f9a46, #9be07f);
    }

/* ---------- Tó: csillogás, fodrok ---------- */

.lake-shimmer {
    animation: lake-shimmer 5s ease-in-out infinite;
}

@keyframes lake-shimmer {
    50% {
        opacity: .15;
    }
}

.ripple {
    fill: none;
    stroke: #d8f3ff;
    stroke-width: 1.4;
    vector-effect: non-scaling-stroke;
    transform-box: fill-box;
    transform-origin: center;
    animation: ripple 3s ease-out infinite;
}

    .ripple.lake {
        stroke-width: 1.2;
    }

@keyframes ripple {
    from {
        transform: scale(.25);
        opacity: .9;
    }

    to {
        transform: scale(3.6);
        opacity: 0;
    }
}

.stream-flow {
    animation: stream-flow 1.6s linear infinite;
}

@keyframes stream-flow {
    to {
        stroke-dashoffset: -40;
    }
}

/* ---------- Időjárás ---------- */

.weather .drop {
    stroke: rgba(205, 228, 255, .6);
    stroke-width: 2.2;
    stroke-linecap: round;
    animation: rain-fall .6s linear infinite;
}

@keyframes rain-fall {
    from {
        transform: translate(0, 0);
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    to {
        transform: translate(calc(var(--fall) * -.2), var(--fall));
        opacity: .9;
    }
}

.weather .splash {
    fill: none;
    stroke: rgba(215, 236, 255, .7);
    stroke-width: 1.3;
    transform-box: fill-box;
    transform-origin: center;
    animation: splash .9s ease-out infinite;
}

@keyframes splash {
    from {
        transform: scale(.2);
        opacity: .9;
    }

    to {
        transform: scale(1.6);
        opacity: 0;
    }
}

/* Szitálás: a ciklus nagyobb részében nincs; néha pár percig halkan szemerkél */
.weather .drizzle {
    opacity: 0;
    animation: drizzle-cycle 300s linear infinite;
}

    .weather .drizzle .drop {
        stroke: rgba(205, 228, 255, .42);
        stroke-width: 1.3;
    }

    .weather .drizzle .splash {
        stroke: rgba(215, 236, 255, .45);
    }

@keyframes drizzle-cycle {
    0%, 62% {
        opacity: 0;
    }

    66%, 84% {
        opacity: 1;
    }

    88%, 100% {
        opacity: 0;
    }
}

.weather .dust .grain {
    fill: #e7b07a;
    animation: dust-blow 5s linear infinite;
}

    .weather .dust .grain:nth-child(3n) {
        fill: #c98a58;
    }

.weather .dust .streak {
    fill: #e9b384;
    animation: dust-blow 3.5s linear infinite;
}

@keyframes dust-blow {
    from {
        transform: translate(0, 0);
        opacity: 0;
    }

    10% {
        opacity: .75;
    }

    50% {
        transform: translate(calc(var(--drift) * .5), -26px);
    }

    90% {
        opacity: .6;
    }

    to {
        transform: translate(var(--drift), 18px);
        opacity: 0;
    }
}

.weather .flash {
    fill: #e8f0ff;
    opacity: 0;
    animation: flash 9s linear infinite;
}

.weather .bolt {
    fill: none;
    stroke: #f4f8ff;
    stroke-width: 3;
    stroke-linejoin: round;
    opacity: 0;
    animation: bolt 9s linear infinite;
}

@keyframes flash {
    0%, 60%, 66%, 100% {
        opacity: 0;
    }

    61% {
        opacity: .45;
    }

    62.5% {
        opacity: .08;
    }

    64% {
        opacity: .3;
    }
}

@keyframes bolt {
    0%, 60%, 66%, 100% {
        opacity: 0;
    }

    61%, 64% {
        opacity: 1;
    }

    62.5% {
        opacity: .2;
    }
}

/* ---------- Az új épületek animációi ---------- */

/* Üvegházgáz-csóva a szóró kéményéből */
.plume circle {
    fill: #e3c27a;
    transform-box: fill-box;
    transform-origin: center;
    animation: plume 7s ease-out infinite;
}

    .plume circle:nth-child(even) {
        fill: #d4a96a;
    }

@keyframes plume {
    from {
        transform: translate(0, 0) scale(.45);
        opacity: .8;
    }

    55% {
        opacity: .45;
    }

    to {
        transform: translate(64px, -110px) scale(3.6);
        opacity: 0;
    }
}

/* Jégbánya: futó szalag, csillanó jég */
.ice-belt {
    opacity: .5;
}

    .ice-belt.flowing {
        opacity: .9;
        animation: belt .8s linear infinite;
    }

.twinkle {
    transform-box: fill-box;
    transform-origin: center;
    animation: twinkle 3.4s ease-in-out infinite;
}

@keyframes twinkle {
    0%, 70%, 100% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }

    82% {
        transform: scale(1) rotate(45deg);
        opacity: 1;
    }
}

/* Permet (hidrosztáció, ökoállomás) és lezúduló víz (vízerőmű) */
.spray {
    fill: none;
    stroke: #d8f3ff;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-dasharray: 2 5;
    opacity: .8;
    animation: spray .7s linear infinite;
}

@keyframes spray {
    to {
        stroke-dashoffset: -14;
    }
}

.cascade {
    stroke: #f2fbff;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: 7 9;
    opacity: .85;
    animation: cascade .55s linear infinite;
}

    .cascade.still {
        opacity: .35;
        animation: none;
    }

@keyframes cascade {
    to {
        stroke-dashoffset: -16;
    }
}

/* Ökoállomás: kikelő hajtások */
.sprout {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: sprout 9s ease-out infinite;
}

@keyframes sprout {
    0% {
        transform: scale(.1);
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    60%, 90% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

/* Génlabor és elektrolizáló: buborékok */
.bubble {
    transform-box: fill-box;
    transform-origin: center;
    animation: bubble 1.7s ease-in infinite;
}

    .bubble.tall {
        animation-name: bubble-tall;
        animation-duration: 2.2s;
    }

@keyframes bubble {
    from {
        transform: translate(0, 0) scale(.6);
        opacity: 0;
    }

    15% {
        opacity: .95;
    }

    to {
        transform: translate(0, -15px) scale(1.2);
        opacity: 0;
    }
}

@keyframes bubble-tall {
    from {
        transform: translate(0, 0) scale(.5);
        opacity: 0;
    }

    12% {
        opacity: .95;
    }

    85% {
        opacity: .8;
    }

    to {
        transform: translate(1.5px, -27px) scale(1.15);
        opacity: 0;
    }
}

/* Génlabor: forgó DNS-cégér (a vízszintes összenyomás forgást mímel) */
.helix {
    transform-box: fill-box;
    transform-origin: center;
    animation: helix 4.5s ease-in-out infinite;
}

@keyframes helix {
    50% {
        transform: scaleX(-1);
    }
}

/* Műholdszerelde: jeladás a parabolából */
.signal {
    fill: none;
    stroke: #8ff0ff;
    stroke-width: 1.4;
    stroke-linecap: round;
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: signal 1.6s ease-out infinite;
}

@keyframes signal {
    from {
        transform: translateY(0) scale(.4);
        opacity: 1;
    }

    to {
        transform: translateY(-10px) scale(1.8);
        opacity: 0;
    }
}

/* Indítóállás: lélegző hűtőgőz, időnkénti fellövés lánggal és füsttel */
.vent circle {
    fill: #f2f6fb;
    transform-box: fill-box;
    transform-origin: center;
    animation: vent 2.4s ease-out infinite;
}

@keyframes vent {
    from {
        transform: translate(0, 0) scale(.4);
        opacity: .7;
    }

    to {
        transform: translate(16px, 6px) scale(1.8);
        opacity: 0;
    }
}

.rocket-flame {
    fill: #ffb347;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: 50% 0;
}

/* A ciklus közepéről indul, hogy betöltéskor a rakéta már álljon (a füst ugyanígy eltolva) */
.rocket.launching {
    animation: rocket-launch 60s -12s infinite;
}

    .rocket.launching .rocket-flame {
        animation: rocket-flame 60s -12s infinite;
    }

@keyframes rocket-launch {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    3%, 84% {
        transform: translate(0, 0);
        opacity: 1;
        animation-timing-function: ease-in-out;
    }

    84.5% {
        transform: translate(.8px, 0);
    }

    85% {
        transform: translate(-.8px, 0);
    }

    85.5% {
        transform: translate(0, 0);
        animation-timing-function: cubic-bezier(.55, 0, 1, .45);
    }

    95% {
        transform: translate(0, -760px);
        opacity: 1;
    }

    96%, 100% {
        transform: translate(0, -800px);
        opacity: 0;
    }
}

@keyframes rocket-flame {
    0%, 83% {
        opacity: 0;
        transform: scale(1, .4);
    }

    84% {
        opacity: .9;
        transform: scale(1, .9);
    }

    86%, 95% {
        opacity: 1;
        transform: scale(1.15, 1.6);
    }

    96%, 100% {
        opacity: 0;
    }
}

.launch-smoke circle {
    fill: #e9edf2;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: launch-smoke 60s -12s ease-out infinite;
}

    .launch-smoke circle:nth-child(2) {
        animation-name: launch-smoke-right;
    }

@keyframes launch-smoke {
    0%, 84% {
        transform: translate(0, 0) scale(.3);
        opacity: 0;
    }

    86% {
        opacity: .9;
    }

    99% {
        transform: translate(-40px, -12px) scale(2.6);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes launch-smoke-right {
    0%, 84% {
        transform: translate(0, 0) scale(.3);
        opacity: 0;
    }

    86% {
        opacity: .9;
    }

    99% {
        transform: translate(44px, -10px) scale(2.6);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* ---------- Csökkentett mozgás: nincs átmenet, nincs animáció (a részecskéket a térkép ki sem rajzolja) ---------- */

@media (prefers-reduced-motion: reduce) {
    .colony-map *,
    .colony-map *::before,
    .colony-map *::after {
        transition: none !important;
    }

    .rocket.launching {
        opacity: 1;
    }
}