/* "Why ScanSimple?" scan graphic -- markup: resources/views/partials/scan-reticle.blade.php
   One 5 s loop (1 s = 20%):
     0.0-0.3 s  rest
     0.3-2.3 s  laser sweeps down, up, and settles on the middle of the barcode
     2.4 s      lock: brackets snap onto the label, label flashes green
     2.6-3.9 s  "Scanned" chip shows
     3.9-4.6 s  brackets relax, chip fades; 4.6-5.0 s rest
   Every animation starts and ends in the rest pose, so the loop has no seam. */

.sr{display:block;width:100%;max-width:360px;height:auto;margin:3rem auto 0;overflow:visible}
.sr *{transform-box:fill-box}
/* The SKU line is artwork -- it imitates what the printer puts on the label --
   so it keeps a printer-like face. The chip is UI text and uses the brand face,
   a pixel smaller than the Arial it was drawn for so "Scanned" still clears
   the pill's rounded end (Montserrat runs wider). */
.sr-text{font:700 15px/1 Arial,Helvetica,sans-serif;fill:#18333E;letter-spacing:.02em}
.sr-chip-text{font:700 13px/1 var(--font-sans);fill:#fff;letter-spacing:0}

/* label: a slow, tiny float (one full cycle per loop) */
.sr-float{animation:srFloat 5s ease-in-out infinite}
@keyframes srFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* laser: the beam group sits at y=0, so translateY is the beam's y in viewBox units */
.sr-laser{transform:translateY(165px);opacity:0;animation:srLaser 5s infinite}
@keyframes srLaser{
  0%,6%   {transform:translateY(122px);opacity:0;animation-timing-function:ease-out}
  9%      {transform:translateY(122px);opacity:1;animation-timing-function:ease-in-out}
  22%     {transform:translateY(208px);opacity:1;animation-timing-function:ease-in-out}
  36%     {transform:translateY(128px);opacity:1;animation-timing-function:ease-in-out}
  46%     {transform:translateY(165px);opacity:1}
  47.5%   {transform:translateY(165px);opacity:1}
  48.5%   {transform:translateY(165px) scaleY(2.2);opacity:1}
  53%     {transform:translateY(165px);opacity:0}
  100%    {transform:translateY(165px);opacity:0}}
.sr-laser rect{animation:srFlicker .18s steps(2) infinite}
@keyframes srFlicker{50%{opacity:.82}}

/* lock flash on the label */
.sr-flash{opacity:0;animation:srFlash 5s infinite}
@keyframes srFlash{0%,47.5%{opacity:0}49%{opacity:.28}58%,100%{opacity:0}}

/* a soft sheen crosses the label right after the read */
.sr-sheen{opacity:0;animation:srSheen 5s infinite}
@keyframes srSheen{0%,48%{opacity:0;transform:skewX(-18deg) translateX(0)}
  50%{opacity:1}62%{opacity:1;transform:skewX(-18deg) translateX(290px)}63%,100%{opacity:0;transform:skewX(-18deg) translateX(290px)}}

/* brackets: snap in toward the label on the read, then relax */
.sr-b{animation:5s cubic-bezier(.2,.9,.25,1.15) infinite}
.sr-b--tl{animation-name:srTL}.sr-b--tr{animation-name:srTR}
.sr-b--bl{animation-name:srBL}.sr-b--br{animation-name:srBR}
@keyframes srTL{0%,47%,92%,100%{transform:translate(0,0)}52%,78%{transform:translate(14px,14px)}}
@keyframes srTR{0%,47%,92%,100%{transform:translate(0,0)}52%,78%{transform:translate(-14px,14px)}}
@keyframes srBL{0%,47%,92%,100%{transform:translate(0,0)}52%,78%{transform:translate(14px,-14px)}}
@keyframes srBR{0%,47%,92%,100%{transform:translate(0,0)}52%,78%{transform:translate(-14px,-14px)}}
.sr-brackets{animation:srBright 5s infinite}
@keyframes srBright{0%,47%,90%,100%{fill:#ABD16E}50%,76%{fill:#8CC63F}}

/* "Scanned" chip */
.sr-chip{opacity:0;transform-origin:50% 50%;animation:srChip 5s cubic-bezier(.2,.9,.3,1.3) infinite}
@keyframes srChip{0%,51%{opacity:0;transform:translateY(6px) scale(.85)}
  56%,78%{opacity:1;transform:translateY(0) scale(1)}
  84%,100%{opacity:0;transform:translateY(0) scale(1)}}

@media (prefers-reduced-motion:reduce){
  .sr *,.sr-float{animation:none !important}
  .sr-laser{opacity:1;transform:translateY(165px)}
}