/* ===================================================================
   Brandevo — Keyframes, Preloader, Scroll Reveal
=================================================================== */

/* ---------------- Preloader ---------------- */
.preloader{
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg-void);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  transition: opacity 700ms var(--ease-out), visibility 700ms;
}
.preloader.loaded{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader-glow{
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(138,43,255,0.25), transparent 70%);
  filter: blur(20px);
  animation: pulse-glow 2.4s ease-in-out infinite;
}
.preloader-mark{ position: relative; }
.preloader-icon{
  width: 64px;
  animation: preloader-spin 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(138,43,255,0.6));
}
.preloader-bar{
  width: 200px; height: 3px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  position: relative;
}
.preloader-bar span{
  position: absolute;
  inset: 0;
  width: 40%;
  background: var(--brand-gradient);
  border-radius: var(--r-pill);
  animation: preloader-bar-anim 1.3s ease-in-out infinite;
}
.preloader-text{
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.4em;
  color: var(--text-tertiary);
}

@keyframes preloader-spin{
  0%, 100%{ transform: rotateY(0deg) scale(1); }
  50%{ transform: rotateY(180deg) scale(1.05); }
}
@keyframes preloader-bar-anim{
  0%{ transform: translateX(-100%); }
  50%{ transform: translateX(80%); }
  100%{ transform: translateX(260%); }
}
@keyframes pulse-glow{
  0%, 100%{ opacity: 0.5; transform: scale(1); }
  50%{ opacity: 0.9; transform: scale(1.15); }
}

/* ---------------- Scroll reveal ---------------- */
.reveal-up{
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 900ms var(--ease-soft), transform 900ms var(--ease-soft);
  transition-delay: calc(var(--delay, 0) * 90ms);
}
.reveal-up.in-view{
  opacity: 1;
  transform: translateY(0);
}

/* ---------------- Shared motion ---------------- */
@keyframes float-slow{
  0%, 100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(30px, -30px) scale(1.08); }
}
@keyframes drift{
  0%, 100%{ transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%{ transform: translateY(-22px) rotate(var(--rot, 0deg)); }
}
@keyframes dash-move{
  to{ stroke-dashoffset: -200; }
}
@keyframes pulse-dot{
  0%, 100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.4); opacity: 0.6; }
}
@keyframes scroll-cue-anim{
  0%{ transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%{ transform: scaleY(1); transform-origin: top; opacity: 1; }
  60%{ transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100%{ transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}
@keyframes spin-slow{
  to{ transform: translate(-50%, -50%) rotate(360deg); }
}
.nfc-field{ transform-origin: center; }
@keyframes nfc-float{
  0%, 100%{ transform: translateY(0) rotate(-2deg); }
  50%{ transform: translateY(-14px) rotate(2deg); }
}
@keyframes shine-sweep{
  0%{ transform: translateX(-120%) rotate(20deg); }
  60%, 100%{ transform: translateX(180%) rotate(20deg); }
}
@keyframes ripple-out{
  0%{ transform: scale(0.9); opacity: 0.9; }
  100%{ transform: scale(1.6); opacity: 0; }
}
@keyframes chip-float{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}
.chip-1, .chip-4{ animation-name: chip-float-x; }
@keyframes chip-float-x{
  0%, 100%{ transform: translateX(-50%) translateY(0); }
  50%{ transform: translateX(-50%) translateY(-8px); }
}