/* ======================================================================
   animations.css — keyframes for screen transitions, ambient motion,
   and result-state choreography.
   ====================================================================== */

/* Screen transitions --------------------------------------------------- */
@keyframes rc-enter-forward {
  from { opacity: 0; transform: translateX(28px) scale(0.985); filter: blur(6px); }
  to   { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
}
@keyframes rc-leave-forward {
  from { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
  to   { opacity: 0; transform: translateX(-24px) scale(0.985); filter: blur(6px); }
}
@keyframes rc-enter-back {
  from { opacity: 0; transform: translateX(-28px) scale(0.985); filter: blur(6px); }
  to   { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
}
@keyframes rc-leave-back {
  from { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
  to   { opacity: 0; transform: translateX(24px) scale(0.985); filter: blur(6px); }
}

/* Brand / crest --------------------------------------------------------- */
@keyframes rc-crest-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(212, 175, 55, 0); }
  33%  { box-shadow: 0 0 28px rgba(178, 34, 52, 0.45); }
  66%  { box-shadow: 0 0 34px rgba(212, 175, 55, 0.35); }
}

/* Camera --------------------------------------------------------------- */
@keyframes rc-scan-sweep {
  0%   { top: 4%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: 94%; opacity: 0; }
}
@keyframes rc-flash {
  0%   { opacity: 0; }
  12%  { opacity: 0.9; }
  100% { opacity: 0; }
}

/* Camera frame corners pulse when scanning (live view) */
@keyframes rc-corner-pulse {
  0%, 100% { opacity: 0.75; }
  50%       { opacity: 1; filter: drop-shadow(0 0 4px rgba(212,175,55,0.8)); }
}
.rc-camera-screen:not(.rc-camera-screen--preview) .rc-camera-frame__corner {
  animation: rc-corner-pulse 2s ease-in-out infinite;
}
.rc-camera-frame__corner--tr { animation-delay: 0.5s !important; }
.rc-camera-frame__corner--bl { animation-delay: 1s !important; }
.rc-camera-frame__corner--br { animation-delay: 1.5s !important; }

/* Loading / scanning ---------------------------------------------------- */
@keyframes rc-loader-scan {
  0%   { transform: translateY(0px); opacity: 0; }
  20%  { opacity: 0.95; }
  80%  { opacity: 0.95; }
  100% { transform: translateY(257px); opacity: 0; }
}
@keyframes rc-liquid-shimmer {
  0%, 100% { opacity: 0.85; }
  50%       { opacity: 1; }
}

/* Magnifying glass searches across the bottle */
@keyframes rc-magnify-scan {
  0%   { transform: translate(-60%, -55%) rotate(-5deg); }
  18%  { transform: translate( 15%, -60%) rotate( 7deg); }
  36%  { transform: translate( 55%,  -5%) rotate(-3deg); }
  54%  { transform: translate( 20%,  55%) rotate( 5deg); }
  72%  { transform: translate(-50%,  45%) rotate(-7deg); }
  100% { transform: translate(-60%, -55%) rotate(-5deg); }
}

/* Scan marker blink */
@keyframes rc-scan-blink {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  35%, 65%  { opacity: 1; transform: scale(1); }
}
/* Scan marker outward ping ring */
@keyframes rc-scan-ping {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* Result screens -------------------------------------------------------- */
@keyframes rc-badge-pulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%       { transform: scale(1.06); opacity: 1; }
}
@keyframes rc-badge-pop {
  0%   { transform: scale(0.3); opacity: 0; }
  55%  { transform: scale(1.1); opacity: 1; }
  75%  { transform: scale(0.96); }
  100% { transform: scale(1); opacity: 1; }
}
/* Burst ring for success badge */
@keyframes rc-burst-ring {
  0%   { transform: scale(0.8); opacity: 0.9; }
  100% { transform: scale(2.4); opacity: 0; }
}
@keyframes rc-title-rise {
  from { opacity: 0; transform: translateY(18px); filter: blur(2px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* Chip shimmer sweep */
@keyframes rc-chip-shine {
  from { transform: translateX(-110%); }
  to   { transform: translateX(110%); }
}

/* Overall result-stage reveal */
@keyframes rc-result-stage-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* All result animations are gated on .rc-is-animating so they replay every visit */
.rc-result__inner.rc-is-animating {
  animation: rc-result-stage-in 520ms var(--ease-lux) both;
}
.rc-result__inner.rc-is-animating .rc-badge {
  animation: rc-badge-pop 680ms var(--ease-lux) both;
}
.rc-result__inner.rc-is-animating .rc-result__text {
  animation: rc-title-rise 540ms var(--ease-out-soft) 200ms both;
}
.rc-result__inner.rc-is-animating .rc-verify-chip {
  animation: rc-title-rise 540ms var(--ease-out-soft) 340ms both;
}
.rc-result__inner.rc-is-animating .rc-failure-actions {
  animation: rc-title-rise 540ms var(--ease-out-soft) 380ms both;
}
.rc-result__inner.rc-is-animating .rc-btn--block {
  animation: rc-title-rise 540ms var(--ease-out-soft) 420ms both;
}

/* Success-specific extra effects */
#screen-success .rc-result__inner.rc-is-animating .rc-badge::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid var(--gold-500);
  animation: rc-burst-ring 900ms var(--ease-out-soft) 100ms both;
  pointer-events: none;
}
#screen-success .rc-result__inner.rc-is-animating .rc-badge::before {
  content: '';
  position: absolute;
  inset: -24px;
  border-radius: 50%;
  border: 1px solid rgba(212,175,55,0.4);
  animation: rc-burst-ring 1100ms var(--ease-out-soft) 250ms both;
  pointer-events: none;
}
/* Shimmer sweep across the verify chip */
#screen-success .rc-result__inner.rc-is-animating .rc-verify-chip {
  position: relative;
  overflow: hidden;
}
#screen-success .rc-result__inner.rc-is-animating .rc-verify-chip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.22) 50%, transparent 100%);
  animation: rc-chip-shine 600ms ease-out 880ms both;
}

@keyframes rc-confetti-fall {
  0%   { transform: translate(0, 0) rotate(var(--rotate)); opacity: 1; }
  100% { transform: translate(var(--drift), 105vh) rotate(calc(var(--rotate) + 240deg)); opacity: 0; }
}

/* ---- New success screen animations ------------------------------------ */

/* Checkmark stroke draws on */
@keyframes rc-check-draw {
  from { stroke-dashoffset: 100; opacity: 0; }
  to   { stroke-dashoffset: 0;   opacity: 1; }
}

/* Slide-up + fade used for staggered card children */
@keyframes rc-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Ambient glow behind badge breathes in and out */
@keyframes rc-success-glow-pulse {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -60%) scale(1); }
  50%       { opacity: 1;   transform: translate(-50%, -60%) scale(1.08); }
}

/* Card entrance — scales up from slight-down, glass blur reveals */
@keyframes rc-success-card-in {
  from { opacity: 0; transform: translateY(22px) scale(0.97); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    filter: blur(0); }
}
.rc-success-card {
  animation: rc-success-card-in 560ms var(--ease-lux) both;
}

/* Shimmer sweep across the confidence chip (plays after stagger) */
@keyframes rc-chip-shine-success {
  from { transform: translateX(-110%); }
  to   { transform: translateX(110%); }
}
.rc-success-chip {
  position: relative;
  overflow: hidden;
}
.rc-success-chip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.22) 50%, transparent 100%);
  animation: rc-chip-shine-success 600ms ease-out 900ms both;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .rc-confetti { display: none; }
  .rc-success-glow { display: none; }
}