.cityCard{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.1);height:220px;transition:all .5s cubic-bezier(.23,1,.32,1);transform-style:preserve-3d;perspective:1000px}.cityCard:hover{box-shadow:0 20px 40px rgba(0,0,0,.2);transform:translateY(-10px) rotateX(5deg)}.cityCard.hovered .cardImage{transform:scale(1.1)}.cityCard.hovered .cardDecoration{transform:rotate(45deg) translate(10%,-10%)}.cityCard.hovered .cardContent{transform:translateY(-5px)}.cityCard.hovered .cardOverlay{opacity:.7}.cardImageContainer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.cardImage{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.23,1,.32,1)}.cardOverlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(0deg,rgba(0,0,0,.9) 0,rgba(0,0,0,.5) 50%,rgba(0,0,0,.3));opacity:.6;transition:opacity .5s ease;z-index:2}.cardContent{position:relative;z-index:3;padding:25px;color:white;height:100%;display:flex;flex-direction:column;justify-content:center;transition:transform .5s ease}.cardHeader{margin-bottom:15px}.cityName{font-size:1.5rem;font-weight:800;margin:0;color:#fff}.countryName{font-size:1rem;opacity:.9;margin:0;font-weight:700;color:#fff}.exploreButton{display:inline-flex;align-items:center;background-color:var(--card-color);color:white;border:none;border-radius:30px;padding:8px 15px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 5px 15px rgba(0,0,0,.2)}.exploreButton:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.3)}.exploreButton svg{margin-right:8px}.cardDecoration{position:absolute;top:-100px;right:-100px;width:160px;height:180px;background-color:var(--card-color);opacity:.3;border-radius:30px;transform:rotate(45deg);transition:transform .7s cubic-bezier(.23,1,.32,1);z-index:2}@keyframes cardAppear{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.cityCard{animation:cardAppear .5s ease forwards;animation-delay:calc(var(--index, 0) * .1s)}@media (max-width:768px){.cardContent{padding:15px}.cityCard{height:200px}.cityName{font-size:1.2rem}.exploreButton{font-size:12px}}