/* ============================================================
   VKD Apps — Animations & Motion Layers
   ============================================================ */

/* ---------- Preloader ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-md);
  transition: opacity .5s var(--ease-out), visibility .5s var(--ease-out);
}
.preloader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-mark {
  width: 56px; height: 56px;
}
.preloader-mark svg { width: 100%; height: 100%; }
.preloader-mark .mark-stroke {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: draw 1.1s var(--ease-out) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.preloader-bar {
  width: 160px; height: 1px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.preloader-bar span {
  display: block; height: 100%; width: 0%;
  background: var(--accent);
  animation: loadbar 1.3s var(--ease-in-out) forwards;
}
@keyframes loadbar { to { width: 100%; } }
.preloader-label {
  font-family: var(--font-alt);
  font-size: var(--fs-micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ---------- Hero background — static, cheap, no blur animation ---------- */
.hero-mesh {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(207,157,79,.10), transparent 65%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: auto, 64px 64px, 64px 64px;
  background-position: center, center, center;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 85%);
}
.hero-glow {
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(207,157,79,.14), transparent 72%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: left .3s var(--ease-out), top .3s var(--ease-out);
  z-index: 0;
}

/* ---------- Floating particles ---------- */
.float-el {
  position: absolute;
  border-radius: 50%;
  background: var(--accent);
  opacity: .35;
  animation: floaty 9s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-22px) translateX(8px); }
}

/* ---------- Emphasis text (formerly rainbow shimmer) ---------- */
.shimmer { color: var(--text-primary); }

/* ---------- Card tilt ---------- */
.tilt { transform-style: preserve-3d; will-change: transform; }

/* ---------- Magnetic button wrapper (motion removed, kept as inert layout wrapper) ---------- */
.magnetic { display: inline-block; }

/* ---------- Fade in stagger via JS-added class ---------- */
.stagger-child { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.stagger-child.in-view { opacity: 1; transform: translateY(0); }