/* Coming soon site with metallic gold text + bullet streak */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font-family: Inter, system-ui, sans-serif; }
body { background: #0e2f10; color: #fff; }

.hero {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
  text-align: center;
}

/* Background image with slow zoom */
.bg {
  position: absolute;
  inset: 0;
  background: url("assets/hero.png") center / cover no-repeat fixed;
  transform: scale(1);
  filter: brightness(0.95) saturate(1.05);
  animation: kenburns 26s ease-in-out infinite alternate;
}

/* Optional overlay for contrast (can be removed if you want it brighter) */
.overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(0,0,0,0.08), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.65));
  mix-blend-mode: multiply;
}

/* Content */
.content { position: relative; z-index: 1; padding: 0 20px; }
p  { margin: 10px 0 0; font-size: clamp(18px, 3vw, 28px); color: #f6e9bd; }

/* Metallic gold title */
h1 {
  position: relative;
  margin: 0;
  font-size: clamp(32px, 6vw, 72px);
  font-weight: 800;

  /* metallic gradient */
  background: linear-gradient(
    120deg,
    #a97411 0%,
    #d6b24a 25%,
    #f6e27a 50%,
    #d4af37 75%,
    #a97411 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-shadow:
    0 0 10px rgba(212,175,55,0.6),
    0 0 20px rgba(166,124,0,0.4);
}


/* Subtitle fade-in */
.fade { animation: fadeUp 1.2s ease 0.4s both; }

/* Keyframes */
@keyframes kenburns {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.06) translate(0.4%, -0.4%); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bulletSweep {
  0%   { left: -15%; opacity: 0; }
  10%  { opacity: 1; }
  50%  { left: 100%; opacity: 1; }
  90%  { opacity: 0.6; }
  100% { left: 120%; opacity: 0; }
}

/* Reduce motion if user prefers */
@media (prefers-reduced-motion: reduce) {
  .bg, .overlay, h1::after, .fade { animation: none !important; }
}