/* =========================================
   PREMIUM ANIMATIONS & MICRO-INTERACTIONS
   ========================================= */

/* 1. Liquid Page Transitions (Ultra-Fast) */
body {
    opacity: 0;
    transition: opacity 0.1s ease-out;
}
body.page-loaded {
    opacity: 1;
}
body.page-exiting {
    opacity: 0;
}

/* 2. On-Scroll Reveals */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}
.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Dynamic delays for grid items */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }

/* 3. Breathing Images (Ken Burns) */
.ken-burns-container {
    overflow: hidden;
}
.ken-burns-img {
    transition: transform 12s ease-out;
    transform: scale(1.0);
    will-change: transform;
}
.ken-burns-container.is-visible .ken-burns-img {
    transform: scale(1.06);
}

/* 4. Tactile Micro-Interactions */
.hover-lift {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -10px rgba(47, 93, 80, 0.15) !important; /* primary green subtle shadow */
}

/* Termin Buchen Magnetic Pulse */
@keyframes soft-pulse {
    0% { box-shadow: 0 0 0 0 rgba(226, 139, 75, 0.4); } 
    70% { box-shadow: 0 0 0 15px rgba(226, 139, 75, 0); }
    100% { box-shadow: 0 0 0 0 rgba(226, 139, 75, 0); }
}
.btn-pulse {
    animation: soft-pulse 3s infinite;
}
.btn-pulse:hover {
    animation: none; /* Disable pulse on hover, relies on standard hover states */
}

body { font-family: 'Candara', sans-serif; background-color: #FBF7F1; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.glass-nav { background: rgba(251, 247, 241, 0.85); backdrop-filter: blur(20px); box-shadow: 0 8px 30px rgba(0, 54, 43, 0.05); border-bottom: 1px solid rgba(0, 54, 43, 0.02); }
.editorial-shadow { box-shadow: 0px 20px 40px rgba(46, 58, 52, 0.04); }
.tab-content { display: none; }
.tab-content.active { display: flex; animation: fadeIn 0.4s ease forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }




/* Magic Card Styling for Top Tabs */
.magic-card {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
}

.magic-card::before, .magic-card::after {
    content: '';
    position: absolute;
    width: 35%;
    height: 35%;
    pointer-events: none;
    opacity: 0.4;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.magic-card::before {
    top: 0; left: 0;
    border-top: 3px solid var(--card-color);
    border-left: 3px solid var(--card-color);
    border-top-left-radius: 32px;
}

.magic-card::after {
    bottom: 0; right: 0;
    border-bottom: 3px solid var(--card-color);
    border-right: 3px solid var(--card-color);
    border-bottom-right-radius: 32px;
}

/* Shine Hover Effect */
.magic-card .shine {
    position: absolute;
    top: 0; left: -150%;
    width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    z-index: 10;
    pointer-events: none;
    transition: none;
}

.magic-card:hover {
    transform: translateY(-8px);
    background-color: #ffffff;
    box-shadow: 0 20px 40px -10px rgba(var(--card-color-rgb), 0.25);
}
.magic-card:hover::before, .magic-card:hover::after {
    width: 100%; height: 100%;
    border-radius: 32px;
    opacity: 0.8;
}
.magic-card:hover .shine {
    animation: shine-sweep 0.7s ease-out forwards;
}

/* Active Selected Tab State */
.magic-card.active-tab {
    background-color: #ffffff;
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -5px rgba(var(--card-color-rgb), 0.15);
}
.magic-card.active-tab::before, .magic-card.active-tab::after {
    width: 100%; height: 100%;
    border-radius: 32px;
    opacity: 1;
}

@keyframes shine-sweep {
    0% { left: -150%; }
    100% { left: 200%; }
}

.magic-card .magic-icon {
    color: var(--card-color);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.magic-card:hover .magic-icon {
    transform: scale(1.15) translateY(-2px);
}