body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-family: Arial, sans-serif;
  background: #111;
  color: #fff;
}

.hero {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.scene {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.title {
  font-size: clamp(2rem, 7vw, 5rem);
  margin: 0;
  padding: 1rem;
}

.hero-image {
  width: min(70vw, 70vh);
  height: min(70vw, 70vh);
  object-fit: contain;
}

/* message */
.msg-fade { animation: msgFade 0.9s ease both; }
.msg-zoom { animation: msgZoom 0.9s ease both; }
.msg-slide { animation: msgSlide 0.9s ease both; }
.msg-spin { animation: msgSpin 0.9s ease both; }

/* image */
.img-zoom-in { animation: imgZoomIn 1.2s ease both; }
.img-zoom-out { animation: imgZoomOut 1.2s ease both; }
.img-spin-cw { animation: imgSpinCw 1.2s ease both; }
.img-spin-ccw { animation: imgSpinCcw 1.2s ease both; }
.img-fade { animation: imgFade 1.2s ease both; }

@keyframes msgFade { from{opacity:0;} to{opacity:1;} }
@keyframes msgZoom { from{opacity:0; transform:scale(0.2);} to{opacity:1; transform:scale(1);} }
@keyframes msgSlide { from{opacity:0; transform:translateY(40px);} to{opacity:1; transform:translateY(0);} }
@keyframes msgSpin { from{opacity:0; transform:scale(0.2) rotate(-180deg);} to{opacity:1; transform:scale(1) rotate(0);} }

@keyframes imgZoomIn { from{opacity:0; transform:scale(0.05);} to{opacity:1; transform:scale(1);} }
@keyframes imgZoomOut { from{opacity:0; transform:scale(1.6);} to{opacity:1; transform:scale(1);} }
@keyframes imgSpinCw { from{opacity:0; transform:scale(0.3) rotate(-360deg);} to{opacity:1; transform:scale(1) rotate(0);} }
@keyframes imgSpinCcw { from{opacity:0; transform:scale(0.3) rotate(360deg);} to{opacity:1; transform:scale(1) rotate(0);} }
@keyframes imgFade { from{opacity:0;} to{opacity:1;} }

.fade-out {
  animation: sceneFadeOut 0.5s ease forwards;
}

@keyframes sceneFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}