* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 40%, #1a0a2e 100%);
  font-family: 'Georgia', serif;
  overflow: hidden;
}

.scene {
  text-align: center;
  position: relative;
}

.title {
  font-size: 3rem;
  color: #e8b4f8;
  text-shadow: 0 0 20px rgba(200, 100, 255, 0.5);
  margin-bottom: 2rem;
  animation: titleGlow 3s ease-in-out infinite;
}

@keyframes titleGlow {
  0%, 100% { text-shadow: 0 0 20px rgba(200, 100, 255, 0.5); }
  50% { text-shadow: 0 0 40px rgba(200, 100, 255, 0.8), 0 0 60px rgba(200, 100, 255, 0.3); }
}

.subtitle {
  margin-top: 2rem;
  font-size: 1.2rem;
  color: #a078c0;
  animation: fadeInUp 2s ease-out forwards;
  opacity: 0;
  animation-delay: 1s;
}

@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(-10px); }
}

.orchid-container {
  position: relative;
  width: 300px;
  height: 400px;
  margin: 0 auto;
}

/* Stem */
.stem {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 250px;
  background: linear-gradient(to top, #2d7a3a, #4a9e5c);
  border-radius: 2px;
  animation: stemGrow 2s ease-out forwards;
  transform-origin: bottom center;
}

@keyframes stemGrow {
  0% { height: 0; }
  100% { height: 250px; }
}

/* Leaves */
.leaf {
  position: absolute;
  bottom: 40px;
  width: 60px;
  height: 20px;
  background: linear-gradient(to top, #1e5c2a, #3a8a4a);
  border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;
  animation: leafGrow 1.5s ease-out forwards;
  opacity: 0;
  animation-delay: 1s;
}

.leaf-left {
  left: 50%;
  transform: translateX(-100%) rotate(-30deg);
  transform-origin: right center;
}

.leaf-right {
  left: 50%;
  transform: rotate(30deg);
  transform-origin: left center;
}

@keyframes leafGrow {
  0% { opacity: 0; transform: scale(0); }
  100% { opacity: 1; }
}

.leaf-left {
  animation: leafGrowLeft 1.5s ease-out forwards;
  animation-delay: 1s;
}

.leaf-right {
  animation: leafGrowRight 1.5s ease-out forwards;
  animation-delay: 1.2s;
}

@keyframes leafGrowLeft {
  0% { opacity: 0; width: 0; }
  100% { opacity: 1; width: 60px; transform: translateX(-100%) rotate(-30deg); }
}

@keyframes leafGrowRight {
  0% { opacity: 0; width: 0; }
  100% { opacity: 1; width: 60px; transform: rotate(30deg); }
}

/* Flowers */
.flower {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  animation: bloomIn 1.5s ease-out forwards;
  opacity: 0;
}

.flower-1 {
  top: 20px;
  animation-delay: 1.5s;
}

.flower-2 {
  top: 80px;
  left: 35%;
  animation-delay: 1.8s;
}

.flower-3 {
  top: 80px;
  left: 65%;
  animation-delay: 2.1s;
}

@keyframes bloomIn {
  0% { opacity: 0; transform: translateX(-50%) scale(0); }
  60% { transform: translateX(-50%) scale(1.1); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* Petals */
.petal {
  position: absolute;
  width: 30px;
  height: 45px;
  background: linear-gradient(135deg, #d46ef7, #a23dc7);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform-origin: center bottom;
  animation: petalSway 4s ease-in-out infinite;
}

.petal-top {
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(0deg);
  animation-delay: 0s;
}

.petal-left {
  top: 10px;
  left: 0;
  transform: rotate(-50deg);
  animation-delay: 0.5s;
}

.petal-right {
  top: 10px;
  right: 0;
  transform: rotate(50deg);
  animation-delay: 1s;
}

.petal-bottom-left {
  bottom: 0;
  left: 5px;
  transform: rotate(-30deg);
  width: 25px;
  height: 35px;
  animation-delay: 1.5s;
}

.petal-bottom-right {
  bottom: 0;
  right: 5px;
  transform: rotate(30deg);
  width: 25px;
  height: 35px;
  animation-delay: 2s;
}

@keyframes petalSway {
  0%, 100% { transform: rotate(var(--base-rotation, 0deg)); }
  50% { transform: rotate(calc(var(--base-rotation, 0deg) + 3deg)); }
}

/* Lip (labellum) */
.lip {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 25px;
  background: linear-gradient(135deg, #ff6b9d, #c94080);
  border-radius: 50% 50% 40% 40%;
  animation: lipPulse 3s ease-in-out infinite;
}

@keyframes lipPulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.05); }
}

/* Column (center) */
.column {
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 12px;
  background: #ffe066;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 224, 102, 0.8);
}

/* Floating Particles */
.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(200, 100, 255, 0.6);
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
}

.particle-1 { top: 30%; left: 10%; animation-delay: 0s; }
.particle-2 { top: 50%; left: 80%; animation-delay: 1.2s; }
.particle-3 { top: 20%; left: 70%; animation-delay: 2.4s; }
.particle-4 { top: 70%; left: 20%; animation-delay: 3.6s; }
.particle-5 { top: 60%; left: 60%; animation-delay: 4.8s; }

@keyframes float {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-30px) scale(1.5);
    opacity: 1;
  }
}

/* Responsive */
@media (max-width: 480px) {
  .title { font-size: 2rem; }
  .orchid-container { width: 200px; height: 300px; }
}