.card{perspective:1000px;cursor:pointer}.card,.card-inner{width:100%;height:100%}.card-inner{position:relative;transform-style:preserve-3d;transition:transform .6s ease-in-out}@media (hover:hover) and (pointer:fine){.card:hover .card-inner{transform:rotateY(180deg)}}@media (hover:none) and (pointer:coarse){.card.flipped .card-inner{transform:rotateY(180deg)}}.card-back,.card-front{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:12px}.card-front{transform:rotateY(0deg)}.card-back{transform:rotateY(180deg)}@media (hover:hover) and (pointer:fine){.card:hover{transform:translateY(-2px);transition:transform .3s ease}}@media (hover:none) and (pointer:coarse){.card:active{transform:scale(.98);transition:transform .1s ease}.card{-webkit-tap-highlight-color:transparent;user-select:none}}@media (hover:hover) and (pointer:fine){.card:hover .card-back,.card:hover .card-front{transform-origin:center}}@media (max-width:768px){.card-inner{transition:transform .4s ease-in-out}.card-back,.card-front{border-radius:8px}}.card-back>*,.card-front>*{position:relative;z-index:1}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.card{animation:fadeIn .6s ease-out}.card:first-child{animation-delay:.1s}.card:nth-child(2){animation-delay:.2s}.card:nth-child(3){animation-delay:.3s}.card:nth-child(4){animation-delay:.4s}.card:nth-child(5){animation-delay:.5s}.card:nth-child(6){animation-delay:.6s}.card:nth-child(7){animation-delay:.7s}.card:nth-child(8){animation-delay:.8s}