/* =====================================================================
   anim.css — Animationen & spielerische Mikro-Interaktionen
   Alle Animationen respektieren prefers-reduced-motion.
   ===================================================================== */

/* ---------- Float / Idle ---------- */
@keyframes float-gentle {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
@keyframes wobble {
    0%   { transform: rotate(0deg) scale(1); }
    20%  { transform: rotate(-12deg) scale(1.08); }
    40%  { transform: rotate(10deg) scale(1.06); }
    60%  { transform: rotate(-6deg) scale(1.04); }
    80%  { transform: rotate(4deg) scale(1.02); }
    100% { transform: rotate(0deg) scale(1); }
}
@keyframes pulse-soft {
    0%, 100% { box-shadow: 0 0 0 0   rgba(194, 90, 64, .35); }
    50%      { box-shadow: 0 0 0 10px rgba(194, 90, 64, 0); }
}
@keyframes drift {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33%      { transform: translate(15px, -10px) rotate(8deg); }
    66%      { transform: translate(-10px, 8px) rotate(-6deg); }
}

/* ---------- Reveal-on-Scroll ---------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity   620ms cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms),
        transform 620ms cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Spielerische Reveal-Varianten je nach Container */
.gallery-grid [data-reveal] { transform: translateY(22px) scale(.96); }
.gallery-grid [data-reveal].is-visible { transform: translateY(0) scale(1); }

.features [data-reveal]        { transform: translateY(20px) rotate(-1.5deg); }
.features [data-reveal].is-visible { transform: translateY(0) rotate(0deg); }

.hero-collage[data-reveal]     { transform: translateX(28px) scale(.95); }
.hero-collage[data-reveal].is-visible { transform: translateX(0) scale(1); }

/* ---------- Logo-Mark ---------- */
.logo-mark {
    animation: float-gentle 4.5s ease-in-out infinite;
    transition: transform 200ms cubic-bezier(.2,.7,.2,1);
}
.logo-mark.wobble {
    animation: wobble 700ms ease;
}
.logo a:hover .logo-mark {
    transform: scale(1.06);
}

/* ---------- Buttons ---------- */
.btn {
    position: relative;
}
.btn-primary {
    transition: transform 220ms cubic-bezier(.2,.7,.2,1),
                background 220ms ease,
                box-shadow 380ms ease;
}
.btn-primary:hover {
    animation: pulse-soft 1.4s ease-out infinite;
}
.btn svg {
    transition: transform 280ms cubic-bezier(.2,.7,.2,1);
}
.btn:hover svg:last-child { transform: translateX(3px); }
.btn-back:hover svg:first-child { transform: translateX(-3px); }

/* ---------- Feature & Value Cards ---------- */
.feature-card,
.value-card,
.contact-card,
.news-card {
    transition:
        transform 320ms cubic-bezier(.2,.7,.2,1),
        box-shadow 320ms ease,
        border-color 320ms ease;
}
.feature-card:hover {
    transform: translateY(-6px) rotate(-.6deg);
}
.value-card:hover {
    transform: translateY(-3px) rotate(.4deg);
}
.contact-card:hover {
    transform: translateY(-4px);
}
.news-card:hover {
    transform: translateY(-5px) rotate(-.3deg);
}

/* Feature-Icon: dezentes Bouncen */
.feature-card:hover .feature-icon {
    animation: wobble 600ms ease;
}
.value-card:hover .value-icon,
.contact-card:hover .contact-icon {
    animation: float-gentle 1.6s ease-in-out infinite;
}

/* ---------- Gallery-Items mit Tilt ---------- */
.gallery-item {
    transform-style: preserve-3d;
    transition: transform 380ms cubic-bezier(.2,.7,.2,1),
                box-shadow 320ms ease;
}
.gallery-item:hover {
    transform: perspective(800px)
               rotateX(var(--tilt-x, 0deg))
               rotateY(var(--tilt-y, 0deg))
               translateY(-3px);
    box-shadow: var(--shadow);
    z-index: 2;
}
.gallery-item img {
    transition: transform 700ms cubic-bezier(.2,.7,.2,1);
}
.gallery-item:hover img {
    transform: scale(1.08);
}
.gallery-caption {
    transition: transform 320ms cubic-bezier(.2,.7,.2,1), background 200ms;
}
.gallery-item:hover .gallery-caption {
    transform: translateY(-2px);
    background: rgba(255,255,255, 1);
}

/* ---------- Hero spielerische Deko ---------- */
.hero {
    position: relative;
}
.hero-decor {
    position: absolute;
    pointer-events: none;
    z-index: -1;
    opacity: .8;
}
.hero-decor.d1 {
    top:   8%; left: 38%;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--honey);
    animation: drift 9s ease-in-out infinite;
}
.hero-decor.d2 {
    top:   28%; left: 46%;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--accent);
    animation: drift 11s ease-in-out infinite reverse;
    animation-delay: -2s;
}
.hero-decor.d3 {
    bottom: 12%; left: 41%;
    width: 30px; height: 30px;
    border: 2.5px solid var(--primary);
    border-radius: 50%;
    animation: drift 13s ease-in-out infinite;
    animation-delay: -4s;
}
.hero-decor.d4 {
    top: 18%; right: 4%;
    width: 18px; height: 18px;
    background: var(--primary-soft);
    border-radius: 6px;
    animation: drift 10s ease-in-out infinite;
    animation-delay: -1s;
    transform-origin: center;
}
@media (max-width: 960px) {
    .hero-decor { display: none; }
}

/* ---------- Welle unter Highlight im Hero ---------- */
.wave-underline {
    position: relative;
    display: inline-block;
}
.wave-underline::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: -.08em;
    height: .35em;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 12' preserveAspectRatio='none'><path d='M0 6 Q 10 0 20 6 T 40 6 T 60 6 T 80 6' fill='none' stroke='%23C25A40' stroke-width='2' stroke-linecap='round'/></svg>");
    background-repeat: repeat-x;
    background-size: 80px .8em;
    animation: wave-scroll 3.2s linear infinite;
    opacity: .65;
}
@keyframes wave-scroll {
    from { background-position: 0    0; }
    to   { background-position: 80px 0; }
}

/* ---------- Nav-Link Hover Pop ---------- */
.nav-links a {
    transition: color 220ms ease, transform 220ms cubic-bezier(.2,.7,.2,1);
}
.nav-links a:hover {
    transform: translateY(-2px);
}

/* ---------- Hero-Eyebrow gentle bounce ---------- */
.hero-eyebrow::before {
    animation: pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.4);  opacity: .7; }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
    .hero-decor { display: none; }
    .wave-underline::after { animation: none; }
}