/* GRS Reel v1.1.0 */

#grs-reel.grs-reel{
  position: fixed;
  top: var(--ff-header-h, 90px);
  left: 0;
  right: 0;
  z-index: 50000;
  background: var(--grs-reel-bg, #fff);
  color: var(--grs-reel-text, #000);
  box-sizing: border-box;
}

#grs-reel.grs-reel.grs-reel--border{
  border: 1px solid rgba(0,0,0,.25);
}

/* Hide theme reel frame so plugin replaces it */
.ff-reel{
  display: none !important;
  height: 0 !important;
  border: 0 !important;
}

/* Viewport prevents scroll text from spilling */
#grs-reel .grs-reel__viewport{
  overflow: hidden;
}

/* Inner content: tight + typographic controls */
#grs-reel .grs-reel__inner{
  margin: 0 !important;
  padding: var(--grs-reel-py, 8px) var(--grs-reel-px, 12px) !important;
  font-size: var(--grs-reel-font, 22px);
  font-weight: var(--grs-reel-weight, 800);
  line-height: 1.1;
  white-space: nowrap;
}

/* Kill common WP spacing inside reel */
#grs-reel .entry-content,
#grs-reel p,
#grs-reel ul,
#grs-reel ol,
#grs-reel h1,#grs-reel h2,#grs-reel h3,#grs-reel h4,#grs-reel h5,#grs-reel h6,
#grs-reel figure{
  margin: 0 !important;
  padding: 0 !important;
}

#grs-reel .grs-reel__placeholder{
  width: 100%;
  text-align: center;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
}

/* Scrolling animations */
@keyframes grsReelLeft { from { transform: translateX(100%); } to { transform: translateX(-100%);} }
@keyframes grsReelRight { from { transform: translateX(-100%); } to { transform: translateX(100%);} }
@keyframes grsReelUp { from { transform: translateY(100%); } to { transform: translateY(-100%);} }
@keyframes grsReelDown { from { transform: translateY(-100%); } to { transform: translateY(100%);} }

#grs-reel.grs-reel--scroll-left .grs-reel__inner{
  display: inline-block;
  animation: grsReelLeft var(--grs-reel-speed, 18s) linear infinite;
}
#grs-reel.grs-reel--scroll-right .grs-reel__inner{
  display: inline-block;
  animation: grsReelRight var(--grs-reel-speed, 18s) linear infinite;
}
#grs-reel.grs-reel--scroll-up .grs-reel__inner{
  display: inline-block;
  white-space: normal; /* allow multi-line block to move */
  animation: grsReelUp var(--grs-reel-speed, 18s) linear infinite;
}
#grs-reel.grs-reel--scroll-down .grs-reel__inner{
  display: inline-block;
  white-space: normal;
  animation: grsReelDown var(--grs-reel-speed, 18s) linear infinite;
}

/* Pause on hover */
#grs-reel.grs-reel--pause:hover .grs-reel__inner{
  animation-play-state: paused;
}