/* ===== KEYFRAME ANIMATIONS ===== */

/* REMOVED - Wolken bewegen sich jetzt nur mit Scroll horizontal */

@keyframes fall {
    0% {
        transform: translate(0, -100px) scaleY(0);
        opacity: 0.3;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        transform: translate(0, 100vh) scaleY(1);
        opacity: 0;
    }
}

@keyframes slideVertical {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-300px);
        opacity: 0.6;
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulse-line {
    0%, 100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scaleY(1);
    }
    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scaleY(1.1);
    }
}

@keyframes divine-reveal {
    0%, 100% {
        opacity: 0.5;
        transform: translateX(-50%) rotate(45deg) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: translateX(-50%) rotate(45deg) scale(1.1);
    }
}

@keyframes scrollPulse {
    0%, 100% {
        opacity: 1;
        transform: translateY(0);
    }
    50% {
        opacity: 0.3;
        transform: translateY(30px);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(80px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-80px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(80px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes reveal {
    from {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
    }
    to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

@keyframes lineGrow {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

/* ===== SCROLL ANIMATION STATES ===== */

[data-scroll] {
    opacity: 0;
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-scroll].is-visible {
    opacity: 1;
}

/* Hero Title Animation */
.hero-title .line {
    opacity: 0;
    transform: translateY(120px);
}

.hero-title .line.is-visible {
    animation: fadeInUp 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.hero-title .line:nth-child(1).is-visible {
    animation-delay: 0.3s;
}

.hero-title .line:nth-child(2).is-visible {
    animation-delay: 0.6s;
}

/* Hero Title Lines */
.hero-title .line::after {
    transform-origin: center;
    animation: lineGrow 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 1s;
}

/* Hero Subtitle Animation */
.hero-subtitle[data-scroll].is-visible {
    animation: fadeInUp 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.9s forwards;
}

.hero-subtitle::before,
.hero-subtitle::after {
    transform-origin: left;
    animation: lineGrow 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 1.2s;
}

.hero-subtitle::after {
    transform-origin: right;
}

/* Hero CTA Animation */
.hero-cta[data-scroll].is-visible {
    animation: fadeInUp 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.2s forwards;
}

/* About Section Animations */
.about-image[data-scroll].is-visible {
    animation: fadeInLeft 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.about-content[data-scroll].is-visible {
    animation: fadeInRight 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.stat[data-scroll].is-visible {
    animation: scaleIn 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.stat:nth-child(1)[data-scroll].is-visible {
    animation-delay: 0.2s;
}

.stat:nth-child(2)[data-scroll].is-visible {
    animation-delay: 0.4s;
}

.stat:nth-child(3)[data-scroll].is-visible {
    animation-delay: 0.6s;
}

/* Portfolio Animations */
.portfolio-item[data-scroll].is-visible {
    animation: reveal 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.portfolio-item:nth-child(1)[data-scroll].is-visible {
    animation-delay: 0.1s;
}

.portfolio-item:nth-child(2)[data-scroll].is-visible {
    animation-delay: 0.3s;
}

.portfolio-item:nth-child(3)[data-scroll].is-visible {
    animation-delay: 0.5s;
}

.portfolio-item:nth-child(4)[data-scroll].is-visible {
    animation-delay: 0.7s;
}

/* Contact Animation */
.contact-content[data-scroll].is-visible {
    animation: fadeInUp 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ===== PARALLAX EFFECTS ===== */

.parallax-slow {
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.parallax-medium {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.parallax-fast {
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ===== HOVER EFFECTS ===== */

.hover-lift {
    transition: transform 0.6s ease, box-shadow 0.6s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
}

.hover-glow {
    transition: filter 0.6s ease;
}

.hover-glow:hover {
    filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.4));
}

/* ===== CURSOR EFFECTS ===== */

@media (hover: hover) {
    .cursor-pointer {
        cursor: pointer;
        transition: transform 0.4s ease;
    }
    
    .cursor-pointer:hover {
        transform: scale(1.02);
    }
}

/* ===== TEXT REVEAL EFFECTS ===== */

.text-reveal {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.text-reveal::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-dark);
    transform-origin: left;
    animation: reveal-slide 1.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes reveal-slide {
    0% {
        transform: scaleX(1);
        transform-origin: left;
    }
    50% {
        transform: scaleX(1);
        transform-origin: right;
    }
    100% {
        transform: scaleX(0);
        transform-origin: right;
    }
}

/* ===== DIVINE LIGHT EFFECT ===== */

@keyframes divine-light {
    0%, 100% {
        opacity: 0.1;
        transform: rotate(0deg) scale(1);
    }
    50% {
        opacity: 0.3;
        transform: rotate(5deg) scale(1.05);
    }
}

.divine-light {
    animation: divine-light 8s infinite ease-in-out;
}

/* ===== SACRED GEOMETRY ===== */

@keyframes sacred-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.sacred-geometry {
    animation: sacred-spin 60s infinite linear;
}

/* ===== ETHEREAL FADE ===== */

@keyframes ethereal-fade {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
}

.ethereal {
    animation: ethereal-fade 5s infinite ease-in-out;
}

/* ===== SMOOTH REVEAL ===== */

.reveal-text {
    overflow: hidden;
}

.reveal-text span {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-text.is-visible span {
    opacity: 1;
    transform: translateY(0);
}

/* ===== GRADIENT ANIMATION ===== */

@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.animated-gradient {
    background-size: 200% 200%;
    animation: gradientShift 10s ease infinite;
}

/* ===== BREATH ANIMATION ===== */

@keyframes breathe {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

.breathe {
    animation: breathe 6s infinite ease-in-out;
}

/* ===== LINE DRAW ===== */

@keyframes line-draw {
    from {
        stroke-dashoffset: 1000;
    }
    to {
        stroke-dashoffset: 0;
    }
}

.line-draw {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: line-draw 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== LOADING STATE ===== */

@keyframes skeleton-loading {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton {
    background: linear-gradient(
        90deg,
        rgba(212, 175, 55, 0.05) 0%,
        rgba(212, 175, 55, 0.1) 50%,
        rgba(212, 175, 55, 0.05) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 2s infinite ease-in-out;
}

/* ===== OLYMPISCHER LORBEERKRANZ ===== */

/* Sanfte Rotation des gesamten Kranzes */
.laurel-wreath {
    animation: rotate 120s infinite linear;
}

/* Subtiles "Atmen" der Blätter */
.laurel-wreath .laurel-leaves {
    animation: breathe 8s infinite ease-in-out;
    transform-origin: center;
}