body {
height: 100vh;
overflow: hidden;
}

.controls {
position: fixed;
top: 15px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 10;
}

main {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}


/* Ghost button (transparent with festive glow) */
.btn.ghost {
  background: transparent;
  color: #fff5f7;
  border: 2px solid #fff5f7;
  position: relative;
  overflow: hidden;
}

/* Ghost hover animation */
.btn.ghost:hover::after {
  content: '';
  position: absolute;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  background: rgba(255, 255, 255, 0.15);
  transform: rotate(45deg);
  pointer-events: none;
  animation: slide 0.6s linear;
}

@keyframes slide {
  0% { transform: translate(-100%, -100%) rotate(45deg); }
  100% { transform: translate(100%, 100%) rotate(45deg); }
}

#gifTree, #scene { display: none; }

/* Portfolio Theme */
body.theme-portfolio {
background: linear-gradient(135deg,#270f0f,#9b1939,#581414);
color: white;
}

/* GIF Theme */
body.theme-gif {
background: radial-gradient(circle,#1a472a,#0f2e1d);
color: white;
}

body.theme-gif #gifTree {
display: block;
width: 220px;
}

/* Cinematic Scene */
body.theme-scene {
background: linear-gradient(#022405,#910b0b);
color: rgb(244, 248, 7);
}

body.theme-scene #scene {
display: block;
position: absolute;
width: 100%;
height: 100%;
}

.layer {
position: absolute;
width: 100%;
height: 100%;
}

.moon {
background: radial-gradient(circle,#fff6ccd3 20%,transparent 60%);
}

.stars {
background: repeating-radial-gradient(#fff 0 1px, transparent 1px 40px);
}

.mountains {
background: linear-gradient(to top,#021,#0000);
}

.tree {
background: radial-gradient(circle at bottom,#0a5c36 40%,transparent 41%);height: 130%;
}

.snow {
position: fixed;
top: -10px;
color: white;
pointer-events: none;
animation: fall linear infinite;
}

@keyframes fall {
to { transform: translateY(110vh); }
}

.santa {
  position: absolute;
  top: 110px;
  left: -120px;
  width: 120px;
  height: 40px;
  background: black;
  clip-path: polygon(
    0% 50%,
    20% 30%,
    40% 35%,
    55% 20%,
    65% 35%,
    80% 30%,
    100% 50%,
    80% 70%,
    65% 65%,
    55% 80%,
    40% 65%,
    20% 70%
  );
  opacity: 0.85;
  animation: santaFly 18s linear infinite;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.3));
  z-index: 4;
}

@keyframes santaFly {
  0% {
    transform: translateX(-150px) translateY(0) scale(0.8);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translateX(50vw) translateY(-10px) scale(0.85);
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateX(110vw) translateY(5px) scale(0.8);
    opacity: 0;
  }
}