/* ==========================================================
   Under Construction Progress Overlay
========================================================== */

.progress-overlay {

    --progress: 23%;

    position: absolute;

    left: 50%;

    bottom: 75px; /* weiter nach unten = negativer Wert */

    z-index: 10;

    width: min(520px, calc(100vw - 40px));

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 18px;

    transform: translateX(-50%);

}


/* ==========================================================
   Title
========================================================== */

.progress-overlay__title {

    margin: 0;

    color: #A9A9A9;

    opacity: .80;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: clamp(1.15rem, 2.2vw, 1.65rem);

    font-weight: 400;

    line-height: 1;

    text-transform: uppercase;

    letter-spacing: .62em;

    white-space: nowrap;

    text-shadow:
        0 2px 6px rgba(0,0,0,.75),
        0 0 10px rgba(0,0,0,.35);

}


/* ==========================================================
   Progress Bar
========================================================== */

.progress-overlay__bar {
    position: relative;

    width: 100%;
    height: 22px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;

    background: rgba(8, 13, 11, 0.78);

    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.7),
        0 2px 14px rgba(0, 0, 0, 0.45);

    isolation: isolate;
}


/* ==========================================================
   Animated Fill
========================================================== */

.progress-overlay__fill {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 1;

    width: var(--progress);

    overflow: hidden;
    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #54e86d 0%,
            #72f59a 52%,
            #955cff 100%
        );

    box-shadow:
        0 0 12px rgba(84, 232, 109, 0.45),
        0 0 18px rgba(149, 92, 255, 0.28);

    animation:
        progress-grow 4s linear infinite,
        progress-pulse 4.8s ease-in-out infinite;
}


/* Moving shimmer */

.progress-overlay__fill::after {
    content: "";

    position: absolute;
    inset: 0;

    width: 42%;

    background:
        linear-gradient(
            110deg,
            transparent 0%,
            rgba(255, 255, 255, 0.08) 30%,
            rgba(255, 255, 255, 0.52) 50%,
            rgba(255, 255, 255, 0.08) 70%,
            transparent 100%
        );

    transform: translateX(-180%);

    animation: progress-shimmer 3.2s ease-in-out infinite;
}


/* ==========================================================
   Percentage Text
========================================================== */

.progress-overlay__value {
    position: absolute;
    inset: 0;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.06em;

    pointer-events: none;
    user-select: none;
}


/* Farbe im ungefüllten Bereich */

.progress-overlay__value--dark {
    color: rgba(255, 255, 255, 0.46);
}


/* Farbe im gefüllten Bereich */

.progress-overlay__value--light {
    z-index: 3;

    color: #101512;

    clip-path: inset(
        0
        calc(100% - var(--progress))
        0
        0
    );
}


/* ==========================================================
   Animations
========================================================== */

@keyframes progress-grow {

    0% {
        width: 0;
    }

    45% {
        width: var(--progress);
    }

    85% {
        width: var(--progress);
    }

    100% {
        width: 0;
    }

}

@keyframes progress-pulse {
    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.12);
    }
}


@keyframes progress-shimmer {
    0%,
    35% {
        transform: translateX(-180%);
    }

    75%,
    100% {
        transform: translateX(340%);
    }
}


/* ==========================================================
   Mobile
========================================================== */

@media (max-width: 600px) {
    .progress-overlay {
        bottom: max(
            34px,
            calc(env(safe-area-inset-bottom) + 24px)
        );

        width: min(86vw, 430px);
        gap: 12px;
    }

    .progress-overlay__bar {
        height: 20px;
    }

    .progress-overlay__title {
        letter-spacing: 0.24em;
    }

    .progress-overlay__value {
        font-size: 0.74rem;
    }
}


/* ==========================================================
   Accessibility
========================================================== */

@media (prefers-reduced-motion: reduce) {
    .progress-overlay__fill,
    .progress-overlay__fill::after {
        animation: none;
    }
}


/* ==========================================================
   ROTIERENDE INFO-RINGE
   Datei: /opt/plantr/landing/css/progress-bar.css
   Am Dateiende einfügen
========================================================== */

.hero-info__outer,
.hero-info__inner {
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform;
}

.hero-info__outer {
    animation: hero-info-rotate-clockwise 24s linear infinite;
}

.hero-info__inner {
    animation: hero-info-rotate-counterclockwise 14s linear infinite;
}

@keyframes hero-info-rotate-clockwise {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes hero-info-rotate-counterclockwise {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-info__outer,
    .hero-info__inner {
        animation: none;
    }
}


/* ==========================================================
   INFO-RING TEXT
========================================================== */

.hero-info__title{

    font-family:"Orbitron",sans-serif;

    font-size:16px;

    font-weight:700;

    letter-spacing:.22em;

    fill:#ffffff;

    text-transform:uppercase;

    opacity:.92;

    filter:drop-shadow(0 0 6px rgba(255,255,255,.18));

}


.hero-info__subtitle {

    font-size: 12px;

    letter-spacing: .18em;

    opacity: .85;

    fill: #b8c0c8;

}

/* ==========================================================
   INFO BODY TEXT
========================================================== */

.hero-info__body {

    font-family: "Inter", sans-serif;

    font-size: 20px;

    font-weight: 400;

    letter-spacing: 0;

    fill: #c3cbd2;

    opacity: .82;

}

.hero-info__body--highlight {

    font-weight: 600;

    fill: #ffffff;

    opacity: .96;

}

/* ==========================================================
   GOD RAYS
========================================================== */

.hero::before{

    content:"";

    position:absolute;

    top:0;
    left:50%;

    width:520px;
    height:520px;

    transform:translateX(-50%);

    pointer-events:none;

    z-index:2;

    background:
        radial-gradient(
            ellipse at top,
            rgba(255,248,210,.55) 0%,
            rgba(255,248,210,.18) 22%,
            rgba(255,248,210,.06) 45%,
            transparent 72%
        );

    filter:blur(10px);

    animation:heroLight 7s ease-in-out infinite;
}

@keyframes heroLight{

    0%{
        opacity:.55;
        transform:translateX(-50%) scale(1);
    }

    50%{
        opacity:.9;
        transform:translateX(-50%) scale(1.08);
    }

    100%{
        opacity:.55;
        transform:translateX(-50%) scale(1);
    }

}

.hero picture img{

    animation:ambientGlow 6s ease-in-out infinite;

}

@keyframes ambientGlow{

    0%,100%{
        filter:brightness(1);
    }

    50%{
        filter:brightness(1.04);
    }

}