/* ============================================================
   PUSTEBLUME – Animations & Visual Enhancement Library
   Primärfarbe: #dfcdbb
   ============================================================ */

/* ============================================================
   SECTION REVEAL ANIMATIONS
   ============================================================ */

/* Fade-in from bottom with blur */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(4px);
    transition:
        opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* Slide from left */
.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition:
        opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Slide from right */
.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition:
        opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Scale up */
.reveal-scale {
    opacity: 0;
    transform: scale(0.88);
    transition:
        opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
        transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal-scale.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Stagger delays */
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }
.reveal-delay-5 { transition-delay: 400ms; }
.reveal-delay-6 { transition-delay: 480ms; }

/* ============================================================
   FLOATING PARTICLES BACKGROUND
   ============================================================ */

.particle-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: particleRise var(--duration, 12s) ease-in-out var(--delay, 0s) infinite;
}

@keyframes particleRise {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.5) rotate(0deg);
    }
    15% {
        opacity: var(--max-opacity, 0.4);
    }
    85% {
        opacity: var(--max-opacity, 0.4);
    }
    100% {
        opacity: 0;
        transform: translateY(-180px) scale(1.2) rotate(180deg);
    }
}

/* ============================================================
   SHIMMER / SHINE EFFECTS
   ============================================================ */

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

.shimmer-bg {
    position: relative;
    overflow: hidden;
}

.shimmer-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.18),
        transparent
    );
    animation: shimmerSlide 2.8s ease-in-out infinite;
    pointer-events: none;
}

/* ============================================================
   MAGNETIC HOVER GLOW
   ============================================================ */

.glow-hover {
    transition: box-shadow 0.4s ease, transform 0.3s ease;
}

.glow-hover:hover {
    box-shadow:
        0 0 0 1px rgba(223, 205, 187, 0.3),
        0 8px 32px rgba(223, 205, 187, 0.35),
        0 20px 60px rgba(197, 212, 190, 0.2);
    transform: translateY(-4px);
}

/* ============================================================
   TEXT GRADIENT ANIMATIONS
   ============================================================ */

.text-gradient-animate {
    background: linear-gradient(
        135deg,
        #7a9e6e 0%,
        #dfcdbb 40%,
        #b5a08a 70%,
        #7a9e6e 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: textGradientShift 4s linear infinite;
}

@keyframes textGradientShift {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* ============================================================
   BORDER GRADIENT PULSE
   ============================================================ */

@keyframes borderPulse {
    0%, 100% {
        border-color: rgba(223, 205, 187, 0.3);
        box-shadow: 0 0 0 0 rgba(223, 205, 187, 0.1);
    }
    50% {
        border-color: rgba(223, 205, 187, 0.7);
        box-shadow: 0 0 0 6px rgba(223, 205, 187, 0.08);
    }
}

.border-pulse {
    animation: borderPulse 3s ease-in-out infinite;
}

/* ============================================================
   TILT 3D CARD EFFECT
   ============================================================ */

.tilt-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform-style: preserve-3d;
    will-change: transform;
}

/* ============================================================
   FLOATING BADGE
   ============================================================ */

@keyframes floatBadge {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-8px) rotate(2deg); }
}

.float-badge {
    animation: floatBadge 4s ease-in-out infinite;
}

/* ============================================================
   COUNTER ODOMETER STYLE
   ============================================================ */

.counter-wrap {
    overflow: hidden;
    position: relative;
}

/* ============================================================
   RIPPLE EFFECT ON CLICK
   ============================================================ */

.ripple {
    position: relative;
    overflow: hidden;
}

.ripple::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(223, 205, 187, 0.4);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
    opacity: 0;
}

.ripple:active::before {
    width: 300px;
    height: 300px;
    opacity: 0;
    transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
}

/* ============================================================
   SECTION WAVE DECORATION
   ============================================================ */

@keyframes waveShift {
    0% { transform: translateX(0); }
    50% { transform: translateX(-20px); }
    100% { transform: translateX(0); }
}

.wave-animated svg {
    animation: waveShift 6s ease-in-out infinite;
}

/* ============================================================
   PULSE RING
   ============================================================ */

