/**
 * Printing Now — Claude Animation: THE SHEET EJECT (corrected)
 * Production default when printing (html.printing-anim-claude).
 * Preview: ?preview=printing  or  ?preview=printing&anim=claude
 *
 * Motion: blank sheet enters from the TOP, travels DOWN through the printer
 * body, and exits the bottom output slot with printed text lines appearing
 * on the visible tail. Light gray stage (#f4f6f9).
 */

.printing-anim-claude #successPanel.success-panel--printing-active .printing-now-hero__stage {
  --pn-paper-h: 3.55rem;
  --pn-feed-travel: 5.95rem;
}

.printing-anim-claude #successPanel.success-panel--printing-active .printing-now-hero {
  display: block;
}

.printing-anim-claude #successPanel.success-panel--printing-active .printing-now-hero__stage {
  position: relative;
  height: 9rem;
  margin: 0 0 1.35rem;
  background-color: #f4f6f9;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 23px,
    rgba(26, 42, 74, 0.04) 23px,
    rgba(26, 42, 74, 0.04) 24px
  );
  border: 1px solid rgba(26, 42, 74, 0.12);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}

/* Printer body — upper third of stage */
.printing-anim-claude #successPanel.success-panel--printing-active .printing-now-hero__printer {
  position: absolute;
  width: 5.4rem;
  height: 2rem;
  left: calc(50% - 2.7rem);
  top: 1.15rem;
  transform: none;
  border-radius: 5px 5px 4px 4px;
  background: linear-gradient(180deg, #1d3054 0%, #132034 100%);
  border: 1.5px solid rgba(201, 162, 39, 0.35);
  border-bottom-color: rgba(201, 162, 39, 0.55);
  box-shadow:
    0 8px 24px rgba(26, 42, 74, 0.22),
    0 3px 8px rgba(26, 42, 74, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  z-index: 3;
  animation: none;
}

.printing-anim-claude #successPanel.success-panel--printing-active .printing-now-hero__printer::before {
  content: '';
  position: absolute;
  width: 0.38rem;
  height: 0.38rem;
  right: 0.52rem;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, #28e0d8 0%, #0f8f89 70%);
  box-shadow:
    0 0 5px rgba(15, 143, 137, 1),
    0 0 12px rgba(15, 143, 137, 0.55);
  animation: pn-cl-led 1.5s ease-in-out infinite;
}

.printing-anim-claude #successPanel.success-panel--printing-active .printing-now-hero__printer::after {
  content: '';
  position: absolute;
  left: 0.46rem;
  right: 0.46rem;
  bottom: -0.13rem;
  height: 0.22rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #091325 0%, #172744 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 9px rgba(9, 19, 37, 0.32);
}

/* Paper — feeds top → down; blank until it clears the output slot */
.printing-anim-claude #successPanel.success-panel--printing-active .printing-now-hero__sheet--a {
  position: absolute;
  width: 2.35rem;
  height: var(--pn-paper-h);
  left: calc(50% - 1.175rem);
  top: 0.15rem;
  background: #fafbfc;
  border-radius: 2px;
  box-shadow:
    0 4px 14px rgba(26, 42, 74, 0.16),
    0 0 0 0.5px rgba(160, 160, 160, 0.22);
  z-index: 2;
  transform: translateY(calc(-1 * var(--pn-paper-h)));
  animation: pn-cl-sheet-down 4.6s linear infinite;
}

.printing-anim-claude #successPanel.success-panel--printing-active .printing-now-hero__sheet--a::before {
  content: '';
  position: absolute;
  inset: 0.38rem 0.3rem 0.28rem;
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  background: repeating-linear-gradient(
    to bottom,
    rgba(26, 42, 74, 0.52) 0,
    rgba(26, 42, 74, 0.52) 1.5px,
    transparent 1.5px,
    transparent 5.5px,
    rgba(26, 42, 74, 0.28) 5.5px,
    rgba(26, 42, 74, 0.28) 6.5px,
    transparent 6.5px,
    transparent 12px
  );
  animation: pn-cl-text-reveal 4.6s linear infinite;
}

/* Teal glow at output slot (bottom of printer) */
.printing-anim-claude #successPanel.success-panel--printing-active .printing-now-hero__sheet--b {
  position: absolute;
  width: 2.35rem;
  height: 0.5rem;
  left: calc(50% - 1.175rem);
  top: 2.85rem;
  background: linear-gradient(
    to bottom,
    rgba(15, 143, 137, 0.65) 0%,
    rgba(15, 143, 137, 0) 100%
  );
  border-radius: 50%;
  z-index: 2;
  opacity: 0;
  box-shadow: none;
  animation: pn-cl-slot-glow-down 4.6s ease-in-out infinite;
}

/* Gold output roller at bottom of printer */
.printing-anim-claude #successPanel.success-panel--printing-active .printing-now-hero__beam {
  position: absolute;
  width: 5.4rem;
  height: 0.14rem;
  left: calc(50% - 2.7rem);
  top: 3.16rem;
  z-index: 4;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201, 162, 39, 0.45) 8%,
    rgba(201, 162, 39, 0.9) 28%,
    #f5de8a 50%,
    rgba(201, 162, 39, 0.9) 72%,
    rgba(201, 162, 39, 0.45) 92%,
    transparent 100%
  );
  box-shadow:
    0 0 4px rgba(201, 162, 39, 0.75),
    0 0 10px rgba(201, 162, 39, 0.3);
  animation: pn-cl-beam-pulse-down 4.6s ease-in-out infinite;
}

