.swan-flower-container {
    width: 100%;
    max-width: 300px;
    /* Zwiększony obszar dla rozłożystego bukietu */
    margin: 0 auto;
    overflow: visible;
}

.swan-flower-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

/* Animacja rysowania łodyg */
.flower-stem {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    transition: stroke-dashoffset 2.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.is-in-view .flower-stem {
    stroke-dashoffset: 0;
}

.stem-left {
    transition-delay: 0.2s;
}

.stem-right {
    transition-delay: 0.4s;
}

.stem-center {
    transition-delay: 0s;
}

/* Animacja pojawiania się i wzrostu liści */
.flower-leaf {
    transform: scale(0);
    opacity: 0;
    transition: transform 1.5s ease-out, opacity 1.5s ease-out;
}

.leaf-1 {
    transform-origin: 96px 200px;
    transition-delay: 0.8s;
}

.leaf-2 {
    transform-origin: 104px 180px;
    transition-delay: 1.0s;
}

.leaf-3 {
    transform-origin: 90px 130px;
    transition-delay: 1.2s;
}

.leaf-4 {
    transform-origin: 110px 140px;
    transition-delay: 1.4s;
}

.is-in-view .flower-leaf {
    transform: scale(1);
    opacity: 1;
}

/* Pojawianie się płatków kwiatów */
.petal {
    transform: scale(0);
    opacity: 0;
    transition: transform 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 1.5s ease-out;
}

/* Płatki Kwiatu Środkowego */
.head-center .petal {
    transform-origin: 0px 0px;
}

.petal-c-1 {
    transition-delay: 1.5s;
}

.petal-c-2 {
    transition-delay: 1.6s;
}

.petal-c-3 {
    transition-delay: 1.7s;
}

.petal-c-4 {
    transition-delay: 1.8s;
}

.petal-c-5 {
    transition-delay: 1.9s;
}

.petal-c-6 {
    transition-delay: 2.0s;
}

/* Płatki Kwiatu Lewego */
.head-left .petal {
    transform-origin: 0px 0px;
}

.petal-l-1 {
    transition-delay: 1.8s;
}

.petal-l-2 {
    transition-delay: 1.9s;
}

.petal-l-3 {
    transition-delay: 2.1s;
}

.petal-l-4 {
    transition-delay: 2.2s;
}

/* Płatki Kwiatu Prawego */
.head-right .petal {
    transform-origin: 0px 0px;
}

.petal-r-1 {
    transition-delay: 2.0s;
}

.petal-r-2 {
    transition-delay: 2.1s;
}

.petal-r-3 {
    transition-delay: 2.3s;
}

.petal-r-4 {
    transition-delay: 2.4s;
}

.is-in-view .petal {
    transform: scale(1);
    opacity: 1;
}

/* DELIKATNE KIWANIE SIĘ NA WIETRZE */

/* Cały bukiet kiwa się bardzo delikatnie z boku na bok */
@keyframes swayBouquet {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(1.5deg);
    }

    75% {
        transform: rotate(-1.5deg);
    }
}

/* Poszczególne kwiaty kiwają się asynchronicznie, by nadać realizmu */
@keyframes swayLeft {

    0%,
    100% {
        transform: translate(40px, 100px) rotate(0deg);
    }

    50% {
        transform: translate(40px, 100px) rotate(-4deg);
    }
}

@keyframes swayRight {

    0%,
    100% {
        transform: translate(160px, 100px) rotate(0deg);
    }

    50% {
        transform: translate(160px, 100px) rotate(4deg);
    }
}

@keyframes swayCenter {

    0%,
    100% {
        transform: translate(100px, 70px) rotate(0deg);
    }

    50% {
        transform: translate(100px, 70px) rotate(2.5deg);
    }
}

/* Aktywacja kiwania się dopiero po zakończeniu animacji kwitnięcia */
.is-in-view .swan-flower-svg {
    transform-origin: 100px 250px;
    /* Punkt obrotu u nasady bukietu */
    animation: swayBouquet 8s ease-in-out infinite;
    animation-delay: 3.5s;
}

.is-in-view .head-left {
    animation: swayLeft 6s ease-in-out infinite;
    animation-delay: 3.8s;
}

.is-in-view .head-right {
    animation: swayRight 7s ease-in-out infinite;
    animation-delay: 3.5s;
}

.is-in-view .head-center {
    animation: swayCenter 9s ease-in-out infinite;
    animation-delay: 4.2s;
}

/* ==========================================================================
   TYP 2: BUKIET 5-ELEMENTOWY (Polny / Radosny)
   ========================================================================== */

/* Łodygi */
.stem-t2-1 {
    transition-delay: 0.1s;
}

