/* =============================================================
   ANIMATIONS — Preloader + scroll-reveal + micro-interactions
   ============================================================= */

/* ---- Preloader ---- */
#preloader {
  position:        fixed;
  inset:           0;
  z-index:         9999;
  background:      var(--clr-bg);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-5);
  transition:      opacity .5s var(--ease), visibility .5s var(--ease);
}
#preloader.is-done {
  opacity:    0;
  visibility: hidden;
}

.preloader-logo {
  font-family:    var(--ff-display);
  font-size:      2rem;
  letter-spacing: .1em;
  color:          var(--clr-text);
  opacity: 0;
  animation: fade-up .5s .1s var(--ease) forwards;
}
.preloader-logo span { color: var(--clr-accent); }

.preloader-track {
  width:         180px;
  height:        2px;
  background:    var(--clr-bg-overlay);
  border-radius: 2px;
  overflow:      hidden;
  opacity: 0;
  animation: fade-up .4s .2s var(--ease) forwards;
}
.preloader-bar {
  height:     100%;
  background: var(--clr-accent);
  border-radius: 2px;
  animation:  preload-fill 1.1s .3s var(--ease) forwards;
  width:      0%;
}
@keyframes preload-fill {
  to { width: 100%; }
}

.preloader-label {
  font-size:      var(--fs-xs);
  letter-spacing: .25em;
  color:          var(--clr-text-muted);
  text-transform: uppercase;
  opacity: 0;
  animation: fade-up .4s .25s var(--ease) forwards;
}

/* ---- Scroll-reveal ---- */
/* Add data-reveal to any element; JS adds .is-visible when in viewport */
[data-reveal] {
  opacity:    0;
  transform:  translateY(28px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}
[data-reveal].is-visible {
  opacity:   1;
  transform: none;
}

/* Stagger siblings via --delay custom prop set by JS */
[data-reveal] { transition-delay: var(--reveal-delay, 0ms); }

/* ---- Global keyframes ---- */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- Page transition ---- */
.page-enter {
  animation: fade-in .35s var(--ease) both;
}