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

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #0a192f;
  overflow: hidden;
  font-family: "Mountains of Christmas", cursive;
}

.frame {
  position: relative;
  width: 420px;
  height: 500px;
  border-radius: 24px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 20%, #0c2a4d 0%, #091a33 100%);
  box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.8),
        inset 0 0 80px rgba(20, 60, 100, 0.1),
        0 0 0 1px rgba(200, 230, 255, 0.1);
  border: 1px solid rgba(200, 230, 255, 0.08);
}

.frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: 1;
}

.title {
  position: absolute;
  top: 24px;
  width: 100%;
  text-align: center;
  color: #f8f9fa;
  font-size: 28px;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  letter-spacing: 2px;
  z-index: 100;
  opacity: 0;
  animation: titleAppear 1.2s 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.title span {
  color: #e63946;
  font-weight: 800;
  text-shadow: 
  0 0 12px rgba(230, 57, 70, 0.6),
  0 2px 4px rgba(0, 0, 0, 0.5);
}

.tree {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
  z-index: 10;
}

.star {
  position: absolute;
  top: -20px;
  left: -7px;
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  z-index: 10;
  animation: starAppear 0.8s 2.2s both, starPulse 2s 3s infinite ease-in-out;
  filter: drop-shadow(0 0 4px #ffd700) drop-shadow(0 0 8px #ffed4e);
}

.leafs {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  transform-origin: center bottom;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.3));
  animation: treeGrow 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.layer-top {
  border-width: 0 45px 90px 45px;
  border-color: transparent transparent #1abc9c transparent;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1));
  top: 0;
  left: -45px;
  z-index: 3;
  animation-delay: 0.8s;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)) 
          drop-shadow(0 0 20px rgba(26, 188, 156, 0.3));
}

.layer-mid {
  border-width: 0 75px 130px 75px;
  border-color: transparent transparent #16a085 transparent;
  top: 50px;
  left: -75px;
  z-index: 2;
  animation-delay: 1.1s;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25))
          drop-shadow(0 0 25px rgba(22, 160, 133, 0.25));
}

.layer-bottom {
  border-width: 0 100px 170px 100px;
  border-color: transparent transparent #118a73 transparent;
  top: 105px;
  left: -100px;
  z-index: 1;
  animation-delay: 1.4s;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3))
          drop-shadow(0 0 30px rgba(17, 138, 115, 0.2));
}

.trunk {
  position: absolute;
  width: 26px;
  height: 42px;
  background: linear-gradient(to right, #6d4c41 0%, #5d4037 50%, #4e342e 100%);
  top: 270px;
  left: -13px;
  border-radius: 0 0 10px 10px;
  animation: treeGrow 0.8s 0.6s ease-in-out both;
  box-shadow: 
        inset -3px 0 6px rgba(0, 0, 0, 0.4),
        inset 3px 0 6px rgba(139, 90, 43, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.3);
}

.ground {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 110px;
  background: linear-gradient(to top, 
        #e8f4f8 0%, 
        #f0f8ff 40%, 
        #f8fcff 70%, 
        rgba(255, 255, 255, 0.8) 100%);
  border-radius: 24px 24px 0 0;
  opacity: 0.7;
  box-shadow:
        inset 0 10px 30px rgba(255, 255, 255, 0.9),
        inset 0 -5px 15px rgba(200, 220, 240, 0.4),
        0 -6px 20px rgba(200, 230, 255, 0.3);
}

.light {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  z-index: 5;
  opacity: 0;
  animation: fadeIn 0.5s forwards, twinkle var(--t-speed) infinite ease-in-out alternate, lightFloat 4s infinite ease-in-out;
  box-shadow: 0 0 6px var(--glow-color);
}

.ornament {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  z-index: 4;
  opacity: 0;
  animation: fadeIn 0.5s forwards, swing var(--swing-speed) infinite ease-in-out alternate;
  background-color: var(--ornament-color);
  box-shadow:
      inset -3px -3px 6px rgba(255, 255, 255, 0.6),
      inset 3px 3px 6px rgba(0, 0, 0, 0.2),
      0 2px 4px rgba(0, 0, 0, 0.3),
      0 0 12px var(--ornament-glow);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.ornament::before {
      content: "";
      position: absolute;
      top: -4px;
      left: 50%;
      transform: translateX(-50%);
      width: 3px;
      height: 4px;
      background: linear-gradient(to bottom, #d4af37, #c9a959);
      border-radius: 1px 1px 0 0;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }

.snowflake {
  position: absolute;
  background: white;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(0.4px);
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
}

/* === ANIMATIONS === */
@keyframes treeGrow {
      0% { 
        transform: scale(0) translateY(20px); 
        opacity: 0; 
      }
      60% {
        transform: scale(1.05) translateY(-5px);
      }
      100% { 
        transform: scale(1) translateY(0); 
        opacity: 1; 
      }
  }

@keyframes starAppear {
      0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
      }
      70% {
        transform: scale(1.2) rotate(10deg);
      }
      100% {
        transform: scale(1) rotate(0);
        opacity: 1;
      }
    }

@keyframes starPulse {
      0%, 100% {
        filter: drop-shadow(0 0 4px #ffd700) drop-shadow(0 0 8px #ffed4e) brightness(1);
        transform: scale(1);
      }
      50% {
        filter: drop-shadow(0 0 8px #ffd700) drop-shadow(0 0 16px #ffed4e) brightness(1.2);
        transform: scale(1.1);
      }
    }

@keyframes titleAppear {
  0% {
    transform: scale(0.8) translateY(-10px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes twinkle {
  0% {
    opacity: 0.5;
    transform: scale(0.9);
    box-shadow: 0 0 4px var(--glow-color);
  }
  100% {
    opacity: 1;
    transform: scale(1.15);
    box-shadow: 0 0 10px var(--glow-color);
  }
}

@keyframes fadeIn {
  to { 
    opacity: 1; 
  }
}

@keyframes lightFloat {
  0%, 100% { 
    transform: translateY(0); 
  }
  50% { 
    transform: translateY(-4px); 
  }
}

@keyframes swing {
  0% { 
    transform: translateX(-2px) rotate(-2deg); 
  }
  100% { 
    transform: translateX(2px) rotate(2deg); 
  }
}