.printing-anim-claude #successPanel.success-panel--printing-active .printing-now-hero__beam::before {
  content: '';
  position: absolute;
  left: 1.2rem;
  right: 1.2rem;
  top: 0.5px;
  height: 1rem;
  background: linear-gradient(
    to bottom,
    rgba(240, 200, 100, 0.2) 0%,
    rgba(240, 200, 100, 0) 100%
  );
  animation: pn-cl-beam-glow-down 4.6s ease-in-out infinite;
}

.printing-anim-claude #successPanel.success-panel--printing-active .printing-now-hero__progress {
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.55rem;
  height: 0.3rem;
  background: rgba(26, 42, 74, 0.1);
  border-radius: 999px;
  overflow: hidden;
}

.printing-anim-claude #successPanel.success-panel--printing-active .printing-now-hero__progress::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 35%;
  background: linear-gradient(90deg, #c9a227 0%, #f0d47a 50%, #c9a227 100%);
  background-size: 200% 100%;
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(201, 162, 39, 0.45);
  animation: pn-cl-progress 2.8s ease-in-out infinite;
}

@keyframes pn-cl-sheet-down {
  0% {
    transform: translateY(calc(-1 * var(--pn-paper-h)));
    opacity: 0;
  }
  6% {
    transform: translateY(calc(-1 * var(--pn-paper-h)));
    opacity: 1;
  }
  18% {
    transform: translateY(0.2rem);
    opacity: 1;
  }
  38% {
    transform: translateY(1.3rem);
    opacity: 1;
  }
  52% {
    transform: translateY(2.35rem);
    opacity: 1;
  }
  72% {
    transform: translateY(var(--pn-feed-travel));
    opacity: 1;
  }
  84% {
    transform: translateY(calc(var(--pn-feed-travel) + 1rem));
    opacity: 0;
  }
  85% {
    transform: translateY(calc(-1 * var(--pn-paper-h)));
    opacity: 0;
  }
  92% {
    transform: translateY(calc(-1 * var(--pn-paper-h)));
    opacity: 0;
  }
  98% {
    transform: translateY(calc(-1 * var(--pn-paper-h)));
    opacity: 1;
  }
  100% {
    transform: translateY(calc(-1 * var(--pn-paper-h)));
    opacity: 1;
  }
}

@keyframes pn-cl-text-reveal {
  0%,
  48% {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
  }
  56% {
    opacity: 1;
    clip-path: inset(62% 0 0 0);
  }
  70% {
    opacity: 1;
    clip-path: inset(15% 0 0 0);
  }
  78% {
    opacity: 0.9;
    clip-path: inset(0 0 0 0);
  }
  86%,
  100% {
    opacity: 0;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes pn-cl-led {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.38;
  }
}

@keyframes pn-cl-slot-glow-down {
  0%,
  36% {
    opacity: 0;
  }
  48% {
    opacity: 0.85;
  }
  66% {
    opacity: 0.35;
  }
  82%,
  100% {
    opacity: 0;
  }
}

@keyframes pn-cl-beam-pulse-down {
  0% {
    opacity: 0.55;
  }
  38% {
    opacity: 0.75;
  }
  52% {
    opacity: 1;
  }
  72% {
    opacity: 0.6;
  }
  100% {
    opacity: 0.55;
  }
}

@keyframes pn-cl-beam-glow-down {
  0%,
  36% {
    opacity: 0;
  }
  46% {
    opacity: 1;
  }
  62% {
    opacity: 0.35;
  }
  78%,
  100% {
    opacity: 0;
  }
}

@keyframes pn-cl-progress {
  0% {
    width: 18%;
    background-position: 0% 50%;
  }
  50% {
    width: 76%;
    background-position: 100% 50%;
  }
  100% {
    width: 18%;
    background-position: 0% 50%;
  }
}

@media (max-width: 640px) {
  .printing-anim-claude #successPanel.success-panel--printing-active .printing-now-hero__stage {
    height: 7.8rem;
    --pn-paper-h: 3rem;
    --pn-feed-travel: 4.95rem;
  }

  .printing-anim-claude #successPanel.success-panel--printing-active .printing-now-hero__printer {
    width: 4.6rem;
    height: 1.75rem;
    left: calc(50% - 2.3rem);
    top: 0.95rem;
  }

  .printing-anim-claude #successPanel.success-panel--printing-active .printing-now-hero__sheet--a {
    width: 2.1rem;
    left: calc(50% - 1.05rem);
    top: 0.12rem;
  }

  .printing-anim-claude #successPanel.success-panel--printing-active .printing-now-hero__sheet--b {
    width: 2.1rem;
    left: calc(50% - 1.05rem);
    top: 2.55rem;
  }

  .printing-anim-claude #successPanel.success-panel--printing-active .printing-now-hero__beam {
    width: 4.6rem;
    left: calc(50% - 2.3rem);
    top: 2.86rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .printing-anim-claude #successPanel.success-panel--printing-active .printing-now-hero__sheet--a,
  .printing-anim-claude #successPanel.success-panel--printing-active .printing-now-hero__sheet--a::before,
  .printing-anim-claude #successPanel.success-panel--printing-active .printing-now-hero__sheet--b,
  .printing-anim-claude #successPanel.success-panel--printing-active .printing-now-hero__beam,
  .printing-anim-claude #successPanel.success-panel--printing-active .printing-now-hero__beam::before,
  .printing-anim-claude #successPanel.success-panel--printing-active .printing-now-hero__printer::before,
  .printing-anim-claude #successPanel.success-panel--printing-active .printing-now-hero__progress::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}