/* ============================================================
   PUSTEBLUME – Decorative Pusteblumen System
   Reusable floating dandelion seed decorations for all pages.
   ============================================================ */

/* ---- Decoration Container ---- */
.puste-deco-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

/* ---- Individual Seed Base ---- */
.puste-seed {
    position: absolute;
    opacity: 0;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.05));
    will-change: transform, opacity;
    transition: opacity 1s ease;
}

.puste-seed.is-visible {
    opacity: var(--puste-opacity, 0.18);
}

/* ---- Size Variants ---- */
.puste-seed--sm {
    width: 35px;
    --puste-opacity: 0.12;
}

.puste-seed--md {
    width: 65px;
    --puste-opacity: 0.16;
}

.puste-seed--lg {
    width: 100px;
    --puste-opacity: 0.14;
}

.puste-seed--xl {
    width: 160px;
    --puste-opacity: 0.10;
}

/* ---- Numbered Seed Positions (generic per-section slots) ---- */
/* Blatt oben rechts */
.puste-seed--1 {
    width: 80px;
    top: 12%;
    right: 3%;
    --puste-opacity: 0.15;
    animation: pusteFloat1 16s ease-in-out infinite;
}

/* Blatt unten links */
.puste-seed--2 {
    width: 60px;
    bottom: 15%;
    left: 2%;
    --puste-opacity: 0.12;
    animation: pusteFloat2 20s ease-in-out infinite;
    animation-delay: 3s;
}

/* Blatt Mitte rechts */
.puste-seed--3 {
    width: 50px;
    top: 55%;
    right: 2%;
    --puste-opacity: 0.10;
    animation: pusteFloat3 14s ease-in-out infinite;
    animation-delay: 6s;
}

/* Volle Pusteblume – groß, dezent am Rand */
.puste-seed--full {
    width: 180px;
    top: 5%;
    right: -30px;
    --puste-opacity: 0.08;
    animation: pusteFloat1 22s ease-in-out infinite;
}

/* ---- Full Dandelion ---- */
.puste-full {
    position: absolute;
    opacity: 0;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.06));
    will-change: transform, opacity;
    transition: opacity 1.2s ease;
}

.puste-full.is-visible {
    opacity: var(--puste-opacity, 0.08);
}

.puste-full--sm {
    width: 140px;
    --puste-opacity: 0.06;
}

.puste-full--md {
    width: 220px;
    --puste-opacity: 0.08;
}

.puste-full--lg {
    width: 320px;
    --puste-opacity: 0.06;
}

/* ---- Float Animations ---- */
.puste-anim-float-1 {
    animation: pusteFloat1 14s ease-in-out infinite;
}

.puste-anim-float-2 {
    animation: pusteFloat2 18s ease-in-out infinite;
}

.puste-anim-float-3 {
    animation: pusteFloat3 12s ease-in-out infinite;
}

.puste-anim-float-4 {
    animation: pusteFloat4 16s ease-in-out infinite;
}

.puste-anim-drift {
    animation: pusteDrift 20s ease-in-out infinite;
}

.puste-anim-sway {
    animation: pusteSway 10s ease-in-out infinite;
}

.puste-anim-gentle {
    animation: pusteGentle 22s ease-in-out infinite;
}

/* ---- Animation Delays ---- */
.puste-delay-1 {
    animation-delay: 0s;
}

.puste-delay-2 {
    animation-delay: 2s;
}

.puste-delay-3 {
    animation-delay: 4s;
}

.puste-delay-4 {
    animation-delay: 6s;
}

.puste-delay-5 {
    animation-delay: 8s;
}

.puste-delay-6 {
    animation-delay: 10s;
}

/* ---- Section-specific Seed Positions ---- */

/* Hero variant */
.puste-seed--hero-1 {
    top: 15%;
    right: 8%;
}

.puste-seed--hero-2 {
    top: 45%;
    right: 25%;
}

.puste-seed--hero-3 {
    bottom: 20%;
    right: 15%;
}

/* Facts variant */
.puste-seed--facts-1 {
    top: 10%;
    left: 3%;
}

.puste-seed--facts-2 {
    bottom: 15%;
    right: 5%;
}

/* Einser variant */
.puste-seed--einser-1 {
    top: 8%;
    right: 6%;
}

.puste-seed--einser-2 {
    bottom: 12%;
    left: 4%;
}

.puste-seed--einser-3 {
    top: 50%;
    right: 2%;
}

/* Gallery variant */
.puste-seed--gallery-1 {
    top: 5%;
    right: 3%;
}