.stem-t2-2 {
    transition-delay: 0.2s;
}

.stem-t2-3 {
    transition-delay: 0.0s;
}

.stem-t2-4 {
    transition-delay: 0.3s;
}

.stem-t2-5 {
    transition-delay: 0.4s;
}

/* Płatki Kwiatu 1 */
.head-t2-1 .petal {
    transform-origin: 0px 0px;
}

.head-t2-1 .petal:nth-child(1) {
    transition-delay: 1.7s;
}

.head-t2-1 .petal:nth-child(2) {
    transition-delay: 1.8s;
}

.head-t2-1 .petal:nth-child(3) {
    transition-delay: 1.9s;
}

/* Płatki Kwiatu 2 */
.head-t2-2 .petal {
    transform-origin: 0px 0px;
}

.head-t2-2 .petal:nth-child(1) {
    transition-delay: 1.5s;
}

.head-t2-2 .petal:nth-child(2) {
    transition-delay: 1.6s;
}

.head-t2-2 .petal:nth-child(3) {
    transition-delay: 1.7s;
}

/* Płatki Kwiatu 3 */
.head-t2-3 .petal {
    transform-origin: 0px 0px;
}

.head-t2-3 .petal:nth-child(1) {
    transition-delay: 1.2s;
}

.head-t2-3 .petal:nth-child(2) {
    transition-delay: 1.3s;
}

.head-t2-3 .petal:nth-child(3) {
    transition-delay: 1.4s;
}

.head-t2-3 .petal:nth-child(4) {
    transition-delay: 1.5s;
}

/* Płatki Kwiatu 4 */
.head-t2-4 .petal {
    transform-origin: 0px 0px;
}

.head-t2-4 .petal:nth-child(1) {
    transition-delay: 1.6s;
}

.head-t2-4 .petal:nth-child(2) {
    transition-delay: 1.7s;
}

.head-t2-4 .petal:nth-child(3) {
    transition-delay: 1.8s;
}

/* Płatki Kwiatu 5 */
.head-t2-5 .petal {
    transform-origin: 0px 0px;
}

.head-t2-5 .petal:nth-child(1) {
    transition-delay: 1.8s;
}

.head-t2-5 .petal:nth-child(2) {
    transition-delay: 1.9s;
}

.head-t2-5 .petal:nth-child(3) {
    transition-delay: 2.0s;
}

/* Kiwanie się wiatrem dla Typ 2 */
@keyframes swayT2_1 {

    0%,
    100% {
        transform: translate(20px, 120px) rotate(0deg);
    }

    50% {
        transform: translate(20px, 120px) rotate(-3deg);
    }
}

@keyframes swayT2_2 {

    0%,
    100% {
        transform: translate(60px, 90px) rotate(0deg);
    }

    50% {
        transform: translate(60px, 90px) rotate(-2deg);
    }
}

@keyframes swayT2_3 {

    0%,
    100% {
        transform: translate(100px, 60px) rotate(0deg);
    }

    50% {
        transform: translate(100px, 60px) rotate(2deg);
    }
}

@keyframes swayT2_4 {

    0%,
    100% {
        transform: translate(140px, 90px) rotate(0deg);
    }

    50% {
        transform: translate(140px, 90px) rotate(2deg);
    }
}

@keyframes swayT2_5 {

    0%,
    100% {
        transform: translate(180px, 120px) rotate(0deg);
    }

    50% {
        transform: translate(180px, 120px) rotate(3deg);
    }
}

.is-in-view .head-t2-1 {
    animation: swayT2_1 6s ease-in-out infinite;
    animation-delay: 3.5s;
}

.is-in-view .head-t2-2 {
    animation: swayT2_2 7s ease-in-out infinite;
    animation-delay: 3.2s;
}

.is-in-view .head-t2-3 {
    animation: swayT2_3 8s ease-in-out infinite;
    animation-delay: 3.0s;
}

.is-in-view .head-t2-4 {
    animation: swayT2_4 6.5s ease-in-out infinite;
    animation-delay: 3.4s;
}

.is-in-view .head-t2-5 {
    animation: swayT2_5 7.5s ease-in-out infinite;
    animation-delay: 3.7s;
}

