:root {
  color-scheme: dark;

  /* One knob to control centring across all devices.
     50% 50% is perfect centre. Move the second number up/down to change vertical focus.
     Example: 50% 42% lifts the focal point slightly up (often better for crowns/wings). */
  --focus-x: 50%;
  --focus-y: 42%;

  --coming-color: rgba(214, 185, 128, 0.92);
}

/* Hard reset */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: #000; }

/* Full-viewport stage */
.hero {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;   /* fallback */
  height: 100svh;  /* iOS stable */
  height: 100dvh;  /* modern browsers */
  overflow: hidden;
  background: #000;
}

/* The most reliable way to “adhere to whatever the user's resolution is”
   while always filling the screen with no black bars */
.hero__img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: var(--focus-x) var(--focus-y);

  /* Prevent accidental smoothing artifacts from transforms */
  transform: none;
  filter: none;

  /* Keep it stable on mobile scrolling/URL bar changes */
  will-change: auto;
}

/* Subtle cinematic fade so bottom text reads cleanly */
.hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(closest-side at 50% 45%, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.18) 65%, rgba(0,0,0,0.60) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.90) 100%);
}

/* Coming soon text */
.hero__coming {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  margin: 0;

  text-align: center;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  font-size: clamp(16px, 1.6vw, 22px);
  letter-spacing: 0.22em;
  text-transform: lowercase;

  color: var(--coming-color);
  text-shadow: 0 0 18px rgba(0,0,0,0.85), 0 0 3px rgba(214,185,128,0.20);
}

/* Mobile tuning: slightly higher focal point is usually needed */
@media (max-width: 600px) {
  :root { --focus-y: 38%; }
  .hero__coming { letter-spacing: 0.18em; }
}

/* Ultrawide tuning: slightly lower focal point is usually needed */
@media (min-aspect-ratio: 21/9) {
  :root { --focus-y: 46%; }
}