/* Element rendering rules - shared by the live overlay AND the admin stage preview.
   Both pages MUST load this or positioned elements collapse into document flow. */

.el {
  position: absolute;
  transform-origin: center center;
  will-change: transform, opacity;
  box-sizing: border-box;
}
.el > .inner { width: 100%; height: 100%; position: relative; overflow: hidden; }
.el iframe { width: 100%; height: 100%; border: 0; display: block; background: transparent; }
.el img, .el video { width: 100%; height: 100%; display: block; }
.txt {
  width: 100%; height: 100%;
  display: flex; white-space: pre-wrap; word-break: break-word;
}
.marquee-track { display: inline-block; white-space: nowrap; animation: marquee linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- entrance / exit animations --- */
@keyframes a-fade   { from { opacity: 0 } to { opacity: 1 } }
@keyframes a-left   { from { opacity: 0; transform: translateX(-120px) } to { opacity: 1; transform: none } }
@keyframes a-right  { from { opacity: 0; transform: translateX(120px) }  to { opacity: 1; transform: none } }
@keyframes a-up     { from { opacity: 0; transform: translateY(120px) }  to { opacity: 1; transform: none } }
@keyframes a-down   { from { opacity: 0; transform: translateY(-120px) } to { opacity: 1; transform: none } }
@keyframes a-pop    { from { opacity: 0; transform: scale(.6) } 60% { transform: scale(1.06) } to { opacity: 1; transform: none } }
@keyframes a-flip   { from { opacity: 0; transform: rotateX(90deg) } to { opacity: 1; transform: none } }
@keyframes o-fade   { to { opacity: 0 } }
@keyframes o-left   { to { opacity: 0; transform: translateX(-120px) } }
@keyframes o-right  { to { opacity: 0; transform: translateX(120px) } }
@keyframes o-pop    { to { opacity: 0; transform: scale(.6) } }

/* --- looping attention effects --- */
@keyframes fx-pulse  { 0%,100% { filter: none } 50% { filter: brightness(1.6) } }
@keyframes fx-bob    { 0%,100% { translate: 0 0 } 50% { translate: 0 -14px } }
@keyframes fx-shake  { 0%,100% { rotate: 0deg } 25% { rotate: 1.5deg } 75% { rotate: -1.5deg } }
@keyframes fx-spin   { to { rotate: 360deg } }
@keyframes fx-rainbow{ to { filter: hue-rotate(360deg) } }
@keyframes fx-blink  { 0%,49% { opacity: 1 } 50%,100% { opacity: .15 } }