.sg-photocopy-button {
  position: relative;
}

body.sg-photocopy-mode .student-scan-grading-word::before {
  opacity: 0.92 !important;
  transform: translate(0, -46%) rotate(-2deg) scaleX(1) skewX(-6deg) !important;
  animation: none !important;
}

.sg-photocopy-pass {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  transition: opacity 240ms ease-out;
}

.sg-photocopy-pass--leaving {
  opacity: 0;
}

.sg-photocopy-lamp {
  position: absolute;
  top: -12%;
  left: 0;
  right: 0;
  display: block;
  height: 24%;
  opacity: 0.88;
  background: linear-gradient(
    to bottom,
    rgba(160, 225, 255, 0),
    rgba(160, 225, 255, 0.04) 10%,
    rgba(190, 232, 255, 0.14) 24%,
    rgba(222, 246, 255, 0.34) 39%,
    rgba(242, 252, 255, 0.72) 48%,
    rgba(255, 255, 255, 0.86) 51%,
    rgba(207, 244, 255, 0.48) 59%,
    rgba(166, 235, 211, 0.11) 78%,
    rgba(166, 235, 211, 0)
  );
  transform: translateZ(0);
  will-change: transform, opacity;
  animation: sg-photocopier-open-lid-pass 3.6s linear infinite;
}

.sg-photocopy-lamp::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -2%;
  right: -2%;
  height: 34px;
  background:
    radial-gradient(ellipse 19% 48% at 7% 48%, rgba(246, 254, 255, 0.38), rgba(181, 230, 250, 0.13) 52%, transparent 100%),
    radial-gradient(ellipse 23% 42% at 28% 54%, rgba(255, 255, 239, 0.42), rgba(199, 241, 247, 0.11) 57%, transparent 100%),
    radial-gradient(ellipse 17% 52% at 47% 46%, rgba(222, 248, 255, 0.31), rgba(183, 231, 245, 0.08) 61%, transparent 100%),
    radial-gradient(ellipse 24% 46% at 66% 53%, rgba(247, 255, 244, 0.40), rgba(184, 238, 220, 0.10) 56%, transparent 100%),
    radial-gradient(ellipse 20% 50% at 86% 47%, rgba(255, 252, 231, 0.37), rgba(195, 239, 238, 0.09) 58%, transparent 100%),
    linear-gradient(to bottom, transparent, rgba(189, 235, 251, 0.08) 27%, rgba(240, 253, 255, 0.18) 50%, rgba(181, 239, 215, 0.07) 72%, transparent);
  background-size: 112% 100%;
  transform: translateY(-50%);
  opacity: 0.72;
  animation: sg-photocopier-bloom-variation 1.32s steps(6, end) infinite;
}

.sg-photocopy-lamp::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 15px;
  background: linear-gradient(
    to right,
    rgba(197, 238, 253, 0.66),
    rgba(255, 255, 244, 0.98) 8%,
    rgba(211, 244, 255, 0.61) 17%,
    rgba(255, 255, 255, 0.96) 28%,
    rgba(187, 233, 248, 0.58) 41%,
    rgba(255, 255, 239, 0.99) 54%,
    rgba(204, 244, 239, 0.60) 66%,
    rgba(255, 252, 229, 0.96) 80%,
    rgba(188, 235, 211, 0.60)
  );
  background-size: 146% 100%;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    rgba(0, 0, 0, 0.16) 14%,
    rgba(0, 0, 0, 0.76) 38%,
    #000 49%,
    rgba(0, 0, 0, 0.88) 58%,
    rgba(0, 0, 0, 0.24) 80%,
    transparent
  );
  mask-image: linear-gradient(
    to bottom,
    transparent,
    rgba(0, 0, 0, 0.16) 14%,
    rgba(0, 0, 0, 0.76) 38%,
    #000 49%,
    rgba(0, 0, 0, 0.88) 58%,
    rgba(0, 0, 0, 0.24) 80%,
    transparent
  );
  transform: translateY(-50%);
  animation: sg-photocopier-tube-variation 840ms steps(5, end) infinite;
}

/* Old copier tubes are not perfectly even: their brighter pools drift and
   pulse slightly as the carriage moves. The stepped, low-amplitude variation
   keeps this mechanical rather than turning it into a futuristic shimmer. */
@keyframes sg-photocopier-tube-variation {
  0% {
    opacity: 0.84;
    background-position: 0 0;
  }
  31% {
    opacity: 1;
    background-position: 3% 0;
  }
  57% {
    opacity: 0.89;
    background-position: 6% 0;
  }
  76% {
    opacity: 0.97;
    background-position: 9% 0;
  }
  100% {
    opacity: 0.90;
    background-position: 12% 0;
  }
}

@keyframes sg-photocopier-bloom-variation {
  0% {
    opacity: 0.62;
    background-position: 0 0;
  }
  34% {
    opacity: 0.78;
    background-position: 3% 0;
  }
  68% {
    opacity: 0.67;
    background-position: 6% 0;
  }
  100% {
    opacity: 0.74;
    background-position: 9% 0;
  }
}

@keyframes sg-photocopier-open-lid-pass {
  0% {
    opacity: 0;
    transform: translateZ(0);
  }
  5% {
    opacity: 0.88;
    transform: translateZ(0);
  }
  83% {
    opacity: 0.88;
    transform: translate3d(0, 361%, 0);
  }
  91% {
    opacity: 0.12;
    transform: translate3d(0, 403%, 0);
  }
  95% {
    opacity: 0;
    transform: translate3d(0, 417%, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 417%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sg-photocopy-lamp {
    animation-duration: 5.4s;
  }
}