/* ==== SCROLL ANIMATIONS ==== */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0) scale(0.6);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.3);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInCard {
    from {
        opacity: 0;
        transform: translate3d(0, 50px, 0) scale(0.8);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

/* Scroll Animation für page-section-light */
.page-section-light {
    opacity: 0;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-fill-mode: forwards;
    animation-play-state: paused;
    /* Pausiert bis .visible hinzugefügt wird */
}

/* 1. Section: Status (scale animation) */
.page-content>.page-section-light:nth-child(1) {
    animation-name: fadeInScale;
}

/* 2. Section: Buffetservice (slide up animation) */
.page-content>.page-section-light:nth-child(2) {
    animation-name: fadeInUp;
}

/* 3. Section: Motto (scale animation) */
.page-content>.page-section-light:nth-child(3) {
    animation-name: fadeInScale;
}

/* Visible Class für Intersection Observer */
.page-section-light.visible {
    animation-play-state: running;
}

/* ==== BUFFETSERVICE ==== */
.buffet-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: center;
}

.buffet-text h2 {
    color: var(--thai-dark-green);
    text-align: left;
}

.buffet-text p {
    font-family: var(--font-body);
    color: var(--text-dark);
    font-weight: var(--font-weight-normal);
}

.buffet-text ul {
    font-family: var(--font-body);
    color: var(--text-dark);
}

.buffet-text ul li {
    font-weight: var(--font-weight-normal);
    color: var(--text-dark);
}

.buffet-image {
    max-width: 100%;
    border-radius: var(--border-radius-sm);
    /* Animation nach Section */
    opacity: 0;
    animation: zoomIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation-play-state: paused;
}

/* Buffet Image Animation starten wenn Section sichtbar */
.page-section-light.visible .buffet-image {
    animation-play-state: running;
    animation-delay: 0.5s;
}

/* ==== MOTTO SECTION ==== */
.motto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);
}

.motto-card {
    text-align: center;
    background: var(--background-white);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-card);
    border-top: 4px solid var(--thai-beige);
    cursor: pointer;
    /* Card Animation */
    opacity: 0;
    animation: slideInCard 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation-play-state: paused;
    /* Hover Effect - wird nach Animation beibehalten */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
}

.motto-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

/* Motto Cards nacheinander animieren */
.page-section-light.visible .motto-card:nth-child(1) {
    animation-play-state: running;
    animation-delay: 0.5s;
}

.page-section-light.visible .motto-card:nth-child(2) {
    animation-play-state: running;
    animation-delay: 0.7s;
}

.page-section-light.visible .motto-card:nth-child(3) {
    animation-play-state: running;
    animation-delay: 0.9s;
}

.motto-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

.motto-card h4 {
    font-family: var(--font-heading);
    color: var(--thai-dark-green);
    font-size: 2.2em;
    margin-bottom: var(--spacing-sm);
}

.motto-card p {
    font-family: var(--font-body);
    color: var(--text-dark);
    font-weight: var(--font-weight-normal);
    margin-bottom: var(--spacing-sm);
}

/* Responsive Design */
@media (max-width: 768px) {
    .buffet-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .motto-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
}