[marquee=component] [marquee=wrapper]{
  -webkit-animation: loop-horizontal linear infinite;
  -moz-animation: loop-horizontal linear infinite;
  -o-animation: loop-horizontal linear infinite;
  animation: loop-horizontal linear infinite;
}

[marquee=component]>div{
  display: flex;
}

[marquee-direction=horizontal] [marquee=wrapper]{
  -webkit-animation: loop-horizontal linear infinite;
  -moz-animation: loop-horizontal linear infinite;
  -o-animation: loop-horizontal linear infinite;
  animation: loop-horizontal linear infinite;
}

[marquee-direction=vertical] [marquee=wrapper]{
  -webkit-animation: loop-vertical linear infinite;
  -moz-animation: loop-vertical linear infinite;
  -o-animation: loop-vertical linear infinite;
  animation: loop-vertical linear infinite;
}

[marquee-direction=horizontal-reversed] [marquee=wrapper]{
  -webkit-animation: loop-horizontal-reversed linear infinite;
  -moz-animation: loop-horizontal-reversed linear infinite;
  -o-animation: loop-horizontal-reversed linear infinite;
  animation: loop-horizontal-reversed linear infinite;
}

[marquee-direction=vertical-reversed] [marquee=wrapper]{
  -webkit-animation: loop-vertical-reversed linear infinite;
  -moz-animation: loop-vertical-reversed linear infinite;
  -o-animation: loop-vertical-reversed linear infinite;
  animation: loop-vertical-reversed linear infinite;
}

[marquee-direction=horizontal-reversed]>div,
[marquee-direction=horizontal]>div{
  display: flex;
}

[marquee-direction=vertical-reversed]>div,
[marquee-direction=vertical]>div{
  display: flex;
  flex-direction: column;
}

[marquee=wrapper]{
  flex: 0 0 auto;
}

/* Hover pausing - Only when explicitly enabled */
[marquee=component][marquee-hover-pause="true"]:hover [marquee=wrapper],
[marquee=component][marquee-hover-pause="true"]:focus-within [marquee=wrapper]{
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion){
  [marquee=component] [marquee=wrapper]{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
  }
}

/* Responsive breakpoints with static behavior */
/* Desktop (992px and above) */
@media (min-width: 992px) {
  [marquee=component][marquee-static~="desktop"] [marquee=wrapper] {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
  }
}

/* Tablet (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  [marquee=component][marquee-static~="tablet"] [marquee=wrapper] {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
  }
}

/* Mobile Landscape (480px to 767px) */
@media (min-width: 480px) and (max-width: 767px) {
  [marquee=component][marquee-static~="mobile-landscape"] [marquee=wrapper] {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
  }
}

/* Mobile Portrait (479px and below) */
@media (max-width: 479px) {
  [marquee=component][marquee-static~="mobile-portrait"] [marquee=wrapper] {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
  }
}

@-webkit-keyframes loop-horizontal{
  0%{transform: translateX(0)}
  100%{transform: translateX(-100%)}
}
@-moz-keyframes loop-horizontal{
  0%{transform: translateX(0)}
  100%{transform: translateX(-100%)}
}
@-o-keyframes loop-horizontal{
  0%{transform: translateX(0)}
  100%{transform: translateX(-100%)}
}
@keyframes loop-horizontal{
  0%{transform: translateX(0)}
  100%{transform: translateX(-100%)}
}

@-webkit-keyframes loop-vertical{
  0%{transform: translateY(0)}
  100%{transform: translateY(-100%)}
}
@-moz-keyframes loop-vertical{
  0%{transform: translateY(0)}
  100%{transform: translateY(-100%)}
}
@-o-keyframes loop-vertical{
  0%{transform: translateY(0)}
  100%{transform: translateY(-100%)}
}
@keyframes loop-vertical{
  0%{transform: translateY(0)}
  100%{transform: translateY(-100%)}
}

@-webkit-keyframes loop-horizontal-reversed{
  0%{transform: translateX(-100%)}
  100%{transform: translateX(0)}
}
@-moz-keyframes loop-horizontal-reversed{
  0%{transform: translateX(-100%)}
  100%{transform: translateX(0)}
}
@-o-keyframes loop-horizontal-reversed{
  0%{transform: translateX(-100%)}
  100%{transform: translateX(0)}
}
@keyframes loop-horizontal-reversed{
  0%{transform: translateX(-100%)}
  100%{transform: translateX(0)}
}

@-webkit-keyframes loop-vertical-reversed{
  0%{transform: translateY(-100%)}
  100%{transform: translateY(0)}
}
@-moz-keyframes loop-vertical-reversed{
  0%{transform: translateY(-100%)}
  100%{transform: translateY(0)}
}
@-o-keyframes loop-vertical-reversed{
  0%{transform: translateY(-100%)}
  100%{transform: translateY(0)}
}
@keyframes loop-vertical-reversed{
  0%{transform: translateY(-100%)}
  100%{transform: translateY(0)}
}