/* Nordvex holding page — clean, fast, and professional */

:root{
  --bg-scale-min: 1.03;
  --bg-scale-max: 1.08;
  --drift-x: 18px;
  --drift-y: 16px;
  --cycle: 26s;   /* increase to 35–45s for even slower motion */
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }

body{
  background:#1a0f24;
  overflow:hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Background layer */
.bg{
  position:fixed;
  inset:-6vh -6vw; /* overscan to avoid edges while moving */
  background: url("assets/background.png") center/cover no-repeat;
  transform: scale(var(--bg-scale-min));
  will-change: transform;
  animation: clothDrift var(--cycle) ease-in-out infinite alternate;
  filter: saturate(1.02);
  z-index:0;
}

@keyframes clothDrift{
  0%   { transform: translate(0,0) scale(var(--bg-scale-min)); }
  45%  { transform: translate(calc(var(--drift-x) * -1), calc(var(--drift-y) * -1)) scale(1.055); }
  100% { transform: translate(var(--drift-x), var(--drift-y)) scale(var(--bg-scale-max)); }
}

/* Foreground content */
.stage{
  position:relative;
  z-index:1;
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(16px, 3vw, 48px);
}

.overlay{
  width: min(1200px, 92vw);
  height: auto;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.35));
}

@media (prefers-reduced-motion: reduce){
  .bg{ animation:none; }
}