/* =========================================================
   HERO ANIMÁCIÓK
   ========================================================= */

.energy-card {
    animation: energyCardEnter 900ms cubic-bezier(.22, 1, .36, 1) both;
}

/* Oszlopok induló animációja */
.energy-chart span {
    transform: scaleY(0);
    transform-origin: bottom;
    animation: energyBarGrow 850ms cubic-bezier(.22, 1, .36, 1) forwards;
}

.energy-chart span:nth-child(1) {
    animation-delay: 200ms;
}

.energy-chart span:nth-child(2) {
    animation-delay: 280ms;
}

.energy-chart span:nth-child(3) {
    animation-delay: 360ms;
}

.energy-chart span:nth-child(4) {
    animation-delay: 440ms;
}

.energy-chart span:nth-child(5) {
    animation-delay: 520ms;
}

.energy-chart span:nth-child(6) {
    animation-delay: 600ms;
}

.energy-chart span:nth-child(7) {
    animation-delay: 680ms;
}

.energy-chart span:nth-child(8) {
    animation-delay: 760ms;
}

/* Lebegő oldalkártyák */
.floating-card--solar {
    animation:
        floatingCardEnterRight 800ms cubic-bezier(.22, 1, .36, 1) both,
        floatingSolar 4.8s ease-in-out 900ms infinite;
}

.floating-card--storage {
    animation:
        floatingCardEnterLeft 800ms cubic-bezier(.22, 1, .36, 1) both,
        floatingStorage 5.3s ease-in-out 900ms infinite;
}

/* Háttérkörök */
.energy-orbit--outer {
    animation: orbitRotate 32s linear infinite;
}

.energy-orbit--inner {
    animation: orbitRotateReverse 24s linear infinite;
}

/* Finom állapotjelzés */
.energy-card__status {
    position: relative;
}

.energy-card__status::before {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--color-lime);
    box-shadow: 0 0 0 rgba(250, 255, 209, 0.45);
    content: "";
    animation: statusPulse 2.4s ease-out infinite;
}

.hero-slide.is-active .home-energy-visual__image {
    animation: homeSystemEnter 900ms cubic-bezier(.22, 1, .36, 1) both;
}

.hero-slide.is-active .hero-slide__system-backdrop img {
    animation: heroSystemBackdropEnter 1200ms cubic-bezier(.22, 1, .36, 1) both;
}

.hero-slide.is-active .system-stat {
    animation: systemStatEnter 650ms cubic-bezier(.22, 1, .36, 1) both;
}

.hero-slide.is-active .system-stat--storage {
    animation-delay: 120ms;
}

.hero-slide.is-active .system-stat--use {
    animation-delay: 240ms;
}

.hero-slide.is-active .home-energy-visual__flow {
    background-size: 220% 100%;
    animation: energyFlow 2.7s linear infinite;
}

@keyframes energyCardEnter {
    from {
        opacity: 0;
        transform: translateY(25px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes energyBarGrow {
    to {
        transform: scaleY(1);
    }
}

@keyframes floatingCardEnterRight {
    from {
        opacity: 0;
        transform: translateX(35px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes floatingCardEnterLeft {
    from {
        opacity: 0;
        transform: translateX(-35px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes floatingSolar {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

@keyframes floatingStorage {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(11px);
    }
}

@keyframes orbitRotate {
    from {
        transform: rotate(0deg);
    }

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

@keyframes orbitRotateReverse {
    from {
        transform: rotate(360deg);
    }

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

@keyframes statusPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(250, 255, 209, 0.45);
    }

    70% {
        box-shadow: 0 0 0 7px rgba(250, 255, 209, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(250, 255, 209, 0);
    }
}

@keyframes homeSystemEnter {
    from {
        opacity: 0;
        transform: translateY(22px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes heroSystemBackdropEnter {
    from {
        opacity: 0;
        transform: scale(1.035);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes systemStatEnter {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes energyFlow {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: -120% 0;
    }
}

/* Akik kikapcsolták az animációkat */
@media (prefers-reduced-motion: reduce) {
    .energy-card,
    .energy-chart span,
    .floating-card,
    .energy-orbit,
    .energy-card__status::before,
    .home-energy-visual__image,
    .home-energy-visual__flow,
    .hero-slide__system-backdrop img,
    .system-stat {
        animation: none !important;
        transform: none !important;
    }

    .hero-slide {
        transition: none !important;
    }
}