/* Motion: section reveals, verified tick, pass reveal, button feedback.
   All motion is switched off for people who prefer reduced motion (see responsive.css). */

/* Fade-up reveal used for cards and newly unlocked sections */
.reveal { animation: fadeUp .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Sections slide open when the mobile number is verified */
.card__section.is-unlocking > * { animation: fadeUp .45s cubic-bezier(.2, .8, .2, 1) both; }
.card__section.is-unlocking > *:nth-child(2) { animation-delay: .05s; }
.card__section.is-unlocking > *:nth-child(3) { animation-delay: .1s; }
.card__section.is-unlocking > *:nth-child(n+4) { animation-delay: .15s; }

/* Band content */
.band__title, .band__text, .exhibition-facts { animation: fadeUp .6s cubic-bezier(.2, .8, .2, 1) both; }
.band__text { animation-delay: .06s; }
.exhibition-facts { animation-delay: .12s; }
.exhibition-facts li { animation: fadeUp .5s cubic-bezier(.2, .8, .2, 1) both; }
.exhibition-facts li:nth-child(2) { animation-delay: .16s; }
.exhibition-facts li:nth-child(3) { animation-delay: .22s; }
.exhibition-facts li:nth-child(4) { animation-delay: .28s; }

/* Progress dot pops when it becomes current */
.progress__step.is-current .progress__dot { animation: pop .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }

/* Verified tick draws itself */
.verified { animation: fadeUp .4s ease both; }
.verified__info svg path { stroke-dasharray: 20; stroke-dashoffset: 20; animation: draw .5s .15s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Selfie preview appears */
.selfie__preview img { animation: zoomIn .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes zoomIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

/* Pass reveal: flips up into place */
.pass-view { perspective: 1200px; }
.pass--reveal { transform-origin: 50% 0; animation: passFlip .8s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes passFlip {
  0% { opacity: 0; transform: rotateX(-28deg) translateY(24px) scale(.96); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
.pass-actions, .pass-tips { animation: fadeUp .5s .45s cubic-bezier(.2, .8, .2, 1) both; }

/* Buttons: subtle lift */
.btn { will-change: transform; }
.btn--gold:hover:not(:disabled), .btn--navy:hover:not(:disabled) { transform: translateY(-1px); }

/* Overlay and camera fade in */
.overlay:not([hidden]), .camera:not([hidden]) { animation: fadeIn .25s ease both; }
.overlay__box, .camera__box { animation: fadeUp .35s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }