/* =====================================================================
   IT-Forum Rhein-Neckar — animations.css
   Scroll-Animationen, Hero-Triangle, Microinteractions
   ===================================================================== */

/* --- Hero Triangle ------------------------------------------------- */
.hero-tri {
    animation:
        hero-tri-spin   80s linear infinite,
        hero-tri-breath 14s ease-in-out infinite,
        hero-tri-fade   18s ease-in-out infinite;
}

@keyframes hero-tri-spin {
    from { rotate: 0deg; }
    to   { rotate: 360deg; }
}

@keyframes hero-tri-breath {
    0%, 100% { scale: 0.88; }
    50%      { scale: 1.18; }
}

@keyframes hero-tri-fade {
    0%, 100% { opacity: 0.42; }
    50%      { opacity: 1; }
}

/* --- Scroll-basierte Reveal-Animationen ---------------------------- */
.animate-fade-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.animate-fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.animate-fade-in {
    opacity: 0;
    transition: opacity 0.6s var(--ease-out);
}
.animate-fade-in.is-visible {
    opacity: 1;
}

.animate-scale-in {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.animate-scale-in.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Stagger-Delays für Grid-Kinder */
.animate-fade-up:nth-child(2) { transition-delay: 80ms; }
.animate-fade-up:nth-child(3) { transition-delay: 160ms; }
.animate-fade-up:nth-child(4) { transition-delay: 240ms; }
.animate-fade-up:nth-child(5) { transition-delay: 320ms; }
.animate-fade-up:nth-child(6) { transition-delay: 400ms; }
.animate-fade-up:nth-child(7) { transition-delay: 480ms; }
.animate-fade-up:nth-child(8) { transition-delay: 560ms; }
.animate-fade-up:nth-child(9) { transition-delay: 640ms; }

/* Section-Level Animation */
.animate-section > .container {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.animate-section.is-visible > .container {
    opacity: 1;
    transform: translateY(0);
}

/* --- Hero Chips schwebend ------------------------------------------ */
.hero-chip--white {
    animation: chip-float-1 6s ease-in-out infinite;
}
.hero-chip--deep {
    animation: chip-float-2 7s ease-in-out infinite;
}
.hero-chip--lime {
    animation: chip-float-3 5.5s ease-in-out infinite;
}

@keyframes chip-float-1 {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
@keyframes chip-float-2 {
    0%, 100% { transform: translateY(0) translateX(0); }
    50%      { transform: translateY(-6px) translateX(4px); }
}
@keyframes chip-float-3 {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* --- Eyebrow-Linie einblenden -------------------------------------- */
.animate-section.is-visible .eyebrow::before {
    animation: eyebrow-line 0.5s var(--ease-out) 0.2s both;
}
@keyframes eyebrow-line {
    from { width: 0; }
    to   { width: 24px; }
}

/* --- Stat-Zahlen Counter-Effekt ------------------------------------ */
.hero-stat__number,
.region-stat__number {
    transition: opacity 0.4s, transform 0.4s var(--ease-out);
}

/* --- Corner-Line auf Cards ----------------------------------------- */
.card-base .corner-line {
    transition: width 380ms var(--ease-out);
}

/* --- prefers-reduced-motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .hero-tri {
        animation: none !important;
    }
    .hero-chip--white,
    .hero-chip--deep,
    .hero-chip--lime {
        animation: none !important;
    }
    .animate-fade-up,
    .animate-fade-in,
    .animate-scale-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .animate-section > .container {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .card-base {
        transition: none !important;
    }
    .card-base:hover {
        transform: none !important;
    }
    .btn {
        transition: none !important;
    }
}

/* --- Touch: Hover deaktivieren ------------------------------------- */
@media (hover: none) {
    .card-base:hover {
        box-shadow: none;
        transform: none;
    }
    .card-base:hover .corner-line { width: 0; }
    .card-base:hover .hover-tri { opacity: 0; }
}