/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Hide scrollbar but keep scroll functionality */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

@keyframes confetti-fly {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-120px) scale(0.5); opacity: 0; }
}

@keyframes fade-in {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fade-in 0.5s ease-out forwards;
}

@keyframes draw-check {
  to { stroke-dashoffset: 0; }
}

/* ── PageScanner laser animation ── */
:root {
  --scan-duration: 2s;
  --scan-passes: 4;
}

.scanner-laser {
  position: absolute;
  inset-inline: 0;
  top: -4px;
  height: 4px;
  z-index: 10;
  pointer-events: none;
  --scanner-card-height: 600px;
}

.scanner-laser--active {
  animation: scan var(--scan-duration) cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

.scanner-beam {
  position: absolute;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #fdba74 15%,
    #fb923c 40%,
    white 50%,
    #fb923c 60%,
    #fdba74 85%,
    transparent 100%
  );
  box-shadow:
    0 0 6px 1px #fb923c,
    0 0 18px 4px #f97316,
    0 0 40px 8px rgba(251, 146, 60, 0.35);
}

.scanner-glow {
  position: absolute;
  inset-inline: 0;
  top: -28px;
  height: 60px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(251, 146, 60, 0.04) 30%,
    rgba(251, 146, 60, 0.12) 50%,
    rgba(251, 146, 60, 0.04) 70%,
    transparent 100%
  );
}

@keyframes scan {
  0%   { transform: translateY(0%); opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { transform: translateY(calc(var(--scanner-card-height) + 4px)); opacity: 0; }
}