/* ==========================================================================
   1. GLOBALE STRUKTUR & PERFORMANCE
   ========================================================================== */
html {
    overflow-y: scroll; 
}

html, body { 
    background-color: #FAF8F5 !important; 
    overflow-x: scroll;
}

body { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    background: transparent !important; 
}

custom-background {
    display: block;
}

h1, h2, h3, .font-serif { 
    font-family: 'Cormorant Garamond', serif; 
}

/* ==========================================================================
   2. NATIVE VIEW TRANSITIONS (Seitenübergänge)
   ========================================================================== */
@view-transition { 
    navigation: auto; 
}

::view-transition-group(root) {
    animation-duration: 450ms;
}

::view-transition-old(root), 
::view-transition-new(root) {
    top: 0 !important;
    height: 100% !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important; 
    mix-blend-mode: normal !important;
    overflow: hidden !important;
}

::view-transition-old(root) {
    animation: 450ms cubic-bezier(0.4, 0, 0.2, 1) both vt-universal-out;
}
::view-transition-new(root) {
    animation: 450ms cubic-bezier(0.4, 0, 0.2, 1) both vt-universal-in;
}

@keyframes vt-universal-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes vt-universal-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ==========================================================================
   3. SPEZIFISCHE KOMPONENTEN & ANIMATIONEN
   ========================================================================== */

/* Mobiles Menü Toggle */
#menu-toggle:checked ~ div {
    opacity: 1 !important;
    pointer-events: auto !important;
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
}

/* Hero-Text Wort-für-Wort Reveal */
.hero-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(24px);
    animation: wordReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes wordReveal {
    to { opacity: 1; transform: translateY(0); }
}

/* Pulsierender Punkt für den Call-to-Action */
@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(140,118,97,0.4); }
    50%       { box-shadow: 0 0 0 8px rgba(140,118,97,0); }
}
.pulse-dot { 
    animation: pulse-dot 2s ease-in-out infinite; 
}

/* Bento-Card Hover-Effekt (Anheben) */
.card-lift {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.card-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(60,50,40,0.1);
}

/* ==========================================================================
   4. ANIMIERTER WELLNESS-HINTERGRUND (BLOBS)
   ========================================================================== */

/* Keyframes für das sanfte Schweben */
@keyframes blobFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(40px, -30px) scale(1.05); }
    66%      { transform: translate(-20px, 20px) scale(0.97); }
}
@keyframes blobFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(-50px, 20px) scale(1.08); }
    66%      { transform: translate(30px, -40px) scale(0.95); }
}
@keyframes blobFloat3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(25px, 35px) scale(1.04); }
}

/* Gemeinsame Blob-Eigenschaften */
.bg-blob {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    will-change: transform;
    z-index: -99998;
}

/* Einzelne Blob-Positionierungen und Farbstimmungen */
.blob-1 {
    width: 600px; height: 600px;
    top: -10%; left: -5%;
    background: radial-gradient(circle, rgba(163, 184, 166, 0.7) 0%, transparent 70%);
    animation: blobFloat1 14s ease-in-out infinite;
}

.blob-2 {
    width: 500px; height: 500px;
    top: 10%; right: -8%;
    background: radial-gradient(circle, rgba(140, 170, 145, 0.6) 0%, transparent 70%);
    animation: blobFloat2 18s ease-in-out infinite;
}

.blob-3 {
    width: 700px; height: 700px;
    bottom: -15%; left: 30%;
    background: radial-gradient(circle, rgba(200, 175, 135, 0.4) 0%, transparent 70%);
    animation: blobFloat3 22s ease-in-out infinite;
}

/* ==========================================================================
   5. SCROLL-ANIMATIONEN & REVEAL-EFFEKTE (SYNTAX-KORREKTUR)
   ========================================================================== */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Hier wurden die Klammern korrigiert */
[data-reveal="left"] { transform: translateX(-28px); }
[data-reveal="right"] { transform: translateX(28px); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal].revealed {
    opacity: 1;
    transform: none;
}

/* Staggered (versetzte) Kinder-Elemente für das Bento-Grid */
[data-stagger] > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-stagger].revealed > *:nth-child(1)  { transition-delay: 0ms;  }
[data-stagger].revealed > *:nth-child(2)  { transition-delay: 80ms; }
[data-stagger].revealed > *:nth-child(3)  { transition-delay: 160ms;}
[data-stagger].revealed > *:nth-child(4)  { transition-delay: 240ms;}
[data-stagger].revealed > *:nth-child(5)  { transition-delay: 320ms;}
[data-stagger].revealed > * { opacity: 1; transform: none; }

.count-up { display: inline-block; }

/* ==========================================================================
   6. FIX FÜR DROPDOWN BEI SEITENÜBERGÄNGEN
   ========================================================================== */
.nav-dropdown {
    view-transition-name: none !important;
}

@media (min-width: 768px) {
    :root:not(:window-inactive) .nav-dropdown {
        transition: none !important;
    }
}

/* ==========================================================================
   7. Header
   ========================================================================== */

custom-header:not(:defined) {
    display: block;
    visibility: hidden;
    height: 80px;
}

custom-header, 
header#site-header,
custom-header *, 
header#site-header * {
    view-transition-name: none !important;
}