:root{
  --anim-duration: .8s;
  --anim-ease: cubic-bezier(.2,.6,.2,1);
}
.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--anim-duration) var(--anim-ease),transform var(--anim-duration) var(--anim-ease)}
.reveal-visible{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}

.card-zoom{transition:transform .5s var(--anim-ease), box-shadow .5s var(--anim-ease)}
.card-zoom:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 12px 30px rgba(0,0,0,.12)}
.dark .card-zoom:hover{box-shadow:0 12px 30px rgba(0,0,0,.4)}

.shine{position:relative;overflow:hidden}
.shine:before{content:"";position:absolute;top:-100%;left:-100%;width:200%;height:200%;background:linear-gradient(120deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.2) 50%, rgba(255,255,255,0) 70%);transform:translateX(-100%)}
.shine:hover:before{animation:shine 1.2s ease}
@keyframes shine{to{transform:translateX(100%)}}

.float-slow{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.tilt{will-change:transform;transition:transform .2s ease}