.puste-seed--gallery-2 {
    bottom: 8%;
    left: 5%;
}

/* CTA variant */
.puste-seed--cta-1 {
    top: 15%;
    left: 5%;
}

.puste-seed--cta-2 {
    top: 30%;
    right: 8%;
}

.puste-seed--cta-3 {
    bottom: 25%;
    left: 10%;
}

.puste-full--cta {
    bottom: 5%;
    right: 3%;
}

/* Generic page decorations */
.puste-seed--page-tl {
    top: 5%;
    left: 3%;
}

.puste-seed--page-tr {
    top: 8%;
    right: 4%;
}

.puste-seed--page-ml {
    top: 40%;
    left: 2%;
}

.puste-seed--page-mr {
    top: 45%;
    right: 3%;
}

.puste-seed--page-bl {
    bottom: 15%;
    left: 5%;
}

.puste-seed--page-br {
    bottom: 10%;
    right: 4%;
}

/* ---- Keyframe Animations ---- */

@keyframes pusteFloat1 {

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

    20% {
        transform: translate(12px, -18px) rotate(8deg);
    }

    40% {
        transform: translate(-8px, -30px) rotate(-5deg);
    }

    60% {
        transform: translate(15px, -15px) rotate(12deg);
    }

    80% {
        transform: translate(-5px, -8px) rotate(-3deg);
    }
}

@keyframes pusteFloat2 {

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

    25% {
        transform: translate(-15px, -25px) rotate(-10deg);
    }

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

    75% {
        transform: translate(-8px, -20px) rotate(-8deg);
    }
}

@keyframes pusteFloat3 {

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

    33% {
        transform: translate(20px, -15px) rotate(15deg) scale(1.05);
    }

    66% {
        transform: translate(-10px, -25px) rotate(-8deg) scale(0.95);
    }
}

@keyframes pusteFloat4 {

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

    30% {
        transform: translate(-18px, -22px) rotate(-12deg);
    }

    60% {
        transform: translate(12px, -35px) rotate(8deg);
    }
}

@keyframes pusteDrift {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

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

    90% {
        opacity: 1;
    }

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

@keyframes pusteSway {

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

    25% {
        transform: translateX(12px) rotate(5deg);
    }

    75% {
        transform: translateX(-12px) rotate(-5deg);
    }
}

@keyframes pusteGentle {

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

    20% {
        transform: translate(8px, -10px) rotate(3deg) scale(1.02);
    }

    40% {
        transform: translate(-5px, -18px) rotate(-2deg) scale(0.98);
    }

    60% {
        transform: translate(10px, -8px) rotate(5deg) scale(1.03);
    }

    80% {
        transform: translate(-8px, -14px) rotate(-4deg) scale(0.99);
    }
}

/* ---- Scroll-triggered Parallax (set via JS) ---- */
.puste-parallax {
    transition: transform 0.1s linear;
}

/* ---- Lavender Glow Effects ---- */
.lavender-glow {
    box-shadow: 0 0 0 0 rgba(var(--color-accent-3-rgb), 0);
    transition: box-shadow 0.4s ease;
}

.lavender-glow:hover {
    box-shadow: 0 4px 24px rgba(var(--color-accent-3-rgb), 0.25);
}

/* ---- Shimmer Effect for Buttons ---- */
.shimmer-btn {
    position: relative;
    overflow: hidden;
}

.shimmer-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(var(--color-white-rgb), 0.25),
            transparent);
    transition: none;
    animation: shimmerSlide 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shimmerSlide {
    0% {
        left: -100%;
    }

    50%,
    100% {
        left: 100%;
    }
}

/* ---- Breathing Card Effect ---- */
.breathe-card {
    animation: cardBreathe 6s ease-in-out infinite;
}

@keyframes cardBreathe {

    0%,
    100% {
        box-shadow: var(--shadow-card);
    }

    50% {
        box-shadow: 0 8px 32px rgba(var(--color-accent-3-rgb), 0.12);
    }
}

/* ---- Mobile: alle dekorativen Pusteblumen verstecken ---- */
@media (max-width: 1024px) {
    .puste-seed,
    .puste-full,
    .puste-deco-layer {
        display: none !important;
    }
}



/* ---- Accessibility ---- */
@media (prefers-reduced-motion: reduce) {

    .puste-seed,
    .puste-full,
    .shimmer-btn::before,
    .breathe-card {
        animation: none !important;
    }

    .puste-seed.is-visible {
        opacity: var(--puste-opacity, 0.12);
    }

    .puste-full.is-visible {
        opacity: var(--puste-opacity, 0.06);
    }
}