:root {
  --bg: #07111f;
  --bg-soft: #10213b;
  --line: rgba(146, 179, 255, 0.2);
  --text: #eef4ff;
  --muted: #a6b6d0;
  --accent: #7df9d7;
  --accent-2: #6ca7ff;
  --glow: rgba(108, 167, 255, 0.35);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  overflow: hidden;
  background: var(--bg);
}

.hero-art {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2.4s ease;
}

.layer.is-visible {
  opacity: 1;
}

.layer.first {
  animation: reveal 2s ease-out;
}

.layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: drift 45s ease-in-out infinite alternate;
}

.layer:nth-child(2) img {
  animation-direction: alternate-reverse;
}

@keyframes reveal {
  from {
    opacity: 0;
  }
}

@keyframes drift {
  from {
    transform: scale(1) translate(0, 0);
  }
  to {
    transform: scale(1.1) translate(1.5%, -1%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .layer,
  .layer.first,
  .layer img {
    animation: none;
    transition: none;
  }
}