/* Linia ziemi (rysowanie jak w bajce) */
.ground-line {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.gl-main {
    transition-delay: 0.2s;
}

.gl-sub1 {
    transition-delay: 0.8s;
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
}

.gl-sub2 {
    transition-delay: 1.0s;
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
}

.is-in-view .ground-line {
    stroke-dashoffset: 0;
}


/* ==========================================================================
   TYP 3: ELEGANCKIE ROMANTYCZNE (2-elementowe)
   ========================================================================== */

/* Łodygi */
.stem-t3-1 {
    transition-delay: 0.1s;
}

.stem-t3-2 {
    transition-delay: 0.4s;
}

/* Płatki Kwiatu 1 */
.head-t3-1 .petal {
    transform-origin: 0px 0px;
}

.head-t3-1 .petal:nth-child(1) {
    transition-delay: 1.5s;
}

.head-t3-1 .petal:nth-child(2) {
    transition-delay: 1.7s;
}

.head-t3-1 .petal:nth-child(3) {
    transition-delay: 1.9s;
}

.head-t3-1 .petal:nth-child(4) {
    transition-delay: 2.1s;
}

/* Płatki Kwiatu 2 */
.head-t3-2 .petal {
    transform-origin: 0px 0px;
}

.head-t3-2 .petal:nth-child(1) {
    transition-delay: 1.8s;
}

.head-t3-2 .petal:nth-child(2) {
    transition-delay: 2.0s;
}

.head-t3-2 .petal:nth-child(3) {
    transition-delay: 2.2s;
}

/* Kiwanie się wiatrem dla Typ 3 */
@keyframes swayT3_1 {

    0%,
    100% {
        transform: translate(140px, 50px) rotate(0deg);
    }

    50% {
        transform: translate(140px, 50px) rotate(2.5deg);
    }
}

@keyframes swayT3_2 {

    0%,
    100% {
        transform: translate(60px, 70px) rotate(0deg);
    }

    50% {
        transform: translate(60px, 70px) rotate(-2.5deg);
    }
}

.is-in-view .head-t3-1 {
    animation: swayT3_1 8s ease-in-out infinite;
    animation-delay: 3.5s;
}

.is-in-view .head-t3-2 {
    animation: swayT3_2 9s ease-in-out infinite;
    animation-delay: 4.0s;
}

/* ==========================================================================
   PREMIUM IMAGE REVEAL (Efekt luksusowego pojawiania się zdjęć)
   ========================================================================== */

/* Klasa dodawana w WordPressie np. do bloków Kadence, obrazków lub kolumn */
.swan-premium-fx {
    opacity: 0;
    filter: grayscale(50%);
    transform: translateY(40px);
    /* Element wyjeżdża lekko od dołu */

    /* Płynne, eleganckie przejście (cubic-bezier dla efektu spowolnienia na końcu) */
    /* Zauważ: 'filter' ma opóźnienie (delay: 1.0s), więc zdjęcie nabiera kolorów dopiero gdy już lekko wjedzie na ekran,
       a sam proces nabierania kolorów jest teraz bardzo powolny (trwa 4 sekundy) */
    transition: opacity 1.4s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 4.0s ease-out 1.0s;
    will-change: opacity, transform, filter;
}

/* Stan po wjechaniu w pole widzenia (klasa doczepiana przez JS) */
.swan-premium-fx.is-in-view {
    opacity: 1;
    filter: grayscale(0%);
    transform: translateY(0);
}

/* ==========================================================================
   AUTO-ANIMACJA NAGŁÓWKÓW I ZDJĘĆ Z MOTYWEM CYJANU
   ========================================================================== */

/* Baza dla wszystkich automatycznie animowanych elementów */
.swan-auto-animate {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.8s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 1.8s cubic-bezier(0.2, 0.8, 0.2, 1),
        color 3.5s ease-out 0.5s,
        text-shadow 3.5s ease-out 0.5s,
        box-shadow 3.5s ease-out 0.5s;
    will-change: opacity, transform;
}

/* Luksusowy "Glow" Cyjanu na start dla nagłówków */
h1.swan-auto-animate,
h2.swan-auto-animate,
h3.swan-auto-animate {
    color: #91E6E6;
    text-shadow: 0 0 10px rgba(145, 230, 230, 0.8),
        0 0 20px rgba(83, 173, 173, 0.8),
        0 0 40px rgba(83, 173, 173, 0.6);
}

/* Luksusowy, mocny cień startowy dla obrazków */
img.swan-auto-animate {
    box-shadow: 0 0 30px rgba(145, 230, 230, 0.4),
        0 20px 60px rgba(83, 173, 173, 0.7);
}

/* Element wjeżdża na ekran - powrót do naturalnego wyglądu (wraz z opóźnieniem koloru dla efektu wow) */
.swan-auto-animate.is-in-view {
    opacity: 1;
    transform: translateY(0);
}

h1.swan-auto-animate.is-in-view,
h2.swan-auto-animate.is-in-view,
h3.swan-auto-animate.is-in-view {
    color: inherit;
    text-shadow: 0 0 0px transparent;
}

img.swan-auto-animate.is-in-view {
    box-shadow: 0 0 0px transparent;
}