@keyframes pulseRing {
    0% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(223, 205, 187, 0.5);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 20px rgba(223, 205, 187, 0);
    }
    100% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(223, 205, 187, 0);
    }
}

.pulse-ring {
    animation: pulseRing 2.5s ease-out infinite;
}

/* ============================================================
   ICON BOUNCE ON HOVER
   ============================================================ */

.icon-bounce {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.icon-bounce:hover {
    transform: scale(1.2) rotate(10deg);
}

/* ============================================================
   SCROLL PROGRESS LINE
   ============================================================ */

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #dfcdbb, #7a9e6e, #dfcdbb);
    background-size: 200% 100%;
    animation: progressGradient 2s linear infinite;
    z-index: 9999;
    transform-origin: left;
    width: 100%;
    transform: scaleX(0);
}

@keyframes progressGradient {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

/* ============================================================
   CARD INNER GLOW
   ============================================================ */

@keyframes innerGlow {
    0%, 100% {
        background: linear-gradient(135deg,
            rgba(223, 205, 187, 0.05) 0%,
            rgba(197, 212, 190, 0.05) 100%);
    }
    50% {
        background: linear-gradient(135deg,
            rgba(223, 205, 187, 0.12) 0%,
            rgba(197, 212, 190, 0.10) 100%);
    }
}

.card-glow-bg {
    animation: innerGlow 4s ease-in-out infinite;
}

/* ============================================================
   SPINNING DECORATIVE ELEMENTS
   ============================================================ */

@keyframes rotateSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes rotateReverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

.rotate-slow { animation: rotateSlow 20s linear infinite; }
.rotate-reverse { animation: rotateReverse 15s linear infinite; }

/* ============================================================
   TYPEWRITER CURSOR
   ============================================================ */

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.cursor-blink::after {
    content: '|';
    animation: blink 1s step-end infinite;
    color: #7a9e6e;
}

/* ============================================================
   STAT NUMBER POP
   ============================================================ */

@keyframes statPop {
    0% { transform: scale(0.5); opacity: 0; }
    70% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.stat-pop {
    animation: statPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ============================================================
   PARALLAX SECTION BACKGROUNDS
   ============================================================ */

.parallax-section {
    position: relative;
    overflow: hidden;
}

.parallax-bg {
    position: absolute;
    inset: -20%;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    will-change: transform;
}

/* ============================================================
   GRADIENT ORB ANIMATIONS (enhanced)
   ============================================================ */

@keyframes orbFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(40px, -30px) scale(1.08); }
    50% { transform: translate(-20px, 50px) scale(0.94); }
    75% { transform: translate(30px, 20px) scale(1.04); }
}

@keyframes orbFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-50px, -20px) scale(1.12); }
    66% { transform: translate(40px, 35px) scale(0.9); }
}

@keyframes orbFloat3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -40px) scale(1.15); }
}

.orb-float-1 { animation: orbFloat1 18s ease-in-out infinite; }
.orb-float-2 { animation: orbFloat2 22s ease-in-out infinite; }
.orb-float-3 { animation: orbFloat3 14s ease-in-out infinite; }

/* ============================================================
   CHECKLIST ITEM ANIMATION
   ============================================================ */

@keyframes checkIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

.check-item {
    opacity: 0;
    animation: checkIn 0.5s ease-out forwards;
}

.check-item:nth-child(1) { animation-delay: 0.1s; }
.check-item:nth-child(2) { animation-delay: 0.2s; }
.check-item:nth-child(3) { animation-delay: 0.3s; }
.check-item:nth-child(4) { animation-delay: 0.4s; }
.check-item:nth-child(5) { animation-delay: 0.5s; }

/* ============================================================
   BUTTON SHINE EFFECT
   ============================================================ */

@keyframes btnShine {
    0% { left: -100%; }
    60%, 100% { left: 200%; }
}

.btn-shine {
    position: relative;
    overflow: hidden;
}

.btn-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.25),
        transparent
    );
    animation: btnShine 3s ease-in-out infinite;
}

/* ============================================================
   MORPHING BLOB
   ============================================================ */

