/* ===== Welcome Screen animations (dùng cho builder preview + display) ===== */
@keyframes we-fadeIn { from{opacity:0} to{opacity:1} }
@keyframes we-fadeInDown { from{opacity:0;transform:translateY(-40px)} to{opacity:1;transform:translateY(0)} }
@keyframes we-fadeInUp { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
@keyframes we-slideUp { from{opacity:0;transform:translateY(60px)} to{opacity:1;transform:translateY(0)} }
@keyframes we-slideDown { from{opacity:0;transform:translateY(-60px)} to{opacity:1;transform:translateY(0)} }
@keyframes we-slideLeft { from{opacity:0;transform:translateX(80px)} to{opacity:1;transform:translateX(0)} }
@keyframes we-slideRight { from{opacity:0;transform:translateX(-80px)} to{opacity:1;transform:translateX(0)} }
@keyframes we-zoomIn { from{opacity:0;transform:scale(0.3)} to{opacity:1;transform:scale(1)} }
@keyframes we-zoomInDown { from{opacity:0;transform:scale(0.1) translateY(-60px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes we-bounceIn {
  0%{opacity:0;transform:scale(0.3)} 50%{opacity:1;transform:scale(1.05)}
  70%{transform:scale(0.9)} 100%{opacity:1;transform:scale(1)}
}
@keyframes we-bounceInDown {
  0%{opacity:0;transform:translateY(-200px)} 60%{opacity:1;transform:translateY(20px)}
  80%{transform:translateY(-10px)} 100%{opacity:1;transform:translateY(0)}
}
@keyframes we-flipInX {
  from{opacity:0;transform:perspective(400px) rotateX(90deg)}
  to{opacity:1;transform:perspective(400px) rotateX(0deg)}
}
@keyframes we-flipInY {
  from{opacity:0;transform:perspective(400px) rotateY(90deg)}
  to{opacity:1;transform:perspective(400px) rotateY(0deg)}
}
@keyframes we-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes we-swing {
  20%{transform:rotate(15deg)} 40%{transform:rotate(-10deg)}
  60%{transform:rotate(5deg)} 80%{transform:rotate(-5deg)} 100%{transform:rotate(0)}
}
@keyframes we-rubberBand {
  0%{transform:scale(1)} 30%{transform:scaleX(1.25) scaleY(0.75)}
  40%{transform:scaleX(0.75) scaleY(1.25)} 60%{transform:scaleX(1.15) scaleY(0.85)} 100%{transform:scale(1)}
}
@keyframes we-heartBeat {
  0%,100%{transform:scale(1)} 14%{transform:scale(1.15)}
  28%{transform:scale(1)} 42%{transform:scale(1.15)} 70%{transform:scale(1)}
}
@keyframes we-lightSpeedIn {
  from{opacity:0;transform:translateX(100%) skewX(-30deg)}
  60%{opacity:1;transform:skewX(20deg)} 80%{transform:skewX(-5deg)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes we-rollIn {
  from{opacity:0;transform:translateX(-100%) rotate(-120deg)}
  to{opacity:1;transform:translateX(0) rotate(0)}
}
@keyframes we-jackInTheBox {
  0%{opacity:0;transform:scale(0.1) rotate(30deg);transform-origin:center bottom}
  50%{transform:rotate(-10deg)} 70%{transform:rotate(3deg)}
  100%{opacity:1;transform:scale(1)}
}

/* ===== Display (TV) ===== */
.we-display-root {
    position: fixed; inset: 0; background: #000; overflow: hidden;
}
/*.we-stage {
    position: absolute; top: 50%; left: 50%;
    width: 1920px; height: 1080px;
    transform-origin: center center;
}*/
.we-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.we-overlay { position: absolute; inset: 0; pointer-events: none; }
.we-el { position: absolute; }