/* Magischer Brief mit Waldmotiven */
.envelope {
	position: absolute;
	width: 300px;
	height: 200px;
	background: linear-gradient(145deg, #8b6b43, #a68153, #8b6b43);
	border-radius: 8px;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
	transition: transform 0.5s ease, box-shadow 0.5s ease;
	overflow: hidden;
}

.envelope:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(45deg, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.2) 80%, rgba(255, 255, 255, 0) 90%);
	animation: shimmer 3s infinite linear;
	background-size: 200% 200%;
}

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

.envelope-flap {
	position: absolute;
	width: 300px;
	height: 100px;
	top: -100px;
	left: 0;
	background: linear-gradient(to bottom, #a68153, #8b6b43);
	clip-path: polygon(0 100%, 50% 0, 100% 100%);
	transform-origin: bottom;
	transition: transform 1s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

.envelope-back {
	position: absolute;
	width: 300px;
	height: 200px;
	background: linear-gradient(145deg, #7a5e3a, #8b6b43);
	border-radius: 8px;
}

/* Natürliches Siegel mit Seedling */
.seal {
	position: absolute;
	width: 50px;
	height: 50px;
	background: linear-gradient(135deg, #3a6b3a, #4a8c4a, #3a6b3a);
	border-radius: 50%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 10px rgba(58, 107, 58, 0.8);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 0.5s ease, opacity 0.5s ease;
}

.seal:before {
	content: "🌱";
	font-size: 25px;
}

/* Natürlicher Kreis um das Siegel */
.seal:after {
	content: "";
	position: absolute;
	width: 60px;
	height: 60px;
	border: 2px solid #4a8c4a;
	border-radius: 50%;
	animation: rotate 10s linear infinite;
}

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

/* Schüttel-Animation beim Öffnen - aber Scroll erscheint erst nach Schmetterlingen */
@keyframes envelope-shake {
	0% { 
		transform: translateY(20px) rotate(0deg); 
	}
	10% { 
		transform: translateY(18px) rotate(2deg) translateX(-3px); 
	}
	20% { 
		transform: translateY(22px) rotate(-2deg) translateX(3px); 
	}
	30% { 
		transform: translateY(16px) rotate(3deg) translateX(-4px); 
	}
	40% { 
		transform: translateY(24px) rotate(-3deg) translateX(4px); 
	}
	50% { 
		transform: translateY(18px) rotate(2deg) translateX(-2px); 
	}
	60% { 
		transform: translateY(22px) rotate(-1deg) translateX(2px); 
	}
	70% { 
		transform: translateY(19px) rotate(1deg) translateX(-1px); 
	}
	80% { 
		transform: translateY(21px) rotate(-0.5deg) translateX(1px); 
	}
	90% { 
		transform: translateY(20px) rotate(0.5deg) translateX(-0.5px); 
	}
	100% { 
		transform: translateY(20px) rotate(0deg) translateX(0px); 
	}
}

/* Entferne Hand-Cursor nach dem Öffnen des Envelopes */
.container.open {
    cursor: default !important;
}

/* Öffnungszustand */
.container.open .envelope-flap {
	transform: rotateX(180deg);
}

/* Effekt für den geöffneten Brief */
.container.open .envelope {
	transform: translateY(20px);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 20px rgba(58, 107, 58, 0.5);
	animation: envelope-shake 0.8s ease-out;
}

.container.open .seal {
	transform: translate(-50%, -50%) scale(0.5);
	opacity: 0;
	transition: transform 0.8s ease 0.2s, opacity 0.8s ease 0.2s;
}

/* Spezifische Burn-Animation für den Umschlag */
.container.burn-letter .envelope {
    animation: burn-envelope 2s forwards;
}

@keyframes burn-envelope {
    0% { 
        filter: brightness(1); 
        transform: translateY(20px);
        opacity: 1;
    }
    50% { 
        filter: brightness(1.5) sepia(0.5); 
        transform: translateY(30px) scale(0.9);
    }
    100% { 
        filter: brightness(0.5) sepia(1) hue-rotate(30deg);
        transform: translateY(50px) scale(0.1);
        opacity: 0;
    }
}

/* Spezifische Burn-Animation für die Klappe */
.container.burn-letter .envelope-flap {
    animation: burn-flap 1.8s forwards;
}

@keyframes burn-flap {
    0% { 
        filter: brightness(1);
        transform: rotateX(180deg);
        opacity: 1;
    }
    50% { 
        filter: brightness(1.5) sepia(0.5);
        transform: rotateX(180deg) scale(0.9);
    }
    100% { 
        filter: brightness(0.5) sepia(1) hue-rotate(30deg);
        transform: rotateX(180deg) scale(0.1);
        opacity: 0;
    }
}

/* Spezifische Burn-Animation für die Rückseite */
.container.burn-letter .envelope-back {
    animation: burn-back 1.9s forwards;
}

@keyframes burn-back {
    0% { 
        filter: brightness(1);
        transform: scale(1);
        opacity: 1;
    }
    50% { 
        filter: brightness(1.5) sepia(0.5);
        transform: scale(0.9);
    }
    100% { 
        filter: brightness(0.5) sepia(1) hue-rotate(30deg);
        transform: scale(0.1);
        opacity: 0;
    }
}