@keyframes morphBlob {
    0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    25% { border-radius: 40% 60% 55% 45% / 50% 60% 40% 50%; }
    50% { border-radius: 30% 60% 70% 40% / 50% 40% 60% 50%; }
    75% { border-radius: 55% 45% 40% 60% / 45% 55% 45% 55%; }
    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

.morph-blob {
    animation: morphBlob 8s ease-in-out infinite;
}

/* ============================================================
   FADE UP CHARS (per-character animation)
   ============================================================ */

@keyframes charFadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.char {
    display: inline-block;
    opacity: 0;
    animation: charFadeUp 0.5s ease-out forwards;
}

/* ============================================================
   CARD FLIP
   ============================================================ */

.flip-card {
    perspective: 1000px;
}

.flip-card-inner {
    transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
    position: relative;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.flip-card-back {
    transform: rotateY(180deg);
    position: absolute;
    inset: 0;
}

/* ============================================================
   SECTION ENTRY ANIMATIONS
   ============================================================ */

@keyframes sectionSlideUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes sectionFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============================================================
   DECORATIVE DOTS GRID ANIMATION
   ============================================================ */

.dots-grid {
    position: absolute;
    pointer-events: none;
    opacity: 0.06;
    background-image: radial-gradient(circle, #dfcdbb 1px, transparent 1px);
    background-size: 24px 24px;
    animation: dotsShift 30s linear infinite;
}

@keyframes dotsShift {
    0% { background-position: 0 0; }
    100% { background-position: 24px 24px; }
}

/* ============================================================
   LOADING / PAGE TRANSITION
   ============================================================ */

@keyframes pageReveal {
    from {
        clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0 0% 0 0);
    }
}

/* ============================================================
   ENHANCED SECTION BACKGROUNDS
   ============================================================ */

.section-warm-gradient {
    background: linear-gradient(
        160deg,
        #faf8f5 0%,
        rgba(223, 205, 187, 0.15) 40%,
        #faf8f5 100%
    );
    position: relative;
}

.section-warm-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(223, 205, 187, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(197, 212, 190, 0.10) 0%, transparent 50%);
    pointer-events: none;
}

/* ============================================================
   HIGHLIGHT UNDERLINE ANIMATION
   ============================================================ */

.highlight-underline {
    position: relative;
    display: inline-block;
}

.highlight-underline::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #dfcdbb, #7a9e6e);
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.highlight-underline:hover::after,
.is-visible .highlight-underline::after {
    width: 100%;
}

/* ============================================================
   EYEBROW LABEL POP
   ============================================================ */

@keyframes eyebrowPop {
    0% { opacity: 0; transform: translateY(-10px) scale(0.9); }
    60% { transform: translateY(2px) scale(1.02); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.eyebrow-anim.is-visible {
    animation: eyebrowPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ============================================================
   HOVER LIFT WITH SHADOW
   ============================================================ */

.lift-card {
    transition:
        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.lift-card:hover {
    transform: translateY(-10px);
    box-shadow:
        0 4px 8px rgba(61, 61, 61, 0.04),
        0 12px 32px rgba(61, 61, 61, 0.08),
        0 24px 48px rgba(223, 205, 187, 0.15);
}

/* ============================================================
   ANIMATED GRADIENT BORDER
   ============================================================ */

@keyframes gradientBorderSpin {
    0% { --angle: 0deg; }
    100% { --angle: 360deg; }
}

.gradient-border {
    position: relative;
    border-radius: var(--radius-xl);
}

.gradient-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: calc(var(--radius-xl) + 2px);
    background: linear-gradient(
        var(--angle, 0deg),
        #dfcdbb,
        #c5d4be,
        #d4c5e0,
        #dfcdbb
    );
    z-index: -1;
    animation: gradientBorderSpin 4s linear infinite;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .particle,
    .morph-blob,
    .orb-float-1,
    .orb-float-2,
    .orb-float-3,
    .rotate-slow,
    .rotate-reverse,
    .float-badge,
    .pulse-ring,
    .border-pulse,
    .dots-grid {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale {
        opacity: 1;
        transform: none;
        filter: none;
    }
}