.fade-in { animation: fade-in 0.8s ease forwards }
@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.tile-enter { animation: grid-enter 0.25s ease backwards }
@keyframes grid-enter {
    0% { opacity: 0; filter: blur(40px); transform: scale(0.3); }
    100% { opacity: 1; filter: blur(0px); transform: scale(1); }
}

.animate-scroll { animation-timeline: view()!important; animation-range: entry 0% cover 25%!important; }

.simple-zoom { animation: simple-zoom 0.6s backwards ease-out }
@keyframes simple-zoom { 0% { scale: 0; }  100% {scale: 1;} }

.simple-zoom-blur { animation: simple-zoom-blur .5s both ease }
@keyframes simple-zoom-blur { 0% { scale: 0.1; opacity: 0; filter: blur(40px); } 70% {scale: 1.1; opacity: 1; filter: blur(0px); } 100% {scale: 1; opacity: 1; filter: blur(0px); } }

.animate-blur { animation: animate-blur 0.6s both cubic-bezier(0.4, 0.0, 0.2, 1) }
@keyframes animate-blur { 
    0% { opacity: 0; filter: blur(40px); transform: scale(1.5); } 
    100% { opacity: 1; filter: blur(0px); transform: scale(1); } 
}

.animate-blur-simple { animation: animate-blur-simple 0.6s both cubic-bezier(0.4, 0.0, 0.2, 1) }
@keyframes animate-blur-simple { 
    0% { opacity: 0; filter: blur(40px); } 
    100% { opacity: 1; filter: blur(0px); } 
}

.opac-animate {animation:opac-animate .3s ease backwards}
@keyframes opac-animate { from { opacity: 0; } 50% { opacity: 0; } to { opacity: 1; } }

.slide-in-bck-top{animation:slide-in-bck-top .6s cubic-bezier(.25,.46,.45,.94) backwards}
@keyframes slide-in-bck-top{0%{transform:translateZ(700px) translateY(-300px);opacity:0}100%{transform:translateZ(0) translateY(0);opacity:1}}

/* Folder open/close — backdrop (fade only) */
#folderView.folder-open {
  animation: folder-view-open 0.3s ease backwards;
}
@keyframes folder-view-open {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
#folderView.folder-close {
  animation: folder-view-close 0.25s ease forwards;
}
@keyframes folder-view-close {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* Folder open/close — content (scale + opacity) */
.folder-open {
  animation: folder-open 0.4s ease backwards;
}
@keyframes folder-open {
  0% { opacity: 0; transform: scale(0.7); }
  65% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

.folder-close {
  animation: folder-close 0.25s ease forwards;
}
@keyframes folder-close {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.2); }
}


/* Modal open/close — like folder: overlay only fades, panel scales */
.modal-overlay.modal-close {
  animation: modal-overlay-close 0.25s ease forwards;
}
@keyframes modal-overlay-close {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.modal-panel.modal-open {
  animation: modal-panel-open 0.4s ease backwards;
}
@keyframes modal-panel-open {
  0% { opacity: 0; transform: scale(0.7); }
  65% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

.modal-panel.modal-close {
  animation: modal-panel-close 0.25s ease forwards;
}
@keyframes modal-panel-close {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.2); }
}

@keyframes titleFadeBlur {
    from { opacity: 0; filter: blur(15px); }
    to { opacity: 1; filter: blur(0px); }
}

@keyframes burger-item-in {
    0% {
        opacity: 0;
        transform: rotate(-15deg) scale(0.3) translateX(30px);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1) translateX(0);
    }
}

.fade-out-blur { animation: fade-out-blur 0.3s ease forwards }
@keyframes fade-out-blur {
    0% { opacity: 1; filter: blur(0px); }
    100% { opacity: 0; filter: blur(15px); }
}