/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *





 */
.scanner {
  position:relative;
}

.scanner::before {
  z-index: 10;
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:5px;
  background:#f55;
  box-shadow:0 0 70px 10px #f55;
  clip-path:inset(0);
  animation:
    x 1s ease-in-out infinite alternate,
    y 2s   ease-in-out infinite;
}

@keyframes x {
  to {
    transform:translateX(-100%);
    left:100%;
  }
}

@keyframes y {
   33% {
     clip-path:inset(0 0 0 -100px);    
   }
   50% {
     clip-path:inset(0 0 0 0);    
   }
   83%{
     clip-path:inset(0 -100px 0 0); 
   }
}
.frame img {
  border:solid 2px;
  border-bottom-color:#ffe;
  border-left-color:#eed;
  border-right-color:#eed;
  border-top-color:#ccb;
  max-height:100%;
  max-width:100%;
}

.frame {
  border:solid 5vmin #eee;
  border-bottom-color:#fff;
  border-left-color:#eee;
  border-right-color:#eee;
  border-top-color:#ddd;
  box-shadow:0 0 5px 0 rgba(0,0,0,.25) inset, 0 5px 10px 5px rgba(0,0,0,.25);
  box-sizing:border-box;
  display:inline-block;
  position:relative;
  text-align:center;
  &:before {
    bottom:-2vmin;
    box-shadow:0 2px 5px 0 rgba(0,0,0,.25) inset;
    content:"";
    left:-2vmin;
    position:absolute;
    right:-2vmin;
    top:-2vmin;
  }
  &:after {
    bottom:-2.5vmin;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.25);
    content:"";
    left:-2.5vmin;
    position:absolute;
    right:-2.5vmin;
    top:-2.5vmin;
  }
}
@property --radius {
  syntax: '<percentage>';
  inherits: true;
  initial-value: -5%;
}

@keyframes scene-transition {
  to {
    --radius: 105%;
  }
}

.scene-2 {
  mask-image: radial-gradient(circle,
      #fff calc(var(--radius) - 5%),
      transparent calc(var(--radius) + 5%));
  -webkit-mask-image: radial-gradient(circle,
      #fff calc(var(--radius) - 5%),
      transparent calc(var(--radius) + 5%));
}

.scenes:hover .scene-2,
.scenes:focus .scene-2,
.scenes.active .scene-2 {
  z-index: 10;
  animation: scene-transition 2s linear forwards;
}
.marqueeWrapper {
  --gap: 1rem;
  --duration: 120s;
  --scroll-start: 0;
  --scroll-end: calc(-100% - var(--gap));
}

.marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
}

.marquee--faded {
  mask-image: linear-gradient(
    var(--mask-direction, to right),
    hsl(0 0% 0% / 0),
    hsl(0 0% 0% / 1) 10%,
    hsl(0 0% 0% / 1) 90%,
    hsl(0 0% 0% / 0)
  );
}

.marquee__group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
  animation: scroll-x var(--duration) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .marquee__group {
    animation-play-state: paused;
  }
}

.marquee--vertical {
  --mask-direction: to bottom;
}

.marquee--vertical,
.marquee--vertical .marquee__group {
  flex-direction: column;
}

.marquee--vertical .marquee__group {
  animation-name: scroll-y;
}

.marquee--reverse .marquee__group {
  animation-direction: reverse;
  animation-delay: -3s;
}

.marquee:hover .marquee__group,
.marquee--reverse:hover .marquee__group {
  /* animation-play-state: paused; */
}

@keyframes scroll-x {
  from {
    transform: translateX(var(--scroll-start));
  }
  to {
    transform: translateX(var(--scroll-end));
  }
}

@keyframes scroll-y {
  from {
    transform: translateY(var(--scroll-start));
  }
  to {
    transform: translateY(var(--scroll-end));
  }
}

/* Parent wrapper */
.marqueeWrapper {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  margin: auto;
  max-width: 100vw;
}

.marqueeWrapper--vertical {
  flex-direction: row;
  height: 100vh;
}

@keyframes fade {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}